/* ============================================================
   ElevAI — stylesheet (v2)
   Palette extracted from the logo, extended along the same hue sweep
   (244° violet → 192° cyan). Contrast verified: azure/cyan are
   GRAPHICS ONLY — never body text.
   No external requests. Font self-hosted, artwork inline SVG.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}

:root {
  --violet: #837AF9;
  --indigo: #575CEC;
  --royal:  #1240D6;
  --deep:   #0E2A9C;
  --azure:  #2E9BF0;   /* graphics only */
  --cyan:   #35C8E8;   /* graphics only */
  --ink:    #0A1436;
  --paper:  #FFFFFF;
  --mist:   #F5F6FC;
  --lilac:  #EEF0FE;

  --muted: rgba(10,20,54,.70);
  --faint: rgba(10,20,54,.46);
  --hair:  rgba(10,20,54,.10);

  --grad:  linear-gradient(135deg,#837AF9 0%,#575CEC 42%,#1240D6 100%);
  --grad-w:linear-gradient(120deg,#837AF9 0%,#1240D6 46%,#2E9BF0 78%,#35C8E8 100%);

  --shell: 1200px;
  --gut: clamp(20px,5vw,52px);
  --s1:8px; --s2:16px; --s3:26px; --s4:36px;
  --s5:54px; --s6:80px; --s7:116px; --s8:160px;
  --r:16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:clamp(17px,1.15vw,19px);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--royal);text-underline-offset:3px;}
a:hover{color:var(--deep);}

/* ───────── type ───────── */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.024em;line-height:1.08;}
h1{font-size:clamp(2.7rem,5.9vw,4.5rem);letter-spacing:-.035em;line-height:1.02;}
h2{font-size:clamp(2rem,4.1vw,3.15rem);letter-spacing:-.03em;}
h3{font-size:1.22rem;letter-spacing:-.015em;line-height:1.3;}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}

.eyebrow{
  font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--royal);margin:0 0 var(--s3);
}
.lead{font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.5;color:var(--muted);}
.measure{max-width:60ch;}
.measure-tight{max-width:20ch;}
.grad-text{background:var(--grad-w);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ───────── layout ───────── */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut);position:relative;z-index:2;}
section{padding-block:clamp(var(--s6),9.5vw,var(--s8));position:relative;overflow:hidden;}
.band{background:var(--mist);}
.band::before,.band::after{content:'';position:absolute;inset-inline:0;height:1px;background:var(--hair);}
.band::before{top:0;} .band::after{bottom:0;}
.rule{height:3px;width:76px;background:var(--grad-w);border-radius:3px;margin-bottom:var(--s3);}

/* ───────── hero ───────── */
/* No masthead: the logo carries the top of the page directly. */
.hero{
  padding-block:clamp(var(--s6),7.5vw,var(--s7)) clamp(var(--s6),9vw,var(--s8));
  background:
    radial-gradient(58% 46% at 12% 8%,  rgba(131,122,249,.20), transparent 66%),
    radial-gradient(50% 42% at 88% 30%, rgba(46,155,240,.17),  transparent 68%),
    radial-gradient(60% 50% at 60% 96%, rgba(53,200,232,.11),  transparent 70%),
    var(--paper);
}
.hero-grid{display:grid;gap:clamp(var(--s5),6vw,var(--s7));grid-template-columns:1fr;align-items:center;}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;}}

.hero-logo{width:clamp(240px,30vw,360px);margin-bottom:var(--s4);}
.hero h1{margin-bottom:var(--s3);}
.hero .lead{max-width:34ch;}

.trust{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--hair);
  font-size:.895rem;color:var(--muted);font-weight:500;
}
.trust span{display:inline-flex;align-items:center;gap:9px;}
.trust span::before{
  content:'';width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--grad-w);box-shadow:0 0 0 3px rgba(18,64,214,.12);
}
.strapline{margin-top:var(--s4);font-size:1rem;color:var(--faint);font-style:italic;}

