/* Shared brand tokens + chrome for the three hero-direction mockups.
   Brand canon = the live site: mint #39d98a / cobalt #4f87ff, Manrope + IBM Plex, navy. */
:root{
  --bg:#0c0f14; --bg2:#0f1520; --panel:#121722; --elevated:#171d2a;
  --ink:#edf2fa; --ink-muted:#98a5bc; --ink-dim:#79859e;
  --line:#2d3548; --line-subtle:rgba(45,53,72,.5);
  --accent:#39d98a; --accent-2:#4f87ff;
  --gradient:linear-gradient(135deg,#39d98a,#4f87ff);
  --font-h:'Manrope',system-ui,-apple-system,sans-serif;
  --font-b:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-m:'IBM Plex Mono','SF Mono',monospace;
  --nav-h:72px; --max:1200px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
section[id]{scroll-margin-top:88px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-b);color:var(--ink);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* ---- Nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  background:rgba(12,15,20,.7);border-bottom:1px solid var(--line-subtle)}
.nav-inner{max-width:1280px;width:100%;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-h);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.logo .logo-mark{width:26px;height:26px;flex-shrink:0;display:block}
.logo .wordmark{display:inline-block;white-space:nowrap}
.logo .grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{font-size:14px;font-weight:500;color:var(--ink-muted);padding:8px 16px;border-radius:8px;transition:.2s}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav-cta{color:var(--bg);background:var(--accent);font-weight:600;padding:8px 18px;border-radius:8px}

/* ---- Shared hero copy ---- */
.grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 12px;background:rgba(57,217,138,.08);
  border:1px solid rgba(57,217,138,.2);border-radius:100px;font-family:var(--font-m);font-size:12px;font-weight:500;
  color:var(--accent);letter-spacing:.04em;text-transform:uppercase;margin-bottom:28px}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dot 2s ease-in-out infinite}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.35}}
.h1{font-family:var(--font-h);font-weight:800;font-size:clamp(34px,5vw,62px);line-height:1.08;letter-spacing:-.03em;margin-bottom:22px}
.sub{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--ink-muted);max-width:560px;margin-bottom:36px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:8px;font-family:var(--font-b);
  font-weight:600;font-size:15px;border:none;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:#2fc77d;transform:translateY(-2px);box-shadow:0 0 30px rgba(57,217,138,.18)}
.btn-ghost{background:transparent;color:var(--ink-muted);border:1px solid var(--line)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-dim)}


/* ---- keyboard focus (a11y): visible ring on every interactive element ---- */
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-link:focus-visible,.nav-cta:focus-visible,
.logo:focus-visible,.nav-toggle:focus-visible+.nav-burger,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---- mobile nav: CSS-only burger toggle (no JS), collapses under 920px ---- */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.nav-burger{display:none}
@media(max-width:920px){
  .nav-inner{position:relative}
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;
    margin-left:auto;cursor:pointer;border-radius:8px}
  .nav-burger span{display:block;width:22px;height:2px;margin:0 auto;background:var(--ink);border-radius:2px;transition:.25s}
  .nav-toggle:checked+.nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked+.nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked+.nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links{position:absolute;top:calc(var(--nav-h) - 8px);left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:4px;padding:10px 18px 16px;
    background:rgba(12,15,20,.97);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid var(--line-subtle)}
  .nav-toggle:checked~.nav-links{display:flex}
  .nav-links .nav-link{padding:13px 14px;border-radius:8px}
  .nav-links .nav-cta{text-align:center;margin-top:6px}
}