:root{
  --bg:#0a0b10; --fg:#f4f5f8; --muted:#a3a9ba; --line:rgba(255,255,255,.08);
  --accent:#8b9cff; --accent-2:#c4b5fd; --on-accent:#0a0b10;
  --font:"Inter","InterVariable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--fg);font-family:var(--font);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding:clamp(1.25rem,4vw,3rem) clamp(1.25rem,6vw,5rem);
  padding-left:max(clamp(1.25rem,6vw,5rem),env(safe-area-inset-left));
  padding-right:max(clamp(1.25rem,6vw,5rem),env(safe-area-inset-right));
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--on-accent)}

/* Background: soft glow + faint grid */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.orb-1{width:46rem;height:46rem;top:-18rem;right:-12rem;background:radial-gradient(circle,rgba(139,156,255,.55),rgba(139,156,255,0) 65%)}
.orb-2{width:36rem;height:36rem;bottom:-16rem;left:-10rem;background:radial-gradient(circle,rgba(196,181,253,.35),rgba(196,181,253,0) 65%)}
.grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
  opacity:.5}

/* Header */
.top{display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--fg);text-decoration:none;font-weight:600;letter-spacing:-.01em;border-radius:10px}
.mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);font-weight:800;font-size:1.05rem}

/* Hero */
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:52rem;padding:clamp(3rem,10vh,7rem) 0}
.eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:.6rem;margin:0 0 1.75rem;
  padding:.4rem .9rem .4rem .75rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;
  background:rgba(255,255,255,.04);color:var(--muted);font-size:.875rem;font-weight:500;letter-spacing:.02em;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(139,156,255,.6);animation:pulse 2.4s ease-out infinite}
h1{margin:0;font-size:clamp(2.5rem,7.5vw,5.25rem);line-height:1.04;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.accent{background:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:1.5rem 0 0;max-width:34rem;color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2.5rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.4rem;border-radius:12px;
  background:var(--fg);color:var(--bg);font-weight:600;text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(139,156,255,.55);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn svg{transition:transform .2s ease}
.btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(139,156,255,.75)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.email{color:var(--muted);text-decoration:none;font-size:.95rem;border-radius:6px;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .2s ease,background-size .25s ease}
.email:hover{color:var(--fg);background-size:100% 1px}

/* Footer */
.foot{border-top:1px solid var(--line);padding-top:1.25rem;color:var(--muted);font-size:.875rem}
.foot p{margin:0}

/* Focus */
a:focus{outline:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.btn:focus-visible{outline-offset:3px}

/* Motion */
.fade{opacity:0;transform:translateY(12px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0) * 90ms + 80ms)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(139,156,255,.6)}70%{box-shadow:0 0 0 .55rem rgba(139,156,255,0)}100%{box-shadow:0 0 0 0 rgba(139,156,255,0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fade{opacity:1;transform:none}
}
@media (max-width:480px){
  .actions{flex-direction:column;align-items:flex-start}
  .btn{width:100%;justify-content:center}
}
@media (forced-colors:active){.accent{color:CanvasText;background:none}}