/* ============================================================
   INTOSYN AI Lab — Enterprise Intelligence
   Design system: "Controlled Intelligence"
   Palette per V1 §07 — 深墨蓝(边界/可信) 冰蓝(模型/数据流) 琥珀(人工审批/告警)
   ============================================================ */

:root{
  /* ---- LAB BLUE ----
     Matched to shlab.org.cn: deep navy ground, a blue that carries
     the brand, and an emerald-teal that only ever appears as
     atmosphere. Reads as research-grade rather than consumer AI.  */
  --navy-900:    #061529;
  --navy-800:    #0A1E38;
  --navy-700:    #102C4C;
  --blue-600:    #12539C;
  --blue-500:    #1B7FD0;
  --blue-400:    #34A0E4;
  --teal-400:    #14B8A6;

  --bg:          #061529;
  --bg-2:        #0A1E38;
  --surface:     #102943;
  --glass:       rgba(16,44,76,.55);
  --glass-line:  rgba(255,255,255,.10);

  --line:        rgba(160,196,231,.16);
  --line-strong: rgba(160,196,231,.30);
  --line-faint:  rgba(160,196,231,.08);

  /* accent slot — every existing var(--cyan) lands on the brand blue */
  --cyan:        #34A0E4;
  --cyan-dim:    #1B7FD0;
  --cyan-deep:   #12539C;
  --violet:      #12539C;
  --violet-lt:   #1B7FD0;
  --blue:        #1B7FD0;

  --amber:       #E0A33D;
  --amber-dim:   #B8801F;
  --red:         #E06B6B;
  --green:       #14B8A6;

  --ink:         #FFFFFF;
  --ink-2:       #C7D9EC;
  --ink-3:       #9BB4CE;
  --ink-4:       #7B95B2;

  --grad-brand:  linear-gradient(100deg, #14B8A6 0%, #1B7FD0 48%, #34A0E4 100%);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Outfit", "Inter", -apple-system, "PingFang SC", sans-serif;

  --maxw: 1240px;
  --gut: 40px;
  /* 3px reads as a schematic; product surfaces need real radii.
     Three tiers so chips, cards and hero containers scale together. */
  --r: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 100px;

  /* long, slow tail — the standard curve for weight without drag */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);

  /* lift, not outline: one big diffuse shadow beats six hairlines */
  --lift: 0 18px 44px -16px rgba(0,0,0,.55);
  --lift-lg: 0 28px 68px -22px rgba(0,0,0,.65);
}

/* ============================================================
   DARK ISLANDS — the technical surfaces stay obsidian.
   Redefining the same tokens inside these containers means every
   rule written for the dark build keeps working untouched; only
   the token values change as you cross the boundary.
   ============================================================ */
.panel, .arch, .sim, .hero__viz{
  --bg:          #04101F;
  --bg-2:        #061529;
  --surface:     #0D2440;
  --glass:       rgba(6,21,41,.72);
  --line:        rgba(160,196,231,.15);
  --line-strong: rgba(160,196,231,.28);
  --line-faint:  rgba(160,196,231,.08);
  --cyan:        #34A0E4;
  --cyan-dim:    #1B7FD0;
  --cyan-deep:   #12539C;
  --amber:       #E0A33D;
  --red:         #E06B6B;
  --green:       #14B8A6;
  --ink:         #FFFFFF;
  --ink-2:       #C7D9EC;
  --ink-3:       #9BB4CE;
  --ink-4:       #7B95B2;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.72;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

::selection{ background:var(--cyan); color:#0A0A0A; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2A2D33; border:2px solid var(--bg); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#3A3E45; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

section{ position:relative; }

.sec{ padding:132px 0; position:relative; }
.sec--alt{ background:
    linear-gradient(180deg, transparent, rgba(20,22,26,.55) 12%, rgba(20,22,26,.55) 88%, transparent); }

.rule{ height:1px; background:var(--line-faint); border:0; margin:0; }

/* ---------- section label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--cyan-dim); margin:0 0 22px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--cyan); opacity:.65;
}
.eyebrow--amber{ color:var(--amber); }
.eyebrow--amber::before{ background:var(--amber); }

/* ---------- headings ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.015em; line-height:1.22; }

.h-display{
  font-size:clamp(34px,5.0vw,64px); font-weight:600; line-height:1.12;
  letter-spacing:-.032em;
}
.h1{ font-size:clamp(30px,3.9vw,50px); letter-spacing:-.026em; line-height:1.16; }
.h2{ font-size:clamp(23px,2.5vw,32px); letter-spacing:-.02em; }
.h3{ font-size:19px; letter-spacing:-.012em; }

.lede{
  font-size:clamp(16px,1.35vw,19px); color:var(--ink-2); line-height:1.78;
  max-width:70ch; font-weight:350;
}
.muted{ color:var(--ink-3); }
.small{ font-size:14px; line-height:1.7; }
.mono{ font-family:var(--mono); }

.hl{ color:var(--cyan); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900; height:68px;
  display:flex; align-items:center;
  background:rgba(10,10,10,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.nav.is-stuck{
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav__in{
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:38px;
}

.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand__mark{ width:26px; height:26px; flex-shrink:0; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-size:14.5px; font-weight:600; letter-spacing:.055em; color:var(--ink);
}
.brand__sub{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  color:var(--ink-4); margin-top:4px; text-transform:none;
}

.nav__links{ display:flex; gap:30px; margin-left:auto; }
.nav__links a{
  font-size:13.5px; color:var(--ink-2); position:relative; padding:4px 0;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--cyan); transition:right .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ right:0; }

.nav__cta{
  margin-left:8px; flex-shrink:0;
  font-size:13px; padding:9px 18px;
  border:1px solid var(--line-strong); border-radius:var(--r);
  color:var(--ink); transition:all .28s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.nav__cta:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(169,184,196,.05); }

.nav__burger{ display:none; margin-left:auto; padding:8px; }
.nav__burger span{
  display:block; width:20px; height:1.5px; background:var(--ink); margin:4.5px 0;
  transition:.3s var(--ease);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--r); font-size:14.5px; font-weight:500;
  border:1px solid transparent; transition:all .3s var(--ease); cursor:pointer;
  letter-spacing:.005em; white-space:nowrap;
}
.btn--primary{
  background:var(--cyan); color:#0A0A0A; font-weight:600;
  box-shadow:0 0 0 0 rgba(169,184,196,.35);
}
.btn--primary:hover{
  background:#C6D2DA; box-shadow:0 8px 34px -8px rgba(169,184,196,.5);
  transform:translateY(-1px);
}
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--cyan-dim); color:var(--cyan); background:rgba(169,184,196,.045); }
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:132px 0 90px; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__glow{
  position:absolute; width:1100px; height:1100px; right:-260px; top:-320px;
  background:radial-gradient(circle, rgba(169,184,196,.10) 0%, rgba(169,184,196,.03) 34%, transparent 66%);
  border-radius:50%;
}
.hero__glow--2{
  left:-380px; bottom:-540px; top:auto; right:auto; width:900px; height:900px;
  background:radial-gradient(circle, rgba(217,164,65,.055) 0%, transparent 62%);
}
.hero__vignette{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.5) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}

.hero__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr; gap:64px; align-items:center; }

.hero h1{ margin-bottom:26px; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:block; }

.hero__sub{
  font-size:16px; color:var(--ink-2); line-height:1.82; max-width:46ch;
  margin:0 0 38px; font-weight:350;
}
/* The slogan carries the whole promise in two beats — it gets to be
   big, and it gets its own air. */
.slogan{
  font-family:var(--display); font-weight:500;
  font-size:clamp(19px,2.05vw,27px); line-height:1.32; letter-spacing:-.018em;
  margin:0 0 22px;
  background:linear-gradient(100deg, var(--violet-lt) 0%, var(--blue) 46%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; }

.hero__pillars{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); padding-top:26px;
}
.hero__pillar{ padding-right:18px; }
.hero__pillar dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:#4FB0EE; margin-bottom:9px;
}
.hero__pillar dd{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55; }

/* ---- hero diagram ---- */
.hero__viz{ position:relative; }
.enclave{ width:100%; height:auto; overflow:visible; }
.enclave .perim{
  fill:none; stroke:var(--cyan); stroke-width:1.2; opacity:.55;
  stroke-dasharray:1420; stroke-dashoffset:1420;
  animation:draw 2.6s var(--ease) .35s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.enclave .perim-fill{ fill:rgba(169,184,196,.028); opacity:0; animation:fadein 1.2s var(--ease) 2.2s forwards; }
@keyframes fadein{ to{ opacity:1; } }
.enclave .node{ opacity:0; animation:fadein .7s var(--ease) forwards; }
.enclave .link{
  stroke:var(--cyan); stroke-width:.9; fill:none; opacity:0;
  animation:fadein .8s var(--ease) forwards;
}
.enclave .pkt{ fill:var(--cyan); }
.enclave .blocked{ stroke:var(--red); stroke-width:1; stroke-dasharray:3 3; opacity:.6; }

/* ============================================================
   POSITIONING
   ============================================================ */
.pos{ display:grid; grid-template-columns:.9fr 1.1fr; gap:76px; align-items:start; }
.pos__quote{
  font-size:clamp(20px,2.05vw,27px); line-height:1.62; font-weight:400;
  letter-spacing:-.016em; color:var(--ink);
  padding-left:26px; border-left:2px solid var(--cyan);
}
.pos__quote em{ font-style:normal; color:var(--cyan); }
.pos__body p{ color:var(--ink-2); font-size:15.5px; line-height:1.86; margin:0 0 20px; font-weight:350; }
.pos__body p:last-child{ margin-bottom:0; }
.pos__wedge{
  margin-top:34px; padding:24px 26px; border:1px solid var(--line);
  border-left:2px solid var(--amber); background:rgba(217,164,65,.035); border-radius:0 var(--r) var(--r) 0;
}
.pos__wedge .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--amber);
  text-transform:uppercase; display:block; margin-bottom:11px;
}
.pos__wedge p{ margin:0; font-size:15px; color:var(--ink); line-height:1.72; }

/* ============================================================
   CHAIN (六步进化链)
   ============================================================ */
.chain{ margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; }
.chain__i{
  box-shadow:0 0 0 1px var(--line-faint);
  background:var(--bg); padding:38px 32px 40px; position:relative;
  transition:background .4s var(--ease); overflow:hidden;
}
.chain__i::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent); transform:scaleX(0);
  transform-origin:left; transition:transform .55s var(--ease);
}
.chain__i:hover{ background:var(--surface); }
.chain__i:hover::before{ transform:scaleX(1); }
.chain__n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--cyan-dim);
  margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.chain__n b{ color:var(--ink-4); font-weight:400; }
.chain__i h3{ margin-bottom:12px; font-size:18px; }
.chain__i p{ margin:0; font-size:14px; color:var(--ink-3); line-height:1.72; }
.chain__i .en{
  margin-top:18px; font-family:var(--mono); font-size:9px; letter-spacing:.15em;
  color:var(--ink-4); text-transform:uppercase;
}

/* ============================================================
   CAPABILITY MODULES (代表性能力模块)
   ============================================================ */
.pillar{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center;
  padding:82px 0; border-bottom:1px solid var(--line-faint);
}
.pillar:last-child{ border-bottom:0; }
.pillar--rev .pillar__txt{ order:2; }
.pillar--rev .pillar__viz{ order:1; }

.pillar__idx{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--ink-4);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.pillar__idx s{ text-decoration:none; width:30px; height:1px; background:var(--line-strong); }
.pillar__txt h3{ font-size:clamp(24px,2.3vw,31px); letter-spacing:-.022em; margin-bottom:8px; }
.pillar__en{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cyan-dim); margin-bottom:22px;
}
.pillar__txt p{ color:var(--ink-2); font-size:15.5px; line-height:1.82; margin:0 0 26px; font-weight:350; }
.pillar__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.pillar__list li{
  display:grid; grid-template-columns:5px minmax(0,1fr); column-gap:13px;
  align-items:start; font-size:14px; color:var(--ink-2); line-height:1.66;
}
.pillar__list li::before{
  content:""; grid-column:1; grid-row:1 / span 2; width:5px; height:5px; margin-top:8px;
  border:1px solid var(--cyan); background:transparent; transform:rotate(45deg);
}
.pillar__list li b,
.pillar__list li > span{ grid-column:2; min-width:0; display:block; }
.pillar__list li b{ color:var(--ink); font-weight:500; white-space:normal; line-height:1.45; margin-bottom:4px; }
.pillar__list li > span{ line-height:1.66; }