/* ambient neuron field */
.neurons{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.85;}
.nline{fill:none;stroke:url(#gw);stroke-width:1.5;stroke-linecap:round;opacity:.28;}
.npulse{fill:none;stroke:url(#gw);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:26 620;animation:nflow 7s linear infinite;}
.npulse.p2{animation-duration:9s;animation-delay:-2.5s;}
.npulse.p3{animation-duration:11s;animation-delay:-5s;}
.nnode{fill:var(--royal);animation:nglow 4.5s ease-in-out infinite;}
.nnode.g2{animation-delay:1.2s;} .nnode.g3{animation-delay:2.4s;} .nnode.g4{animation-delay:3.3s;}
@keyframes nflow{to{stroke-dashoffset:-646;}}
@keyframes nglow{0%,100%{opacity:.18;r:3.5;}50%{opacity:.75;r:5.5;}}

/* ───────── steps ───────── */
.steps{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-top:var(--s6);}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,1fr);}}

.step{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  padding:var(--s4) var(--s3) var(--s3);position:relative;overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.step::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c,var(--grad));transform:scaleX(.16);transform-origin:left;
  transition:transform .5s var(--ease);
}
.step:hover{transform:translateY(-4px);border-color:rgba(18,64,214,.26);
  box-shadow:0 18px 44px -22px rgba(10,20,54,.34);}
.step:hover::before{transform:scaleX(1);}
.step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;margin-bottom:var(--s3);
  font-size:.82rem;font-weight:700;color:#fff;background:var(--c,var(--royal));
}
.step h3{margin-bottom:var(--s1);}
.step p{font-size:1rem;color:var(--muted);line-height:1.52;}

