:root{
  --bg:#05070a;
  --bg2:#080b10;
  --fg:#f5f7fb;
  --muted:#9aa4b2;
  --muted2:#697487;
  --line:rgba(255,255,255,.16);
  --line2:rgba(255,255,255,.28);
  --glass:rgba(255,255,255,.045);
  --glass2:rgba(255,255,255,.07);
  --blue:#7f8cff;
  --cyan:#5be3ff;
  --green:#5ce8bd;
  --pink:#ff78cc;
  --yellow:#ffd36e;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--fg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(900px 680px at 18% 10%,rgba(127,140,255,.08),transparent 62%),
    radial-gradient(900px 680px at 82% 23%,rgba(255,120,204,.06),transparent 64%),
    linear-gradient(180deg,#05070a 0%,#070a0f 50%,#05070a 100%);
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.2));
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.top{
  position:fixed;top:0;left:0;right:0;z-index:50;height:70px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(5,7,10,.88),rgba(5,7,10,.42),transparent);
  backdrop-filter:blur(16px);
}
.topin{
  width:min(var(--max),calc(100% - 30px));
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.brand{
  display:inline-flex;
  align-items:flex-start;
  gap:6px;
  flex:0 0 auto;
  color:#fff;
  font-size:clamp(18px,1.45vw,21px);
  line-height:1;
  font-weight:820;
  letter-spacing:-.055em;
}
.brand-word{display:inline-block}
.brand-media{
  color:transparent;
  background:linear-gradient(100deg,#c07bff,#8a5cff 48%,#2ddcff);
  -webkit-background-clip:text;
  background-clip:text;
}
.brand-index{
  margin-top:-3px;
  padding:2px 4px;
  border-radius:4px;
  color:#07080d;
  background:linear-gradient(90deg,#c07bff,#95f3ff);
  font-size:7px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nav{
  display:flex;
  gap:22px;
  color:var(--muted);
  font-size:13px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.nav.after-hero{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.nav a:hover{color:#fff}
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.contact-link{
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  transition:.2s ease;
}
.contact-link:hover{color:#fff}
.btn{
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;
  border-radius:999px;padding:10px 14px;cursor:pointer;transition:.25s
}
.btn:hover{background:rgba(255,255,255,.085);border-color:var(--line2)}
.hero{
  min-height:100svh;display:grid;place-items:center;padding:110px 22px 64px;position:relative
}
.hero-inner{width:min(1100px,100%);text-align:center}
.kicker{
  display:inline-flex;gap:9px;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:8px 12px;color:#c9d1dc;background:rgba(255,255,255,.03);
  font-size:12px;text-transform:uppercase;letter-spacing:.12em
}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}
h1{
  font-size:clamp(48px,8.7vw,118px);line-height:.9;letter-spacing:-.065em;
  margin:25px auto 24px;max-width:1050px
}
h1 .g{
  color:transparent;background:linear-gradient(90deg,#fff 5%,#aeb7ff 38%,#70e9d1 70%,#fff 100%);
  -webkit-background-clip:text;background-clip:text
}
.hero p{
  margin:0 auto;color:var(--muted);max-width:820px;font-size:clamp(18px,2.15vw,25px);
  line-height:1.48;letter-spacing:-.02em
}
.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:30px}
.primary{
  border:0;background:linear-gradient(135deg,#f3fffb,#67e7c7);color:#06100d;font-weight:750;
  border-radius:999px;padding:13px 18px;cursor:pointer;box-shadow:0 14px 40px rgba(92,232,189,.17)
}
.scrollhint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:var(--muted2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px
}
.scrollhint span{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}


/* Sticky overview hero */
.hero-overview{
  min-height:175svh;
  display:block;
  padding:0;
  position:relative;
}
.hero-sticky{
  min-height:100svh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:64px 12px 8px;
  overflow:hidden;
}
.hero-copy{
  width:min(980px,100%);
  text-align:center;
  position:relative;
  z-index:5;
  transition:opacity .2s linear,transform .2s linear;
}
.hero-overview h1{
  font-size:clamp(38px,5.8vw,70px);
  line-height:.92;
  letter-spacing:-.06em;
  margin:4px auto 4px;
  max-width:940px;
}
.hero-overview .hero-copy p{
  max-width:760px;
  font-size:clamp(16px,1.8vw,21px);
}
.mini-system{
  --mini-scale:.80;
  width:min(1260px,99.4vw);
  height:min(660px,69vh);
  min-height:550px;
  margin:-12px auto 0;
  position:relative;
  transform:scale(var(--mini-scale));
  transform-origin:50% 16%;
  transition:filter .2s linear, opacity .2s linear;
  z-index:4;
}
.mini-system:before{
  content:"";
  position:absolute;
  inset:1.5% 2.5%;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(440px 220px at 24% 15%,rgba(92,232,189,.08),transparent 70%),
    radial-gradient(440px 220px at 77% 15%,rgba(255,120,204,.08),transparent 70%),
    radial-gradient(420px 240px at 50% 54%,rgba(127,140,255,.08),transparent 72%),
    rgba(255,255,255,.015);
  box-shadow:0 38px 120px rgba(0,0,0,.32);
}
.mini-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible}
.mline{
  fill:none;
  stroke:rgba(255,255,255,.24);
  stroke-width:1.7;
  vector-effect:non-scaling-stroke;
}
.mline.feedback{
  stroke:rgba(127,140,255,.22);
  stroke-dasharray:5 7;
}
.mpacket{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}
.mpacket.green{fill:var(--green)}
.mpacket.pink{fill:var(--pink)}
.mpacket.yellow{fill:var(--yellow)}

.mini-caption{
  position:absolute;top:1.5%;z-index:3;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#d5dbe4;
  text-align:center;
}
.mini-caption small{
  display:block;margin-top:5px;color:var(--muted2);font-size:9px;letter-spacing:.06em;text-transform:none
}
.mini-left{left:5%;width:36%}
.mini-right{right:5%;width:36%}

.mini-node{
  position:absolute;z-index:4;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  background:rgba(9,12,17,.88);
  backdrop-filter:blur(9px);
  padding:8px 10px;
  text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,.26);
  cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.mini-node:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.4);
}
.mini-node b{display:block;font-size:14px;letter-spacing:-.02em}
.mini-node span{
  display:block;margin-top:3px;color:var(--muted);font-size:8.5px;line-height:1.18;
  opacity:.68;transition:opacity .2s linear
}
.mini-system.expanded .mini-node span{opacity:1}
.mini-node.solo{left:8%;top:8%;width:20%}
.mini-node.os{left:30%;top:8%;width:20%}
.mini-node.signal{right:8%;top:8%;width:28%;
  background:linear-gradient(180deg,rgba(255,120,204,.08),rgba(9,12,17,.9))}
.mini-node.graph{left:31%;top:32%;width:38%;
  background:linear-gradient(180deg,rgba(127,140,255,.10),rgba(9,12,17,.9))}
.mini-node.exchange{left:31%;top:47%;width:38%;
  background:linear-gradient(180deg,rgba(255,211,110,.09),rgba(9,12,17,.9))}
.mini-node.ai{left:31%;top:65%;width:38%}
.mini-hint{
  position:absolute;right:2%;top:47%;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--muted2);font-size:8px;text-transform:uppercase;letter-spacing:.12em
}
.mini-hint i{width:1px;height:46px;background:linear-gradient(#fff,transparent);animation:pulse 1.6s ease-in-out infinite}


.mini-truyn-fabric{
  position:absolute;
  inset:1.6% 1.0%;
  z-index:2;
  border:1px solid rgba(91,227,255,.10);
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(91,227,255,.025),transparent 15%,transparent 85%,rgba(91,227,255,.025)),
    radial-gradient(520px 260px at 50% 55%,rgba(91,227,255,.035),transparent 75%);
  pointer-events:auto;
  cursor:pointer;
}
.mini-truyn-fabric:hover{
  border-color:rgba(91,227,255,.25);
  box-shadow:inset 0 0 60px rgba(91,227,255,.035),0 0 35px rgba(91,227,255,.04);
}
.mini-truyn-lines{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none
}
.tline{
  fill:none;
  stroke:rgba(91,227,255,.13);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:4 7;
}
.tline.rail{
  stroke:rgba(91,227,255,.23);
  stroke-width:1.5;
  stroke-dasharray:2 8;
}
.tpacket{
  fill:var(--cyan);
  filter:drop-shadow(0 0 7px rgba(91,227,255,.9));
}
.mini-truyn-label{
  position:absolute;
  left:50%;bottom:.6%;
  transform:translateX(-50%);
  width:max-content;max-width:72%;
  z-index:4;
  display:flex;align-items:center;gap:7px;
  border:1px solid rgba(91,227,255,.16);
  border-radius:999px;
  background:rgba(5,13,18,.82);
  padding:7px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.mini-truyn-label b{
  color:#dffaff;font-size:9px;letter-spacing:.13em;white-space:nowrap
}
.mini-truyn-label span{
  color:#7faab4;font-size:8.5px;white-space:nowrap
}


/* =========================================================
   HERO V10 — SYSTEM CONSTELLATION
   Completely different visual language from the old mini map
   ========================================================= */
.orbital-hero{
  min-height:150svh;
  position:relative;
  padding:0;
}
.orbital-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:72px 20px 18px;
}
.orbital-sticky:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 520px at 72% 48%,rgba(127,140,255,.10),transparent 64%),
    radial-gradient(540px 420px at 23% 50%,rgba(92,232,189,.06),transparent 67%);
}
.orbital-shell{
  width:min(1480px,100%);
  height:calc(100svh - 88px);
  min-height:660px;
  display:block;
  position:relative;
  position:relative;
  transition:transform .1s linear,opacity .1s linear;
}

.system-constellation{
  width:min(1380px,100%);
  height:min(820px,calc(100svh - 92px));
  min-height:660px;
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  z-index:3;
  transform-origin:50% 50%;
}
.system-constellation:before{
  content:"";
  position:absolute;
  inset:4% 2% 3%;
  border:1px solid rgba(255,255,255,.055);
  border-radius:50% 46% 48% 52% / 48% 53% 47% 52%;
  background:
    radial-gradient(430px 330px at 50% 49%,rgba(127,140,255,.075),transparent 70%),
    radial-gradient(260px 190px at 24% 30%,rgba(92,232,189,.035),transparent 72%),
    radial-gradient(260px 190px at 76% 30%,rgba(255,120,204,.035),transparent 72%);
}
.constellation-halo{
  position:absolute;
  left:50%;top:47%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.halo-1{
  width:58%;height:58%;
  border:1px solid rgba(127,140,255,.08);
}
.halo-2{
  width:77%;height:76%;
  border:1px dashed rgba(255,255,255,.07);
  animation:haloSpin 48s linear infinite;
}
.halo-3{
  width:92%;height:91%;
  border:1px solid rgba(91,227,255,.055);
}
@keyframes haloSpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

.truyn-orbit{
  position:absolute;
  inset:1.5%;
  border:1px solid rgba(91,227,255,.18);
  border-radius:50% 44% 49% 46% / 44% 52% 46% 54%;
  z-index:1;
  cursor:pointer;
  transition:.25s;
  box-shadow:
    inset 0 0 70px rgba(91,227,255,.025),
    0 0 50px rgba(91,227,255,.025);
}
.truyn-orbit:hover{
  border-color:rgba(91,227,255,.40);
  box-shadow:
    inset 0 0 90px rgba(91,227,255,.055),
    0 0 60px rgba(91,227,255,.06);
}
.truyn-orbit:before,
.truyn-orbit:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(91,227,255,.11);
}
.truyn-orbit:before{inset:4% 3%}
.truyn-orbit:after{inset:8% 7%}
.truyn-orbit-label{
  position:absolute;
  left:50%;
  right:auto;
  bottom:1.8%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  border:1px solid rgba(91,227,255,.23);
  background:rgba(4,13,17,.86);
  backdrop-filter:blur(12px);
  border-radius:999px;
  padding:8px 13px;
  z-index:8;
}
.truyn-orbit-label b{
  font-size:9px;
  letter-spacing:.14em;
  color:#e0fbff;
  white-space:nowrap;
}
.truyn-orbit-label span{
  color:#7da5ae;
  font-size:8px;
  white-space:nowrap;
}


.orbital-particle-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  pointer-events:none;
  opacity:.96;
}

.market-label{
  position:absolute;
  top:9%;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.market-label span{
  font-size:9px;
  letter-spacing:.18em;
  color:#c8d0db;
}
.market-label small{
  color:#657184;
  font-size:9px;
}
.supply-label{left:7%}
.demand-label{right:7%;text-align:right}

.constellation-node,
.graph-core{
  position:absolute;
  z-index:6;
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  cursor:pointer;
  transition:.28s cubic-bezier(.2,.8,.2,1);
  font:inherit;
}
.constellation-node{
  min-width:0;
  border-radius:18px;
  background:rgba(8,11,16,.91);
  backdrop-filter:blur(14px);
  padding:16px 17px;
  text-align:left;
  box-shadow:0 18px 48px rgba(0,0,0,.27);
}
.constellation-node:hover{
  transform:translateY(-5px) scale(1.025);
  border-color:rgba(255,255,255,.32);
  background:rgba(15,19,27,.96);
  box-shadow:0 28px 70px rgba(0,0,0,.42);
}
.constellation-node strong{
  display:block;
  font-size:clamp(25px,2.8vw,38px);
  line-height:.95;
  letter-spacing:-.04em;
}
.constellation-node span{
  display:block;
  margin-top:9px;
  color:#aab4c2;
  font-size:12px;
  line-height:1.35;
  letter-spacing:-.01em;
}
.solo-node{
  left:6%;top:42%;
  width:21%;
  background:
    radial-gradient(180px 100px at 0 0,rgba(92,232,189,.08),transparent 70%),
    rgba(8,11,16,.91);
}
.os-node{
  left:22%;top:16%;
  width:24%;
  background:
    radial-gradient(200px 100px at 0 0,rgba(92,232,189,.06),transparent 70%),
    rgba(8,11,16,.91);
}
.signal-node{
  right:5.5%;top:23%;
  width:31%;
  background:
    radial-gradient(240px 120px at 100% 0,rgba(255,120,204,.09),transparent 72%),
    rgba(8,11,16,.91);
}
.exchange-node{
  left:36%;top:69%;
  width:28%;
  text-align:center;
  background:
    radial-gradient(240px 120px at 50% 0,rgba(255,211,110,.09),transparent 70%),
    rgba(8,11,16,.93);
}

.graph-core{
  left:50%;top:49%;
  transform:translate(-50%,-50%);
  width:180px;height:180px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.16),transparent 16%),
    radial-gradient(circle at 50% 48%,rgba(127,140,255,.28),rgba(11,14,21,.96) 58%,rgba(5,7,10,.98) 75%);
  box-shadow:
    0 0 0 13px rgba(127,140,255,.025),
    0 0 0 32px rgba(127,140,255,.016),
    0 28px 90px rgba(0,0,0,.50),
    0 0 70px rgba(127,140,255,.13);
}
.graph-core:hover{
  transform:translate(-50%,-50%) scale(1.055);
  border-color:rgba(255,255,255,.35);
  box-shadow:
    0 0 0 15px rgba(127,140,255,.035),
    0 0 0 38px rgba(127,140,255,.02),
    0 34px 100px rgba(0,0,0,.55),
    0 0 90px rgba(127,140,255,.22);
}
.graph-core small{
  font-size:7px;
  letter-spacing:.11em;
  color:#9aa5b8;
  margin-bottom:8px;
}
.graph-core strong{
  font-size:30px;
  line-height:.82;
  letter-spacing:-.055em;
}
.core-pulse{
  position:absolute;
  inset:-13px;
  border:1px solid rgba(127,140,255,.16);
  border-radius:50%;
  animation:corePulse 3.2s ease-in-out infinite;
}
@keyframes corePulse{
  0%,100%{transform:scale(.96);opacity:.28}
  50%{transform:scale(1.07);opacity:.75}
}

.constellation-links{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  z-index:4;
  pointer-events:none;
  overflow:visible;
}
.clink{
  fill:none;
  stroke-width:1.45;
  vector-effect:non-scaling-stroke;
}
.supply-link{stroke:rgba(92,232,189,.22)}
.demand-link{stroke:rgba(255,120,204,.20)}
.main-link{stroke:rgba(255,255,255,.23)}
.cpacket{
  fill:#fff;
  filter:url(#softGlow);
}
.cpacket.green{fill:var(--green)}
.cpacket.pink{fill:var(--pink)}
.cpacket.yellow{fill:var(--yellow)}

.constellation-status{
  position:absolute;
  left:5.5%;
  bottom:6%;
  z-index:7;
  display:grid;
  grid-template-columns:auto auto;
  column-gap:8px;
  row-gap:2px;
  align-items:center;
}
.status-dot{
  grid-row:1/3;
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 16px rgba(92,232,189,.8);
}
.constellation-status b{
  font-size:8px;
  letter-spacing:.13em;
  color:#d5dce5;
}
.constellation-status small{
  color:#657184;
  font-size:8px;
}

@media(max-width:1100px){
  .orbital-shell{
    min-height:700px;
  }
        .system-constellation{
    width:min(1180px,100%);
    height:min(720px,76vh);
  }
}
@media(max-width:650px){
  .orbital-sticky{padding:62px 6px 8px}
  .orbital-shell{height:calc(100svh - 72px);min-height:620px}
        .system-constellation{
    width:980px;
    max-width:none;
    height:650px;
    transform-origin:50% 50%;
    left:50%;
    top:50%;
    translate:-50% -50%;
  }
  .truyn-orbit-label span{display:none}
}

/* Core scene */
.ecosystem{
  width:min(var(--max),calc(100% - 24px));
  margin:0 auto;
  position:relative;
  padding:4vh 0 16vh;
}
.chapter{
  min-height:100svh;
  display:grid;
  align-items:center;
  position:relative;
  opacity:.3;
  transform:translateY(50px) scale(.99);
  transition:opacity .65s ease,transform .65s ease;
}
.chapter.show{opacity:1;transform:none}
.chapter-title{
  text-align:center;margin:0 auto 34px;max-width:850px
}
.chapter-title small{
  color:var(--muted2);text-transform:uppercase;letter-spacing:.18em;font-size:11px
}
.chapter-title h2{
  font-size:clamp(34px,5.8vw,76px);letter-spacing:-.055em;line-height:.98;margin:12px 0 13px
}
.chapter-title p{color:var(--muted);font-size:17px;line-height:1.55;margin:0 auto;max-width:760px}


/* TRUYN is a cross-cutting network fabric, not a sequential product stage */
.ecosystem{isolation:isolate}
.truyn-backplane{
  position:absolute;
  inset:0 -20px;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.truyn-mesh{
  position:absolute;left:1.5%;right:1.5%;height:1px;
  background:linear-gradient(90deg,rgba(91,227,255,.12),transparent 17%,transparent 83%,rgba(91,227,255,.12));
  opacity:.6
}
.truyn-mesh.mesh-a{top:31%}
.truyn-mesh.mesh-b{top:68%}
.chapter{z-index:2}

/* First split */
.split-head{
  display:grid;grid-template-columns:1fr 150px 1fr;gap:20px;align-items:start
}
.lane-label{
  text-align:center;color:#d8dee8;font-size:12px;text-transform:uppercase;letter-spacing:.16em
}
.lane-label span{display:block;color:var(--muted2);font-size:11px;margin-top:6px;letter-spacing:.08em;text-transform:none}
.lane-label.supply{grid-column:1}.lane-label.demand{grid-column:3}
.flow-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);
  gap:20px;
  align-items:start;
  position:relative;
  margin-top:26px
}
.lane{
  position:relative;
  display:flex;flex-direction:column;align-items:stretch;gap:22px
}
.lane.left{grid-column:1}.lane.right{grid-column:3}
.source-card,.product-card,.graph-card,.branch-card,.ai-card,.outcomes-card{
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:0 28px 90px rgba(0,0,0,.33);
  border-radius:22px;
  padding:22px;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
  cursor:pointer;
}
.source-card:hover,.product-card:hover,.graph-card:hover,.branch-card:hover,.ai-card:hover,.outcomes-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.23);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}
.source-card{
  min-height:126px;display:flex;align-items:center;justify-content:center;text-align:center
}
.source-card h3,.product-card h3,.graph-card h3,.branch-card h3,.ai-card h3,.outcomes-card h3{
  margin:0;letter-spacing:-.035em
}
.source-card h3{font-size:24px}
.source-card p,.product-card p,.graph-card p,.branch-card p,.ai-card p,.outcomes-card p{
  color:var(--muted);line-height:1.5;margin:8px 0 0;font-size:14px
}
.product-card{min-height:210px}
.product-card h3{font-size:clamp(32px,4.7vw,58px);line-height:.95}
.product-card .role{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#b8c2d0;margin-bottom:20px
}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.chips b{
  font-weight:500;font-size:11px;color:#b9c3cf;border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:6px 9px;background:rgba(255,255,255,.025)
}
.supply .product-card{background:
  radial-gradient(380px 180px at 0% 0%,rgba(92,232,189,.10),transparent 65%),
  linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))}