.panel{
  border:1px solid var(--line); background:linear-gradient(160deg,var(--surface) 0%, var(--bg-2) 100%);
  border-radius:var(--r-lg); overflow:hidden; position:relative;
}
.panel__bar{
  display:flex; align-items:center; gap:9px; padding:12px 17px;
  border-bottom:1px solid var(--line); background:rgba(10,10,10,.5);
}
.panel__bar .dots{ display:flex; gap:5px; }
.panel__bar .dots i{ width:7px; height:7px; border-radius:50%; background:#2A2D33; display:block; }
.panel__bar .ttl{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--ink-3);
  text-transform:uppercase; margin-left:6px;
}
.panel__bar .st{
  margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  color:var(--green); display:flex; align-items:center; gap:6px;
}
.panel__bar .st::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green); }
.panel__body{ padding:26px; }

/* ---- trace list (agentic) ---- */
.trace{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:12px; }
.trace li{
  display:grid; grid-template-columns:22px 1fr auto; gap:13px; align-items:center;
  padding:11px 0; border-bottom:1px dashed var(--line-faint); color:var(--ink-2);
}
.trace li:last-child{ border-bottom:0; }
.trace .ix{ color:var(--ink-4); font-size:10px; }
.trace .ok{ color:var(--green); font-size:10px; letter-spacing:.1em; }
.trace .esc{ color:var(--amber); font-size:10px; letter-spacing:.1em; }
.trace li.is-esc{ color:var(--ink); background:rgba(217,164,65,.05); margin:0 -12px; padding-left:12px; padding-right:12px; }

/* ---- factory pipeline ---- */
.fact{ display:flex; flex-direction:column; gap:0; }
.fact__row{
  display:grid; grid-template-columns:130px 1fr 64px; gap:16px; align-items:center;
  padding:13px 0; border-bottom:1px dashed var(--line-faint);
}
.fact__row:last-child{ border-bottom:0; }
.fact__k{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; color:var(--cyan-dim); text-transform:uppercase; }
.fact__bar{ height:3px; background:rgba(169,184,196,.1); border-radius:2px; overflow:hidden; }
.fact__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan-deep),var(--cyan)); width:0; transition:width 1.2s var(--ease); }
.fact__v{ font-family:var(--mono); font-size:11px; color:var(--ink-2); text-align:right; }

/* ---- eval table ---- */
.evl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.evl th,.evl td{ padding:9px 10px; text-align:right; border-bottom:1px solid var(--line-faint); }
.evl th:first-child,.evl td:first-child{ text-align:left; }
.evl thead th{
  font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-4); font-weight:400; padding-bottom:11px;
}
.evl td{ font-family:var(--mono); color:var(--ink-2); }
.evl td:first-child{ font-family:var(--sans); color:var(--ink-2); }
.evl .up{ color:var(--green); }
.evl .dn{ color:var(--green); }
.evl tbody tr:last-child td{ border-bottom:0; }

/* ---- boundary scan ---- */
.scan{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.scan__c{ border:1px solid var(--line); border-radius:var(--r); padding:18px; background:rgba(10,10,10,.4); }
.scan__c h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:14px; font-weight:400;
}
.scan__c pre{
  font-family:var(--mono); font-size:11px; line-height:1.85; color:var(--ink-3);
  margin:0; white-space:pre-wrap;
}
.scan__c.is-good{ border-color:rgba(127,168,140,.3); }
.scan__c.is-good pre{ color:var(--green); }
.scan__note{
  margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--ink-4); text-align:center; text-transform:uppercase;
}

/* ============================================================
   WORLD MODEL SIMULATOR
   ============================================================ */
.wm__intro{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:start;
  margin:48px 0 42px; padding-bottom:42px; border-bottom:1px solid var(--line-faint);
}
.wm__note p{ margin:0 0 18px; color:var(--ink-2); font-size:15px; line-height:1.84; font-weight:350; }
.wm__note p:last-child{ margin-bottom:0; }
.wm__note b{ color:var(--ink); font-weight:500; white-space:nowrap; }
.wm__note-sub{ color:var(--ink-3) !important; font-size:13.5px !important; }

.wm__def{
  margin:0; border:1px solid var(--line); border-left:2px solid var(--cyan);
  background:rgba(169,184,196,.03); padding:24px 26px; border-radius:0 var(--r) var(--r) 0;
}
.wm__def .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.19em; color:var(--cyan);
  text-transform:uppercase; display:block; margin-bottom:10px;
}
.wm__def p{ margin:0; font-size:14px; line-height:1.75; color:var(--ink-2); }

.sim{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.sim__head{
  padding:16px 32px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; background:rgba(10,10,10,.6);
}
.sim__head .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.sim__head .badge{
  margin-left:auto; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  padding:4px 9px; border:1px solid var(--amber); color:var(--amber); border-radius:2px;
  text-transform:uppercase;
}

.sim__ctl{ padding:30px 32px 26px; border-bottom:1px solid var(--line-faint); }
.sim__ctl .lab{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.sim__ctl .lab .n{ font-size:14.5px; color:var(--ink); font-weight:500; }
.sim__ctl .lab .d{ font-family:var(--mono); font-size:11px; color:var(--ink-4); letter-spacing:.1em; }
.sim__ctl .lab .v{
  margin-left:auto; font-family:var(--mono); font-size:22px; color:var(--cyan);
  letter-spacing:-.01em; font-weight:500;
}
.sim__ctl .lab .v small{ font-size:11px; color:var(--ink-3); margin-left:3px; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--line-strong);
  outline:none; border-radius:2px; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--cyan); cursor:grab; border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--cyan), 0 0 16px rgba(169,184,196,.5);
  transition:transform .18s var(--ease);
}
input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.14); }
input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--cyan);
  border:3px solid var(--bg); box-shadow:0 0 0 1px var(--cyan); cursor:grab;
}
.sim__scale{
  display:flex; justify-content:space-between; margin-top:11px;
  font-family:var(--mono); font-size:9.5px; color:var(--ink-4); letter-spacing:.08em;
}
.sim__derived{
  margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-faint);
  display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-3); flex-wrap:wrap;
}
.sim__derived b{ color:var(--ink); font-weight:500; white-space:nowrap; }
.sim__derived .tag{
  padding:3px 9px; border-radius:2px; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
}
.tag--ok{ background:rgba(127,168,140,.12); color:var(--green); border:1px solid rgba(127,168,140,.3); }
.tag--warn{ background:rgba(217,164,65,.12); color:var(--amber); border:1px solid rgba(217,164,65,.35); }
.tag--bad{ background:rgba(192,115,110,.12); color:var(--red); border:1px solid rgba(192,115,110,.35); }

/* axes */
.sim__axes{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.ax{ box-shadow:0 0 0 1px var(--line-faint); background:var(--bg-2); padding:24px 24px 26px; transition:background .35s var(--ease); }
.ax.is-hit{ background:rgba(192,115,110,.05); }
.ax.is-warn{ background:rgba(217,164,65,.045); }
.ax__k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:13px; display:flex; align-items:center; gap:7px;
}
.ax__k i{ width:5px; height:5px; border-radius:50%; background:var(--line-strong); transition:background .3s; }
.ax.is-hit .ax__k i{ background:var(--red); box-shadow:0 0 8px var(--red); }
.ax.is-warn .ax__k i{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
.ax__v{
  font-family:var(--mono); font-size:21px; color:var(--ink); letter-spacing:-.015em;
  margin-bottom:7px; font-weight:500; transition:color .3s;
}
.ax.is-hit .ax__v{ color:var(--red); }
.ax.is-warn .ax__v{ color:var(--amber); }
.ax__d{ font-size:11.5px; color:var(--ink-3); line-height:1.6; min-height:2.9em; }

/* rules fired */
.sim__rules{ border-top:1px solid var(--line-faint); padding:26px 32px; }
.sim__rules h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-4); font-weight:400; margin-bottom:15px;
}
.rule-i{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start;
  padding:12px 14px; margin-bottom:8px; border:1px solid var(--line-faint);
  border-radius:var(--r); background:rgba(20,22,26,.4); font-size:12.5px;
  animation:ruleIn .4s var(--ease) backwards;
}
@keyframes ruleIn{ from{ opacity:0; transform:translateY(-5px); } }
.rule-i:last-child{ margin-bottom:0; }
.rule-i.is-hard{ border-color:rgba(192,115,110,.32); background:rgba(192,115,110,.05); }
.rule-i.is-soft{ border-color:rgba(217,164,65,.28); background:rgba(217,164,65,.04); }
.rule-i__b{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 7px; border-radius:2px; white-space:nowrap; margin-top:1px;
}
.is-hard .rule-i__b{ background:var(--red); color:#1A0507; }
.is-soft .rule-i__b{ background:var(--amber); color:#1A1200; }
.rule-i__t{ color:var(--ink); line-height:1.6; }
.rule-i__t em{ font-style:normal; color:var(--ink-3); display:block; font-family:var(--mono); font-size:10.5px; margin-top:4px; letter-spacing:.04em; }
.rule-i__s{ font-family:var(--mono); font-size:10px; color:var(--ink-4); white-space:nowrap; margin-top:2px; }

/* options A/B/C */
.sim__opts{ border-top:1px solid var(--line-faint); padding:26px 32px 30px; }
.opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:14px; }
.opt{
  border:1px solid var(--line); border-radius:var(--r); padding:16px 15px;
  background:rgba(20,22,26,.5); cursor:pointer; transition:all .3s var(--ease); position:relative;
}
.opt:hover{ border-color:var(--line-strong); background:var(--surface); }
.opt.is-sel{ border-color:var(--cyan); background:rgba(169,184,196,.06); }
.opt.is-sel::after{
  content:"✓"; position:absolute; top:11px; right:12px; color:var(--cyan); font-size:12px;
}
.opt__k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--cyan-dim); margin-bottom:9px; }
.opt__t{ font-size:13.5px; color:var(--ink); margin-bottom:10px; line-height:1.5; font-weight:500; }
.opt__m{ display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.opt__m span{ display:flex; justify-content:space-between; gap:8px; }
.opt__conf{ margin-top:11px; padding-top:10px; border-top:1px dashed var(--line-faint); }
.opt__conf .bar{ height:2px; background:rgba(169,184,196,.14); border-radius:2px; overflow:hidden; margin-top:6px; }
.opt__conf .bar i{ display:block; height:100%; background:var(--cyan); }
.opt__conf .lb{ font-family:var(--mono); font-size:9px; letter-spacing:.13em; color:var(--ink-4); text-transform:uppercase; }

.sim__foot{
  border-top:1px solid var(--line); padding:18px 32px;
  display:flex; align-items:flex-start; gap:14px; background:rgba(217,164,65,.04);
  font-size:12.5px; color:var(--ink-2); flex-wrap:wrap;
}
.sim__foot .ic{ flex:0 0 14px; color:var(--amber); font-size:14px; line-height:1.6; margin-top:1px; }
.sim__foot > span:last-child{ flex:1 1 0; min-width:0; line-height:1.6; }
.sim__foot b{ color:var(--ink); font-weight:500; white-space:nowrap; }

/* ============================================================
   CASES
   ============================================================ */
.cases__ctl{ display:flex; gap:9px; flex-wrap:wrap; margin:38px 0 34px; }
.chip{
  padding:8px 16px; border:1px solid var(--line); border-radius:100px;
  font-size:12.5px; color:var(--ink-3); transition:all .25s var(--ease); cursor:pointer;
}
.chip:hover{ border-color:var(--line-strong); color:var(--ink-2); }
.chip.is-on{ border-color:var(--cyan); color:var(--cyan); background:rgba(169,184,196,.06); }
.case-legend{ margin:-16px 0 24px; color:var(--ink-4); font:500 10px/1.4 var(--mono); letter-spacing:.08em; }
.case-legend::first-letter{ color:var(--amber); }

.cgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; }
.card{
  box-shadow:0 0 0 1px var(--line-faint);
  background:var(--bg); padding:30px 28px 32px; position:relative; overflow:hidden;
  transition:background .35s var(--ease); display:flex; flex-direction:column;
  min-height:262px;
}
.card:hover{ background:var(--surface); }
.card.is-hidden{ display:none; }

