/* ============================================================
   NEXISWEB — Design tokens
   ============================================================ */
:root{
  --bg: #120E1B;
  --bg-soft: #17111F;
  --surface: #221A33;
  --surface-2: #2A2040;
  --line: #372B4E;

  --text: #F5F3FF;
  --text-muted: #A79CC7;
  --text-dim: #6E6390;

  --coral: #FF4D6D;
  --lime: #D4FF3D;
  --cyan: #3DDCFF;
  --violet: #B98CFF;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --font-display: "Unbounded", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --ease: cubic-bezier(.16,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.6rem, 6vw, 5.2rem); font-weight:700; }
h2{ font-size:clamp(2rem, 4.2vw, 3.4rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.5rem); }
p{ margin:0 0 1em; color:var(--text-muted); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--lime);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--lime);
  display:inline-block;
}

.wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 2.5rem);
}

section{ position:relative; padding:clamp(4rem,9vw,7.5rem) 0; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: var(--coral);
  --btn-fg: #150E1F;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-mono);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:500;
  padding:1em 1.6em;
  border-radius:100px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:none;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 12px 30px -8px color-mix(in srgb, var(--btn-bg) 70%, transparent); }
.btn:active{ transform:translateY(-1px); }
.btn.ghost{
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border:1px solid var(--line);
}
.btn.ghost:hover{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }
.btn.lime{ --btn-bg:var(--lime); --btn-fg:#150E1F; }
.btn.cyan{ --btn-bg:var(--cyan); --btn-fg:#150E1F; }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translate(3px,-3px); }

/* ---------- Nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem, 4vw, 2.5rem);
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-nav.scrolled{ border-color:var(--line); }
.brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  display:flex; align-items:center; gap:.5em;
}
.brand-icon { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: #f8fafc; }
.nav-links{ display:flex; gap:2.2rem; font-family:var(--font-mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; }
.nav-links a{ position:relative; color:var(--text-muted); transition:color .25s ease; padding:.3em 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0%;
  background:var(--lime); transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:1.5rem; }
.nav-toggle{ display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:.4em; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--bg-soft); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:2rem 2.2rem; gap:1.6rem; border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .45s var(--ease);
    font-size:1rem;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
  .nav-cta .btn.ghost{ display:none; }
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:3.5rem 0 2rem;
  background:var(--bg-soft);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--line); margin-bottom:1.6rem;
}
.footer-grid h4{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); margin-bottom:1em; }
.footer-grid ul{ display:flex; flex-direction:column; gap:.7em; }
.footer-grid a{ color:var(--text-muted); transition:color .2s ease; }
.footer-grid a:hover{ color:var(--lime); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--text-dim); flex-wrap:wrap; gap:1rem; }
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.33s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.4s; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:2rem;
  transition:transform .4s var(--ease), border-color .4s ease, background .4s ease;
}
.card:hover{ transform:translateY(-6px) rotate(-0.4deg); border-color:var(--violet); background:var(--surface-2); }

/* ---------- Grid helpers ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } .grid-2{ grid-template-columns:1fr; } }
@media (max-width:620px){ .grid-3{ grid-template-columns:1fr; } }

/* ---------- Tag/pill ---------- */
.pill{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.45em .9em; border-radius:100px; border:1px solid var(--line); color:var(--text-muted);
  display:inline-flex; align-items:center; gap:.5em;
}

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.4rem 0; }
.marquee-track{ display:flex; gap:3.5rem; width:max-content; animation:scroll-left 26s linear infinite; }
.marquee-track span{ font-family:var(--font-mono); font-size:1rem; color:var(--text-dim); white-space:nowrap; letter-spacing:.04em; }
.marquee-track span b{ color:var(--text); font-weight:500; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Page header (inner pages) ---------- */
.page-hero{ padding-top:calc(7.5rem + 2vw); padding-bottom:3rem; }
.page-hero h1{ max-width:16ch; }
.page-hero .lede{ max-width:56ch; font-size:1.15rem; }

/* ---------- Stats ---------- */
.stat-num{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3rem); color:var(--lime); }
.stat-label{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.5em; margin-bottom:1.4rem; }
.field label{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.field input, .field select, .field textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.9em 1em; color:var(--text); font-family:var(--font-body); font-size:.98rem;
  outline:none; transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.field textarea{ resize:vertical; min-height:130px; }
.radio-row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.radio-chip{
  font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.7em 1.1em; border-radius:100px; border:1px solid var(--line); cursor:pointer; color:var(--text-muted);
  transition:all .25s ease;
}
.radio-chip input{ display:none; }
.radio-chip:has(input:checked){ background:var(--lime); color:#150E1F; border-color:var(--lime); }
.form-note{ font-size:.85rem; color:var(--text-dim); }
.form-status{ font-family:var(--font-mono); font-size:.85rem; margin-top:1rem; min-height:1.4em; }
.form-status.ok{ color:var(--lime); }
.form-status.err{ color:var(--coral); }

/* ---------- Section divider label ---------- */
.divider-label{
  display:flex; align-items:center; gap:1em; margin-bottom:2.5rem;
  font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim);
}
.divider-label::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- Hero canvas ---------- */
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-inner{ position:relative; z-index:2; }
.hero-section{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-section::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 30%, transparent 0%, var(--bg) 92%);
}

/* ---------- Blob decoration ---------- */
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; pointer-events:none; z-index:0; }