.demand .product-card{background:
  radial-gradient(380px 180px at 100% 0%,rgba(255,120,204,.10),transparent 65%),
  linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))}


.peer-products{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.peer-products .product-card{
  min-height:260px;
}
.peer-merge{
  position:relative;
  height:150px;
  margin-top:-2px;
}
.peer-merge svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

/* Lines */
.line-v{
  width:2px;height:62px;margin:0 auto;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.48),rgba(255,255,255,.12));
  position:relative
}
.line-v:after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid rgba(255,255,255,.68)
}
.packet{
  position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;
  left:50%;transform:translateX(-50%);top:-5px;box-shadow:0 0 16px rgba(255,255,255,.8);
  animation:packetDown 2.4s linear infinite
}
.packet.green{background:var(--green);box-shadow:0 0 18px rgba(92,232,189,.9);animation-delay:.4s}
.packet.pink{background:var(--pink);box-shadow:0 0 18px rgba(255,120,204,.9);animation-delay:1s}
@keyframes packetDown{0%{top:-5px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 3px);opacity:0}}

/* Merge */
.supply-flow-stage{
  position:relative;
  isolation:isolate;
}
.supply-flow-stage .flow-grid{
  position:relative;
  z-index:2;
}
.merge-zone{
  height:310px;
  min-height:310px;
  position:relative;
  margin-top:0;
}
.branch-zone svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none
}
.path{
  fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.6;vector-effect:non-scaling-stroke
}
.path.glow{stroke:rgba(127,140,255,.24);stroke-width:7;filter:blur(5px)}
.moving{
  fill:#fff;filter:drop-shadow(0 0 7px rgba(255,255,255,.75))
}
.moving.green{fill:var(--green)}.moving.pink{fill:var(--pink)}.moving.yellow{fill:var(--yellow)}