.card__top{ display:flex; align-items:center; gap:9px; margin-bottom:18px; }
.card__id{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--cyan-dim); }
.card__star{ color:var(--amber); font-size:10px; }
.card__cls{
  margin-left:auto; font-family:var(--mono); font-size:8.5px; letter-spacing:.13em;
  padding:3px 8px; border-radius:2px; text-transform:uppercase; border:1px solid;
}
.cls-A{ color:var(--green); border-color:rgba(127,168,140,.35); background:rgba(127,168,140,.07); }
.cls-B{ color:var(--ink-3); border-color:var(--line); background:rgba(169,184,196,.04); }
.card h3{ font-size:17.5px; margin-bottom:11px; line-height:1.42; }
.card__d{ font-size:13.5px; color:var(--ink-3); line-height:1.7; margin:0 0 20px; flex:1; }
.card__meta{ display:flex; flex-direction:column; gap:9px; padding-top:16px; border-top:1px solid var(--line-faint); }
.card__row{ display:flex; gap:10px; font-size:11.5px; align-items:baseline; }
.card__row .k{ font-family:var(--mono); font-size:9px; letter-spacing:.13em; color:var(--ink-4); text-transform:uppercase; width:52px; flex-shrink:0; }
.card__row .v{ color:var(--ink-2); line-height:1.55; }
.card__row .k{ white-space:nowrap; }

/* ============================================================
   GOVERNANCE (口径红线)
   ============================================================ */
.gov{ margin-top:52px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.gov__head{ display:grid; grid-template-columns:180px 1fr 1fr; background:rgba(10,10,10,.6); border-bottom:1px solid var(--line); }
.gov__head div{
  padding:15px 22px; font-family:var(--mono); font-size:9.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-4);
}
.gov__head .yes{ color:var(--green); }
.gov__head .no{ color:var(--red); }
.gov__r{ display:grid; grid-template-columns:180px 1fr 1fr; border-bottom:1px solid var(--line-faint); transition:background .3s; }
.gov__r:last-child{ border-bottom:0; }
.gov__r:hover{ background:rgba(20,22,26,.5); }
.gov__r > div{ padding:19px 22px; font-size:13.5px; line-height:1.68; }
.gov__k{ color:var(--ink); font-weight:500; border-right:1px solid var(--line-faint); }
.gov__y{ color:var(--ink-2); border-right:1px solid var(--line-faint); position:relative; padding-left:40px !important; }
.gov__y::before{ content:"✓"; position:absolute; left:20px; top:19px; color:var(--green); font-size:12px; }
.gov__n{ color:var(--ink-4); position:relative; padding-left:40px !important; }
.gov__n::before{ content:"✕"; position:absolute; left:20px; top:19px; color:var(--red); font-size:11px; }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.inds{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:52px; }
.ind{ box-shadow:0 0 0 1px var(--line-faint); background:var(--bg); padding:32px 24px 34px; transition:background .35s var(--ease); }
.ind:hover{ background:var(--surface); }
.ind__ic{ margin-bottom:20px; opacity:.8; }
.ind h3{ font-size:16px; margin-bottom:10px; }
.ind p{ font-size:12.5px; color:var(--ink-3); line-height:1.7; margin:0; }
.ind__c{ margin-top:16px; font-family:var(--mono); font-size:9px; letter-spacing:.13em; color:var(--cyan-dim); }

/* ============================================================
   PATH (落地路径)
   ============================================================ */
.path{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; position:relative; }
.path::before{
  content:""; position:absolute; left:0; right:0; top:19px; height:1px;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan-deep) 75%,transparent);
  opacity:.4;
}
.step{ padding-right:32px; position:relative; }
.step__d{
  width:39px; height:39px; border-radius:50%; border:1px solid var(--cyan);
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; color:var(--cyan); margin-bottom:24px; position:relative; z-index:2;
}
.step h3{ font-size:16.5px; margin-bottom:11px; }
.step p{ font-size:13.5px; color:var(--ink-3); line-height:1.72; margin:0 0 14px; }
.step__t{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--ink-4); text-transform:uppercase; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; overflow:hidden; padding:118px 0; border-top:1px solid var(--line); }
.cta__bg{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(169,184,196,.09), transparent 68%);
}
.cta__in{ position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto; }
.cta h2{ margin-bottom:20px; }
.cta p{ color:var(--ink-2); font-size:16.5px; line-height:1.78; margin:0 0 36px; font-weight:350; }
.cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.cta__note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; color:var(--ink-4);
  text-transform:uppercase; display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
}
.cta__note span{ display:flex; align-items:center; gap:8px; }
.cta__note span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--cyan); opacity:.6; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding:68px 0 34px; }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:52px; border-bottom:1px solid var(--line-faint); }
.foot__brand .brand{ margin-bottom:20px; }
.foot__brand p{ font-size:13px; color:var(--ink-4); line-height:1.78; margin:0; max-width:34ch; }
.foot__col h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-4); font-weight:400; margin-bottom:18px;
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot__col a{ font-size:13.5px; color:var(--ink-3); transition:color .25s; }
.foot__col a:hover{ color:var(--cyan); }
.foot__bot{
  padding-top:26px; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-4); flex-wrap:wrap;
}
.foot__cities{ flex:1 1 auto; min-width:220px; text-align:center; white-space:nowrap; }

@media (max-width:720px){
  .foot__cities{ flex-basis:100%; min-width:0; order:3; white-space:normal; }
}

/* ============================================================
   REVEAL
   ============================================================ */
[data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
[data-rv].is-in{ opacity:1; transform:none; }
[data-rv-d="1"]{ transition-delay:.08s; }
[data-rv-d="2"]{ transition-delay:.16s; }
[data-rv-d="3"]{ transition-delay:.24s; }
[data-rv-d="4"]{ transition-delay:.32s; }
[data-rv-d="5"]{ transition-delay:.40s; }
[data-rv-d="6"]{ transition-delay:.48s; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-rv]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1120px){
  .hero__in{ grid-template-columns:1fr; gap:56px; }
  .hero__viz{ max-width:560px; }
  .chain{ grid-template-columns:repeat(2,1fr); }
  .cgrid{ grid-template-columns:repeat(2,1fr); }
  .inds{ grid-template-columns:repeat(3,1fr); }
  .wm__intro{ grid-template-columns:1fr; gap:32px; }
  .pos{ grid-template-columns:1fr; gap:44px; }
  .foot__top{ grid-template-columns:1fr 1fr; gap:40px; }
}

