/* =============================================================
   Systems Over Hustle — stylesheet
   -------------------------------------------------------------
   No inline styles are used anywhere in the HTML. That is
   deliberate: it lets the Content-Security-Policy in .htaccess
   omit 'unsafe-inline' for styles, which closes off a large class
   of injection attacks. If you add an inline style="" attribute,
   you will weaken the CSP — add a class here instead.
   ============================================================= */

:root{
  --bg:#0a0e14;
  --bg-elevated:#10151f;
  --bg-card:#0d1219;
  --line:#1c2432;
  --line-soft:#161c28;
  --blue:#2e6fff;
  --blue-bright:#5b8cff;
  --blue-dim:#1a3a8f;
  --white:#f2f4f8;
  --muted:#8a93a6;
  --muted-dim:#5a6274;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; height:auto;}
::selection{background:var(--blue); color:var(--white);}
:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:3px;
  border-radius:2px;
}

/* Screen-reader-only text (accessible labels without visual noise) */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Keyboard users can jump straight past the nav */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:300;
  background:var(--blue);
  color:#fff;
  padding:12px 18px;
  border-radius:0 0 4px 0;
  font-size:14px;
}
.skip-link:focus{left:0;}

.wrap{
  max-width:1180px;
  margin:0 auto;
  /* Fluid gutter: 20px on a 320px phone, 32px from ~800px up. */
  padding:0 clamp(20px, 4vw, 32px);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-bright);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px;
  height:1px;
  background:var(--blue-bright);
  display:inline-block;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
}

/* ---------- NAV ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(10,14,20,0.7);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  max-width:1180px;
  margin:0 auto;
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:500;
  letter-spacing:0.02em;
  display:flex;
  align-items:center;
  gap:9px;
}
.logo-dot{
  width:8px; height:8px;
  background:var(--blue);
  border-radius:50%;
  box-shadow:0 0 10px 2px var(--blue-dim);
  flex-shrink:0;
}
.nav-links{
  display:flex;
  gap:34px;
  font-size:14px;
  color:var(--muted);
}
.nav-links a{transition:color .2s;}
.nav-links a:hover{color:var(--white);}
.nav-cta{
  font-family:var(--font-mono);
  font-size:13px;
  padding:9px 18px;
  border:1px solid var(--blue-dim);
  border-radius:3px;
  color:var(--blue-bright);
  transition:all .2s;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--blue); color:var(--white); border-color:var(--blue);}

/* ---------- MOBILE MENU TOGGLE ----------
   Hidden on desktop. Only revealed once JavaScript has run (html.js),
   so a no-JS visitor never sees a button that cannot work — they get
   the plain wrapped link list instead. See the responsive block below. */
.nav-toggle{
  display:none;
  width:42px; height:42px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:none;
  border:1px solid var(--line);
  border-radius:4px;
  padding:0;
  flex-shrink:0;
  transition:border-color .2s;
}
.nav-toggle:hover{border-color:var(--blue-dim);}
.nav-toggle-bar{
  display:block;
  width:18px; height:1.5px;
  background:var(--white);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
/* Bars morph into an X while the menu is open. */
.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-open .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- HERO ---------- */
.hero{
  /* Top padding must always clear the fixed header, which is shorter on
     mobile — hence the fluid value rather than a flat 190px. */
  padding:clamp(126px, 17vw, 190px) 0 clamp(64px, 10vw, 120px);
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  /* The headline is long, so the lower bound is deliberately small:
     36px on a 320px screen produced an eight-line wall of text. */
  font-size:clamp(28px, 5.2vw, 58px);
  line-height:1.1;
  margin:20px 0 24px;
  /* Keeps a comfortable measure on very wide screens. */
  max-width:16ch;
}
.hero h1 span{color:var(--blue-bright);}
.hero p.lead{
  font-size:17px;
  color:var(--muted);
  max-width:480px;
  margin-bottom:38px;
}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.btn-primary{
  background:var(--blue);
  color:#fff;
  padding:14px 26px;
  border-radius:4px;
  font-weight:500;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .2s;
  border:1px solid var(--blue);
}
.btn-primary:hover{background:var(--blue-bright); border-color:var(--blue-bright); transform:translateY(-1px);}
.btn-ghost{
  padding:14px 22px;
  font-size:15px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:4px;
  transition:all .2s;
}
.btn-ghost:hover{color:var(--white); border-color:var(--muted-dim);}
/* Anything with the hidden attribute must actually stay hidden,
   even when a display rule would otherwise override it. */
[hidden]{display:none !important;}

/* Node diagram (signature element) */
.diagram-wrap{
  position:relative;
  aspect-ratio:1/1;
}
.diagram-wrap svg{width:100%; height:100%; overflow:visible;}
.node-line{
  stroke:var(--blue-dim);
  stroke-width:1.4;
  fill:none;
  stroke-dasharray:6 6;
  opacity:0.55;
}
.node-line.active{
  stroke:var(--blue-bright);
  stroke-dasharray:2 5;
  opacity:0.9;
  animation:flow 3.5s linear infinite;
}
@keyframes flow{
  0%{stroke-dashoffset:24;}
  100%{stroke-dashoffset:0;}
}
.node-circle{
  fill:var(--bg-card);
  stroke:var(--line);
  stroke-width:1.4;
}
.node-circle.core{
  fill:var(--blue);
  stroke:var(--blue-bright);
  filter:drop-shadow(0 0 14px rgba(46,111,255,0.55));
}
.node-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  fill:var(--muted);
  letter-spacing:0.02em;
}
.node-label-core{fill:#fff; font-size:10px;}
.node-label-core.sm{font-size:9px;}
.node-pulse{animation:pulse 2.6s ease-in-out infinite;}
/* Animation delays as classes so no inline style is needed */
.node-pulse.d1{animation-delay:.3s;}
.node-pulse.d2{animation-delay:.6s;}
.node-pulse.d3{animation-delay:.9s;}
.node-pulse.d4{animation-delay:1.2s;}
.node-pulse.d5{animation-delay:1.5s;}
.node-pulse.d6{animation-delay:1.8s;}
.node-pulse.d7{animation-delay:2.1s;}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.45;}
}