.s1{--c:linear-gradient(135deg,#837AF9,#6E6BF3);}
.s2{--c:linear-gradient(135deg,#575CEC,#3A4CE0);}
.s3{--c:linear-gradient(135deg,#1240D6,#1A63DC);}
.s4{--c:linear-gradient(135deg,#2E9BF0,#35C8E8);}

.hardware-line{
  margin-top:var(--s5);padding:var(--s3) var(--s4);
  background:var(--lilac);border-radius:var(--r);
  font-size:1.02rem;color:var(--muted);font-weight:500;
}

/* ───────── commitments ───────── */
.safety-grid{display:grid;gap:clamp(var(--s5),6vw,var(--s7));grid-template-columns:1fr;align-items:center;}
@media(min-width:980px){.safety-grid{grid-template-columns:1.12fr .88fr;}}

.commits{display:grid;gap:0;margin-top:var(--s5);}
.commit{
  padding:var(--s3) 0;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:42px 1fr;gap:var(--s2);align-items:start;
}
.commit:last-child{border-bottom:1px solid var(--hair);}
.commit .ic{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(18,64,214,.16);
}
.commit .ic svg{width:17px;height:17px;color:var(--royal);}
.commit:nth-child(2) .ic svg{color:var(--indigo);}
.commit:nth-child(3) .ic svg{color:var(--violet);}
.commit:nth-child(5) .ic svg{color:var(--azure);}
.commit:nth-child(6) .ic svg{color:var(--azure);}
.commit b{display:block;font-weight:650;margin-bottom:3px;}
.commit span.t{font-size:1rem;color:var(--muted);line-height:1.5;}

/* ───────── quote ───────── */
.quote{margin-top:var(--s5);padding:var(--s4) clamp(var(--s3),3vw,var(--s5));
  background:var(--lilac);border-radius:var(--r);position:relative;overflow:hidden;}
.quote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-w);}
.quote q{display:block;font-size:clamp(1.28rem,2.6vw,1.92rem);line-height:1.34;
  letter-spacing:-.024em;font-weight:500;}
.quote cite{display:block;margin-top:var(--s3);font-style:normal;font-size:.9rem;color:var(--faint);}

/* ───────── measurement ───────── */
.claim{
  margin-top:var(--s5);padding:clamp(var(--s4),4.5vw,var(--s6));
  border-radius:var(--r);position:relative;overflow:hidden;
  /* Lightened on request. Stops verified for white body text:
     #1541C9 = 7.98, #1A50D8 = 6.60, #2668E4 = 5.02. All pass AA.
     Do not lighten further: the next step down fails at 4.35. */
  background:linear-gradient(135deg,#1541C9 0%,#1A50D8 46%,#2668E4 100%);
  color:#fff;
}
.claim strong{display:block;font-size:clamp(1.4rem,3vw,2.15rem);font-weight:600;
  letter-spacing:-.028em;line-height:1.22;}
.claim .halo{position:absolute;right:-8%;top:-40%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(53,200,232,.45),transparent 62%);}

/* ───────── contact / footer ───────── */
.mail{
  display:inline-block;margin-top:var(--s3);
  font-size:clamp(1.2rem,2.6vw,1.75rem);font-weight:600;letter-spacing:-.028em;
  color:var(--royal);text-decoration:none;
  border-bottom:2px solid rgba(18,64,214,.24);padding-bottom:4px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.mail:hover{border-bottom-color:var(--royal);}

footer{background:var(--mist);border-top:1px solid var(--hair);padding-block:var(--s5);}
footer .shell{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:baseline;}
footer p{font-size:.88rem;color:var(--faint);margin:0;}
footer .tag{color:var(--muted);font-weight:600;}

/* ───────── artwork ───────── */
.seg-on{fill:var(--royal);} .seg-off{fill:var(--royal);opacity:.14;}
.ladder .row-label{fill:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em;}
.ladder .row-state{fill:var(--faint);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;}
.ladder .wake .row-label{fill:var(--royal);}
.ladder .wake .row-state{fill:var(--royal);}

@keyframes nowStep{
  0%,16%{transform:translateY(0);}      20%,36%{transform:translateY(58px);}
  40%,56%{transform:translateY(116px);} 60%,76%{transform:translateY(174px);}
  80%,100%{transform:translateY(232px);}
}
@keyframes haloPulse{0%,100%{opacity:.5;}50%{opacity:.12;}}
@keyframes wakeGlow{0%,74%{opacity:0;}84%,100%{opacity:1;}}
@keyframes flowDash{to{stroke-dashoffset:-240;}}
@keyframes kitFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes traceGlow{0%,100%{opacity:.2;}50%{opacity:.95;}}
@keyframes ledBlink{0%,72%{opacity:.25;}80%,100%{opacity:1;}}

.now-group{animation:nowStep 12s var(--ease) infinite;}
.car-group{animation:nowStep 12s var(--ease) infinite;}
.car-halo{animation:haloPulse 3s ease-in-out infinite;}
.wake-ring{animation:wakeGlow 12s var(--ease) infinite;}
.flow-pulse{stroke-dasharray:16 224;animation:flowDash 4s linear infinite;}
.kit-group{animation:kitFloat 7s ease-in-out infinite;}
.kit-trace{animation:traceGlow 4s ease-in-out infinite;}
.kit-trace.t2{animation-delay:1.1s;} .kit-trace.t3{animation-delay:2.2s;}
.kit-led{animation:ledBlink 2.6s ease-in-out infinite;}

/* ───────── per-section artwork ───────── */

/* faint ambient trace layer, dropped into sections that have no hero visual */
.art-soft{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.5;}
.art-soft .nline{opacity:.2;}
.art-soft .npulse{stroke-width:2.2;}

/* Problem: day-rhythm strip — long quiet stretches, occasional bursts */
.rhythm{width:100%;margin-top:var(--s6);display:block;}
.rhythm .base{stroke:var(--hair);stroke-width:1.5;}

/* Region: installed-base field, lit by a diagonal wave */
.shafts{width:100%;margin-top:var(--s6);display:block;}
.sh{fill:none;stroke:url(#gw);stroke-width:2;opacity:.15;
  animation:shWave 6.5s ease-in-out infinite;animation-delay:var(--d,0s);}
@keyframes shWave{0%,100%{opacity:.13;}48%{opacity:.9;}}

/* Contact: traces converging toward the address */
.converge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.6;}

/* Footer hairline in brand gradient */
footer{position:relative;}
footer::before{content:'';position:absolute;top:-1px;inset-inline:0;height:2px;background:var(--grad-w);opacity:.55;}

/* ───────── reveal ───────── */
.rise{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.rise.in{opacity:1;transform:none;}
.rise.d1{transition-delay:.08s;} .rise.d2{transition-delay:.16s;}
.rise.d3{transition-delay:.24s;} .rise.d4{transition-delay:.32s;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .rise{opacity:1;transform:none;}
}
:focus-visible{outline:2px solid var(--royal);outline-offset:3px;border-radius:4px;}