/* ============================================================
   TOKENS
============================================================ */
:root{
  --bg-main:#08060D;
  --bg-secondary:#0F0A17;
  --deep-purple:#241238;
  --primary-purple:#6D3FD6;
  --soft-violet:#9B7AE8;
  --lavender:#C7B7FF;
  --text-main:#F5F2FA;
  --text-secondary:#A8A2B3;
  --text-muted:#706A7C;

  --radius-lg:32px;
  --radius-md:24px;
  --radius-sm:18px;

  --ease-soft: cubic-bezier(.16,.84,.36,1);
  --ease-out: cubic-bezier(.22,.68,.28,1);

  --container:1180px;
}

*{ box-sizing:border-box; }
html{
  background:var(--bg-main);
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--bg-main);
  color:var(--text-main);
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

::selection{ background:var(--primary-purple); color:var(--text-main); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--bg-main); }
::-webkit-scrollbar-thumb{ background:var(--deep-purple); border-radius:8px; }

/* ============================================================
   LAYOUT PRIMITIVES
============================================================ */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
.wrap-narrow{ max-width:820px; }
.eyebrow{
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--soft-violet);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--soft-violet);
  opacity:.6;
}
section{ position:relative; z-index:2; }

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; }
.reveal-d4{ transition-delay:.32s; }

/* ============================================================
   BACKGROUND
============================================================ */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
}
.grain{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#bg-scrim{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(8,6,13,0) 0%, rgba(8,6,13,.55) 60%, rgba(8,6,13,.85) 100%),
    linear-gradient(180deg, rgba(8,6,13,.15) 0%, rgba(8,6,13,.4) 100%);
}
body.no-webgl #bg-canvas{ display:none; }

/* ============================================================
   LOADER
============================================================ */
#loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg-main);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition:opacity 1s var(--ease-soft), visibility 1s var(--ease-soft);
}
#loader.hide{ opacity:0; visibility:hidden; }
.loader-mark{
  font-size:15px;
  letter-spacing:.4em;
  font-weight:700;
  color:var(--text-main);
  padding-left:.4em;
}
.loader-track{
  width:180px; height:2px;
  background:rgba(168,162,179,.15);
  border-radius:2px;
  overflow:hidden;
}
.loader-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--primary-purple), var(--lavender));
  border-radius:2px;
  transition:width .25s var(--ease-out);
}

/* ============================================================
   SCROLL PROGRESS
============================================================ */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg, var(--soft-violet), var(--lavender));
  width:0%;
  z-index:900;
  transition:width .08s linear;
  opacity:.7;
}

/* ============================================================
   CUSTOM CURSOR
============================================================ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:6px; height:6px;
  background:var(--lavender);
}
.cursor-ring{
  width:34px; height:34px;
  border:1px solid rgba(199,183,255,.5);
  transition:width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; letter-spacing:.12em; color:var(--lavender); font-weight:700;
}
.cursor-ring.link{ width:54px; height:54px; background:rgba(109,63,214,.12); border-color:rgba(155,122,232,.6); }
body.no-cursor .cursor-dot, body.no-cursor .cursor-ring{ display:none; }

/* ============================================================
   NAV
============================================================ */
nav{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  padding:26px 0;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-weight:800;
  font-size:14px;
  letter-spacing:.28em;
}
.nav-links{
  display:flex; gap:34px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--text-secondary);
}
.nav-links a{ transition:color .3s var(--ease-out); }
.nav-links a:hover{ color:var(--text-main); }
@media (max-width:720px){ .nav-links{ display:none; } }

/* ============================================================
   BUTTONS
============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px;
  border-radius:100px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  border:0;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .45s var(--ease-out);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--primary-purple), #5730b8);
  color:var(--text-main);
  box-shadow:0 8px 30px -10px rgba(109,63,214,.55);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px -8px rgba(109,63,214,.75); }
.btn-ghost{
  background:rgba(245,242,250,.04);
  color:var(--text-main);
  border:1px solid rgba(168,162,179,.22);
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:rgba(199,183,255,.5); background:rgba(155,122,232,.08); }
.btn .arrow{ transition:transform .45s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ============================================================
   NOTIFY FORM
============================================================ */
.notify-form{ width:100%; max-width:520px; }
.field{
  display:flex; gap:10px; align-items:center;
  background:rgba(245,242,250,.04);
  border:1px solid rgba(168,162,179,.2);
  border-radius:100px;
  padding:7px 7px 7px 24px;
  transition:border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.field:focus-within{
  border-color:rgba(199,183,255,.5);
  background:rgba(155,122,232,.08);
}
.field input{
  flex:1;
  min-width:0;
  background:none;
  border:0;
  outline:none;
  color:var(--text-main);
  font-size:14.5px;
  padding:12px 0;
}
.field input::placeholder{ color:var(--text-muted); }
.field .btn{ padding:14px 26px; }
.form-note{
  margin-top:12px;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
  min-height:17px;
  padding-left:24px;
}
.form-note.is-error{ color:#E88A8A; }
.form-note.is-success{ color:var(--soft-violet); }

/* Bot trap. Kept in the layout and focusable by script, so it looks like a
   normal field to a scraper, but no person can see or tab into it. */
.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.ts-widget{
  margin-top:14px;
  display:flex;
  justify-content:center;
  min-height:0;
}
@media (max-width:560px){
  .field{ flex-direction:column; align-items:stretch; border-radius:var(--radius-sm); padding:16px; }
  .field .btn{ justify-content:center; }
  .form-note{ padding-left:0; }
}