/* ---------- SECTION SHARED ---------- */
section{padding:clamp(64px, 9vw, 110px) 0;}
.section-head{
  max-width:640px;
  margin-bottom:clamp(38px, 5.5vw, 64px);
}
.section-head h2{
  font-size:clamp(28px,3vw,38px);
  margin-top:16px;
  line-height:1.15;
}
.section-head p:not(.eyebrow){
  color:var(--muted);
  margin-top:16px;
  font-size:16px;
  max-width:560px;
}

/* ---------- PROBLEM / CONTRAST ---------- */
.contrast{border-top:1px solid var(--line-soft);}
.contrast-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:8px;
  overflow:hidden;
}
.contrast-col{
  background:var(--bg);
  padding:40px 36px;
}
.contrast-col.system{background:var(--bg-elevated);}
.contrast-col h3{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted-dim);
  margin-bottom:24px;
  font-weight:500;
}
.contrast-col.system h3{color:var(--blue-bright);}
.contrast-item{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:15px;
  color:var(--muted);
}
.contrast-col.system .contrast-item{color:var(--white);}
.contrast-item:last-child{border-bottom:none;}
.contrast-mark{font-family:var(--font-mono); font-size:14px; flex-shrink:0; color:var(--muted-dim);}
.contrast-col.system .contrast-mark{color:var(--blue-bright);}
.case-note{
  margin-top:28px;
  padding:22px 24px;
  border-left:2px solid var(--blue);
  background:var(--bg-elevated);
  border-radius:0 6px 6px 0;
  font-size:14.5px;
  color:var(--muted);
}
.case-note strong{color:var(--white); font-weight:500;}

/* ---------- MODULES ---------- */
.modules{border-top:1px solid var(--line-soft);}
.module-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:8px;
  overflow:hidden;
}
.module{
  background:var(--bg);
  padding:30px 26px;
  transition:background .25s;
}
.module:hover{background:var(--bg-elevated);}
.module-code{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--blue-bright);
  letter-spacing:0.06em;
  margin-bottom:16px;
  display:block;
}
.module h3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  margin-bottom:8px;
}
.module p{
  font-size:14px;
  color:var(--muted);
  line-height:1.55;
}

/* ---------- PROCESS ---------- */
.process{border-top:1px solid var(--line-soft);}
.steps{
  position:relative;
  padding-left:36px;
  border-left:1px solid var(--line);
}
.step{
  position:relative;
  padding-bottom:52px;
}
.step:last-child{padding-bottom:0;}
.step::before{
  content:'';
  position:absolute;
  left:-41px;
  top:2px;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--blue);
}
.step-num{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-dim);
  letter-spacing:0.05em;
  margin-bottom:8px;
  display:block;
}
.step h3{font-size:19px; margin-bottom:8px; font-weight:600;}
.step p{color:var(--muted); font-size:15px; max-width:520px;}

/* ---------- PORTFOLIO ---------- */
.portfolio{border-top:1px solid var(--line-soft);}
.portfolio-grid{
  display:grid;
  /* min() guard: without it, minmax(300px,...) forces a 300px column even
     when the viewport is narrower, which caused horizontal scrolling on
     320-360px phones. min(300px,100%) lets the column shrink instead. */
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:22px;
}
.p-card{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-card);
  transition:transform .25s, border-color .25s;
}
.p-card:hover{transform:translateY(-3px); border-color:var(--blue-dim);}
.p-thumb{
  aspect-ratio:16/10;
  background:linear-gradient(135deg, var(--bg-elevated), var(--bg));
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.p-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.p-thumb .placeholder{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-dim);
  letter-spacing:0.05em;
}
.p-body{padding:22px 24px;}
.p-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.p-tag{
  font-family:var(--font-mono);
  font-size:10.5px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--blue-bright);
  letter-spacing:0.03em;
}
.p-body h3{font-size:17px; margin-bottom:8px; font-weight:600;}
.p-body p{font-size:14px; color:var(--muted); margin-bottom:14px;}
.p-result{
  font-size:13px;
  color:var(--muted-dim);
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.p-result strong{color:var(--blue-bright); font-weight:500;}
.p-demo-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted-dim);
  border:1px solid var(--line);
  border-radius:3px;
  padding:3px 8px;
  margin-bottom:12px;
}
.p-empty{
  grid-column:1/-1;
  text-align:center;
  padding:60px 20px;
  color:var(--muted-dim);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.7;
  border:1px dashed var(--line);
  border-radius:8px;
}
.sys-note{
  margin-top:28px;
  font-size:13px;
  color:var(--muted-dim);
  font-family:var(--font-mono);
}

/* ---------- FAQ ----------
   The panel uses grid-template-rows 0fr -> 1fr instead of a fixed
   max-height. A fixed max-height silently clips answers once the
   text grows past it; this approach animates to the true height. */
.faq{border-top:1px solid var(--line-soft);}
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:var(--white);
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:16px;
  font-weight:500;
  font-family:var(--font-body);
}
.faq-q:hover{color:var(--blue-bright);}
.faq-icon{
  font-family:var(--font-mono);
  color:var(--blue-bright);
  font-size:16px;
  flex-shrink:0;
  transition:transform .25s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}
.faq-a > p{
  overflow:hidden;
  min-height:0;
}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-item.open .faq-a > p{padding-bottom:24px;}
/* Fallback for browsers without animatable grid rows: content still
   shows, it just appears instantly instead of sliding. */