.supply-merge-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.supply-stream,
.supply-stream-glow{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.supply-stream{
  stroke:rgba(222,229,240,.32);
  stroke-width:1.55;
}
.supply-stream-glow{
  stroke:rgba(127,140,255,.18);
  stroke-width:8;
  filter:url(#supplyStreamGlow);
}
.supply-stream.supply-left{stroke:rgba(204,222,229,.38)}
.supply-stream.supply-right{stroke:rgba(224,207,224,.36)}
.supply-stream.supply-down{stroke:rgba(226,232,241,.36)}
.supply-stream-dot{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.78));
}
.supply-stream-dot.green{
  fill:var(--green);
  filter:drop-shadow(0 0 9px rgba(92,232,189,.9));
}
.supply-stream-dot.pink{
  fill:var(--pink);
  filter:drop-shadow(0 0 9px rgba(255,120,204,.9));
}

/* Graph */
.graph-wrap{display:grid;place-items:center;position:relative}
.graph-card{
  width:min(860px,100%);
  text-align:center;
  padding:32px 28px 30px;
  background:
   radial-gradient(520px 260px at 50% 0%,rgba(127,140,255,.14),transparent 68%),
   radial-gradient(420px 240px at 20% 100%,rgba(255,120,204,.08),transparent 65%),
   linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.027))
}
.graph-card .eyebrow2{
  font-size:11px;color:#bfc7d3;text-transform:uppercase;letter-spacing:.14em;margin-bottom:13px
}
.graph-card h3{font-size:clamp(38px,6vw,76px);line-height:.94}
.graph-lines{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.graph-lines span{
  font-size:12px;color:#c2cad5;border:1px solid rgba(255,255,255,.09);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.03)
}
.graph-mini{
  height:210px;
  position:relative;
  margin:22px auto 0;
  max-width:680px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(360px 180px at 50% 48%,rgba(127,140,255,.075),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
}
.graph-mini:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at center,black 34%,transparent 92%);
}
.data-graph-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.graph-mini-status{
  position:absolute;
  left:12px;
  right:12px;
  bottom:9px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}