@media (max-width:900px){
  :root{ --gut:26px; }
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .sec{ padding:88px 0; }
  .pillar{ grid-template-columns:1fr; gap:40px; padding:60px 0; }
  .pillar--rev .pillar__txt{ order:0; }
  .pillar--rev .pillar__viz{ order:0; }
  .sim__axes{ grid-template-columns:repeat(2,1fr); }
  .path{ grid-template-columns:repeat(2,1fr); gap:38px 0; }
  .path::before{ display:none; }
  .gov__head,.gov__r{ grid-template-columns:1fr; }
  .gov__head{ display:none; }
  .gov__k{ border-right:0; border-bottom:1px solid var(--line-faint); background:rgba(10,10,10,.4); }
  .gov__y{ border-right:0; }
  .hero__pillars{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
}

@media (max-width:640px){
  :root{ --gut:20px; }
  body{ font-size:15px; }
  .sec{ padding:70px 0; }
  .chain{ grid-template-columns:1fr; }
  .cgrid{ grid-template-columns:1fr; }
  .inds{ grid-template-columns:1fr; }
  .opts{ grid-template-columns:1fr; }
  .scan{ grid-template-columns:1fr; }
  .sim__axes{ grid-template-columns:1fr; }
  .path{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; }
  .hero__pillars{ grid-template-columns:1fr; }
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
/* .nav creates a stacking context at z-index 900, so the burger cannot
   escape it — lift the whole bar above the overlay while the menu is open. */
.nav.is-open{ z-index:1002; background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.nav.is-open .brand__name,.nav.is-open .brand__sub{ color:var(--ink); }
.nav__burger{ position:relative; }
.nav__burger span{ transform-origin:center; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mnav{
  position:fixed; inset:0; z-index:1001; display:flex; flex-direction:column;
  justify-content:center; padding:0 var(--gut);
  background:rgba(10,10,10,.97); backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  opacity:0; visibility:hidden; transition:opacity .34s var(--ease), visibility .34s;
}
.mnav.is-open{ opacity:1; visibility:visible; }
.mnav__bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(169,184,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,184,196,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 45%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 45%, #000 10%, transparent 72%);
}
.mnav__links{ position:relative; display:flex; flex-direction:column; gap:4px; }
.mnav__links a{
  font-size:27px; font-weight:500; letter-spacing:-.02em; color:var(--ink);
  padding:13px 0; border-bottom:1px solid var(--line-faint);
  display:flex; align-items:baseline; gap:16px;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.mnav.is-open .mnav__links a{ opacity:1; transform:none; }
.mnav.is-open .mnav__links a:nth-child(1){ transition-delay:.08s; }
.mnav.is-open .mnav__links a:nth-child(2){ transition-delay:.14s; }
.mnav.is-open .mnav__links a:nth-child(3){ transition-delay:.20s; }
.mnav.is-open .mnav__links a:nth-child(4){ transition-delay:.26s; }
.mnav.is-open .mnav__links a:nth-child(5){ transition-delay:.32s; }
.mnav__links a:active{ color:var(--cyan); }
.mnav__links a i{
  font-family:var(--mono); font-size:11px; font-style:normal; letter-spacing:.14em;
  color:var(--cyan-dim); flex-shrink:0;
}
.mnav__foot{
  position:relative; margin-top:44px;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s;
}
.mnav.is-open .mnav__foot{ opacity:1; transform:none; }
.mnav__foot .btn{ width:100%; }
.mnav__foot p{
  margin:22px 0 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  color:var(--ink-4); text-transform:uppercase; line-height:2;
}
body.is-locked{ overflow:hidden; }

@media (min-width:901px){ .mnav{ display:none; } }

/* ============================================================
   DIAGRAM LEGEND — labels live OUTSIDE the graphic, never on it
   ============================================================ */
.enclave .lyr-n{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; fill:var(--ink-4);
}
.enclave .lyr-t{
  font-family:var(--mono); font-size:9.2px; letter-spacing:.15em; fill:var(--cyan-dim);
}
.enclave .lyr-d{
  font-family:var(--sans); font-size:9.6px; fill:var(--ink-3); letter-spacing:.02em;
}
.enclave .probe{ opacity:0; animation:probeIn .6s var(--ease) forwards; }
@keyframes probeIn{ to{ opacity:1; } }

.viz-key{
  list-style:none; margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:13px;
}
.viz-key li{
  display:grid; grid-template-columns:16px minmax(0, max-content) minmax(0, 1fr); gap:12px; align-items:start;
  font-size:12.5px; line-height:1.5;
}
.viz-key i{
  width:9px; height:9px; border-radius:50%; align-self:start; margin-top:.42em;
  border:1px solid currentColor; position:relative;
}
.viz-key b{
  min-width:0; font-weight:500; color:var(--ink); white-space:normal; overflow-wrap:anywhere; font-size:13px;
}
.viz-key span{ min-width:0; color:var(--ink-3); font-size:12px; overflow-wrap:anywhere; }
.k-block{ color:var(--red); }
.k-block i::after{
  content:""; position:absolute; inset:2px; background:currentColor; border-radius:50%; opacity:.5;
}
.k-out{ color:var(--cyan); }
.k-out i::after{
  content:""; position:absolute; inset:2px; background:currentColor; border-radius:50%;
}
.k-human{ color:var(--amber); }
.k-human i::after{
  content:""; position:absolute; inset:2px; background:currentColor; border-radius:50%;
}

/* ============================================================
   ANIMATED PANEL DIAGRAMS
   ============================================================ */
/* port scan: probes fire, hit the wall, die */
.scanviz{ position:relative; }
.scanviz .beam{
  stroke:var(--red); stroke-width:1.1; stroke-dasharray:2 3; opacity:0;
}
.is-live .scanviz .beam{ animation:beam 2.8s var(--ease) infinite; }
.is-live .scanviz .beam:nth-of-type(2){ animation-delay:.35s; }
.is-live .scanviz .beam:nth-of-type(3){ animation-delay:.7s; }
.is-live .scanviz .beam:nth-of-type(4){ animation-delay:1.05s; }
@keyframes beam{
  0%{ opacity:0; transform:translateX(-16px); }
  35%{ opacity:.85; transform:translateX(0); }
  55%{ opacity:.85; }
  70%{ opacity:0; transform:translateX(4px); }
  100%{ opacity:0; transform:translateX(4px); }
}
.scanviz .wall{ stroke:var(--cyan); stroke-width:1.4; }
.scanviz .bounce{ opacity:0; }
.is-live .scanviz .bounce{ animation:bounce 2.8s var(--ease) infinite; }
@keyframes bounce{
  0%,30%{ opacity:0; } 42%{ opacity:1; } 62%{ opacity:0; } 100%{ opacity:0; }
}

/* agent trace: steps type in sequentially */
.trace li{ opacity:0; transform:translateX(-6px); }
.is-live .trace li{ animation:traceIn .45s var(--ease) forwards; }
.is-live .trace li:nth-child(1){ animation-delay:.10s; }
.is-live .trace li:nth-child(2){ animation-delay:.28s; }
.is-live .trace li:nth-child(3){ animation-delay:.46s; }
.is-live .trace li:nth-child(4){ animation-delay:.64s; }
.is-live .trace li:nth-child(5){ animation-delay:.82s; }
.is-live .trace li:nth-child(6){ animation-delay:1.06s; }
.is-live .trace li:nth-child(7){ animation-delay:1.28s; }
.is-live .trace li:nth-child(8){ animation-delay:1.50s; }
@keyframes traceIn{ to{ opacity:1; transform:none; } }
.trace .ok,.trace .esc{ opacity:0; }
.is-live .trace .ok,.is-live .trace .esc{ animation:tick .3s var(--ease) forwards; }
.is-live .trace li:nth-child(1) .ok{ animation-delay:.34s; }
.is-live .trace li:nth-child(2) .ok{ animation-delay:.52s; }
.is-live .trace li:nth-child(3) .ok{ animation-delay:.70s; }
.is-live .trace li:nth-child(4) .ok{ animation-delay:.88s; }
.is-live .trace li:nth-child(5) .ok{ animation-delay:1.06s; }
.is-live .trace li:nth-child(6) .esc{ animation-delay:1.34s; }
.is-live .trace li:nth-child(7) .esc{ animation-delay:1.56s; }
.is-live .trace li:nth-child(8) .ok{ animation-delay:1.78s; }
@keyframes tick{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .trace li,.trace .ok,.trace .esc,.scanviz .beam,.scanviz .bounce{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .enclave .human{ animation:none; }
}

/* ============================================================
   DEPLOYMENT ARCHITECTURE DIAGRAM
   Rule: every label sits inside its own padded box or in the
   HTML legend. No text is ever drawn over a stroke or edge.
   ============================================================ */
.arch{ margin-top:52px; }
.archviz{ width:100%; height:auto; overflow:visible; }

.archviz .a-perim-fill{ fill:rgba(169,184,196,.022); opacity:0; animation:fadein 1s var(--ease) 1.4s forwards; }
.archviz .a-perim{
  fill:none; stroke:var(--cyan); stroke-width:1.2; opacity:.5;
  stroke-dasharray:2320; stroke-dashoffset:2320;
}
.is-live .archviz .a-perim{ animation:draw 2.2s var(--ease) .2s forwards; }
.archviz .a-corner{ opacity:0; }
.is-live .archviz .a-corner{ animation:fadein .6s var(--ease) 1.5s forwards; }

.archviz .a-band{ opacity:0; }
.is-live .archviz .a-band{ animation:bandIn .7s var(--ease) forwards; }
@keyframes bandIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.archviz .a-band > rect{ fill:rgba(20,22,26,.55); stroke:rgba(169,184,196,.2); stroke-width:.9; }

.archviz .a-bt{
  font-family:var(--sans); font-size:14px; font-weight:600; fill:var(--ink);
  letter-spacing:.02em;
}
.archviz .a-be{
  font-family:var(--mono); font-size:8.4px; letter-spacing:.2em; fill:var(--cyan-dim);
}
.archviz .a-cell > rect{ fill:rgba(10,10,10,.6); stroke:rgba(169,184,196,.16); stroke-width:.8; }
.archviz .a-cell--warn > rect{ stroke:rgba(217,164,65,.32); fill:rgba(217,164,65,.05); }
.archviz .a-ct{
  font-family:var(--sans); font-size:11px; font-weight:500; fill:var(--ink);
  text-anchor:middle;
}
.archviz .a-ct--warn{ fill:var(--amber); }
.archviz .a-cd{
  font-family:var(--sans); font-size:9.2px; fill:var(--ink-3); text-anchor:middle;
}

.archviz .a-spine{ stroke:var(--cyan); stroke-width:1; opacity:0; }
.is-live .archviz .a-spine{ animation:fadein .8s var(--ease) 1.6s forwards; opacity:.4; }
.archviz .a-pkt{ fill:var(--cyan); }

.archviz .a-side{ opacity:0; }
.is-live .archviz .a-side{ animation:fadein .7s var(--ease) forwards; }

.archviz .a-beam{ stroke:var(--red); stroke-width:1.2; stroke-dasharray:3 4; opacity:0; }
.is-live .archviz .a-beam{ animation:archBeam 3.2s var(--ease) 2.4s infinite; }
@keyframes archBeam{
  0%{ opacity:0; transform:translateX(-14px); }
  30%{ opacity:.9; transform:translateX(0); }
  52%{ opacity:.9; }
  66%{ opacity:0; transform:translateX(6px); }
  100%{ opacity:0; transform:translateX(6px); }
}
.archviz .a-bounce{ opacity:0; }
.is-live .archviz .a-bounce{ animation:archBounce 3.2s var(--ease) 2.4s infinite; }
@keyframes archBounce{ 0%,32%{ opacity:0; } 44%{ opacity:1; } 62%{ opacity:0; } 100%{ opacity:0; } }

.archviz .a-out{ stroke:var(--cyan); stroke-width:1.1; stroke-dasharray:3 4; opacity:.55; }
.archviz .a-link{ stroke:rgba(169,184,196,.3); stroke-width:1; fill:none; }
.archviz .a-sys > rect{ fill:rgba(20,22,26,.5); stroke:rgba(169,184,196,.18); stroke-width:.9; }
.archviz .a-st{
  font-family:var(--sans); font-size:11px; fill:var(--ink-2); text-anchor:middle;
}

.archviz .a-hlink{ stroke:var(--amber); stroke-width:1.1; stroke-dasharray:3 4; opacity:.45; }
.archviz .a-human{ fill:rgba(217,164,65,.05); stroke:rgba(217,164,65,.4); stroke-width:1; }
.archviz .a-hdot{ fill:#0A0A0A; stroke:var(--amber); stroke-width:1.3; }

.archviz .a-ht{
  font-family:var(--sans); font-size:12.5px; font-weight:500; fill:var(--amber);
}
.archviz .a-hd{
  font-family:var(--sans); font-size:10.4px; fill:var(--ink-3);
}

.arch__key{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px;
  margin-top:34px; padding-top:24px;
}

/* Keep each architecture note on one editorial axis: the marker sits at the
   heading, while the supporting sentence starts beneath the same text edge. */
.arch__key li{
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  gap:0 12px;
  align-items:start;
}
.arch__key li i{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:start;
  margin-top:.52em;
}
.arch__key li b,
.arch__key li span{
  grid-column:2;
  min-width:0;
}
.arch__key li b{
  display:block;
  margin-bottom:4px;
  white-space:normal;
  line-height:1.45;
}
.arch__key li span{
  display:block;
  line-height:1.55;
}

@media (max-width:900px){
  .arch{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .archviz{ min-width:760px; }
  .arch__key{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .archviz .a-perim{ stroke-dashoffset:0; }
  .archviz .a-perim-fill,.archviz .a-corner,.archviz .a-band,.archviz .a-side,.archviz .a-spine{
    opacity:1 !important; animation:none !important; transform:none !important;
  }
  .archviz .a-beam,.archviz .a-bounce{ opacity:.7 !important; animation:none !important; }
}

/* ---------- World Model graph ---------- */
.wmviz .w-edge path{ stroke:var(--cyan); stroke-opacity:.2; stroke-width:1; }
.wmviz .w-node{ opacity:0; }
.is-live .wmviz .w-node{ animation:fadein .6s var(--ease) forwards; }
.wmviz circle{ fill:#0A0A0A; }
.wmviz .n-evt{ stroke:var(--cyan); stroke-width:1.5; }
.wmviz .n-c{ stroke:var(--cyan); stroke-width:1.2; }
.wmviz .n-bad{ stroke:var(--red); stroke-width:1.5; }
.wmviz .n-warn{ stroke:var(--amber); stroke-width:1.5; }
.wmviz .n-human{ stroke:var(--amber); stroke-width:1.4; }

.wmviz .w-l{
  font-family:var(--sans); font-size:10.5px; fill:var(--ink-2); letter-spacing:.02em;
}
.wmviz .w-l--c{ text-anchor:middle; }
.wmviz .w-l--bad{ fill:var(--red); }
.wmviz .w-l--warn{ fill:var(--amber); }

/* ============================================================
   PHASE-LOCKED DIAGRAM CHOREOGRAPHY
   All loops share an 8s modulus. A packet's arrival time at a
   node is the node's activation delay, so the motion reads as
   cause-and-effect rather than several independent loops.
     t=1s band1 · t=3s band2 · t=5s band3 · t=7s band4
     t=7.6s human gate (escalation lands)
     t=2s + t=6s external probe intercepted
   ============================================================ */

/* ---- layer activation: fires as the packet passes through ---- */
@keyframes layerHit{
  0%,  6%  { stroke-opacity:.2;  fill-opacity:1; }
  9%       { stroke-opacity:.95; }
  22%      { stroke-opacity:.2;  }
  100%     { stroke-opacity:.2;  }
}
/* Delays are the packet's arrival times, not round numbers: with five
   bands the spine runs 66→676 and hits centres at 10/30/50/70/90% of
   an 8s cycle that begins at 2s. Change the path and these must move
   with it, or the pulse fires where nothing is arriving. */
/* The hit time lives on the band itself: nth-of-type counts sibling
   <g> elements, and a non-band <g> earlier in the SVG shifts every
   index by one — which is exactly how the pulse ends up firing on
   the wrong layer. */
.is-live .archviz .a-band > rect{ animation:layerHit 8s var(--ease) var(--hit,0s) infinite; }

.is-live .enclave .node:nth-of-type(1) rect{ animation:layerHit 8s var(--ease) 4s infinite; }
.is-live .enclave .node:nth-of-type(2) rect{ animation:layerHit 8s var(--ease) 6s infinite; }
.is-live .enclave .node:nth-of-type(3) rect{ animation:layerHit 8s var(--ease) 8s infinite; }
.is-live .enclave .node:nth-of-type(4) rect{ animation:layerHit 8s var(--ease) 10s infinite; }

/* ---- perimeter: very low-frequency "still in force" breath ---- */
@keyframes perimHold{
  0%,100%{ stroke-opacity:.34; }
  50%    { stroke-opacity:.62; }
}
.is-live .archviz .a-perim{ animation:draw 2.2s var(--ease) .2s forwards, perimHold 8s var(--ease) 2.6s infinite; }
.is-live .enclave .perim{ animation:draw 2.6s var(--ease) .35s forwards, perimHold 8s var(--ease) 3.2s infinite; }

/* ---- probe intercept: approach → strike → damped rebound → dissipate ---- */
@keyframes probeStrike{
  0%      { opacity:0; transform:translateX(-26px); }
  10%     { opacity:.9; transform:translateX(-14px); }
  22%     { opacity:1;  transform:translateX(0); }
  27%     { opacity:.85; transform:translateX(-7px); }
  34%     { opacity:0;  transform:translateX(-11px) scaleX(.4); }
  100%    { opacity:0;  transform:translateX(-26px) scaleX(.4); }
}
.is-live .archviz .a-beam{ animation:probeStrike 8s var(--ease) 2s infinite; transform-origin:right center; }
@keyframes wallFlash{
  0%,20%{ opacity:0; } 23%{ opacity:1; } 33%{ opacity:0; } 100%{ opacity:0; }
}
.is-live .archviz .a-bounce{ animation:wallFlash 8s var(--ease) 2s infinite; }
.is-live .scanviz .beam{ animation:probeStrike 8s var(--ease) 2s infinite; transform-origin:right center; }
.is-live .scanviz .beam:nth-of-type(2){ animation-delay:2.12s; }
.is-live .scanviz .beam:nth-of-type(3){ animation-delay:2.24s; }
.is-live .scanviz .beam:nth-of-type(4){ animation-delay:2.36s; }
.is-live .scanviz .bounce{ animation:wallFlash 8s var(--ease) 2.2s infinite; }

/* ---- human gate: slowest of all; waits for the escalation ---- */
@keyframes gateWait{
  0%,  82% { stroke-opacity:.4;  }
  88%      { stroke-opacity:1; filter:drop-shadow(0 0 6px rgba(217,164,65,.55)); }
  96%      { stroke-opacity:.4;  filter:none; }
  100%     { stroke-opacity:.4;  }
}
.is-live .archviz .a-hdot{ animation:gateWait 8s var(--ease) 2s infinite; }
.is-live .archviz .a-human{ animation:gateWait 8s var(--ease) 2s infinite; }
.is-live .enclave .human{ animation:gateWait 8s var(--ease) 3s infinite; }
.is-live .wmviz .n-human{ animation:gateWait 8s var(--ease) infinite; }

/* ---- world-model nodes light up as their branch packet arrives ---- */
@keyframes nodeHit{
  0%,   28%{ stroke-opacity:.55; }
  34%      { stroke-opacity:1; }
  48%      { stroke-opacity:.55; }
  100%     { stroke-opacity:.55; }
}
.is-live .wmviz .n-c:nth-of-type(1){ animation:nodeHit 8s var(--ease) infinite; }
.is-live .wmviz .n-bad{ animation:nodeHit 8s var(--ease) 1.2s infinite; }
.is-live .wmviz .n-warn{ animation:nodeHit 8s var(--ease) 5.2s infinite; }

/* ---- packet core: subtle charge, never a firework ---- */
.archviz .a-pkt,.enclave .pkt{ opacity:.9; }

@media (prefers-reduced-motion:reduce){
  .is-live .archviz .a-band > rect,
  .is-live .enclave .node rect,
  .is-live .archviz .a-perim,
  .is-live .enclave .perim,
  .is-live .archviz .a-beam,
  .is-live .archviz .a-bounce,
  .is-live .scanviz .beam,
  .is-live .scanviz .bounce,
  .is-live .archviz .a-hdot,
  .is-live .archviz .a-human,
  .is-live .enclave .human,
  .is-live .wmviz .n-human,
  .is-live .wmviz .n-c,
  .is-live .wmviz .n-bad,
  .is-live .wmviz .n-warn{ animation:none !important; }
  .archviz .a-perim,.enclave .perim{ stroke-dashoffset:0 !important; }
}

/* ============================================================
   SURFACE SYSTEM — glass panels over the chrome ground.
   All tokens live in the single :root at the top of this file;
   this block used to redefine them and silently won, which is
   exactly how a palette swap goes half-applied.
   ============================================================ */

/* ---------- global mesh background ----------
   Radial gradients are already soft, so no filter:blur() is used —
   blurring three ~1000px layers every frame pegs the compositor for
   a result the gradient stops give away for free.                */
.bg-mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  mask-image:radial-gradient(115% 95% at 50% 32%, #000 32%, transparent 88%);
  -webkit-mask-image:radial-gradient(115% 95% at 50% 32%, #000 32%, transparent 88%);
}
.orb{ position:absolute; display:block; border-radius:50%; }
.orb--violet{
  width:1180px; height:1180px; left:-18%; top:-30%;
  background:radial-gradient(circle closest-side,
    rgba(83,104,120,.34) 0%, rgba(83,104,120,.17) 34%,
    rgba(83,104,120,.05) 62%, transparent 82%);
}
.orb--blue{
  width:1320px; height:1320px; right:-24%; top:10%;
  background:radial-gradient(circle closest-side,
    rgba(110,132,150,.28) 0%, rgba(110,132,150,.13) 36%,
    rgba(110,132,150,.04) 64%, transparent 84%);
}
.orb--cyan{
  width:1040px; height:1040px; left:32%; bottom:-30%;
  background:radial-gradient(circle closest-side,
    rgba(169,184,196,.16) 0%, rgba(169,184,196,.06) 38%,
    rgba(169,184,196,.02) 66%, transparent 84%);
}

/* fine grain — plain opacity, no blend mode (overlay forces an
   extra full-viewport composite pass on every scroll)            */
.bg-grain{
  position:absolute; inset:0; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* every section floats above the mesh */
.nav,.hero,section,.foot,.cta{ position:relative; z-index:1; }

/* ---------- display type ---------- */
.h-display,.h1{ font-family:var(--display); letter-spacing:-.03em; }
.brand__name{ font-family:var(--display); font-weight:600; letter-spacing:.05em; }

/* ---------- brand gradient text ---------- */
.hl{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- hero sheen ---------- */
.hero__sheen{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 22% 25%, rgba(83,104,120,.22), transparent 42%),
    radial-gradient(circle at 82% 56%, rgba(110,132,150,.18), transparent 46%);
  mask-image:radial-gradient(85% 70% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(85% 70% at 50% 40%, #000, transparent 78%);
}
.hero__glow,.hero__glow--2{ display:none; }

/* ---------- glass surfaces ---------- */
.panel,.sim,.gov,.arch,.wm__def,.pos__wedge{
  background:var(--glass);
  box-shadow:inset 0 1px var(--glass-line), 0 18px 48px -24px rgba(6,12,24,.9);
}
.arch{ border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px 30px; }

/* cards stay cheap — translucent fill + top highlight, no blur */
.card,.ind,.chain__i,.ax{
  background:rgba(10,22,40,.5);
  box-shadow:0 0 0 1px var(--line-faint), inset 0 1px var(--glass-line);
}
.card:hover,.ind:hover,.chain__i:hover{
  background:rgba(16,33,58,.72);
  box-shadow:0 0 0 1px rgba(169,184,196,.2), inset 0 1px rgba(255,255,255,.08);
}
.ax{ background:rgba(8,18,34,.6); }
.ax.is-hit{ background:rgba(60,14,20,.42); }
.ax.is-warn{ background:rgba(58,40,6,.38); }

.sec--alt{
  background:linear-gradient(180deg, transparent, rgba(20,22,26,.42) 12%, rgba(20,22,26,.42) 88%, transparent);
}

/* ---------- buttons: brand gradient + violet-tinted lift ---------- */
.btn--primary{
  background:var(--grad-brand); color:#0E0F11;
  box-shadow:0 10px 34px -12px rgba(99,60,237,.5);
}
.btn--primary:hover{
  background:var(--grad-brand); filter:brightness(1.08);
  box-shadow:0 15px 46px -14px rgba(99,60,237,.62);
  transform:translateY(-1px);
}
.nav.is-stuck{ background:rgba(10,10,10,.7); }

/* ---------- accents that pick up the new violet ---------- */
.eyebrow::before{ background:var(--grad-brand); opacity:.9; }
.pos__quote{ border-left-color:transparent; border-image:var(--grad-brand) 1; }
.step__d{ border-color:rgba(130,150,168,.55); color:var(--violet-lt); }
.pipe{ background:rgba(22,24,28,.55); }

@media (prefers-reduced-motion:reduce){
}
@media (max-width:640px){
  .orb--violet{ width:600px; height:600px; }
  .orb--blue{ width:640px; height:640px; }
  .orb--cyan{ width:520px; height:520px; }
  .arch{ padding:20px 14px; }
}

/* ============================================================
   HERO BALANCE — pillars pushed to the bottom of the fold
   Two auto margins split the leftover height: one above the
   copy block, one above the pillars, so the copy sits optically
   centred while the pillars anchor the bottom edge.
   ============================================================ */
.hero__in{ align-items:stretch; }
.hero__txt{ display:flex; flex-direction:column; }
.pipe{ margin-top:auto; }
.hero__actions{ margin-bottom:0; }
.hero__pillars{ margin-top:auto; padding-top:38px; }
.hero__viz{ display:flex; flex-direction:column; justify-content:center; }

@media (max-width:1120px){
  .pipe{ margin-top:0; }
  .hero__pillars{ margin-top:44px; }
}

/* ============================================================
   GOBAN — the background grid is a board, and a game is playing
   Corner-first placement follows real opening theory
   (金角银边草肚皮), which also keeps stones clear of the centre
   column where the copy lives.
   ============================================================ */
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(169,184,196,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,184,196,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 50% 38%, #000 18%, transparent 82%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 38%, #000 18%, transparent 82%);
}

/* Stones are ambience, not content. At full strength they compete
   with body copy in the text-only sections, so the whole layer is
   held back — the game still reads, the paragraphs still win. */
.bg-goban{ position:absolute; inset:0; opacity:.45; }

.stone{
  position:absolute; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border-radius:50%;
  /* Visible is the base state — the entrance is an animation with
     `backwards` fill, so a throttled or disabled animation can never
     strand a stone at opacity 0. */
  opacity:1; transform:scale(1);
  animation:stoneIn 1.2s var(--ease) backwards;
}
@keyframes stoneIn{
  0%  { opacity:0; transform:scale(.5); }
  60% { opacity:1; }
  100%{ opacity:1; transform:scale(1); }
}
.stone.is-lift{ animation:stoneOut 1.4s var(--ease) forwards; }
@keyframes stoneOut{
  0%  { opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.72); }
}

/* black stone — reads as weight, with a cool rim light */
.stone--b{
  background:
    radial-gradient(circle at 34% 30%, rgba(169,184,196,.30) 0%, rgba(26,28,32,.85) 46%, rgba(10,10,10,.95) 100%);
  box-shadow:0 0 0 1px rgba(169,184,196,.16), 0 3px 9px -3px rgba(0,0,0,.85);
}
/* white stone — never pure white; it would punch through the copy */
.stone--w{
  background:
    radial-gradient(circle at 34% 30%, rgba(229,228,226,.62) 0%, rgba(169,184,196,.40) 48%, rgba(130,150,168,.30) 100%);
  box-shadow:0 0 0 1px rgba(229,228,226,.22), 0 3px 9px -3px rgba(0,0,0,.6);
}

/* the ring that marks the stone just played */
.stone__ping{
  position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(169,184,196,.5); opacity:0;
  animation:stonePing 1.7s var(--ease) forwards;
}
@keyframes stonePing{
  0%  { opacity:.8; transform:scale(.5); }
  70% { opacity:0;  transform:scale(1.55); }
  100%{ opacity:0;  transform:scale(1.55); }
}

@media (prefers-reduced-motion:reduce){
  .stone,.stone__ping{ animation:none !important; }
  .stone__ping{ opacity:0; }
}
@media (max-width:640px){
  .stone{ width:12px; height:12px; margin:-6px 0 0 -6px; }
}

/* star points — the nine marked intersections of a real board */
.bg-stars{ position:absolute; inset:0; }
.star{
  position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:rgba(169,184,196,.16);
}

/* ============================================================
   MOTION PASS — load, scroll and pointer response
   ============================================================ */

/* ---- hero headline: masked line reveal on load ---- */
.hero h1 .ln{ overflow:hidden; }
.hero h1 .ln > span{
  display:block;
  animation:lineUp 1.05s var(--ease) backwards;
}
.hero h1 .ln:nth-child(1) > span{ animation-delay:.12s; }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.26s; }
@keyframes lineUp{
  from{ transform:translateY(105%); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
.pipe,
.slogan,
.hero__sub,
.hero__actions,
.hero__pillars{ animation:riseIn .9s var(--ease) backwards; }
.pipe{ animation-delay:.05s; }
.hero__sub{ animation-delay:.42s; }
.slogan{ animation-delay:.50s; }
.hero__actions{ animation-delay:.58s; }
.hero__pillars{ animation-delay:.70s; }
@keyframes riseIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---- scroll progress, hairline under the nav ---- */
.nav__progress{
  position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--violet-lt), var(--blue), var(--cyan));
  opacity:0; transition:opacity .4s var(--ease);
}
.nav.is-stuck .nav__progress{ opacity:.9; }

/* ---- nav link tracks the section you are in ---- */
.nav__links a.is-here{ color:var(--ink); }
.nav__links a.is-here::after{ right:0; }

/* ---- eyebrow rule draws itself when revealed ---- */
.eyebrow::before{ transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .1s; }
[data-rv].is-in .eyebrow::before,
.is-in .eyebrow::before,
.eyebrow.is-in::before{ transform:scaleX(1); }

/* ---- cards lift, and the accent line sweeps ---- */
.card,.chain__i,.ind,.step{ transition:background .35s var(--ease), transform .35s var(--ease); }
.card:hover,.chain__i:hover,.ind:hover{ transform:translateY(-3px); }

/* ---- counters hold their width so the layout cannot jitter ---- */
.evl td{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .hero h1 .ln > span,
  .pipe,.slogan,.hero__sub,.hero__actions,.hero__pillars{ animation:none; }
  .card:hover,.chain__i:hover,.ind:hover{ transform:none; }
  .eyebrow::before{ transition:none; transform:scaleX(1); }
}

/* ============================================================
   IMPACT — the before/after table, the single most persuasive
   asset in the source material
   ============================================================ */
.impact{ margin-top:56px; border-top:1px solid var(--line); }
.impact__r{
  display:grid; grid-template-columns:1.15fr 2fr .5fr 1.3fr;
  gap:34px; align-items:center;
  padding:30px 0; border-bottom:1px solid var(--line-faint);
  transition:background .35s var(--ease);
}
.impact__r:hover{ background:rgba(83,104,120,.035); }
.impact__task h3{ font-size:17px; margin-bottom:7px; letter-spacing:-.012em; }
.impact__task .c{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  color:var(--ink-4); text-transform:uppercase;
}
.impact__bars{ display:flex; flex-direction:column; gap:11px; }
.impact__bar{ display:grid; grid-template-columns:38px 1fr auto; gap:13px; align-items:center; }
.impact__bar .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  color:var(--ink-4); text-transform:uppercase;
}
.impact__track{ height:5px; border-radius:3px; background:rgba(169,184,196,.09); overflow:hidden; }
.impact__track i{
  display:block; height:100%; width:0; border-radius:3px;
  transition:width 1.15s var(--ease);
}
.impact__r.is-in .impact__track i{ width:var(--w); }
.impact__bar--now .impact__track i{ background:linear-gradient(90deg, rgba(192,115,110,.55), rgba(255,140,120,.42)); }
.impact__bar--aft .impact__track i{ background:linear-gradient(90deg, var(--blue), var(--cyan)); }
.impact__bar .v{
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  white-space:nowrap; min-width:82px; text-align:right;
}
.impact__cut{
  font-family:var(--mono); font-size:21px; font-weight:500;
  background:linear-gradient(120deg, var(--blue), var(--cyan));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-align:center; letter-spacing:-.02em; white-space:nowrap;
}
.impact__cut small{
  display:block; font-size:9px; letter-spacing:.15em; margin-top:3px;
  -webkit-text-fill-color:var(--ink-4); color:var(--ink-4);
}
.impact__human{ font-size:13px; color:var(--ink-3); line-height:1.66; }
.impact__human b{ color:var(--ink-2); font-weight:500; display:block; margin-bottom:5px;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.impact__note{
  margin-top:26px; padding:18px 22px; border-radius:var(--r);
  border:1px solid rgba(217,164,65,.24); background:rgba(217,164,65,.045);
  font-size:13.5px; color:var(--ink-2); line-height:1.72;
  display:flex; gap:13px; align-items:flex-start;
}
.impact__note .ic{ color:var(--amber); flex-shrink:0; }

/* ============================================================
   WHY PRIVATE — three business reasons, not three features
   ============================================================ */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-faint); border:1px solid var(--line-faint);
  border-radius:var(--r-lg); overflow:hidden; margin-top:52px; }
.why__c{ background:var(--bg); padding:38px 34px 40px; position:relative; transition:background .35s var(--ease); }
.why__c:hover{ background:var(--surface); }
.why__n{
  font-family:var(--mono); font-size:34px; font-weight:500; line-height:1;
  background:linear-gradient(140deg, var(--violet-lt), var(--blue));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  margin-bottom:22px; opacity:.9;
}
.why__c h3{ font-size:18.5px; margin-bottom:14px; line-height:1.42; }
.why__c p{ font-size:14px; color:var(--ink-3); line-height:1.78; margin:0 0 14px; }
.why__c p:last-child{ margin-bottom:0; }
.why__c b{ color:var(--ink-2); font-weight:500; }
.why__tag{
  display:inline-block; margin-top:8px; padding:5px 11px;
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  color:#4FB0EE; text-transform:uppercase;
}

/* ============================================================
   FAQ — native disclosure, no JS
   ============================================================ */
.faq{ margin-top:52px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line-faint); }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 46px 26px 0;
  position:relative; font-size:16.5px; color:var(--ink);
  font-weight:500; letter-spacing:-.008em; line-height:1.5;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--cyan); }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  margin-top:-6px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px); transform-origin:center;
  transition:transform .35s var(--ease), border-color .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); border-color:var(--cyan); }
.faq summary .q{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em;
  color:var(--ink-4); margin-right:14px;
}
.faq__a{ padding:0 46px 30px 0; animation:faqIn .4s var(--ease); }
.faq__a p{ margin:0 0 14px; font-size:14.5px; color:var(--ink-2); line-height:1.85; font-weight:350; }
.faq__a p:last-child{ margin-bottom:0; }
.faq__a b{ color:var(--ink); font-weight:500; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

@media (max-width:1120px){
  .impact__r{ grid-template-columns:1fr 1.6fr; gap:20px 28px; }
  .impact__cut{ text-align:left; }
  .why{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .impact__r{ grid-template-columns:1fr; gap:18px; padding:26px 0; }
  .impact__cut{ font-size:19px; }
  .faq summary{ font-size:15.5px; padding-right:38px; }
}

/* ============================================================
   COMMITMENTS — the commercial posture, not the technical claims
   ============================================================ */
.vow{ max-width:960px; margin:0 auto 66px; }
.vow__hd{
  text-align:center; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4);
  margin-bottom:30px;
}
.vow__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-faint); border:1px solid var(--line-faint); border-radius:var(--r-lg); overflow:hidden; }
.vow__i{
  background:rgba(20,22,26,.5); padding:22px 24px; display:flex; gap:14px;
  align-items:flex-start; text-align:left; transition:background .3s var(--ease);
}
.vow__i:hover{ background:rgba(20,22,26,.85); }
.vow__x{
  flex-shrink:0; width:19px; height:19px; border-radius:50%; margin-top:2px;
  border:1px solid rgba(192,115,110,.4); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.vow__i p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.7; }
.vow__i b{ color:var(--ink); font-weight:500; }
.vow__quote{
  margin-top:34px; text-align:center;
  font-size:clamp(17px,1.7vw,21px); line-height:1.6; letter-spacing:-.012em;
  color:var(--ink);
}
.vow__quote em{
  font-style:normal;
  background:linear-gradient(100deg, var(--violet-lt), var(--blue), var(--cyan));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@media (max-width:760px){
  .vow__list{ grid-template-columns:1fr; }
  .vow{ margin-bottom:48px; }
}

/* ============================================================
   HERO PIPELINE — replaces the generic capability-word pill.
   It shows the agent loop actually running: a stage lights, hands
   off, and the last one hands off to a person. Locked to the same
   8s modulus as every other animation on the page, so the hero and
   the diagrams below it beat together.
   ============================================================ */
.pipe{
  display:flex; align-items:center; flex-wrap:wrap; gap:0;
  margin-bottom:34px; padding:13px 14px;
  border:1px solid var(--glass-line); border-radius:100px;
  background:var(--glass);
  width:fit-content; max-width:100%;
}
.pipe__s{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:0 8px; position:relative; white-space:nowrap;
}
.pipe__s + .pipe__s::before{
  content:""; position:absolute; left:-1px; top:50%; width:2px; height:2px;
  margin-top:-1px; border-radius:50%; background:var(--ink-4);
}
.pipe__s i{
  width:5px; height:5px; border-radius:50%; background:rgba(169,184,196,.28);
  flex-shrink:0; align-self:center;
  animation:pipeDot 8s var(--ease) infinite; animation-delay:var(--d);
}
.pipe__s b{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.13em;
  color:var(--ink-4); text-transform:uppercase;
  animation:pipeTxt 8s var(--ease) infinite; animation-delay:var(--d);
}
.pipe__s em{
  font-style:normal; font-size:10px; color:var(--ink-4); opacity:.6;
}
@keyframes pipeDot{
  0%,   14% { background:var(--cyan); box-shadow:0 0 0 3px rgba(169,184,196,.16); }
  22%, 100% { background:rgba(169,184,196,.28); box-shadow:0 0 0 0 rgba(169,184,196,0); }
}
@keyframes pipeTxt{
  0%,   14% { color:var(--ink); }
  22%, 100% { color:var(--ink-4); }
}
/* the human hand-off keeps the amber reserved for approval */
.pipe__s--h i{ animation-name:pipeDotH; }
.pipe__s--h b{ animation-name:pipeTxtH; }
@keyframes pipeDotH{
  0%,   16% { background:var(--amber); box-shadow:0 0 0 3px rgba(217,164,65,.18); }
  26%, 100% { background:rgba(169,184,196,.28); box-shadow:0 0 0 0 rgba(217,164,65,0); }
}
@keyframes pipeTxtH{
  0%,   16% { color:var(--amber); }
  26%, 100% { color:var(--ink-4); }
}

@media (prefers-reduced-motion:reduce){
  .pipe__s i, .pipe__s b{ animation:none; }
}
@media (max-width:900px){
  .pipe{ border-radius:var(--r-lg); padding:14px 12px; gap:7px 0; }
  .pipe__s{ padding:0 11px; }
  .pipe__s em{ display:none; }
  /* separators read as orphans when the row wraps — the box already groups them */
  .pipe__s + .pipe__s::before{ display:none; }
}
@media (max-width:640px){
  .pipe__s b{ font-size:9px; letter-spacing:.12em; }
  .pipe__s{ padding:0 8px; }
}

/* ============================================================
   CAPABILITY TABS — four pillars, one at a time.
   Stacked, the four ran past 3000px and readers gave up before
   the World Model. Nothing was cut; it just waits behind a tab.
   ============================================================ */
.tabs{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line-faint); border:1px solid var(--line-faint);
  border-radius:var(--r-lg); overflow:hidden; margin:52px 0 0;
}
.tab{
  background:rgba(20,22,26,.42); padding:20px 22px 22px; text-align:left;
  display:flex; flex-direction:column; gap:6px; position:relative;
  transition:background .3s var(--ease); cursor:pointer;
}
.tab::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--violet-lt), var(--blue), var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.tab:hover{ background:rgba(20,22,26,.75); }
.tab.is-on{ background:var(--glass); }
.tab.is-on::after{ transform:scaleX(1); }
.tab i{
  font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.16em;
  color:var(--ink-4); transition:color .3s var(--ease);
}
.tab b{ font-size:16px; font-weight:600; color:var(--ink-2); letter-spacing:-.012em;
  transition:color .3s var(--ease); }
.tab em{
  font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:#AC8595;
}
.tab.is-on i, .tab.is-on em{ color:var(--blue-400); }
.tab.is-on b{ color:var(--ink); }
.tab:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }

.tabpanes{ position:relative; }
.pane{ display:none; }
.pane.is-on{ display:grid; animation:paneIn .45s var(--ease); }
@keyframes paneIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.pane.pillar{ border-bottom:0; padding:60px 0 8px; }

@media (prefers-reduced-motion:reduce){
  .pane.is-on{ animation:none; }
  .tab::after{ transition:none; }
}
@media (max-width:1120px){
  .tabs{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .tabs{ grid-template-columns:repeat(2,1fr); }
  .tab{ padding:16px 16px 18px; }
  .tab b{ font-size:14.5px; }
  .tab em{ display:none; }
  .pane.pillar{ padding:40px 0 8px; }
}
@media (max-width:520px){
  .tabs{ grid-template-columns:1fr; }
}

/* ============================================================
   AURORA — hero only. Below the fold the goban takes over, so
   the two backgrounds never compete for the same pixels.
   ============================================================ */
.hero{ background:var(--bg); }
.hero__aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__aurora canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
}
/* visible only when WebGL is unavailable or the context is lost */
.hero__aurora-fb{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 26% 22%, rgba(78,44,35,.72), transparent 52%),
    radial-gradient(circle at 74% 54%, rgba(226,114,91,.30), transparent 54%),
    radial-gradient(circle at 52% 96%, rgba(255,218,185,.16), transparent 56%),
    var(--bg);
}
/* hero keeps its own faint lattice above the canvas */
.hero__bg{ z-index:1; }
.hero__in{ position:relative; z-index:2; }