@supports not (grid-template-rows: 0fr){
  .faq-a{display:block; height:0; overflow:hidden;}
  .faq-item.open .faq-a{height:auto; padding-bottom:24px;}
}

/* ---------- FINAL CTA ---------- */
.final-cta{
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.final-cta .eyebrow{justify-content:center;}
.final-cta h2{
  font-size:clamp(30px,4vw,44px);
  margin:20px auto 18px;
  max-width:640px;
  line-height:1.15;
}
.final-cta > .wrap > div > p{color:var(--muted); margin-bottom:36px; font-size:16px;}
.final-cta .cta-row{justify-content:center;}
.cta-note{
  margin-top:26px;
  font-size:12.5px;
  color:var(--muted-dim);
}
.cta-note a{color:var(--muted); text-decoration:underline;}
.cta-note a:hover{color:var(--blue-bright);}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line-soft);
  padding:36px 0;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-size:13px;
  color:var(--muted-dim);
  font-family:var(--font-mono);
}
.footer-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.footer-row a{color:var(--muted); transition:color .2s;}
.footer-row a:hover{color:var(--blue-bright);}
.status-active{color:var(--blue-bright);}

/* ---------- SCROLL REVEAL ----------
   CRITICAL: .reveal is only hidden when <html class="js"> is present,
   which script.js sets as its very first action. If the script fails
   to load or throws before that point, none of this applies and all
   content stays visible. Never move opacity:0 onto the bare .reveal
   selector — that reintroduces the blank-page failure mode. */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.js .reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none;}
}


/* ---------- CHATBOT WIDGET (SYS.05 — scripted demo) ---------- */
.chat-toggle{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:200;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  border:1px solid var(--blue-bright);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 24px rgba(46,111,255,0.4);
  transition:transform .2s, background .2s;
}
.chat-toggle:hover{transform:translateY(-2px); background:var(--blue-bright);}
.chat-toggle svg{width:24px; height:24px;}
.chat-toggle .chat-badge{
  position:absolute;
  top:-4px; right:-4px;
  width:14px; height:14px;
  background:#22c55e;
  border-radius:50%;
  border:2px solid var(--bg);
}
.chat-panel{
  position:fixed;
  right:24px;
  bottom:94px;
  z-index:200;
  width:360px;
  max-width:calc(100vw - 48px);
  height:500px;
  max-height:calc(100vh - 150px);
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  opacity:0;
  transform:translateY(16px) scale(0.98);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.chat-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.chat-head{
  padding:16px 18px;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-elevated);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.chat-head-info{display:flex; align-items:center; gap:10px;}
.chat-avatar{
  width:34px; height:34px;
  border-radius:8px;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  flex-shrink:0;
}
.chat-head-title{font-family:var(--font-display); font-size:14.5px; font-weight:600;}
/* Labelled as a demo rather than "Online" — claiming a live agent
   when none exists is misleading to visitors. */
.chat-head-status{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted-dim);
  display:flex;
  align-items:center;
  gap:6px;
}
.chat-head-status::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:#22c55e;
  flex-shrink:0;
}
.chat-close{
  background:none; border:none; color:var(--muted);
  font-size:20px; line-height:1; padding:4px 6px;
  transition:color .2s;
}
.chat-close:hover{color:var(--white);}
.chat-body{
  flex:1;
  overflow-y:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chat-body::-webkit-scrollbar{width:6px;}
.chat-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.msg{
  max-width:82%;
  padding:10px 14px;
  border-radius:10px;
  font-size:13.5px;
  line-height:1.5;
  /* Long unbroken strings from a visitor must not blow out the layout */
  overflow-wrap:anywhere;
}
.msg.bot{
  align-self:flex-start;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  color:var(--white);
  border-bottom-left-radius:2px;
}
.msg.user{
  align-self:flex-end;
  background:var(--blue);
  color:#fff;
  border-bottom-right-radius:2px;
}
.chat-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 18px 14px;
}
.chat-quick:empty{padding:0;}
.chat-chip{
  font-family:var(--font-mono);
  font-size:11px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--blue-bright);
  background:var(--bg-elevated);
  transition:all .2s;
  white-space:nowrap;
}
.chat-chip:hover{border-color:var(--blue); background:var(--blue-dim); color:var(--white);}
.typing{
  align-self:flex-start;
  display:flex;
  gap:4px;
  padding:12px 14px;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:10px;
  border-bottom-left-radius:2px;
}
.typing span{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--muted-dim);
  animation:typingBounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){animation-delay:.15s;}
.typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0); opacity:.5;}
  30%{transform:translateY(-4px); opacity:1;}
}
.chat-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px;
  border-top:1px solid var(--line-soft);
  background:var(--bg-elevated);
}
.chat-input{
  flex:1;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 14px;
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px; /* 16px prevents iOS Safari auto-zoom on focus */
}
.chat-input:focus{outline:none; border-color:var(--blue-dim);}
.chat-send{
  width:38px; height:38px;
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s;
}
.chat-send:hover{background:var(--blue-bright);}
.chat-send svg{width:16px; height:16px;}
.chat-foot-note{
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--muted-dim);
  text-align:center;
  padding:6px 0 10px;
  letter-spacing:0.03em;
}

