/* NorthSouthLabs studio site — dark aurora theme
   Palette per brand guide: Void Black, Ink, Aurora Blue, Electric Cyan, Emerald */

:root{
  --void:#050608;
  --ink:#0B1220;
  --surface:rgba(255,255,255,0.03);
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.16);
  --text:#F5F7FA;
  --text-dim:#9AA1AC;
  --text-faint:#5B6472;
  --blue:#2E6BFF;
  --blue-deep:#1749C7;
  --cyan:#3FCBFF;
  --emerald:#22C58D;
  --gridbook-sage:#7A9479;
  --gridbook-terracotta:#C97B5B;
  --atlas-lime:#C8F135;
  --display:'Arial Narrow','Helvetica Neue Condensed','Roboto Condensed',sans-serif;
  --body:'Archivo',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:140px; --s9:180px;
  --radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue);color:#fff;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- global chrome ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--emerald));
  z-index:900;
}

/* aurora backdrop — fixed, sits behind everything */
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora-band{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
.aurora-a{ width:60vw; height:44vh; top:-14vh; left:-8vw;
  background:radial-gradient(ellipse, rgba(46,107,255,0.22), transparent 68%); }
.aurora-b{ width:52vw; height:40vh; top:-6vh; right:-12vw;
  background:radial-gradient(ellipse, rgba(63,203,255,0.14), transparent 68%);
  animation-delay:-9s; animation-duration:32s; }
.aurora-c{ width:44vw; height:34vh; top:30vh; left:26vw;
  background:radial-gradient(ellipse, rgba(34,197,141,0.08), transparent 70%);
  animation-delay:-17s; animation-duration:38s; }
@keyframes auroraDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(4vw,5vh,0) scale(1.12); }
}

header{
  position:sticky; top:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--s5);
  background:rgba(5,6,8,0.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:padding .3s ease;
}
header.shrunk{ padding:12px var(--s5); }
.logo-mark{ display:flex; align-items:center; gap:11px; }
.logo-mark svg{ width:28px; height:33px; }
.logo-text{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:0.02em; }
.logo-text .accent{ color:var(--cyan); }
nav.links{ display:flex; gap:var(--s5); }
nav.links a{ font-size:14px; font-weight:500; color:var(--text-dim); transition:color .2s; position:relative; }
nav.links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  background:var(--cyan); transition:width .25s ease;
}
nav.links a:hover{ color:var(--text); }
nav.links a:hover::after{ width:100%; }
@media (max-width:900px){ nav.links{ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; position:relative;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease;
  will-change:transform;
}
.btn svg{ width:14px; height:14px; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{
  background:linear-gradient(120deg,var(--blue),var(--blue-deep));
  color:#fff;
  box-shadow:0 0 0 1px rgba(63,203,255,0.25), 0 8px 28px rgba(46,107,255,0.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(63,203,255,0.5), 0 14px 40px rgba(46,107,255,0.5);
}
.btn-ghost{ color:var(--text-dim); font-weight:600; font-size:14px; transition:color .2s; }
.btn-ghost:hover{ color:var(--cyan); }

main{ position:relative; z-index:1; }
section{ position:relative; }
.wrap{ max-width:1280px; margin:0 auto; padding-left:var(--s5); padding-right:var(--s5); }
@media (max-width:700px){ .wrap{ padding-left:var(--s3); padding-right:var(--s3); } }

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:10px;
  margin-bottom:var(--s2); font-weight:500;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--emerald); display:inline-block;
  box-shadow:0 0 0 0 rgba(34,197,141,0.6);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,141,0.55); }
  70%{ box-shadow:0 0 0 9px rgba(34,197,141,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,141,0); }
}

/* "Bearing" entrance — elements settle from a slight off-angle to true,
   like a needle finding north, instead of a plain slide-up. */
.reveal{ opacity:0; transform:translateY(18px) rotate(-1.4deg); transform-origin:left center;
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0) rotate(0deg); }
.reveal-delay-1.in{ transition-delay:.12s; }
.reveal-delay-2.in{ transition-delay:.24s; }
.reveal-delay-3.in{ transition-delay:.36s; }

/* Philosophy lines settle horizontally, like readings ticking into place. */
.phi-line.reveal{ transform:translateX(-18px) rotate(-0.7deg); transform-origin:left center; }
.phi-line.reveal.in{ transform:translateX(0) rotate(0deg); }