.graph-mini-status span{
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(205,214,228,.56);
  font-size:8px;
  line-height:1;
  letter-spacing:.095em;
  text-transform:uppercase;
  white-space:nowrap;
}
.graph-mini-status i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(92,232,189,.72);
}
.graph-mini-status span:last-child i{
  background:var(--blue);
  box-shadow:0 0 12px rgba(127,140,255,.72);
}
@media(max-width:600px){
  .graph-mini{height:185px}
  .graph-mini-status{display:none}
}
/* Branch */
.branch-zone{min-height:290px;position:relative}
.branch-grid{display:grid;grid-template-columns:1fr 130px 1fr;gap:20px;position:relative;z-index:2;padding-top:80px}
.branch-card{min-height:220px}
.branch-card h3{font-size:clamp(30px,4.2vw,54px);line-height:.98}
.branch-card.exchange{grid-column:1;background:
 radial-gradient(360px 180px at 0 0,rgba(255,211,110,.10),transparent 66%),
 linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))}
.branch-card.truyn{grid-column:3;background:
 radial-gradient(360px 180px at 100% 0,rgba(91,227,255,.10),transparent 66%),
 linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))}


.exchange-flow{
  display:grid;
  justify-items:center;
  gap:0;
  position:relative;
}
.exchange-in,.exchange-out{height:82px}
.exchange-centered{
  width:min(760px,100%);
  text-align:center;
  min-height:230px;
  background:
    radial-gradient(480px 220px at 50% 0,rgba(255,211,110,.11),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}
.exchange-centered .chips{justify-content:center}
.exchange-truyn-context{
  width:min(900px,100%);
  margin:26px auto 0;
  border:1px dashed rgba(91,227,255,.20);
  border-radius:18px;
  background:rgba(91,227,255,.025);
  padding:15px 18px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  transition:.25s;
}
.exchange-truyn-context:hover{
  border-color:rgba(91,227,255,.38);
  background:rgba(91,227,255,.045)
}
.exchange-truyn-context .transport-dot{
  width:9px;height:9px;border-radius:50%;background:var(--cyan);margin-top:5px;flex:0 0 auto;
  box-shadow:0 0 17px rgba(91,227,255,.8)
}
.exchange-truyn-context b{display:block;font-size:13px;color:#dffaff;margin-bottom:4px}
.exchange-truyn-context p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}

/* AI merge */
.ai-merge{min-height:315px;position:relative}
.ai-card{
  width:min(820px,100%);margin:120px auto 0;text-align:center;padding:34px 28px;
  background:
   radial-gradient(520px 260px at 50% 30%,rgba(91,227,255,.12),transparent 65%),
   linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))
}
.ai-card h3{font-size:clamp(38px,6vw,74px)}
.ai-ring{
  width:150px;height:150px;border:1px dashed rgba(255,255,255,.15);border-radius:50%;
  position:absolute;right:22px;top:50%;transform:translateY(-50%);animation:spin 16s linear infinite
}
.ai-ring:before,.ai-ring:after{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 17px #fff
}
.ai-ring:before{top:17px;left:22px}.ai-ring:after{bottom:22px;right:18px;background:var(--cyan)}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}