/* ---------- LEGAL / CONTENT PAGES (privacy.html, terms.html, 404) ---------- */
.doc{
  padding:150px 0 90px;
  max-width:760px;
}
.doc h1{font-size:clamp(28px,4vw,40px); margin-bottom:10px;}
.doc .updated{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-dim);
  margin-bottom:40px;
}
.doc h2{
  font-size:20px;
  margin:38px 0 12px;
  color:var(--white);
}
.doc p, .doc li{color:var(--muted); font-size:15px; margin-bottom:12px;}
.doc ul{padding-left:20px; list-style:disc;}
.doc li{margin-bottom:8px;}
.doc a{color:var(--blue-bright); text-decoration:underline;}
.doc-warning{
  border:1px solid #a16207;
  background:rgba(161,98,7,0.12);
  border-radius:6px;
  padding:18px 20px;
  margin:0 0 36px;
  font-size:14px;
  color:#fbbf24;
}
.doc-warning strong{color:#fde68a;}
/* ---------- CONTACT / GET STARTED PAGE (contact.html) ----------
   Additive only. Every rule below is scoped to a .contact-* class or
   to #contact-page, so nothing here can affect the homepage. All
   values reuse the existing design tokens — no new colours or fonts. */
.contact-hero{padding:clamp(122px, 16vw, 150px) 0 clamp(46px, 7vw, 70px);}
.contact-hero h1{
  font-size:clamp(32px,4.4vw,52px);
  line-height:1.1;
  margin:22px 0 22px;
  max-width:720px;
}
.contact-hero h1 span{color:var(--blue-bright);}
.contact-hero .lead{
  font-size:17px;
  color:var(--muted);
  max-width:600px;
}
.contact-section{padding:0 0 90px;}

/* Phone + email cards. Mirrors .module-grid so it reads as the
   same component family. */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:8px;
  overflow:hidden;
}
.contact-card{
  background:var(--bg);
  padding:34px 30px;
  transition:background .25s;
}
.contact-card:hover{background:var(--bg-elevated);}
.contact-label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:14px;
}
.contact-value{
  font-family:var(--font-display);
  font-size:clamp(19px,2.2vw,23px);
  font-weight:600;
  color:var(--white);
  letter-spacing:-0.01em;
  overflow-wrap:anywhere;
}
.contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:14px;
  color:var(--muted);
  transition:all .2s;
}
.contact-btn:hover{
  color:var(--white);
  border-color:var(--blue-dim);
  background:var(--bg-elevated);
}
/* Icons take the site's blue, not the vendors' brand colours. */
.contact-btn svg{
  width:17px; height:17px;
  flex-shrink:0;
  color:var(--blue-bright);
}

/* Prominent form call-to-action panel */
.cta-panel{
  border:1px solid var(--blue-dim);
  background:var(--bg-elevated);
  border-radius:8px;
  padding:clamp(32px,5vw,52px) clamp(24px,4vw,44px);
  text-align:center;
}
.cta-panel h2{
  font-size:clamp(24px,3vw,34px);
  margin:16px auto 14px;
  max-width:520px;
  line-height:1.2;
}
.cta-panel p{
  color:var(--muted);
  font-size:16px;
  max-width:540px;
  margin:0 auto 34px;
}
.cta-panel .eyebrow{justify-content:center;}
.cta-panel .btn-primary{font-size:16px; padding:16px 32px;}
.cta-panel .form-note{
  font-size:12.5px;
  color:var(--muted-dim);
  margin:26px auto 0;
}


.center-block{text-align:center; padding:180px 0 120px;}
.center-block h1{font-size:clamp(40px,8vw,80px); margin-bottom:14px;}
.center-block p{color:var(--muted); margin-bottom:30px;}
.center-block .cta-row{justify-content:center;}
.err-code{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:8px;
}

/* =============================================================
   RESPONSIVE — single consolidated block
   -------------------------------------------------------------
   All layout breakpoints live here so there is one place to look.
   Fluid values (clamp) handle typography and spacing in the base
   rules above; these queries only handle changes that clamp cannot
   express, such as grids changing column count and the mobile menu.

   Breakpoints, largest first:
     1441px+   large desktop  — widen the container only
     1025-1440 laptop         — base design, no overrides needed
     861-1024  tablet         — 2-column grids
     621-860   small tablet   — stacked hero, mobile menu appears
     481-620   large phone
     <=480     phone
     <=360     very small phone
   ============================================================= */

/* ---------- LARGE DESKTOP: 1441px and up ---------- */
@media (min-width:1441px){
  /* Slightly wider container so the design does not look marooned
     in the middle of a 1920px monitor. Type stays the same size. */
  .wrap, .nav{max-width:1320px;}
  .hero-grid{gap:80px;}
}

/* ---------- TABLET: up to 1024px ---------- */
@media (max-width:1024px){
  /* Three module columns get cramped before the layout stacks. */
  .module-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- STACKED LAYOUT + MOBILE MENU: up to 860px ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:clamp(34px,6vw,50px);}
  .diagram-wrap{max-width:min(420px,80vw); margin:0 auto;}
  .contrast-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .hero h1{max-width:none;}

  /* --- Mobile menu ---
     Only active when JS is available. Without JS the links stay in
     the header and simply wrap onto a second row: still usable. */
  .js .nav-toggle{display:flex;}

  .js .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--line);
    padding:8px clamp(20px,4vw,32px) 18px;
    /* Collapsed by default; animates open via max-height. */
    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:max-height .28s ease, opacity .2s ease;
  }
  .js .nav-open .nav-links{
    max-height:70vh;
    overflow-y:auto;
    opacity:1;
    pointer-events:auto;
  }
  .js .nav-links a{
    display:block;
    padding:15px 2px;              /* comfortable 48px+ tap target */
    font-size:16px;
    color:var(--white);
    border-bottom:1px solid var(--line-soft);
  }
  .js .nav-links a:last-child{border-bottom:none;}

  /* The header CTA moves into the menu so the bar never overflows. */
  .js .nav > .nav-cta{display:none;}
  .js .nav-links .nav-cta-mobile{
    display:block;
    margin-top:14px;
    padding:14px 18px;
    background:var(--blue);
    border:1px solid var(--blue);
    border-radius:4px;
    color:#fff;
    text-align:center;
    font-family:var(--font-mono);
    font-size:14px;
    border-bottom:1px solid var(--blue);
  }
  .nav{position:relative;}
}
/* The in-menu CTA must never appear on desktop. */
.nav-cta-mobile{display:none;}

