@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --bg:#111119; --panel:#181823; --line:#272736; --text:#ffffff; --text-2:#d8d8e4; --muted:#9a9ab0;
  --cyan:#4cc9f0; --mark:#7cc4ea; --violet:#a15cff; --pink:#f72585; --blue:#4895ef;
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.45;min-height:100vh;display:flex;justify-content:center}
a{color:inherit;text-decoration:none}
svg{display:block}

.card{position:relative;width:100%;max-width:480px;padding:22px 20px 0;display:flex;flex-direction:column;gap:22px;overflow:hidden}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lockup{display:flex;align-items:center;gap:12px;min-height:44px}
.mark{width:34px;height:24px}
.mark polyline{fill:none;stroke:var(--mark);stroke-width:22;stroke-linejoin:round}
.word{font-weight:500;font-size:26px;letter-spacing:-.6px;display:inline-flex;align-items:baseline}
.word .dot{display:inline-block;width:6px;height:6px;background:var(--cyan);margin:0 2px}
.share{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text-2);font:500 15px Inter,sans-serif;cursor:pointer}
.share svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share:hover,.share:focus-visible{border-color:var(--cyan);color:var(--text)}

.hero{margin:0 -20px;height:min(62vw,300px);position:relative;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;background-position:center}
.hero img{position:absolute;right:-6%;top:50%;transform:translateY(-50%);height:100%;width:auto;max-width:none}

.who h1{margin:0;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(38px,11vw,50px);line-height:1;letter-spacing:-1.5px}
.role{margin:12px 0 0;color:var(--cyan);font-weight:600;font-size:19px}
.tagline{margin:4px 0 0;color:var(--text-2);font-size:17px}
.claim{margin:14px 0 0;font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--muted)}

.btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 22px;border-radius:var(--radius);font-weight:600;font-size:18px;text-align:center}
.btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--cyan);color:#07070b}
.btn.primary:hover,.btn.primary:focus-visible{background:#6fd5f4}
.btn.ghost{border:1.5px solid var(--line);color:var(--text-2);font-weight:500;font-size:16px}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--cyan);color:var(--text)}

.actions{display:grid;gap:10px}
.act{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:center;min-height:64px;padding:12px 18px;border-radius:var(--radius);background:var(--panel);border:1.5px solid var(--line)}
.act svg{grid-row:1 / span 2;width:28px;height:28px;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act .lab{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--muted);text-transform:lowercase}
.act .val{font-size:17px;font-weight:500;overflow-wrap:anywhere}
.act:hover,.act:focus-visible{border-color:var(--cyan)}

.services h2{margin:6px 0 12px;font-family:"JetBrains Mono",monospace;font-weight:400;font-size:13px;color:var(--muted);text-transform:lowercase;letter-spacing:.3px}
.services ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.services li{display:grid;grid-template-columns:4px minmax(0,1fr);column-gap:14px}
.services .bar{grid-row:1 / span 2;border-radius:2px}
.services strong{font-family:"Space Grotesk",sans-serif;font-size:18px}
.services li span:last-child{color:var(--text-2);font-size:15px}
.c1{background:var(--cyan)}.c2{background:var(--violet)}.c3{background:var(--pink)}

.foot{display:flex;justify-content:center;gap:8px;padding:8px 0 30px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted)}
.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.spectrum{height:8px;margin:0 -20px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan))}

a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#fff;color:#07070b;padding:12px 18px;border-radius:12px;font:500 15px Inter,sans-serif;transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:640px){
  body{align-items:flex-start;padding:40px 0}
  .card{border:1.5px solid var(--line);border-radius:28px;padding:28px 28px 0;background:var(--bg)}
  .hero,.spectrum{margin:0 -28px}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}