/* Principle cards settle like an instrument-panel door opening. */
.prin-card.reveal{ transform:perspective(700px) rotateX(-7deg) translateY(14px); transform-origin:center top; }
.prin-card.reveal.in{ transform:perspective(700px) rotateX(0deg) translateY(0); }

/* ============================== HERO ============================== */
.hero{ padding:var(--s8) 0 var(--s7); min-height:calc(100svh - 76px); display:flex; align-items:center; overflow:hidden; }
#bearingField{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--s6); align-items:center; width:100%; position:relative; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:var(--s5); } }

.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(46px,7.2vw,86px); line-height:1.02; letter-spacing:-0.025em;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .word{ display:inline-block; animation:riseIn 1s cubic-bezier(.22,1,.36,1) both; }
.hero h1 .line:nth-child(2) .word{ animation-delay:.1s; }
.hero h1 .line:nth-child(3) .word{ animation-delay:.2s; }
@keyframes riseIn{ from{ transform:translateY(110%); } to{ transform:translateY(0); } }
.hero h1 .grad{
  background:linear-gradient(92deg,var(--blue) 5%,var(--cyan) 55%,var(--emerald) 110%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ margin-top:var(--s3); font-size:17px; line-height:1.7; color:var(--text-dim); max-width:50ch; }
.hero-ctas{ margin-top:var(--s4); display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }

.hero-stats{ margin-top:var(--s5); display:flex; gap:var(--s5); }
.hero-stats div{ border-left:1px solid var(--border-strong); padding-left:var(--s2); }
.hero-stats dt{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); }
.hero-stats dd{ font-family:var(--display); font-weight:700; font-size:26px; margin-top:4px; }

.hero-visual{ position:relative; height:480px; display:flex; align-items:center; justify-content:center; }
@media (max-width:960px){ .hero-visual{ height:340px; } }
.hero-halo{
  position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 42% 36%, rgba(63,203,255,0.22), rgba(46,107,255,0.12) 45%, rgba(34,197,141,0.06) 68%, transparent 76%);
  filter:blur(4px);
  animation:haloBreathe 7s ease-in-out infinite alternate;
}
@keyframes haloBreathe{ from{ transform:scale(0.96); opacity:.8; } to{ transform:scale(1.06); opacity:1; } }
.hero-visual svg{ position:relative; z-index:2; width:min(400px,86%); height:auto; }
#compassRing{ transform-origin:190px 190px; transition:transform .6s cubic-bezier(.22,1,.36,1); }
#compassCore{ transform-origin:190px 190px; }

.hero-coords{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; font-family:var(--mono); font-size:11px;
  letter-spacing:0.1em; color:var(--text-faint);
}

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  opacity:.7; transition:opacity .2s;
}
.scroll-hint:hover{ opacity:1; }
.scroll-hint-track{
  display:block; width:22px; height:36px; border:1.5px solid var(--text-faint);
  border-radius:12px; position:relative;
}
.scroll-hint-dot{
  position:absolute; left:50%; top:7px; width:4px; height:7px; margin-left:-2px;
  border-radius:2px; background:var(--cyan);
  animation:hintDrop 1.8s ease-in-out infinite;
}
@keyframes hintDrop{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(13px); opacity:0; }
  100%{ transform:translateY(0); opacity:0; }
}

/* ============================== MARQUEE ============================== */
.marquee{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:20px 0; overflow:hidden; background:rgba(255,255,255,0.015);
  position:relative; z-index:1;
}
.marquee-inner{
  display:flex; gap:44px; width:max-content; align-items:center;
  animation:marqueeScroll 36s linear infinite;
}
.marquee:hover .marquee-inner{ animation-play-state:paused; }
.marquee-inner span{
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint); white-space:nowrap;
}
.marquee-inner i{ width:1px; height:11px; background:var(--blue); display:inline-block; flex-shrink:0; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================== PRODUCTS ============================== */
.products{ padding:var(--s8) 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--s4); margin-bottom:var(--s7); flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4vw,48px); letter-spacing:-0.02em;
}
.section-head p{ color:var(--text-dim); font-size:15px; line-height:1.65; max-width:42ch; }

.showcase{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s7);
  align-items:center; margin-bottom:var(--s8);
}
.showcase-flip .showcase-copy{ order:2; }
.showcase-flip .showcase-visual{ order:1; }
@media (max-width:960px){
  .showcase{ grid-template-columns:1fr; gap:var(--s5); margin-bottom:var(--s7); }
  .showcase-flip .showcase-copy{ order:1; }
  .showcase-flip .showcase-visual{ order:2; }
}