/* ---------- LARGE PHONE: up to 620px ---------- */
@media (max-width:620px){
  /* Two module columns leave ~130px of text width on a 320px phone.
     Below this breakpoint they stack. */
  .module-grid{grid-template-columns:1fr;}

  .nav{padding:14px clamp(20px,4vw,32px);}
  .logo{font-size:13px;}
  .contrast-col{padding:28px 22px;}
  .module{padding:26px 22px;}
  .contact-card{padding:28px 22px;}
  .case-note{padding:20px 20px;}

  /* Buttons go full-width and stack: no more thumb-sized targets
     squeezed side by side, and nothing touches the screen edge. */
  .cta-row{flex-direction:column; align-items:stretch; gap:12px;}
  .cta-row .btn-primary,
  .cta-row .btn-ghost{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .contact-actions{gap:10px;}
  .contact-btn{flex:1 1 auto; justify-content:center;}

  .footer-row{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:14px;
  }

  /* Timeline gutter tightened so long words still fit. */
  .steps{padding-left:26px;}
  .step::before{left:-31px;}
  .step{padding-bottom:40px;}

  .faq-q{font-size:15.5px; gap:14px; padding:20px 0;}
  .section-head h2{font-size:clamp(24px,6.2vw,30px);}
}

/* ---------- PHONE: up to 480px ---------- */
@media (max-width:480px){
  .hero p.lead{font-size:16px;}
  .p-body, .contact-card{padding-left:20px; padding-right:20px;}

  /* Chat widget spans the width with even margins instead of
     hanging off one edge. */
  .chat-panel{
    right:12px; left:12px;
    width:auto;
    bottom:80px;
    height:min(460px, calc(100vh - 150px));
  }
  .chat-toggle{right:16px; bottom:16px; width:54px; height:54px;}
  .chat-quick{gap:6px;}
  .chat-chip{font-size:10.5px; padding:6px 10px;}
  .msg{max-width:88%;}

  .cta-panel{padding:30px 20px;}
  .doc{padding-top:126px;}
}

/* ---------- VERY SMALL PHONE: up to 360px ---------- */
@media (max-width:360px){
  .logo{font-size:11.5px; gap:7px;}
  .nav-toggle{width:38px; height:38px;}
  .contact-value{font-size:17px;}
  .p-tags{gap:6px;}
  .module{padding:22px 18px;}
  /* Long unbroken strings (emails, URLs) must wrap rather than
     push the layout sideways. */
  .contact-value, .p-body h3, .module h3, .step h3{overflow-wrap:anywhere;}
}

/* ---------- LANDSCAPE PHONE ----------
   Short viewports: the chat panel would otherwise be taller than
   the screen and its input would sit off-screen. */
@media (max-height:520px) and (max-width:900px){
  .chat-panel{height:calc(100vh - 110px); bottom:70px;}
  .hero{padding-top:110px;}
}
/* =============================================================
   V2 — "Blueprint + one 3D core" redesign
   Everything below is additive. Scoped to hero core, .flow,
   .modules, .process and .final-cta. No inline styles are used;
   JS only sets CSS custom properties through the CSSOM, which the
   CSP allows.
   ============================================================= */

/* ---------- HERO: perspective grid backdrop ---------- */
.hero{overflow:hidden;}
.hero::before{
  content:'';
  position:absolute;
  inset:-10% -20% 0;
  background-image:
    linear-gradient(rgba(91,140,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,140,255,0.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 45%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse 70% 60% at 70% 45%, #000 0%, transparent 72%);
  pointer-events:none;
  z-index:0;
}
.hero .wrap{position:relative; z-index:1;}

/* ---------- HERO: orbital core ---------- */
.core-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  perspective:1000px;
}
.core-tilt{
  position:absolute;
  inset:0;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.core-halo{
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(46,111,255,0.28) 0%, rgba(46,111,255,0.08) 45%, transparent 70%);
  filter:blur(18px);
  animation:haloBreath 6s ease-in-out infinite;
}
@keyframes haloBreath{0%,100%{opacity:.75; transform:scale(1);}50%{opacity:1; transform:scale(1.06);}}
.core-svg,.core-canvas{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.core-canvas{pointer-events:none;}
.core-ring{fill:none; stroke:rgba(91,140,255,0.22); stroke-width:1;}
.core-ring.r2{stroke:rgba(91,140,255,0.14);}
.core-ring.r3{stroke:rgba(91,140,255,0.12); stroke-dasharray:2 6;}
.core-spoke{stroke:rgba(91,140,255,0.16); stroke-width:1; stroke-dasharray:3 5;}
.core-node rect{
  fill:rgba(13,18,25,0.88);
  stroke:var(--line);
  stroke-width:1;
  transition:stroke .3s;
}
.core-node circle{fill:var(--blue-bright);}
.core-node text{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.06em;
  fill:var(--white);
}
.core-node{animation:nodeGlow 4.8s ease-in-out infinite;}
.core-node.d1{animation-delay:.6s;} .core-node.d2{animation-delay:1.2s;}
.core-node.d3{animation-delay:1.8s;} .core-node.d4{animation-delay:2.4s;}
.core-node.d5{animation-delay:3s;}   .core-node.d6{animation-delay:3.6s;}
.core-node.d7{animation-delay:4.2s;}
@keyframes nodeGlow{0%,100%{opacity:.78;}50%{opacity:1;}}

/* Glass sphere */
.core-orb{
  position:absolute;
  left:50%; top:50%;
  width:31%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) translateZ(40px);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.12) 14%, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(120,170,255,0.45) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #2e6fff 0%, #1a3a8f 52%, #0b1430 82%, #070a12 100%);
  box-shadow:
    0 0 0 1px rgba(140,180,255,0.35) inset,
    0 -12px 30px rgba(0,0,0,0.45) inset,
    0 0 50px rgba(46,111,255,0.55),
    0 0 120px rgba(46,111,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.core-orb-ring{
  position:absolute;
  inset:-9%;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(140,180,255,0.9) 40deg, transparent 90deg, transparent 200deg, rgba(140,180,255,0.5) 230deg, transparent 270deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  animation:orbSpin 9s linear infinite;
}
@keyframes orbSpin{to{transform:rotate(360deg);}}
.core-orb-label{
  position:relative;
  font-family:var(--font-mono);
  font-size:clamp(9px, 1.05vw, 12px);
  font-weight:500;
  letter-spacing:0.12em;
  color:#fff;
  line-height:1.5;
  text-shadow:0 1px 8px rgba(0,0,0,0.45);
}
.core-caption{
  position:absolute;
  left:0; right:0; bottom:-26px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  color:var(--muted-dim);
}

/* ---------- LIVE FLOW ---------- */
.flow{border-top:1px solid var(--line-soft); position:relative;}
.flow-board{
  border:1px solid var(--line);
  border-radius:10px;
  background:
    linear-gradient(rgba(91,140,255,0.045) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(91,140,255,0.045) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg-card);
  padding:clamp(22px,4vw,44px);
}
.flow-track{
  display:flex;
  align-items:stretch;
}
.flow-card{
  flex:1 1 0;
  min-width:0;
  position:relative;
  padding:18px 16px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(16,21,31,0.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:.42;
  transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.flow-card.is-on{
  opacity:1;
  transform:none;
  border-color:rgba(91,140,255,0.55);
  box-shadow:0 0 0 1px rgba(46,111,255,0.15), 0 10px 40px rgba(46,111,255,0.14);
}
.flow-card.is-final.is-on{
  background:linear-gradient(180deg, rgba(46,111,255,0.2), rgba(16,21,31,0.8));
  border-color:var(--blue-bright);
}
.flow-code{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--blue-bright);
  margin-bottom:12px;
}
.flow-card h3{font-size:16.5px; margin-bottom:4px;}
.flow-sub{font-size:13px; color:var(--muted);}
.flow-detail{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--white);
  line-height:1.5;
}
.flow-time{
  display:block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted-dim);
}
.flow-card.is-on .flow-time{color:var(--blue-bright);}
.flow-link{
  flex:0 0 clamp(18px,2.4vw,34px);
  position:relative;
  align-self:center;
  height:2px;
  background:var(--line);
}
.flow-fill{
  position:absolute; inset:0;
  background:var(--blue-bright);
  box-shadow:0 0 10px var(--blue);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s ease;
}
.flow-dot{
  position:absolute;
  top:50%; left:0;
  width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px 2px var(--blue-bright);
  opacity:0;
}
.flow-link.is-on .flow-fill{transform:scaleX(1);}
.flow-link.is-on .flow-dot{animation:dotRun .6s ease forwards;}
@keyframes dotRun{0%{left:0; opacity:1;}90%{opacity:1;}100%{left:100%; opacity:0;}}
.flow-foot{
  margin-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.flow-total{
  font-family:var(--font-display);
  font-size:clamp(17px,2vw,21px);
  font-weight:600;
  opacity:.35;
  transition:opacity .6s ease;
}
.flow-board.is-done .flow-total{opacity:1;}
.flow-total-k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--blue-bright);
  margin-right:10px;
  vertical-align:2px;
}
.flow-replay{
  font-family:var(--font-mono);
  font-size:12px;
  padding:8px 14px;
  background:none;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:4px;
  transition:all .2s;
}
.flow-replay:hover{color:var(--white); border-color:var(--blue-dim);}
.flow-note{
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted-dim);
}