/* Outcomes → feedback-loop bridge.
   Measured from the live layout so it cannot drift with viewport/browser changes. */
.outcome-loop-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.outcome-loop-bridge,
.outcome-loop-bridge-glow{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.outcome-loop-bridge{
  stroke:rgba(225,232,241,.40);
  stroke-width:1.55;
}
.outcome-loop-bridge-glow{
  stroke:rgba(127,140,255,.20);
  stroke-width:8;
  filter:url(#outcomeLoopGlow);
}
.outcome-loop-packet{
  fill:var(--green);
  filter:drop-shadow(0 0 9px rgba(92,232,189,.92));
}

/* outcomes */
.outcome-flow{display:grid;place-items:center;margin-top:26px}
.outcomes-card{width:min(760px,100%);text-align:center}
.outcomes-card h3{font-size:30px}
.outcomes-card .chips{justify-content:center}

/* return loop */
.return-zone{
  min-height:590px;
  position:relative;
  margin-top:10px;
}
.feedback-loop-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:1;
}
.feedback-path,
.feedback-path-glow{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.feedback-path{
  stroke:rgba(220,228,240,.30);
  stroke-width:1.55;
}
.feedback-path-glow{
  stroke:rgba(127,140,255,.20);
  stroke-width:8;
  filter:url(#feedbackLoopGlow);
}
.feedback-path.feedback-left{stroke:rgba(199,221,229,.34)}
.feedback-path.feedback-right{stroke:rgba(225,205,224,.34)}
.feedback-dot{
  filter:drop-shadow(0 0 9px rgba(255,255,255,.82));
}
.feedback-dot-left{
  fill:var(--green);
  filter:drop-shadow(0 0 10px rgba(92,232,189,.92));
}
.feedback-dot-right{
  fill:var(--pink);
  filter:drop-shadow(0 0 10px rgba(255,120,204,.92));
}
.return-copy{
  width:min(720px,100%);
  margin:0 auto;
  text-align:center;
  padding-top:120px;
  position:relative;
  z-index:2;
}
.return-copy small{color:var(--muted2);text-transform:uppercase;letter-spacing:.16em}
.return-copy h2{font-size:clamp(34px,5vw,64px);letter-spacing:-.05em;margin:10px 0 12px}
.return-copy p{color:var(--muted);font-size:17px;line-height:1.55;margin:0}
.return-targets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:32px auto 0;
  max-width:720px;
}
.return-target{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  padding:18px;
  text-align:left;
  position:relative;
  z-index:3;
}
.return-target strong{display:block;margin-bottom:6px}
.return-target span{color:var(--muted);font-size:13px;line-height:1.45}
@media(max-width:760px){
  .return-zone{min-height:650px}
  .return-targets{grid-template-columns:1fr}
}

/* tooltip & drawer */

/* Compact Group ecosystem footer */
.group-footer{
  width:min(var(--max),calc(100% - 24px));
  margin:0 auto;
  border-top:1px solid rgba(255,255,255,.075);
}
.group-footer-inner{
  min-height:66px;
  padding:9px 0 max(9px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  color:var(--muted2);
  font-size:9px;
}
.group-copyright{
  max-width:245px;
  line-height:1.35;
}
.group-ecosystem-links{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(8px,1.15vw,17px);
}
.group-ecosystem-links a{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--muted);
  transition:color .18s ease,transform .18s ease;
}
.group-ecosystem-links a:hover{
  color:#fff;
  transform:translateY(-1px);
}
.group-ecosystem-links b{
  font-size:8px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.085em;
}
.group-ecosystem-links small{
  color:var(--muted2);
  font-size:8px;
  line-height:1.1;
}
.group-footer-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.group-footer-text{
  appearance:none;
  border:0;
  padding:5px 0;
  color:var(--muted);
  background:transparent;
  font:inherit;
  font-size:9px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .18s ease;
}
.group-footer-text:hover{color:#fff}

/* Group FAQ bottom sheet — mirrors the InnMedia OS interaction language */
.group-faq-backdrop{
  position:fixed;
  inset:0;
  z-index:88;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(5px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.group-faq-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.group-faq-sheet{
  position:fixed;
  z-index:89;
  left:0;
  right:0;
  bottom:0;
  max-height:min(88dvh,860px);
  overflow:auto;
  overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid rgba(127,140,255,.34);
  background:rgba(6,8,12,.965);
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
  transform:translateY(101%);
  transition:transform .40s cubic-bezier(.2,.75,.2,1);
  box-shadow:0 -34px 100px rgba(0,0,0,.46);
}
.group-faq-sheet.open{transform:translateY(0)}
.group-faq-in{
  width:min(1180px,100%);
  margin:0 auto;
  padding:22px max(22px,4vw) 34px;
}
.group-faq-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:2px 0 14px;
  margin-bottom:4px;
  background:linear-gradient(180deg,rgba(6,8,12,.995) 0%,rgba(6,8,12,.94) 75%,rgba(6,8,12,0) 100%);
}
.group-faq-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--muted);
  font-size:9px;
  font-weight:780;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.group-faq-eyebrow:before{
  content:"";
  width:30px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--pink));
}
.group-faq-head h2{
  margin:0;
  font-size:clamp(30px,4vw,54px);
  line-height:.96;
  letter-spacing:-.05em;
}
.group-faq-head p{
  max-width:700px;
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.group-faq-close{
  width:42px;
  height:42px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}
.group-faq-close:hover{
  color:#fff;
  border-color:rgba(255,255,255,.26);
  transform:rotate(5deg);
}
.group-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 34px;
}
.group-faq-grid details{
  border-top:1px solid rgba(255,255,255,.075);
}
.group-faq-grid summary{
  min-height:52px;
  padding:13px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#e7ebf2;
  font-size:12px;
  font-weight:720;
  line-height:1.35;
  list-style:none;
  cursor:pointer;
}
.group-faq-grid summary::-webkit-details-marker{display:none}
.group-faq-grid summary:after{
  content:"+";
  flex:0 0 auto;
  color:var(--muted2);
  font-size:18px;
  font-weight:400;
}
.group-faq-grid details[open] summary:after{content:"−"}
.group-faq-grid details p{
  max-width:560px;
  margin:0 0 16px;
  color:var(--muted);
  font-size:11px;
  line-height:1.65;
}
.group-faq-grid details a{
  color:#c8d0ff;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media(max-width:980px){
  .group-footer-inner{
    grid-template-columns:1fr;
    text-align:center;
    padding:18px 0;
  }
  .group-copyright{max-width:none}
  .group-footer-links{justify-content:center}
}
@media(max-width:760px){
  .group-faq-grid{grid-template-columns:1fr}
  .group-faq-in{padding:18px 16px 28px}
  .group-faq-head h2{font-size:34px}
  .group-ecosystem-links{gap:11px 16px}
}

.tip{
  position:fixed;z-index:80;pointer-events:none;opacity:0;transform:translateY(7px);
  transition:.16s;padding:9px 11px;border-radius:11px;background:#111620;border:1px solid rgba(255,255,255,.12);
  color:#dfe5ed;font-size:12px;line-height:1.45;max-width:290px;box-shadow:0 18px 50px rgba(0,0,0,.45)
}
.tip.on{opacity:1;transform:none}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:90;opacity:0;pointer-events:none;transition:.3s}
.overlay.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;z-index:100;right:16px;top:16px;bottom:16px;width:min(520px,calc(100% - 32px));
  background:rgba(9,12,17,.96);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.13);
  border-radius:24px;box-shadow:0 35px 120px rgba(0,0,0,.7);
  transform:translateX(calc(100% + 40px));transition:.42s cubic-bezier(.2,.8,.2,1);overflow:auto
}
.drawer.on{transform:none}
.drawerhead{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 18px 12px;background:linear-gradient(180deg,rgba(9,12,17,.99),rgba(9,12,17,.9));
  z-index:2
}
.drawerhead span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted2)}
.close{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:#fff;background:rgba(255,255,255,.04);cursor:pointer}
.drawerbody{padding:8px 24px 30px}
.drawerbody h3{font-size:42px;letter-spacing:-.05em;margin:10px 0 10px}
.drawerbody .tag{font-size:17px;color:#d2d9e3;line-height:1.5}
.detail{padding:18px 0;border-top:1px solid rgba(255,255,255,.08);margin-top:18px}
.detail b{display:block;margin-bottom:8px}
.detail p,.detail li{color:var(--muted);line-height:1.55}
.detail p{margin:0}.detail ul{margin:8px 0 0;padding-left:18px}

.footer{
  border-top:1px solid rgba(255,255,255,.07);
  min-height:68svh;display:grid;place-items:center;text-align:center;padding:90px 22px;
  background:radial-gradient(700px 350px at 50% 0,rgba(127,140,255,.09),transparent 70%)
}
.footer h2{font-size:clamp(42px,7vw,92px);letter-spacing:-.06em;line-height:.95;margin:0 0 18px}
.footer p{max-width:760px;color:var(--muted);font-size:18px;line-height:1.55;margin:0 auto 28px}

/* responsive */
@media(max-width:900px){

  .peer-products{grid-template-columns:1fr}
  .peer-merge{display:none}

  .nav{display:none}
  .split-head,.flow-grid{grid-template-columns:1fr}
  .lane-label.supply,.lane-label.demand,.lane.left,.lane.right{grid-column:1}
  .lane-label.demand{margin-top:32px}
  .flow-grid{gap:28px}
  .lane.right{margin-top:24px}
  .branch-grid{grid-template-columns:1fr;gap:16px;padding-top:80px}
  .branch-card.exchange,.branch-card.truyn{grid-column:1}
  .merge-zone{height:150px;min-height:150px}
  .branch-zone{min-height:520px}
  .ai-merge{min-height:260px}
  .ai-card{margin-top:70px}
  .return-targets{grid-template-columns:1fr}
}
@media(max-width:600px){
  .header-actions{gap:8px}
  .contact-link{font-size:11px}


  .mini-truyn-label span{display:none}


  .hero-sticky{padding:68px 8px 8px}
  .hero-overview h1{font-size:clamp(38px,11vw,58px)}
  .mini-system{width:1080px;max-width:none;height:640px;transform-origin:50% 2%;margin-left:50%;translate:-50% 0}
  .mini-hint{display:none}

  .top{height:64px}
  .hero{padding-top:100px}
  .hero-actions>*{width:100%}
  .ecosystem{width:min(100% - 16px,var(--max))}
  .source-card,.product-card,.graph-card,.branch-card,.ai-card,.outcomes-card{border-radius:18px;padding:18px}
  .ai-ring{display:none}
  .graph-mini{height:120px}
}


.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.card-product-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  color:#e8edf7;
  font-size:11px;
  font-weight:720;
  line-height:1;
  letter-spacing:.015em;
  text-decoration:none;
  opacity:.78;
  transition:opacity .18s ease,transform .18s ease,color .18s ease;
}
.card-product-link:hover{
  opacity:1;
  color:#fff;
  transform:translateX(2px);
}
.drawer.group-mode{
  width:min(760px,calc(100% - 32px));
}
.drawer-intro{
  margin:0 0 6px;
  color:#d9e0ea;
  font-size:16px;
  line-height:1.62;
}
.drawer-kicker{
  color:var(--muted2);
  font-size:10px;
  font-weight:760;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.drawer-product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.drawer-product-link{
  display:block;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  transition:.18s ease;
}
.drawer-product-link:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.055);
  transform:translateY(-1px);
}
.drawer-product-link b{
  display:block;
  color:#f4f7fb;
  font-size:12px;
  margin-bottom:4px;
}
.drawer-product-link span{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.drawer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin-top:16px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.045);
  font-size:12px;
  font-weight:740;
  transition:.18s ease;
}
.drawer-cta:hover{
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.085);
  transform:translateY(-1px);
}
.detail h4{
  margin:0 0 8px;
  color:#f3f6fb;
  font-size:14px;
}
.detail + .detail{margin-top:0}
@media(max-width:600px){
  .drawer-product-grid{grid-template-columns:1fr}
  .drawer.group-mode{width:auto}
  .card-product-link{font-size:10px}
}