.product-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border-strong);
  padding:7px 14px; border-radius:100px; margin-bottom:var(--s3);
}
.tag-dot{ width:8px; height:8px; border-radius:50%; background:var(--tag); }
.showcase-copy h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(28px,3.4vw,42px); letter-spacing:-0.02em; line-height:1.1;
  margin-bottom:var(--s3);
}
.showcase-copy > p{ color:var(--text-dim); font-size:16px; line-height:1.75; margin-bottom:var(--s3); max-width:52ch; }
.feature-list{ list-style:none; margin-bottom:var(--s4); }
.feature-list li{
  position:relative; padding-left:26px; margin-bottom:14px;
  color:var(--text-dim); font-size:14px; line-height:1.65;
}
.feature-list li::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:1.5px; background:var(--blue);
}
.feature-list em{ font-style:normal; font-weight:600; color:var(--text); }
.status-chip{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  padding:8px 16px; border-radius:100px;
  background:color-mix(in srgb, var(--chip) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--chip) 45%, transparent);
  color:var(--text);
}

.showcase-visual{ perspective:1200px; }
.tilt-inner-proxy, .browser-frame, .phone-frame{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  will-change:transform;
}
.browser-frame{
  border-radius:16px; overflow:hidden;
  border:1px solid var(--border-strong);
  box-shadow:0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(122,148,121,0.15);
  background:#F5F1E8;
}
.browser-bar{
  display:flex; align-items:center; gap:7px;
  background:#EAE4D6; padding:11px 16px; border-bottom:1px solid #E0D9C8;
}
.browser-bar i{ width:10px; height:10px; border-radius:50%; background:#D6CFBE; }
.browser-bar span{
  margin-left:12px; font-family:var(--mono); font-size:10px; color:#8A8578;
  background:#F5F1E8; padding:4px 14px; border-radius:100px;
}
.browser-frame svg{ width:100%; height:auto; }

.phone-frame{
  width:min(270px,80%); margin:0 auto; border-radius:36px; overflow:hidden;
  border:1px solid rgba(200,241,53,0.2);
  box-shadow:0 40px 90px rgba(0,0,0,0.6), 0 0 60px rgba(200,241,53,0.07), inset 0 0 0 8px #14160C;
  background:#0D0F08;
}
.phone-frame svg{ width:100%; height:auto; }

.future-strip{
  display:flex; gap:var(--s3); align-items:center;
  border:1.5px dashed var(--border-strong); border-radius:var(--radius);
  padding:var(--s4);
}
.future-mark svg{ width:40px; height:46px; }
.future-strip h4{ font-family:var(--display); font-weight:600; font-size:17px; margin-bottom:6px; }
.future-strip p{ color:var(--text-faint); font-size:14px; line-height:1.6; max-width:70ch; }

/* ============================== PHILOSOPHY ============================== */
.philosophy{
  padding:var(--s9) 0;
  border-top:1px solid var(--border);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(46,107,255,0.07), transparent 60%);
}
.phi-heading{
  font-family:var(--display); font-weight:700;
  font-size:clamp(38px,6vw,72px); letter-spacing:-0.025em; line-height:1.04;
  margin-bottom:var(--s6);
}
.phi-lines{ max-width:820px; }
.phi-line{
  font-family:var(--display); font-weight:500;
  font-size:clamp(19px,2.4vw,27px); line-height:1.5;
  padding:var(--s3) 0; border-top:1px solid var(--border);
}
.phi-line .dim{ color:var(--text-faint); }
.phi-line .em{ color:var(--text); font-weight:600; }
.phi-line .grad-text{
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600;
}
.inversion{
  margin-top:var(--s6); display:flex; gap:var(--s5); align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s5);
}
@media (max-width:700px){ .inversion{ flex-direction:column; align-items:flex-start; gap:var(--s3); } }
.inversion-stat{ display:flex; align-items:baseline; gap:6px; flex-shrink:0; }
.big-num{
  font-family:var(--display); font-weight:700; font-size:clamp(64px,8vw,104px);
  line-height:1; letter-spacing:-0.03em;
  background:linear-gradient(180deg,var(--text),var(--text-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.big-unit{ font-family:var(--mono); font-size:15px; color:var(--cyan); letter-spacing:0.1em; }
.inversion p{ color:var(--text-dim); font-size:15px; line-height:1.75; max-width:56ch; }

/* ============================== PRINCIPLES ============================== */
.principles{ padding:var(--s7) 0; border-top:1px solid var(--border); }
.prin-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.prin-card:nth-child(2n){ margin-top:var(--s5); }
@media (max-width:800px){ .prin-grid{ grid-template-columns:1fr; } .prin-card:nth-child(2n){ margin-top:0; } }
.prin-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s4);
  transition:border-color .3s ease, transform .3s ease;
}
.prin-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(63,203,255,0.08), transparent 45%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.prin-card:hover{ border-color:var(--border-strong); transform:translateY(-3px); }
.prin-card:hover::before{ opacity:1; }
.prin-num{
  font-family:var(--mono); font-size:12px; color:var(--blue); letter-spacing:0.14em;
  display:block; margin-bottom:var(--s3);
}
.prin-card h3{ font-family:var(--display); font-weight:600; font-size:20px; margin-bottom:12px; }
.prin-card p{ color:var(--text-dim); font-size:14px; line-height:1.7; margin-bottom:var(--s3); }
.prin-cost{
  font-family:var(--mono); font-size:11px; color:var(--text-faint); letter-spacing:0.04em;
  border-top:1px solid var(--border); padding-top:14px; display:block;
}

/* ============================== FOUNDATION ============================== */
.foundation{ padding:var(--s6) 0; border-top:1px solid var(--border); }
.tech-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s6); align-items:center; }
@media (max-width:960px){ .tech-grid{ grid-template-columns:1fr; gap:var(--s5); } }
.tech-copy h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,3.8vw,46px); letter-spacing:-0.02em; line-height:1.12;
}
.tech-copy p{ margin-top:var(--s3); color:var(--text-dim); font-size:15px; line-height:1.75; max-width:42ch; }
.tech-list{ list-style:none; margin-top:var(--s4); }
.tech-list li{
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-top:1px solid var(--border);
  font-size:14px; color:var(--text-dim);
}
.mono-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--cyan);
  border:1px solid rgba(63,203,255,0.35); border-radius:6px; padding:4px 8px;
}
.tech-diagram svg{ width:100%; height:auto; }
.beam{ stroke-dasharray:8 10; animation:beamFlow 1.6s linear infinite; }
@keyframes beamFlow{ to{ stroke-dashoffset:-18; } }