/* ---------- MODULES: blueprint ---------- */
.modules{position:relative;}
.modules::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(91,140,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,140,255,0.05) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 55%, #000 10%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 55%, #000 10%, transparent 75%);
  pointer-events:none;
}
.modules .wrap{position:relative;}
.module-grid{position:relative; overflow:visible;}
.module-grid::after{
  content:'SYS.MAP — 3 × 3';
  position:absolute;
  right:0; top:-24px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.12em;
  color:var(--muted-dim);
}
.module{
  position:relative;
  background:rgba(10,14,20,0.86);
  transition:background .25s, box-shadow .25s;
}
.module::after{
  content:'+';
  position:absolute;
  top:14px; right:16px;
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1;
  color:var(--muted-dim);
  transition:color .25s, transform .25s;
}
.module:hover{
  background:rgba(16,21,31,0.95);
  box-shadow:inset 0 0 0 1px var(--blue-dim), 0 0 30px rgba(46,111,255,0.08);
}
.module:hover::after{color:var(--blue-bright); transform:rotate(90deg);}
.module:hover .module-code{text-shadow:0 0 12px rgba(91,140,255,0.6);}

/* ---------- PROCESS: engineering plan ---------- */
.steps{border-left:none;}
.steps::before,
.steps::after{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background:var(--line);
}
.steps::after{
  background:linear-gradient(180deg, var(--blue-bright), var(--blue));
  box-shadow:0 0 8px var(--blue);
  transform:scaleY(var(--progress,0));
  transform-origin:top center;
}
.step::before{transition:background .35s, box-shadow .35s;}
.step.is-lit::before{background:var(--blue); box-shadow:0 0 0 4px rgba(46,111,255,0.18);}
.step-num{letter-spacing:0.12em;}
.step.is-lit .step-num{color:var(--blue-bright);}
.step-sub{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-dim);
}
/* No JS -> show the full line */
html:not(.js) .steps::after{transform:none;}