/* =========================================================
   v26 responsive hardening
   ========================================================= */
:root{
  --header-h:70px;
  --page-pad:clamp(12px,2.2vw,28px);
}
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
  min-height:100dvh;
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
img,svg,canvas,video{max-width:100%}
button,a{touch-action:manipulation}
button{max-width:100%}
p,h1,h2,h3,strong,span,small{overflow-wrap:anywhere}
section[id],main[id]{scroll-margin-top:calc(var(--header-h) + 42px)}

.top{
  height:calc(var(--header-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.topin{
  width:min(var(--max),calc(100% - (var(--page-pad) * 2)));
  min-width:0;
}
.header-actions{min-width:0}
.contact-link,.btn{min-height:40px;display:inline-flex;align-items:center}

.orbital-hero{min-height:150dvh}
.orbital-sticky{
  height:100dvh;
  padding:
    calc(var(--header-h) + env(safe-area-inset-top) + 8px)
    max(var(--page-pad),env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(var(--page-pad),env(safe-area-inset-left));
}
.orbital-shell{
  width:min(1480px,100%);
  height:calc(100dvh - var(--header-h) - env(safe-area-inset-top) - 20px);
  min-height:0;
}
.system-constellation{
  width:min(1380px,100%);
  height:clamp(540px,calc(100dvh - var(--header-h) - 24px),820px);
  min-height:0;
}
.constellation-node{
  max-width:100%;
}
.constellation-node strong{
  font-size:clamp(23px,2.7vw,38px);
}
.constellation-node span{
  font-size:clamp(10px,.9vw,12px);
}
.graph-core{
  width:clamp(142px,13vw,180px);
  height:clamp(142px,13vw,180px);
}
.graph-core strong{font-size:clamp(24px,2.2vw,30px)}
.constellation-links{
  max-width:none;
}
.ecosystem{
  width:min(var(--max),calc(100% - (var(--page-pad) * 2)));
  padding:clamp(28px,4vh,56px) 0 clamp(80px,12vh,150px);
}
.chapter{
  min-height:min(100dvh,980px);
  padding-block:clamp(36px,6vh,86px);
}
.chapter-title{
  width:min(100%,900px);
  padding-inline:clamp(0px,1vw,12px);
}
.chapter-title h2{
  font-size:clamp(34px,5.6vw,76px);
}
.chapter-title p{
  font-size:clamp(14px,1.3vw,17px);
}
.source-card,.product-card,.graph-card,.branch-card,.ai-card,.outcomes-card{
  min-width:0;
}
.drawer,.group-faq-sheet{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.group-faq-sheet{
  max-height:min(88dvh,860px);
}
.group-footer{
  width:min(var(--max),calc(100% - (var(--page-pad) * 2)));
}

/* Large tablets / small laptops */
@media (max-width:1100px){
  :root{--page-pad:18px}
  .topin{gap:14px}
  .nav{gap:15px;font-size:12px}
  .header-actions{gap:9px}
  .system-constellation{
    width:100%;
    height:clamp(540px,calc(100dvh - var(--header-h) - 22px),720px);
  }
  .solo-node{left:4.5%;width:22%}
  .os-node{left:20%;width:25%}
  .signal-node{right:4%;width:32%}
  .exchange-node{left:35%;width:30%}
  .flow-grid{grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);gap:16px}
  .split-head{grid-template-columns:1fr 100px 1fr;gap:16px}
}

/* Tablets and mobile: one-column content, second-row scrollable nav after hero */
@media (max-width:900px){
  :root{--header-h:62px;--page-pad:14px}
  .top{
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
  }
  .topin{
    gap:10px;
  }
  .brand{
    font-size:18px;
    flex:0 0 auto;
  }
  .header-actions{
    margin-left:auto;
    gap:7px;
  }
  .header-actions .btn{
    min-height:36px;
    padding:8px 11px;
    font-size:12px;
  }
  .contact-link{
    min-height:36px;
    padding-inline:3px;
    font-size:11px;
    white-space:nowrap;
  }

  /* Nav remains invisible on hero, then becomes a compact second row. */
  .top .nav{
    display:flex !important;
    position:fixed;
    z-index:49;
    top:calc(var(--header-h) + env(safe-area-inset-top));
    left:0;
    right:0;
    height:38px;
    padding:0 max(12px,env(safe-area-inset-left));
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    white-space:nowrap;
    background:rgba(5,7,10,.92);
    border-bottom:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
  }
  .top .nav::-webkit-scrollbar{display:none}
  .top .nav.after-hero{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .orbital-hero{min-height:138dvh}
  .orbital-sticky{
    padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 4px);
    padding-inline:6px;
  }
  .orbital-shell{
    width:100%;
    height:calc(100dvh - var(--header-h) - env(safe-area-inset-top) - 8px);
  }
  .system-constellation{
    width:100%;
    height:100%;
    max-height:none;
  }

  .market-label{top:7%}
  .supply-label{left:4%}
  .demand-label{right:4%}
  .market-label span,.market-label small{font-size:8px}

  .constellation-node{
    border-radius:15px;
    padding:12px 13px;
  }
  .constellation-node strong{
    font-size:clamp(19px,5.5vw,28px);
  }
  .constellation-node span{
    margin-top:6px;
    font-size:clamp(9px,2.4vw,11px);
  }
  .os-node{left:4%;top:16%;width:34%}
  .solo-node{left:4%;top:46%;width:30%}
  .signal-node{right:4%;top:20%;width:38%}
  .exchange-node{left:29%;top:73%;width:42%}

  .graph-core{
    left:50%;
    top:49%;
    width:clamp(108px,29vw,142px);
    height:clamp(108px,29vw,142px);
    padding:12px;
  }
  .graph-core small{font-size:6px;margin-bottom:6px}
  .graph-core strong{font-size:clamp(20px,6.5vw,26px)}
  .core-pulse{inset:-8px}
  .constellation-status{display:none}
  .truyn-orbit-label{
    bottom:1%;
    padding:7px 10px;
  }

  .chapter{
    min-height:auto;
    padding-block:64px;
  }
  .split-head{display:none}
  .flow-grid{
    grid-template-columns:1fr !important;
    gap:18px;
    margin-top:0;
  }
  .lane.left,.lane.right{
    grid-column:1 !important;
    margin-top:0;
  }
  .lane.left::before,
  .lane.right::before{
    display:block;
    margin:0 2px 3px;
    color:#cbd3df;
    font-size:10px;
    line-height:1.3;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .lane.left::before{content:"Information supply · Creators / Publishers"}
  .lane.right::before{content:"Demand / Market · Brands / Advertisers"}
  .lane.right{margin-top:18px}
  .peer-products{grid-template-columns:1fr 1fr;gap:12px}
  .peer-products .product-card{min-height:0}
  .peer-merge{display:none}
  .merge-zone{height:120px;min-height:120px}
  .graph-card{padding:26px 20px 24px}
  .branch-zone{min-height:auto}
  .branch-grid{
    grid-template-columns:1fr;
    gap:14px;
    padding-top:52px;
  }
  .branch-card.exchange,.branch-card.truyn{grid-column:1}
  .exchange-centered{min-height:0}
  .exchange-truyn-context{margin-top:18px}
  .ai-merge{min-height:0}
  .ai-card{
    margin-top:48px;
    min-height:0;
  }
  .outcomes-card{width:100%}
  .return-zone{min-height:650px}
  .return-copy{
    padding-top:105px;
  }
  .return-copy p{font-size:15px}
  .return-targets{grid-template-columns:1fr;gap:10px}
  .group-footer-inner{
    grid-template-columns:1fr;
    text-align:center;
    gap:14px;
    padding:20px 0;
  }
  .group-copyright{max-width:none}
  .group-footer-links{justify-content:center;flex-wrap:wrap}
}

/* Phones */
@media (max-width:600px){
  :root{--page-pad:10px}
  .topin{
    width:calc(100% - 20px);
    gap:6px;
  }
  .brand{
    font-size:16px;
    gap:4px;
  }
  .brand-index{
    font-size:6px;
    padding:2px 3px;
  }
  .header-actions{gap:5px}
  .header-actions .btn{
    min-height:34px;
    padding:7px 9px;
    font-size:10px;
  }
  .contact-link{
    min-height:34px;
    font-size:10px;
  }

  .orbital-hero{min-height:132dvh}
  .orbital-sticky{
    padding-left:4px;
    padding-right:4px;
    padding-bottom:max(5px,env(safe-area-inset-bottom));
  }
  .system-constellation:before{inset:4% 1% 3%}
  .truyn-orbit{inset:1%}
  .halo-1{width:62%;height:55%}
  .halo-2{width:80%;height:74%}
  .halo-3{width:94%;height:90%}

  .market-label{top:6.5%}
  .market-label span{font-size:7px}
  .market-label small{font-size:7px}
  .os-node{left:3%;top:16%;width:35%}
  .solo-node{left:3%;top:47%;width:31%}
  .signal-node{right:3%;top:20%;width:39%}
  .exchange-node{left:27%;top:73%;width:46%}
  .constellation-node{
    padding:10px 11px;
    border-radius:13px;
  }
  .constellation-node strong{font-size:clamp(17px,6vw,23px)}
  .constellation-node span{font-size:9px;line-height:1.25}
  .graph-core{
    width:clamp(94px,28vw,118px);
    height:clamp(94px,28vw,118px);
  }
  .graph-core strong{font-size:clamp(18px,6vw,23px)}
  .truyn-orbit-label{
    padding:6px 9px;
  }
  .truyn-orbit-label b{font-size:7px}

  .ecosystem{
    width:calc(100% - 16px);
    padding-bottom:72px;
  }
  .chapter{
    padding-block:48px;
  }
  .chapter-title{margin-bottom:24px}
  .chapter-title small{font-size:9px}
  .chapter-title h2{
    font-size:clamp(30px,10vw,46px);
    margin:9px 0 11px;
  }
  .chapter-title p{font-size:14px;line-height:1.5}
  .peer-products{
    grid-template-columns:1fr;
  }
  .source-card,.product-card,.graph-card,.branch-card,.ai-card,.outcomes-card{
    padding:16px;
    border-radius:16px;
  }
  .product-card{min-height:0}
  .product-card h3,.branch-card h3{font-size:clamp(28px,10vw,42px)}
  .chips{gap:6px;margin-top:14px}
  .chips b{font-size:10px;padding:5px 8px}
  .graph-mini{
    height:170px !important;
    border-radius:14px;
  }
  .graph-mini-status{display:none}
  .exchange-truyn-context{
    padding:13px 14px;
    border-radius:14px;
  }
  .ai-card h3{font-size:clamp(34px,12vw,54px)}
  .outcomes-card h3{font-size:clamp(24px,7.5vw,34px)}
  .ai-ring{display:none}
  .return-zone{min-height:690px}
  .return-copy{
    width:100%;
    padding-top:96px;
  }
  .return-copy h2{font-size:clamp(32px,10vw,48px)}
  .return-copy p{font-size:14px}
  .return-target{
    padding:15px;
    border-radius:15px;
  }
  .group-ecosystem-links{
    gap:12px 14px;
  }
  .group-ecosystem-links a{
    align-items:center;
  }
  .group-faq-sheet{
    max-height:94dvh;
  }
  .group-faq-in{padding:16px 14px 24px}
  .group-faq-head{gap:10px}
  .group-faq-head h2{font-size:32px}
  .group-faq-head p{font-size:11px}
  .group-faq-close{
    width:38px;
    height:38px;
  }
  .drawer{
    left:8px;
    right:8px;
    top:auto;
    bottom:8px;
    width:auto;
    max-height:88dvh;
    border-radius:20px;
    transform:translateY(calc(100% + 24px));
  }
  .drawer.on{transform:none}
  .drawerbody{padding:8px 18px 24px}
  .drawerbody h3{font-size:34px}
  .tip{display:none}
}

/* Very narrow phones */
@media (max-width:380px){
  .contact-link{font-size:9px}
  .header-actions .btn{font-size:9px;padding-inline:8px}
  .brand{font-size:15px}
  .market-label small{display:none}
  .constellation-node span{font-size:8px}
  .os-node{width:36%}
  .signal-node{width:40%}
  .exchange-node{left:25%;width:50%}
  .graph-core{
    width:90px;
    height:90px;
  }
  .group-footer-text{font-size:9px}
}

/* Landscape phones / tablets with short viewports */
@media (orientation:landscape) and (max-height:700px){
  :root{--header-h:54px}
  .topin{width:calc(100% - 22px)}
  .top .nav{
    top:calc(var(--header-h) + env(safe-area-inset-top));
    height:34px;
    font-size:11px;
  }
  .orbital-hero{min-height:150dvh}
  .orbital-sticky{
    padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 3px);
    padding-bottom:4px;
  }
  .orbital-shell{
    height:calc(100dvh - var(--header-h) - env(safe-area-inset-top) - 6px);
  }
  .system-constellation{
    height:100%;
    min-height:0;
  }
  .market-label{top:4%}
  .market-label small{display:none}
  .constellation-node{
    padding:8px 10px;
    border-radius:12px;
  }
  .constellation-node strong{
    font-size:clamp(16px,3.1vw,24px);
  }
  .constellation-node span{
    margin-top:4px;
    font-size:8px;
  }
  .os-node{top:10%;left:7%;width:27%}
  .solo-node{top:46%;left:5%;width:23%}
  .signal-node{top:14%;right:6%;width:31%}
  .exchange-node{top:72%;left:36%;width:28%}
  .graph-core{
    width:clamp(88px,16vh,112px);
    height:clamp(88px,16vh,112px);
  }
  .graph-core small{display:none}
  .graph-core strong{font-size:20px}
  .truyn-orbit-label{bottom:.5%}
  .chapter{
    min-height:auto;
    padding-block:46px;
  }
  .chapter-title h2{font-size:clamp(32px,6vw,54px)}
  .group-faq-sheet{max-height:96dvh}
}

/* Touch devices: remove hover-only motion and expensive blur where it adds no value. */
@media (hover:none) and (pointer:coarse){
  .source-card:hover,.product-card:hover,.graph-card:hover,.branch-card:hover,.ai-card:hover,.outcomes-card:hover,
  .constellation-node:hover{
    transform:none;
  }
  .constellation-node,
  .group-faq-sheet,
  .drawer{
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Search / answer-engine friendly corporate summary */
.seo-answer-block{
  width:min(980px,calc(100% - (var(--page-pad,22px) * 2)));
  margin:0 auto clamp(54px,8vh,96px);
  padding:clamp(20px,3vw,32px);
  border:1px solid rgba(255,255,255,.075);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.012));
  text-align:left;
}
.seo-answer-block h2{
  margin:0 0 12px;
  color:#f3f6fb;
  font-size:clamp(24px,3vw,38px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.seo-answer-block p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.68;
}
.seo-answer-block a{
  color:#e9edff;
  text-decoration:underline;
  text-decoration-color:rgba(127,140,255,.45);
  text-underline-offset:3px;
}
.seo-answer-block a:hover{color:#fff}
@media(max-width:600px){
  .seo-answer-block{
    width:calc(100% - 16px);
    margin-bottom:48px;
    padding:18px 16px;
    border-radius:16px;
  }
}

/* Crawlable press and independent-reference corpus */
.press-reference-block details{margin-top:18px;border-top:1px solid rgba(255,255,255,.07);padding-top:14px}.press-reference-block summary{cursor:pointer;color:#e9edff;font-size:12px;font-weight:720}.press-reference-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 20px;margin:16px 0 0;padding:0;list-style:none}.press-reference-list li{min-width:0;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055)}.press-reference-list a{display:block;color:#e8edf7;font-size:12px;line-height:1.45;text-decoration:none}.press-reference-list a:hover{text-decoration:underline}.press-reference-list span{display:block;margin-top:4px;color:var(--muted2);font-size:9px;line-height:1.35;text-transform:uppercase;letter-spacing:.06em}@media(max-width:700px){.press-reference-list{grid-template-columns:1fr}}