/* ============================== CTA ============================== */
.cta{
  padding:var(--s8) 0; border-top:1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(46,107,255,0.16), transparent 65%),
    radial-gradient(ellipse 40% 50% at 70% 100%, rgba(34,197,141,0.07), transparent 65%);
}
.cta-inner{ text-align:center; max-width:640px; margin:0 auto; }
.cta-inner .eyebrow{ justify-content:center; }
.cta-inner h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4.4vw,52px); letter-spacing:-0.02em; line-height:1.1;
}
.cta-sub{ margin-top:var(--s3); color:var(--text-dim); font-size:15px; line-height:1.7; }
.nl-form{ margin-top:var(--s4); display:flex; gap:10px; justify-content:center; }
.nl-form input{
  border:1px solid var(--border-strong); background:rgba(255,255,255,0.04);
  color:var(--text); padding:13px 20px; border-radius:100px;
  font-size:14px; font-family:var(--body); min-width:280px;
  transition:border-color .2s ease, background .2s ease;
}
.nl-form input::placeholder{ color:var(--text-faint); }
.nl-form input:focus{ border-color:var(--cyan); background:rgba(255,255,255,0.06); outline:none; }
@media (max-width:600px){ .nl-form{ flex-direction:column; } .nl-form input{ min-width:0; } }
.cta-alt{ margin-top:var(--s3); font-size:13px; color:var(--text-faint); }
.cta-alt a{ color:var(--text-dim); border-bottom:1px solid var(--border-strong); transition:color .2s; }
.cta-alt a:hover{ color:var(--cyan); }

/* ============================== FOOTER ============================== */
footer{ border-top:1px solid var(--border); padding:var(--s6) 0 var(--s4); position:relative; z-index:1; }
.footer-top{
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr;
  gap:var(--s4); padding-bottom:var(--s5);
}
@media (max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:var(--s4); } }
.footer-brand p{ color:var(--text-faint); font-size:13px; max-width:34ch; line-height:1.65; margin-top:var(--s2); }
.footer-col h4{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500; color:var(--text-faint); margin-bottom:var(--s2);
}
.footer-col a{ display:block; font-size:14px; color:var(--text-dim); margin-bottom:11px; transition:color .2s; }
.footer-col a:hover{ color:var(--cyan); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border); padding-top:var(--s3);
  font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:10px;
}
.mono-tag-sm{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; }