/* ---------- FINAL CTA: particle vortex ---------- */
.final-cta{position:relative; overflow:hidden;}
.final-cta .wrap{position:relative; z-index:1;}
.cta-canvas{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}

/* ---------- V2 responsive ---------- */
@media (max-width:1024px){
  .flow-track{flex-wrap:wrap; gap:14px 0;}
}
@media (max-width:1024px) and (min-width:861px){
  .flow-card{flex:1 1 28%;}
}
@media (max-width:860px){
  .core-stage{width:100%; max-width:min(440px,88vw); margin:0 auto 20px;}
  .hero::before{-webkit-mask-image:radial-gradient(ellipse 90% 50% at 50% 70%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse 90% 50% at 50% 70%, #000 0%, transparent 75%);}
  .flow-track{flex-direction:column; flex-wrap:nowrap; gap:0;}
  .flow-card{flex:none;}
  .flow-link{
    flex:0 0 26px;
    width:2px; height:26px;
    align-self:flex-start;
    margin-left:26px;
  }
  .flow-fill{transform:scaleY(0); transform-origin:center top;}
  .flow-link.is-on .flow-fill{transform:scaleY(1);}
  .flow-dot{left:50%; top:0; margin:-3.5px 0 0 -3.5px;}
  .flow-link.is-on .flow-dot{animation-name:dotRunV;}
  @keyframes dotRunV{0%{top:0; opacity:1;}90%{opacity:1;}100%{top:100%; opacity:0;}}
  .module-grid::after{display:none;}
}
@media (max-width:480px){
  .core-node text{font-size:11px;}
  .flow-card{padding:16px 14px 14px;}
}
@media (prefers-reduced-motion: reduce){
  .core-tilt{transition:none; transform:none;}
  .flow-card{opacity:1; transform:none;}
  .flow-fill{transform:none !important;}
  .steps::after{transform:none;}
}

/* =============================================================
   V2.1 — ambient fill: dot matrix, drifting network, side rails,
   section blueprint marks, process panel, FAQ side card.
   Purely decorative layers are aria-hidden and pointer-events:none.
   ============================================================= */

/* Dot matrix across the whole page */
body{
  background-color:var(--bg);
  background-image:radial-gradient(rgba(91,140,255,0.10) 1px, transparent 1.3px);
  background-size:26px 26px;
  background-attachment:fixed;
}
/* Drifting node network, fixed behind content */
.ambient{
  position:fixed;
  inset:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index:0;
}
main, footer{position:relative; z-index:1;}

/* Side rails with ruler ticks (wide screens only) */
.rail{
  position:fixed;
  top:90px; bottom:24px;
  width:22px;
  z-index:2;
  pointer-events:none;
  display:none;
  background:
    repeating-linear-gradient(180deg, rgba(91,140,255,0.28) 0 1px, transparent 1px 8px) left top/6px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(91,140,255,0.45) 0 1px, transparent 1px 40px) left top/12px 100% no-repeat;
}
.rail::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(91,140,255,0.35) 20%, rgba(91,140,255,0.35) 80%, transparent);
}
.rail-l{left:18px;}
.rail-r{right:18px; transform:scaleX(-1);}
.rail-label{
  position:absolute;
  top:50%;
  left:18px;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  color:var(--muted-dim);
  white-space:nowrap;
}
.rail-r .rail-label{transform:translateY(-50%) scaleX(-1) rotate(180deg);}
@media (min-width:1360px){ .rail{display:block;} }