/* The fixed goban sits behind everything but is held at zero while
   the hero fills the viewport — JS raises it once you scroll past. */
.bg-mesh{ opacity:var(--mesh-op, 0); transition:opacity .7s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .bg-mesh{ transition:none; }
}

/* ============================================================
   CASE GRID — six shown, six behind a button. The library is the
   proof, but twelve cards before the trust sections is a wall.
   ============================================================ */
.card.is-fold{ display:none; }
/* :not() keeps the filter authoritative — without it this rule
   outranks .is-hidden and shows cards the filter just excluded. */
.cgrid.is-open .card.is-fold:not(.is-hidden){ display:flex; animation:cardIn .42s var(--ease) backwards; }
.cgrid.is-open .card.is-fold:nth-child(8) { animation-delay:.05s; }
.cgrid.is-open .card.is-fold:nth-child(9) { animation-delay:.10s; }
.cgrid.is-open .card.is-fold:nth-child(10){ animation-delay:.15s; }
.cgrid.is-open .card.is-fold:nth-child(11){ animation-delay:.20s; }
.cgrid.is-open .card.is-fold:nth-child(12){ animation-delay:.25s; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.cases__more{ display:flex; justify-content:center; margin-top:34px; }
.cases__more .btn__arrow{ transition:transform .3s var(--ease); }
.cases__more[data-open="1"] .btn__arrow{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){
  .cgrid.is-open .card.is-fold:not(.is-hidden){ animation:none; }
}

/* ============================================================
   LIGHT BUILD — surface repaint
   ============================================================ */
body{ background:var(--bg); color:var(--ink); }

/* the obsidian islands get a real dark ground, not just tokens */
.panel, .arch, .sim{
  background:linear-gradient(160deg, #16181C 0%, #0E0F12 100%);
  border-color:rgba(169,184,196,.16);
  box-shadow:0 18px 46px -22px rgba(10,10,10,.55), inset 0 1px 0 rgba(229,228,226,.06);
}
.panel__bar, .sim__head{ background:rgba(8,9,11,.6); }
.scan__c{ background:rgba(8,9,11,.45); }
.rule-i{ background:rgba(24,26,30,.6); }
.opt{ background:rgba(24,26,30,.55); }
.opt:hover{ background:rgba(32,35,40,.8); }
.opt.is-sel{ background:rgba(169,184,196,.1); border-color:var(--cyan); }
.ax{ background:#101114; box-shadow:0 0 0 1px rgba(169,184,196,.08); }
.ax.is-hit{ background:rgba(192,115,110,.09); }
.ax.is-warn{ background:rgba(217,164,65,.08); }
.sim__foot{ background:rgba(217,164,65,.07); }
.sim__axes{ background:rgba(169,184,196,.1); }

/* light cards and grids */
.chain, .cgrid, .inds, .why, .tabs, .gov, .vow__list{
  background:var(--line-faint); border-color:var(--line);
}
.chain__i, .card, .ind, .why__c{ background:var(--surface); }
.chain__i:hover, .card:hover, .ind:hover, .why__c:hover{ background:#FFFFFF; }
.tab{ background:rgba(255,255,255,.5); }
.tab:hover{ background:rgba(255,255,255,.8); }
.tab.is-on{ background:#FFFFFF; }
.gov__head{ background:rgba(10,10,10,.04); }
.gov__r:hover{ background:rgba(255,255,255,.6); }
.vow__i{ background:rgba(255,255,255,.55); }
.vow__i:hover{ background:#FFFFFF; }
.sec--alt{ background:linear-gradient(180deg, transparent, rgba(229,228,226,.62) 12%, rgba(229,228,226,.62) 88%, transparent); }

/* nav on light */
.nav.is-stuck{
  background:rgba(237,235,232,.86);
  border-bottom-color:var(--line);
}

.btn--primary:hover{ background:#22262B; box-shadow:0 10px 30px -12px rgba(10,10,10,.5); }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); }

.foot{ background:rgba(229,228,226,.7); border-top-color:var(--line); }
.impact__r:hover{ background:rgba(255,255,255,.55); }
.impact__track{ background:rgba(10,10,10,.09); }
.impact__bar--now .impact__track i{ background:linear-gradient(90deg, rgba(168,68,62,.75), rgba(168,68,62,.45)); }

.impact__note{ background:rgba(154,110,18,.07); border-color:rgba(154,110,18,.28); }
.pos__wedge{ background:rgba(154,110,18,.05); }
.wm__def{ background:rgba(83,104,120,.06); }
.cta__bg{ background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(83,104,120,.12), transparent 68%); }

::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:rgba(10,10,10,.22); border-color:var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:rgba(10,10,10,.34); }

/* goban on light: onyx stones read, alabaster stones need an edge */
.bg-grid{
  background-image:
    linear-gradient(rgba(10,10,10,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.055) 1px, transparent 1px);
}
.star{ background:rgba(10,10,10,.2); }
.stone--b{
  background:radial-gradient(circle at 34% 30%, rgba(90,100,112,.95) 0%, rgba(18,20,24,.98) 46%, rgba(8,9,11,1) 100%);
  box-shadow:0 0 0 1px rgba(10,10,10,.2), 0 3px 9px -3px rgba(10,10,10,.5);
}
.stone--w{
  background:radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F0EFED 48%, #DCDAD7 100%);
  box-shadow:0 0 0 1px rgba(10,10,10,.22), 0 3px 9px -3px rgba(10,10,10,.35);
}
.stone__ping{ border-color:rgba(83,104,120,.55); }
.bg-goban{ opacity:.6; }

.panel .fact__k, .panel .evl thead th, .sim .opt__k, .sim .opt__conf .lb,
.sim .rule-i__s, .sim .sim__scale, .panel__bar .ttl{ color:var(--ink-3); }

/* ============================================================
   LAB BLUE SURFACES
   ============================================================ */
body{ background:var(--bg); color:var(--ink); }

.panel, .arch, .sim{
  background:linear-gradient(160deg, #0D2440 0%, #04101F 100%);
  border-color:rgba(160,196,231,.17);
  box-shadow:0 20px 52px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07);
}
.panel__bar, .sim__head{ background:rgba(4,16,31,.62); }
.scan__c{ background:rgba(4,16,31,.45); }
.rule-i{ background:rgba(16,44,76,.5); }
.opt{ background:rgba(16,44,76,.45); }
.opt:hover{ background:rgba(22,58,98,.78); }
.opt.is-sel{ background:rgba(52,160,228,.13); border-color:var(--blue-400); }
.ax{ background:#071A31; box-shadow:0 0 0 1px rgba(160,196,231,.08); }
.ax.is-hit{ background:rgba(224,107,107,.1); }
.ax.is-warn{ background:rgba(224,163,61,.09); }
.sim__foot{ background:rgba(224,163,61,.07); }
.sim__axes{ background:rgba(160,196,231,.09); }

.chain, .cgrid, .inds, .why, .tabs, .gov, .vow__list{
  background:var(--line-faint); border-color:var(--line);
}
.chain__i, .card, .ind, .why__c{ background:var(--bg-2); }
.chain__i:hover, .card:hover, .ind:hover, .why__c:hover{ background:var(--surface); }
.tab{ background:rgba(16,41,67,.5); }
.tab:hover{ background:rgba(22,54,88,.8); }
.tab.is-on{ background:var(--surface); }
.gov__head{ background:rgba(160,196,231,.05); }
.gov__r:hover{ background:rgba(16,41,67,.55); }
.vow__i{ background:rgba(16,41,67,.5); }
.vow__i:hover{ background:var(--surface); }
.sec--alt{ background:linear-gradient(180deg, transparent, rgba(10,30,56,.6) 12%, rgba(10,30,56,.6) 88%, transparent); }

.nav.is-stuck{ background:rgba(6,21,41,.88); border-bottom-color:var(--line); }
/* white on blue needs the darker step to clear 4.5:1 */
.btn--primary{ background:#0F5FA8; color:#FFFFFF; font-weight:600; }
.btn--primary:hover{ background:#1670C4; box-shadow:0 10px 34px -12px rgba(52,160,228,.55); }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--blue-400); color:var(--blue-400); background:rgba(52,160,228,.08); }

.foot{ background:rgba(4,16,31,.72); border-top-color:var(--line); }
.impact__r:hover{ background:rgba(16,41,67,.45); }
.impact__track{ background:rgba(160,196,231,.10); }
.impact__bar--now .impact__track i{ background:linear-gradient(90deg, rgba(224,107,107,.8), rgba(224,107,107,.45)); }
.impact__bar--aft .impact__track i{ background:linear-gradient(90deg, var(--teal-400), var(--blue-400)); }
.impact__note{ background:rgba(224,163,61,.07); border-color:rgba(224,163,61,.3); }
.pos__wedge{ background:rgba(224,163,61,.05); }
.wm__def{ background:rgba(52,160,228,.07); }
.cta__bg{ background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(27,127,208,.28), transparent 68%); }

::selection{ background:var(--blue-500); color:#FFFFFF; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#1B3A5C; border-color:var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#2A5480; }

.bg-grid{
  background-image:
    linear-gradient(rgba(160,196,231,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,196,231,.055) 1px, transparent 1px);
}
.star{ background:rgba(160,196,231,.2); }
.stone--b{
  background:radial-gradient(circle at 34% 30%, rgba(52,160,228,.42) 0%, rgba(10,30,56,.94) 46%, rgba(4,14,26,.98) 100%);
  box-shadow:0 0 0 1px rgba(160,196,231,.16), 0 3px 9px -3px rgba(0,0,0,.85);
}
.stone--w{
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.82) 0%, rgba(199,217,236,.52) 48%, rgba(140,170,200,.34) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 3px 9px -3px rgba(0,0,0,.6);
}
.stone__ping{ border-color:rgba(52,160,228,.6); }
.bg-goban{ opacity:.5; }

.hero{ background:var(--bg); }
.hero__aurora-fb{
  background:
    radial-gradient(circle at 12% 46%, rgba(20,184,166,.42), transparent 46%),
    radial-gradient(circle at 62% 30%, rgba(18,83,156,.72), transparent 58%),
    radial-gradient(circle at 92% 62%, rgba(52,160,228,.46), transparent 52%),
    var(--bg);
}
.hero__bg{
  background-image:
    linear-gradient(rgba(160,196,231,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,196,231,.05) 1px, transparent 1px);
}
.pipe{ background:rgba(16,41,67,.5); border-color:rgba(160,196,231,.14); }

/* 9–11px mono labels carry real meaning — a step brighter than ambient */
.brand__sub, .card__id, .impact__task .c, .chain__i .en, .ind__c,
.step__t, .card__row .k, .fact__k, .evl thead th, .opt__k, .opt__conf .lb,
.foot__col h4, .foot__bot, .cta__note, .vow__hd, .sim__scale, .rule-i__s,
.pipe__s b, .pipe__s em, .scan__c h4, .sim__ctl .lab .d, .ax__k,
.panel__bar .ttl, .eyebrow, .pillar__en, .tab em{
  color:#A0BBD6;
}
.gov__head .no{ color:#E88585; }
.gov__head .yes{ color:#3DCBB8; }
.why__c p, .gov__n, .impact__human{ color:var(--ink-3); }

/* ============================================================
   CTA HEADLINE — the first clause missed a single line by 1px at
   1280, which is the worst kind of wrap: it looks like a mistake
   rather than a break. Widen the column and let the clamp ease off
   slightly so the clause survives down to tablet width.
   ============================================================ */
.cta__in{ max-width:880px; }
#contact h2{ font-size:clamp(23px,3.4vw,46px); }
@media (max-width:900px){
  #contact h2 br{ display:none; }
}

/* ============================================================
   CONTACT FALLBACK — a mailto: that silently fails (no default
   mail client) loses the lead with no feedback at all, so the
   address is also on the page, and clicking any booking button
   copies it as a safety net.
   ============================================================ */
.cta__mail{
  margin:-18px 0 30px; font-size:14px; color:var(--ink-3);
}
.cta__mail a{
  color:var(--cyan); font-family:var(--mono); font-size:13.5px;
  letter-spacing:.04em; border-bottom:1px solid rgba(52,160,228,.35);
  padding-bottom:1px; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.cta__mail a:hover{ color:#66BEF2; border-bottom-color:#66BEF2; }

.copy-toast{
  position:fixed; left:50%; bottom:38px; transform:translate(-50%,14px);
  z-index:1200; padding:12px 20px; border-radius:var(--r-lg);
  background:rgba(9,26,47,.96); border:1px solid var(--line-strong);
  color:var(--ink); font-size:13.5px; letter-spacing:.01em;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.8);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.copy-toast.is-on{ opacity:1; transform:translate(-50%,0); }
.copy-toast b{ font-family:var(--mono); color:var(--cyan); font-weight:500; }
@media (prefers-reduced-motion:reduce){ .copy-toast{ transition:none; } }

/* ============================================================
   CJK ORPHAN CONTROL
   Every character is a break opportunity in Chinese, so a wrapped
   line can end with a single stranded glyph. `text-wrap: pretty`
   rebalances the last lines to prevent that; where it is not
   supported the text simply wraps as before.
   ============================================================ */
.pillar__list li,
.card__d, .why__c p, .faq__a p, .chain__i p, .ind p, .step p,
.gov__y, .gov__n, .impact__human, .vow__i p, .pos__body p,
.wm__note p, .lede, .hero__sub, .cta__in > p,
.proj__body p, .proj__q{
  text-wrap: pretty;
}

/* trailing characters tied together by the orphan guard */
.nb{ white-space:nowrap; }

/* ============================================================
   SIMULATOR — rules and candidate options side by side.
   Stacked they ran to 600px and pushed the payoff below the fold;
   paired, you can read a fired rule against the option it produced,
   which is how an engineer would actually compare them.
   ============================================================ */
.sim__split{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-faint); border-top:1px solid var(--line-faint);
}
.sim__split > *{ border-top:0; }
.sim__rules, .sim__opts{ background:var(--bg); padding:24px 26px 26px; }
.sim__opts[hidden]{ display:none; }
.sim__split .opts{ grid-template-columns:1fr; gap:8px; margin-top:12px; }
.sim__split .opt{ padding:11px 13px; }
.sim__split .opt__k{ margin-bottom:6px; }
.sim__split .opt__t{ font-size:12.5px; margin-bottom:7px; line-height:1.42; }
.sim__split .opt__m{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
/* the bar repeated what the number already said */
.sim__split .opt__conf{ margin-top:8px; padding-top:7px; }
.sim__split .opt__conf .bar{ display:none; }
.sim__rules h4, .sim__opts h4{ margin-bottom:12px; }
.rule-i{ padding:10px 12px; margin-bottom:6px; }

/* the section carries an interactive demo; it does not also need
   the full section rhythm above and below it */
#worldmodel{ padding:96px 0; }
.sim__ctl{ padding:24px 30px 20px; }
.sim__ctl .lab{ margin-bottom:14px; }
.ax{ padding:18px 20px 20px; }
.ax__d{ min-height:0; }
.wm__intro{ margin:40px 0 34px; padding-bottom:34px; }

@media (max-width:900px){
  .sim__split{ grid-template-columns:1fr; }
}

/* ============================================================
   STANDING AGENT FEED — a monitor that keeps reporting, so the
   panel is a log rather than a diagram.
   ============================================================ */
.st--run{ color:var(--green); }
.st--run::before{ animation:runPulse 2.4s var(--ease) infinite; }
@keyframes runPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.feed{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:11.5px; }
.feed li{
  display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px dashed var(--line-faint); color:var(--ink-2);
}
.feed li:last-child{ border-bottom:0; }
.feed li.is-hit{ background:rgba(224,107,107,.07); margin:0 -12px; padding-left:12px; padding-right:12px; }
.feed li.is-warn{ background:rgba(224,163,61,.06); margin:0 -12px; padding-left:12px; padding-right:12px; }
.feed .ts{ color:var(--ink-4); font-size:10.5px; }
.feed .ev{ line-height:1.5; }
.feed .ev em{ font-style:normal; color:var(--cyan); }
.feed .tag{
  font-size:9px; letter-spacing:.12em; padding:3px 8px; border-radius:2px;
  white-space:nowrap; border:1px solid;
}
.tag--ok{ color:var(--green); border-color:rgba(20,184,166,.38); background:rgba(20,184,166,.08); }
.tag--bad{ color:#EC8080; border-color:rgba(224,107,107,.45); background:rgba(224,107,107,.12); }
.tag--warn{ color:var(--amber); border-color:rgba(224,163,61,.4); background:rgba(224,163,61,.09); }
.tag--mute{ color:var(--ink-4); border-color:var(--line); background:transparent; }

.feed__foot{
  margin-top:18px; padding-top:15px; border-top:1px solid var(--line-faint);
  display:flex; gap:24px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-4);
}
.feed__foot b{ color:var(--ink); font-weight:500; margin-left:5px; }

@media (max-width:520px){
  .feed li{ grid-template-columns:38px 1fr; }
  .feed .tag{ grid-column:2; justify-self:start; margin-top:4px; }
}

/* B-class evidence must say so on the face of it — the V2 rules
   require demo environments to be labelled, not merely disclaimed */
.feed__sim{
  margin-left:auto; padding:3px 9px; border-radius:2px;
  border:1px solid rgba(224,163,61,.4); color:var(--amber);
  background:rgba(224,163,61,.08); font-size:9px; letter-spacing:.12em;
}

/* ============================================================
   PREMIUM PASS
   Four moves, each measured against the lab site at www.intosyn.com:
   real radii, per-card accent, lift on hover, breathing gradient.
   The colour discipline is unchanged — amber still means a human
   has to approve something, and nothing else.
   ============================================================ */

/* ---- 1. per-card accent -------------------------------------
   One flat border colour across twelve cards reads as a grid of
   identical boxes. Each case carries its own hue, kept inside a
   teal→blue→violet range so the wall stays one family rather
   than turning into a rainbow.                                  */
.card{ --c:#34A0E4; }
.card[data-tags^="legal"]{ --c:#7B8FE0; }
.card[data-tags^="fin"]  { --c:#14B8A6; }
.card[data-tags^="mfg"]  { --c:#4DB8D8; }
.card[data-tags^="corp"] { --c:#6E8CA8; }

.cgrid{ gap:14px; background:transparent; border:0; }
.card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .42s var(--ease), border-color .42s var(--ease),
             box-shadow .42s var(--ease), background .42s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--c), transparent 72%);
  opacity:0; transition:opacity .42s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--c) 46%, transparent);
  box-shadow:0 16px 44px -14px color-mix(in srgb, var(--c) 30%, transparent);
}
.card:hover::before{ opacity:1; }
.card::after{ display:none; }
.card__id{ color:var(--c); }

/* ---- 2. lift on the other card families --------------------- */
.chain__i, .ind, .why__c, .vow__i, .step{
  transition:transform .42s var(--ease), border-color .42s var(--ease),
             box-shadow .42s var(--ease), background .42s var(--ease);
}
.chain, .inds, .why, .vow__list{ gap:14px; background:transparent; border:0; }
.chain__i, .ind, .why__c, .vow__i{
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.chain__i:hover, .ind:hover, .why__c:hover, .vow__i:hover{
  transform:translateY(-5px);
  border-color:rgba(52,160,228,.42);
  box-shadow:0 16px 44px -14px rgba(52,160,228,.22);
}

/* ---- 3. panels earn the bigger radius and a real shadow ------ */
.panel, .arch, .sim, .gov, .impact__note, .pos__wedge, .wm__def{
  border-radius:var(--r-lg);
}
.panel, .arch, .sim{ box-shadow:var(--lift-lg), inset 0 1px 0 rgba(255,255,255,.06); }
.tabs{ border-radius:var(--r-lg); }
.tab:first-child{ border-radius:var(--r-lg) 0 0 var(--r-lg); }
.tab:last-child { border-radius:0 var(--r-lg) var(--r-lg) 0; }
.btn{ border-radius:var(--r); }
.btn--primary{
  box-shadow:0 0 0 1px rgba(52,160,228,.35) inset, 0 12px 34px -12px rgba(15,95,168,.55);
}
.btn--primary:hover{ box-shadow:0 0 0 1px rgba(52,160,228,.5) inset, 0 16px 44px -12px rgba(52,160,228,.5); }
.chip{ border-radius:var(--r-pill); }
.pipe{ border-radius:var(--r-pill); }
.opt, .rule-i, .scan__c, .feed li{ border-radius:var(--r); }
.nav__cta{ border-radius:var(--r); }
.copy-toast{ border-radius:var(--r); }

/* ---- 4. the brand gradient breathes ------------------------- */
.hl, .slogan, .impact__cut, .why__n, .vow__quote em, .rstat dt{
  background-size:220% 100%;
  animation:gradShift 9s ease-in-out infinite;
}
@keyframes gradShift{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

@media (prefers-reduced-motion:reduce){
  .hl, .slogan, .impact__cut, .why__n, .vow__quote em, .rstat dt{ animation:none; }
  .card:hover, .chain__i:hover, .ind:hover, .why__c:hover, .vow__i:hover{ transform:none; }
}