/* Section blueprint marks */
.contrast .wrap, .flow .wrap, .modules .wrap, .process .wrap,
.portfolio .wrap, .faq .wrap, .final-cta .wrap{position:relative;}
.sec-deco{
  position:absolute;
  inset:-34px clamp(20px,4vw,32px) -34px;
  pointer-events:none;
}
.final-cta .sec-deco{inset:-34px clamp(20px,4vw,32px);}
.sec-x{position:absolute; width:14px; height:14px;}
.sec-x::before,.sec-x::after{content:''; position:absolute; background:rgba(91,140,255,0.45);}
.sec-x::before{left:6px; top:0; width:1px; height:14px;}
.sec-x::after{top:6px; left:0; height:1px; width:14px;}
.sec-x.tl{left:-7px; top:-7px;} .sec-x.tr{right:-7px; top:-7px;}
.sec-x.bl{left:-7px; bottom:-7px;} .sec-x.br{right:-7px; bottom:-7px;}
.sec-tag{
  position:absolute;
  top:0; right:0;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  color:var(--muted-dim);
}
.sec-num{color:var(--blue-bright);}
.sec-rule{
  width:clamp(40px,8vw,120px); height:1px;
  background:repeating-linear-gradient(90deg, rgba(91,140,255,0.5) 0 4px, transparent 4px 8px);
}
.sec-meta{
  position:absolute;
  top:22px; right:0;
  display:flex; gap:14px; align-items:center;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:0.12em;
  color:rgba(138,147,166,0.45);
}
.sec-bars{
  width:54px; height:10px;
  background:repeating-linear-gradient(90deg, rgba(91,140,255,0.5) 0 1px, transparent 1px 3px, rgba(91,140,255,0.3) 3px 5px, transparent 5px 7px);
}
.sec-dots{
  position:absolute;
  right:0; top:64px;
  width:min(38%, 380px); height:150px;
  background-image:radial-gradient(rgba(91,140,255,0.5) 1.1px, transparent 1.5px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
  opacity:.7;
}
.final-cta .sec-dots{
  right:auto; left:0; top:auto; bottom:0;
  -webkit-mask-image:radial-gradient(ellipse at 0% 100%, #000 0%, transparent 70%);
          mask-image:radial-gradient(ellipse at 0% 100%, #000 0%, transparent 70%);
}
.section-head{position:relative; z-index:1;}

/* Portfolio placeholders: live schematic instead of flat black */
.p-thumb{
  background:
    radial-gradient(circle at 50% 50%, rgba(46,111,255,0.22), transparent 55%),
    linear-gradient(rgba(91,140,255,0.08) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, rgba(91,140,255,0.08) 1px, transparent 1px) 0 0/22px 22px,
    var(--bg-elevated);
}
.p-thumb::before{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:34%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px dashed rgba(91,140,255,0.45);
  box-shadow:0 0 0 16px rgba(46,111,255,0.04), 0 0 0 17px rgba(91,140,255,0.16);
  animation:thumbSpin 26s linear infinite;
}
.p-thumb::after{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:40%;
  background:linear-gradient(180deg, transparent, rgba(91,140,255,0.12) 90%, rgba(140,180,255,0.4) 100%);
  animation:scan 4.5s ease-in-out infinite;
}
@keyframes thumbSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes scan{0%{transform:translateY(-100%);}100%{transform:translateY(260%);}}
.p-thumb .placeholder{
  position:relative; z-index:1;
  padding:6px 10px;
  border:1px solid var(--line);
  background:rgba(10,14,20,0.8);
  border-radius:3px;
  color:var(--blue-bright);
}

/* Process: steps + sticky phase panel */
.process-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(32px,6vw,80px);
  align-items:start;
}
.phase-panel{
  position:sticky;
  top:110px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px;
  background:
    linear-gradient(rgba(91,140,255,0.05) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, rgba(91,140,255,0.05) 1px, transparent 1px) 0 0/20px 20px,
    rgba(13,18,25,0.9);
}
.phase-head{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em;
  color:var(--muted-dim);
}
.phase-live{color:#22c55e; display:flex; align-items:center; gap:6px;}
.phase-live::before{content:''; width:6px; height:6px; border-radius:50%; background:#22c55e; animation:nodeGlow 1.6s ease-in-out infinite;}
.phase-svg{width:100%; height:auto; margin:14px 0 6px; overflow:visible;}
.phase-track{fill:none; stroke:var(--line); stroke-width:2;}
.phase-trace{
  fill:none; stroke:var(--blue-bright); stroke-width:2;
  stroke-dasharray:320; stroke-dashoffset:calc(320 - 320 * var(--phase,0));
  filter:drop-shadow(0 0 4px rgba(46,111,255,0.8));
  transition:stroke-dashoffset .5s ease;
}
.phase-n{fill:var(--bg); stroke:var(--line); stroke-width:2; transition:all .35s;}
.phase-n.on{fill:var(--blue); stroke:var(--blue-bright);}
.phase-svg text{font-family:var(--font-mono); font-size:10px; fill:var(--muted-dim);}
.phase-read{display:flex; flex-direction:column; gap:4px; margin-top:8px;}
.phase-read span{font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--blue-bright);}
.phase-read strong{font-family:var(--font-display); font-size:22px; font-weight:600;}
.phase-bar{margin:14px 0 18px; height:3px; background:var(--line); border-radius:2px; overflow:hidden;}
.phase-bar span{display:block; height:100%; width:100%; background:var(--blue-bright); transform:scaleX(var(--phase,0)); transform-origin:left; transition:transform .5s ease;}
.phase-io{display:grid; gap:10px; border-top:1px dashed var(--line); padding-top:16px;}
.phase-io li{font-size:13px; color:var(--muted); display:grid; grid-template-columns:78px 1fr; gap:8px;}
.phase-io li span{font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; color:var(--muted-dim); padding-top:2px;}

/* FAQ: list + side card */
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:clamp(32px,6vw,80px);
  align-items:start;
}
.faq-list{max-width:none;}
.faq-side{position:sticky; top:110px; display:grid; gap:16px;}
.term{
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(7,10,15,0.92);
  overflow:hidden;
}
.term-head{
  display:flex; align-items:center; gap:6px;
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-elevated);
}
.term-head span{width:8px; height:8px; border-radius:50%; background:var(--line);}
.term-head em{margin-left:8px; font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--muted-dim);}
.term-body{
  height:176px;
  padding:12px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.75;
  color:var(--muted);
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.term-body .ok{color:#22c55e;}
.term-body .k{color:var(--blue-bright);}
.term-body p{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.term-cursor{display:inline-block; width:7px; height:12px; background:var(--blue-bright); vertical-align:-2px; animation:nodeGlow 1s steps(2) infinite;}
.faq-ask{
  border:1px solid var(--blue-dim);
  border-radius:8px;
  padding:20px;
  background:linear-gradient(180deg, rgba(46,111,255,0.12), rgba(13,18,25,0.9));
}
.faq-ask-k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; color:var(--blue-bright);}
.faq-ask-t{font-family:var(--font-display); font-size:19px; font-weight:600; margin:8px 0 6px;}
.faq-ask-p{font-size:14px; color:var(--muted); margin-bottom:16px;}
.faq-ask-btn{background:var(--bg); color:var(--white);}

@media (max-width:1024px){
  .process-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px);}
  .faq-grid{grid-template-columns:1fr;}
  .faq-side{position:static; grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .process-grid{grid-template-columns:1fr;}
  .phase-panel{position:static;}
  .sec-meta{display:none;}
  .sec-dots{width:55%; height:110px;}
}
@media (max-width:620px){
  .faq-side{grid-template-columns:1fr;}
  .sec-tag{font-size:9.5px;}
  .sec-rule{width:28px;}
}
@media (prefers-reduced-motion: reduce){
  .p-thumb::before,.p-thumb::after{animation:none;}
}

/* Flow: auto-loop indicator (replaces the Replay button) */
.flow-loop{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
  color:var(--muted-dim);
}
.flow-loop-dot{width:6px; height:6px; border-radius:50%; background:var(--blue-bright); animation:nodeGlow 1.4s ease-in-out infinite;}