/* ==========================================================================
   SLIDES — per-slide layout. All measurements are in stage pixels
   (the stage is a fixed 1920×1080 canvas that is scaled to the screen).
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg:has(> use) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dia { position: absolute; inset: 0; z-index: 2; }
.dia > svg, .dia svg.links, .dia svg.track { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
.atmo { position: absolute; inset: -20px; z-index: 0; background-size: cover; background-position: center; opacity: .07; filter: grayscale(1) contrast(1.1) blur(3px); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 58%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 62% 58% at 50% 58%, #000 25%, transparent 78%); }
.foot-statement { margin: 0; font: 700 30px/1.3 var(--font-display); letter-spacing: -.012em; color: var(--text); }
.foot-sub { margin: 10px 0 0; font-size: 20px; color: var(--muted); }
.slide-foot .note { margin: 10px 0 0; }
.corner-note { position: absolute; right: 96px; bottom: 44px; margin: 0; font: 500 13px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.demo-flag { position: absolute; right: 96px; top: 84px; z-index: 3; font: 500 13px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); padding: 9px 13px; border-radius: 9px; border: 1px solid rgba(var(--accent-2-rgb), .35); background: rgba(var(--accent-2-rgb), .08); }

/* ======================= 01 · COVER ======================= */
.s01 .cover-copy { position: absolute; left: 120px; top: 176px; width: 1040px; z-index: 3; }
.headline.display { font-size: 118px; line-height: 1; letter-spacing: -.04em; margin-top: 30px; }
.cover-brand { display: flex; align-items: center; gap: 18px; margin-top: 58px; font-size: 22px; font-weight: 500; color: var(--text-2); }
.cover-lead { margin: 28px 0 0; font-size: 36px; font-weight: 600; letter-spacing: -.012em; color: var(--text); }
.cover-mods { margin: 18px 0 0; font-size: 22px; line-height: 1.65; color: var(--muted); }
.s01 .by { margin: 40px 0 0; font: 500 15px/1.4 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.s01 .by b { color: var(--text-2); font-weight: 500; }

.orbit { position: absolute; left: 900px; top: 150px; width: 1000px; height: 900px; z-index: 2; }
.orbit-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px 0 0 -140px; display: grid; place-items: center; z-index: 5; }
.orbit-core .core-halo { position: absolute; inset: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .28) 0%, rgba(var(--accent-2-rgb), .12) 32%, transparent 64%); animation: halo 5s ease-in-out infinite; }
.orbit-core .core-ring { position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), .38); animation: spin 40s linear infinite; }
.orbit-core .core-ring::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid rgba(var(--accent-2-rgb), .22); }
.orbit-core .ibos-mark { position: relative; }
@keyframes halo { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-chip {
  position: absolute; left: 0; top: 0; z-index: 6;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 15px;
  font-size: 20px; font-weight: 600; color: var(--text); white-space: nowrap;
  background: linear-gradient(180deg, rgba(30, 32, 40, .94), rgba(18, 19, 24, .94));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px -14px rgba(0,0,0,.8);
  will-change: transform, opacity;
}
.orbit-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.orbit-chip.is-key { border-color: rgba(var(--accent-rgb), .7); color: var(--accent); box-shadow: 0 0 30px rgba(var(--accent-rgb), .25), inset 0 1px 0 rgba(255,255,255,.1); }
.orbit-chip.is-key::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }


/* ======================= 02 · PLATFORMS → HUB ======================= */
.ptile {
  position: absolute; width: 340px; height: 88px; z-index: 3;
  display: flex; align-items: center; gap: 16px; padding: 0 22px 0 18px;
  border-radius: 18px; border: 1px solid var(--line);
  background: var(--wash, none), var(--g-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -22px rgba(0,0,0,.9);
  cursor: pointer; transition: border-color .35s, box-shadow .35s, opacity .35s, translate .45s var(--ease);
}
.ptile-ic { width: 78px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: rgba(0, 0, 0, 0.44); border: 1px solid var(--line); font-size: 26px; }
.ptile-ic img { width: 30px; height: 30px; }
.ptile-t b { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; }
.ptile-t small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.ptile-led { position: absolute; right: -7px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--ink-800); border: 2px solid rgba(var(--accent-rgb), .8); box-shadow: 0 0 12px rgba(var(--accent-rgb), .7); }
.ptile.hot { border-color: rgba(var(--accent-rgb), .75); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 0 44px -6px rgba(var(--accent-rgb), .6); translate: 10px 0; }
.ptile.hot .ptile-led { background: var(--accent); }
.dia.has-hot .ptile:not(.hot) { opacity: .42; }
.links .ln-base { fill: none; stroke: rgba(255, 255, 255, 0.072); stroke-width: 7; stroke-linecap: round; }
.links .ln { fill: none; stroke: url(#linkGrad); stroke-width: 2.2; opacity: .75; transition: opacity .35s, stroke-width .35s; }
.links .ln.hot { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 6px rgba(139, 125, 255, .9)); }
.links.has-hot .ln:not(.hot) { opacity: .18; }
.links .pulse { transition: opacity .35s; }
.links.has-hot .pulse:not(.hot) { opacity: .15; }

.hub { position: absolute; width: 420px; height: 420px; z-index: 2; }
.hub-ring { position: absolute; border-radius: 50%; }
.hub-ring.r1 { inset: 0; border: 1px dashed rgba(var(--accent-rgb), .35); animation: spin 60s linear infinite; }
.hub-ring.r2 { inset: 34px; border: 1px solid rgba(var(--accent-2-rgb), .28); }
.hub-ring.r3 { inset: 58px; background: conic-gradient(from 0deg, transparent 0 70%, rgba(var(--accent-rgb), .55) 96%, #fff 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 6s linear infinite; }
.hub-glow { position: absolute; inset: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .3), transparent 65%); animation: halo 4s ease-in-out infinite; }
.hub-body { position: absolute; inset: 88px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  background: var(--g-disc); border: 1.5px solid rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 60px rgba(var(--accent-rgb), .25), inset 0 0 40px rgba(var(--accent-rgb), .12); }
.hub-body .ibos-word { font-size: 58px; }
.hub-body small { font: 500 14px/1.5 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--text-2); max-width: 200px; }
.hub.absorb .hub-body { box-shadow: 0 0 90px rgba(var(--accent-rgb), .5), inset 0 0 50px rgba(var(--accent-rgb), .25); }

.s02-foot { position: absolute; left: 1040px; width: 760px; top: 780px; text-align: center; z-index: 3; }
.s02-foot p { margin: 0; }
.s02-foot .before { font-size: 20px; color: var(--muted); }
.s02-foot .before s { text-decoration-color: rgba(var(--coral-rgb), .75); text-decoration-thickness: 1.5px; }
.s02-foot .before i { font-style: normal; margin: 0 12px; color: var(--dim); }
.s02-foot .after { margin-top: 14px; font: 700 36px/1.2 var(--font-display); letter-spacing: -.02em; }
.s02-foot .after b { color: var(--c-text); }
.s02-foot .note { margin-top: 14px; }

/* ======================= 03 · ACTION LOOP ======================= */
.track .track-base { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 30; }
.track .track-line { fill: none; stroke: url(#trackGrad); stroke-width: 2.5; stroke-dasharray: 3 11; animation: dashflow 2.4s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset: -56; } }
.track .chev { fill: rgba(var(--accent-rgb), .55); }
.lnode {
  position: absolute; width: 380px; height: 214px; z-index: 3;
  display: flex; flex-direction: column; padding: 18px 22px 18px; text-align: left;
  border-radius: 20px; border: 1px solid var(--line-2);
  background: var(--wash, none), var(--g-card-solid);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -26px rgba(0,0,0,.9);
  transition: border-color .4s, box-shadow .4s, background .4s;
}
.ln-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ln-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .09); border: 1px solid rgba(var(--accent-rgb), .35); transition: background .4s, color .4s; }
.ln-ic svg { width: 21px; height: 21px; }
.lnode .ln-n { display: block; font: 500 15px/1 var(--font-mono); letter-spacing: .2em; color: var(--accent); text-transform: uppercase; }
.lnode > b { display: block; font: 700 24px/1.15 var(--font-display); margin: 0 0 8px; letter-spacing: -.012em; }
.lnode > p { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--text-2); }
.lnode.lit { border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 46px -4px rgba(var(--accent-rgb), .45); background: var(--wash-violet), var(--g-card-solid); }
.lnode.lit .ln-ic { background: var(--accent); color: #0A0B0F; }
.lnode.decide { height: 226px; color: inherit; font: inherit; cursor: pointer; border-color: rgba(var(--decision-rgb), .55); background: var(--wash-decision), var(--g-card-solid); }
.lnode.decide .ln-ic { color: var(--decision); background: rgba(var(--decision-rgb), .1); border-color: rgba(var(--decision-rgb), .45); }
.lnode.decide .ln-n { color: var(--decision); letter-spacing: .16em; font-size: 13px; }
.lnode.decide > b { font-size: 30px; color: var(--c-decision); }
.lnode.decide.lit, .lnode.decide.waiting { border-color: var(--decision); box-shadow: 0 0 0 1px rgba(var(--decision-rgb), .45), 0 0 60px -4px rgba(var(--decision-rgb), .55); }
.lnode.decide.lit .ln-ic, .lnode.decide.waiting .ln-ic { background: var(--decision); color: var(--c-decision-ink); }
.lnode.decide.waiting { animation: decisionPulse 1.6s ease-in-out infinite; }
@keyframes decisionPulse { 50% { box-shadow: 0 0 0 8px rgba(var(--decision-rgb), .12), 0 0 80px 0 rgba(var(--decision-rgb), .5); } }
.decide-cta { position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--grad-decision); color: var(--c-decision-ink); font-size: 15px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .35s; box-shadow: 0 10px 30px -8px rgba(var(--decision-rgb), .8); }
.decide-cta svg { width: 16px; height: 16px; stroke-width: 2.4; }
.lnode.decide.waiting .decide-cta { opacity: 1; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }
.decide-stamp { position: absolute; right: 18px; top: 16px; padding: 5px 11px; border-radius: 8px; border: 2px solid var(--ok); color: var(--ok); background: rgba(var(--ok-rgb), .1); font: 700 14px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none; }
.next-cycle { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 12px; background: #16171D; border: 1px solid var(--line-2); font: 500 13px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.next-cycle svg { width: 17px; height: 17px; color: var(--accent); }
.next-cycle b { color: var(--accent); font-weight: 500; }
.s03 .slide-foot { bottom: 116px; }

/* ======================= 04 · CONTROL ROOM ======================= */
.room-links .rl { fill: none; stroke: rgba(255, 255, 255, 0.115); stroke-width: 1.5; stroke-dasharray: 4 8; animation: dashflow 3s linear infinite; }
.room-links .rl.on { stroke: rgba(var(--accent-rgb), .9); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(139, 125, 255, .9)); }
.room-links .rl.decision.on { stroke: rgba(var(--decision-rgb), .95); filter: drop-shadow(0 0 5px rgba(255, 157, 117, .9)); }
.room-core { position: absolute; width: 250px; height: 250px; border-radius: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--g-disc); border: 1.5px solid rgba(var(--accent-rgb), .5); box-shadow: 0 0 70px rgba(var(--accent-rgb), .22); }
.room-core .rc-ring { position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), .35); animation: spin 50s linear infinite; }
.room-core .rc-ring.r2 { inset: -44px; border: 1px solid rgba(var(--accent-2-rgb), .16); animation: none; }
.room-core .rc-label { font: 500 13px/1.3 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); text-align: center; max-width: 180px; }
.fpanel {
  position: absolute; width: 520px; height: 170px; z-index: 3;
  display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto 1fr; column-gap: 18px;
  padding: 22px 24px; text-align: left; color: inherit; font: inherit;
  border-radius: 20px; border: 1px solid var(--line);
  background: var(--wash, none), var(--g-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -26px rgba(0,0,0,.9);
  overflow: hidden; cursor: pointer;
  transition: border-color .4s, box-shadow .4s, translate .5s var(--ease), background .4s;
}
.fp-ic { grid-row: 1 / span 2; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .09); border: 1px solid rgba(var(--accent-rgb), .3); }
.fp-ic svg, .fp-ic img { width: 28px; height: 28px; }
.fp-title { font: 700 23px/1.2 var(--font-display); letter-spacing: -.012em; }
.fp-viz { align-self: end; height: 52px; position: relative; transition: opacity .4s, transform .4s var(--ease); }
.fp-desc { position: absolute; left: 100px; right: 24px; bottom: 20px; font-size: 16.5px; line-height: 1.42; color: var(--text-2); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .45s var(--ease); }
.fpanel.open { border-color: rgba(var(--accent-rgb), .75); background: var(--wash, var(--wash-violet)), var(--g-card-solid); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25), 0 0 50px -8px rgba(var(--accent-rgb), .45); }
.fpanel.open .fp-viz { opacity: 0; transform: translateY(-12px); }
.fpanel.open .fp-desc { opacity: 1; transform: none; }
.fpanel[data-side="l"].open { translate: 14px 0; }
.fpanel[data-side="r"].open { translate: -14px 0; }
.fpanel.decision { height: 150px; }
.fpanel.decision .fp-ic { color: var(--decision); background: rgba(var(--decision-rgb), .1); border-color: rgba(var(--decision-rgb), .4); }
.fpanel.decision .fp-title { color: var(--decision); }
.fpanel.decision.open { border-color: rgba(var(--decision-rgb), .8); box-shadow: 0 0 0 1px rgba(var(--decision-rgb), .25), 0 0 50px -8px rgba(var(--decision-rgb), .5); translate: 0 -8px; }
/* mini visualisations */
.viz-radar { border-radius: 10px; background-image: radial-gradient(rgba(255, 255, 255, 0.158) 1.1px, transparent 1.5px); background-size: 11px 11px; }
.viz-radar i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.viz-radar i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); animation: ping 2.4s ease-out infinite; }
.viz-radar i:nth-child(1) { left: 12%; top: 30%; } .viz-radar i:nth-child(2) { left: 34%; top: 62%; } .viz-radar i:nth-child(3) { left: 55%; top: 20%; }
.viz-radar i:nth-child(4) { left: 72%; top: 55%; background: var(--accent-2); } .viz-radar i:nth-child(5) { left: 88%; top: 28%; }
.viz-radar i:nth-child(2)::after { animation-delay: .6s; } .viz-radar i:nth-child(3)::after { animation-delay: 1.2s; } .viz-radar i:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.viz-trend svg { width: 100%; height: 100%; }
.viz-trend path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 300; animation: draw 3.2s var(--ease) infinite; }
@keyframes draw { from { stroke-dashoffset: 300; } 60%, to { stroke-dashoffset: 0; } }
.viz-tiles { display: flex; gap: 8px; align-items: stretch; }
.viz-tiles i { flex: 1; border-radius: 8px; background: linear-gradient(160deg, rgba(var(--c-violet-rgb), .55), rgba(var(--c-violet-rgb), .18)); animation: shimmer 3s ease-in-out infinite; }
.viz-tiles i:nth-child(2n) { background: linear-gradient(160deg, rgba(var(--c-coral-rgb), .5), rgba(var(--c-coral-rgb), .15)); }
.viz-tiles i:nth-child(2) { animation-delay: .3s; } .viz-tiles i:nth-child(3) { animation-delay: .6s; } .viz-tiles i:nth-child(4) { animation-delay: .9s; } .viz-tiles i:nth-child(5) { animation-delay: 1.2s; } .viz-tiles i:nth-child(6) { animation-delay: 1.5s; }
@keyframes shimmer { 50% { opacity: .45; } }
.viz-bars { display: flex; align-items: flex-end; gap: 9px; }
.viz-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #4FD8CB, rgba(var(--c-teal-rgb), .25)); transform-origin: bottom; animation: barpulse 2.6s ease-in-out infinite; }
.viz-bars i:nth-child(2n) { animation-delay: .4s; } .viz-bars i:nth-child(3n) { animation-delay: .8s; }
@keyframes barpulse { 50% { transform: scaleY(.72); } }
.viz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; align-items: center; }
.viz-cal i { height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.32); }
.viz-cal i.on { background: rgba(var(--accent-rgb), .3); border-color: rgba(var(--accent-rgb), .6); animation: shimmer 2.8s ease-in-out infinite; }
.viz-donut { display: flex; align-items: center; gap: 16px; }
.viz-donut svg { width: 52px; height: 52px; transform: rotate(-90deg); animation: spin 12s linear infinite; }
.viz-donut circle { fill: none; stroke-width: 7; }
.viz-donut .d0 { stroke: var(--accent); stroke-dasharray: 45 55; }
.viz-donut .d1 { stroke: var(--accent-2); stroke-dasharray: 30 70; stroke-dashoffset: -45; }
.viz-donut .d2 { stroke: var(--sky); stroke-dasharray: 25 75; stroke-dashoffset: -75; }
.viz-donut > span { flex: 1; display: grid; gap: 7px; }
.viz-donut > span i { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); }
.viz-donut > span i:nth-child(1) { width: 90%; background: rgba(var(--accent-rgb), .5); } .viz-donut > span i:nth-child(2) { width: 65%; } .viz-donut > span i:nth-child(3) { width: 40%; }
.viz-decide { display: flex; gap: 10px; align-items: center; }
.viz-decide i { font-style: normal; font-size: 15px; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid rgba(var(--ok-rgb), .5); color: var(--ok); background: rgba(var(--ok-rgb), .08); }
.viz-decide i:nth-child(2) { border-color: rgba(var(--coral-rgb), .5); color: var(--coral); background: none; }
.viz-decide i:nth-child(3) { border-color: var(--line-3); color: var(--text-2); background: none; }
.s04 .slide-foot { bottom: 112px; }

/* ======================= 05 · SIGNALS ======================= */
.sig-links .sl { fill: none; stroke: rgba(255, 255, 255, 0.094); stroke-width: 1.6; }
.sig-links .sl.out { stroke: rgba(var(--accent-2-rgb), .22); }
.sig-in { position: absolute; left: 110px; width: 390px; height: 70px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 14px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--wash, none), var(--g-card); transition: border-color .3s, box-shadow .3s; }
.sig-in b { flex: 1; font-size: 18px; font-weight: 600; line-height: 1.2; }
.si-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .09); border: 1px solid rgba(var(--accent-rgb), .3); }
.si-ic svg { width: 21px; height: 21px; }
.sig-in .spark { width: 92px; height: 30px; flex: none; overflow: visible; }
.sig-in .spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.sig-in.ping { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 30px -6px rgba(var(--accent-rgb), .6); }
.sig-core { position: absolute; width: 320px; height: 320px; border-radius: 50%; z-index: 3; }
.sc-radar { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 290deg, rgba(var(--accent-rgb), .08) 300deg, rgba(var(--accent-rgb), .42) 358deg, rgba(var(--accent-rgb), 0) 360deg); animation: spin 4.5s linear infinite; }
.sc-dots { position: absolute; inset: 14px; border-radius: 50%; background-image: radial-gradient(rgba(255, 255, 255, 0.202) 1.2px, transparent 1.7px); background-size: 13px 13px;
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 72%); mask: radial-gradient(circle, #000 55%, transparent 72%); }
.sc-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(var(--accent-rgb), .5); box-shadow: 0 0 60px rgba(var(--accent-rgb), .2), inset 0 0 40px rgba(var(--accent-rgb), .12); }
.sc-ring::before, .sc-ring::after { content: ''; position: absolute; inset: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.086); }
.sc-ring::after { inset: 80px; }
.sc-body { position: absolute; inset: 78px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px; background: var(--g-disc); border: 1px solid rgba(var(--accent-rgb), .45); box-shadow: 0 0 40px rgba(var(--accent-rgb), .25); }
.sc-body .ibos-word { font-size: 44px; }
.sc-body small { font: 500 12px/1 var(--font-mono); letter-spacing: .28em; text-transform: uppercase; color: var(--text-2); }
.sig-core.absorb .sc-ring { border-color: var(--accent); box-shadow: 0 0 90px rgba(var(--accent-rgb), .45), inset 0 0 50px rgba(var(--accent-rgb), .22); }
.sig-out { position: absolute; left: 1390px; width: 434px; height: 172px; z-index: 3; perspective: 1100px; }
.so-in { position: relative; width: 100%; height: 100%; padding: 20px 22px; border-radius: 20px; display: grid; grid-template-columns: 1fr 200px; grid-template-rows: auto 1fr auto; column-gap: 12px;
  border: 1px solid var(--line-2); background: var(--wash, none), var(--g-card); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.9);
  transform-style: preserve-3d; backface-visibility: hidden; }
.so-k { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 700 24px/1.1 var(--font-display); }
.so-k svg { width: 24px; height: 24px; }
.so-chart { grid-column: 2; grid-row: 2 / span 2; width: 200px; height: 70px; align-self: end; overflow: visible; }
.so-q { grid-column: 1; grid-row: 3; align-self: end; font: 500 13px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sig-out.opp .so-in { border-color: rgba(var(--accent-rgb), .45); } .sig-out.opp .so-k { color: var(--accent); }
.sig-out.opp .bars rect { fill: rgba(var(--accent-rgb), .35); } .sig-out.opp .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.sig-out.risk .so-in { border-color: rgba(var(--coral-rgb), .45); } .sig-out.risk .so-k { color: var(--coral); }
.sig-out.risk .ln { fill: none; stroke: var(--coral); stroke-width: 2.2; } .sig-out.risk .area { fill: rgba(var(--coral-rgb), .12); }
.sig-out.ins .so-in { border-color: rgba(var(--accent-2-rgb), .5); } .sig-out.ins .so-k { color: var(--accent-2); }
.so-doc { grid-column: 2; grid-row: 2 / span 2; align-self: end; position: relative; height: 74px; border-radius: 10px; border: 1px solid rgba(var(--accent-2-rgb), .35); background: rgba(0, 0, 0, 0.36); padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.so-doc i { height: 7px; border-radius: 4px; background: rgba(var(--accent-2-rgb), .35); }
.so-doc i:nth-child(2) { width: 75%; } .so-doc i:nth-child(3) { width: 55%; }
.so-check { position: absolute; right: -10px; bottom: -10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-2); color: #FFFFFF; box-shadow: 0 0 20px rgba(var(--accent-2-rgb), .7); }
.so-check svg { width: 20px; height: 20px; stroke-width: 2.6; }
.sig-out.fresh .so-in { box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 50px -6px rgba(var(--accent-rgb), .5); }

/* ======================= 06 · STRATEGY ======================= */
.inputs-label { position: absolute; z-index: 3; font-size: 15px; color: var(--muted); letter-spacing: .24em; }
.st-in { position: absolute; width: 480px; height: 156px; z-index: 3; display: grid; grid-template-columns: 64px 1fr 110px; align-items: center; gap: 18px; padding: 0 24px; }
.st-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); }
.st-ic svg { width: 30px; height: 30px; }
.st-in b { display: block; font: 700 27px/1.15 var(--font-display); letter-spacing: -.015em; }
.st-in small { display: block; margin-top: 6px; font-size: 16px; color: var(--muted); }
.st-viz.radar-mini { position: relative; width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .3); background: conic-gradient(from 0deg, transparent 0 75%, rgba(var(--accent-rgb), .45) 100%); animation: spin 3.5s linear infinite; }
.st-viz.radar-mini i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.st-viz.radar-mini i:nth-child(1) { left: 30%; top: 26%; } .st-viz.radar-mini i:nth-child(2) { left: 64%; top: 56%; } .st-viz.radar-mini i:nth-child(3) { left: 36%; top: 70%; }
.st-viz.line-mini { width: 110px; height: 50px; overflow: visible; }
.st-viz.line-mini path { fill: none; stroke: var(--accent-2); stroke-width: 2.6; stroke-dasharray: 200; animation: draw 3s var(--ease) infinite; }
.st-plus { position: absolute; z-index: 3; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; display: grid; place-items: center; font: 800 34px/1 var(--font-display); color: var(--accent); background: #16171D; border: 1px solid rgba(var(--accent-rgb), .45); box-shadow: 0 0 24px rgba(var(--accent-rgb), .3); }
.merge .mg { fill: none; stroke: rgba(var(--accent-rgb), .55); stroke-width: 3; stroke-linecap: round; }
.merge .mg.c { stroke-width: 5; stroke: var(--accent); }
.merge .mg-head { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.merge .dot { fill: #FFFFFF; }
.st-out { position: absolute; width: 884px; height: 470px; z-index: 3; padding: 36px 40px; }
.recs { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.recs li { display: flex; align-items: center; gap: 16px; height: 70px; padding: 0 22px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.043); font-size: 24px; font-weight: 600; letter-spacing: -.005em; }
.recs li svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.recs li.wide { grid-column: 1 / -1; }
.recs li.flash { border-color: rgba(var(--accent-rgb), .8); box-shadow: 0 0 34px -6px rgba(var(--accent-rgb), .55); }
.evpath { position: absolute; left: 300px; right: 300px; height: 80px; z-index: 3; }
.ev-track { position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.086); }
.ev-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--sky) 60%, var(--decision)); box-shadow: 0 0 14px rgba(var(--accent-rgb), .7); }
.ev-spark { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 6px rgba(var(--accent-rgb), .7); }
.ev-node { position: absolute; top: 0; width: 240px; margin-left: -120px; text-align: center; }
.ev-node:nth-of-type(2) { left: 0; } .ev-node:nth-of-type(3) { left: 33.333%; } .ev-node:nth-of-type(4) { left: 66.666%; } .ev-node:nth-of-type(5) { left: 100%; }
.ev-node span { display: block; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; background: #16171D; border: 2px solid rgba(255, 255, 255, 0.252); transition: background .35s, border-color .35s, box-shadow .35s; }
.ev-node b { display: block; margin-top: 12px; font-size: 21px; font-weight: 600; color: var(--muted); transition: color .35s; }
.ev-node.on span { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 20px rgba(var(--accent-rgb), .8); }
.ev-node.on b { color: var(--text); }
.ev-node.decision.on span { background: var(--decision); border-color: var(--decision); box-shadow: 0 0 24px rgba(var(--decision-rgb), .9); }
.ev-node.decision.on b { color: var(--decision); }

/* ======================= 07 · PIPELINE ======================= */
.stations { position: absolute; left: 110px; right: 110px; top: 292px; height: 480px; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.station { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 22px; border: 1px solid var(--line);
  background: var(--wash, none), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 60%, rgba(255, 255, 255, .03)); transition: border-color .4s, box-shadow .4s; }
.station::after { content: ''; position: absolute; left: 50%; bottom: 128px; width: 70%; height: 1px; margin-left: -35%; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .35), transparent); }
.stn-n { font: 500 14px/1 var(--font-mono); letter-spacing: .2em; color: var(--accent); }
.station b { margin-top: 8px; font: 800 26px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.station small { margin-top: 6px; font-size: 15px; color: var(--muted); line-height: 1.35; }
.station.decision { border-color: rgba(var(--decision-rgb), .35); }
.station.decision .stn-n, .station.decision b { color: var(--decision); }
.station.busy { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 40px -12px rgba(var(--accent-rgb), .5); }
.station.decision.busy { border-color: rgba(var(--decision-rgb), .7); box-shadow: 0 0 40px -12px rgba(var(--decision-rgb), .6); }
.stn-deco { margin-top: auto; height: 84px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.deco-ideas { color: var(--c-coral-soft); position: relative; }
.deco-ideas svg { width: 40px; height: 40px; }
.deco-ideas i { width: 44px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.144); }
.deco-ideas i:nth-of-type(2) { width: 30px; } .deco-ideas i:nth-of-type(3) { width: 20px; }
.deco-prod { flex-direction: column; gap: 10px; }
.prod-bars { display: flex; gap: 6px; }
.prod-bars i { width: 40px; height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb), .25); overflow: hidden; position: relative; }
.prod-bars i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: fillbar 2s ease-in-out infinite; }
.prod-bars i:nth-child(2)::after { animation-delay: .35s; } .prod-bars i:nth-child(3)::after { animation-delay: .7s; }
@keyframes fillbar { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.deco-assets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.deco-assets i { height: 58px; border-radius: 8px; background: linear-gradient(160deg, rgba(var(--c-violet-rgb), .55), rgba(var(--c-violet-rgb), .2)); }
.deco-assets i:nth-child(2) { background: linear-gradient(160deg, rgba(var(--c-coral-rgb), .55), rgba(var(--c-coral-rgb), .18)); }
.deco-assets i:nth-child(3) { background: linear-gradient(160deg, rgba(var(--c-teal-rgb), .5), rgba(var(--c-teal-rgb), .15)); }
.deco-assets i:nth-child(4) { background: linear-gradient(160deg, rgba(193, 101, 184, .5), rgba(var(--c-violet-rgb), .18)); }
.deco-approve { gap: 8px; }
.deco-approve i { font-style: normal; font-size: 14px; font-weight: 700; padding: 8px 10px; border-radius: 9px; border: 1px solid; transition: background .25s, box-shadow .25s, color .25s; }
.deco-approve .ok { color: var(--ok); border-color: rgba(var(--ok-rgb), .5); background: rgba(var(--ok-rgb), .08); }
.deco-approve .no { color: var(--coral); border-color: rgba(var(--coral-rgb), .45); }
.deco-approve .wait { color: var(--text-2); border-color: var(--line-3); }
.deco-approve .ok.flash { background: var(--g-success); color: var(--c-success-ink); border-color: transparent; box-shadow: 0 0 24px rgba(var(--ok-rgb), .6); }
.deco-ch { font-size: 34px; gap: 14px; }
.deco-ch .bi { transition: transform .3s var(--ease), filter .3s; }
.deco-ch .bi.pop { transform: scale(1.35); filter: drop-shadow(0 0 10px rgba(255,255,255,.6)); }
.belt { position: absolute; left: 110px; right: 110px; top: 640px; height: 14px; z-index: 2; border-radius: 7px; overflow: hidden; background: rgba(0, 0, 0, 0.48); border: 1px solid var(--line); }
.belt i { position: absolute; inset: 0 -40px 0 -40px; background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .35) 0 2px, transparent 2px 40px); animation: beltmove 1.2s linear infinite; }
@keyframes beltmove { to { transform: translateX(40px); } }
.cards-lane { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ccard { position: absolute; left: 0; top: 0; width: 220px; height: 176px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #1D1F27, #131419); box-shadow: 0 24px 50px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); opacity: 0; will-change: transform, opacity; }
.cc-art { position: relative; height: 112px; display: grid; place-items: center; transition: opacity .4s, filter .4s; }
.cc-art.a1 { background: radial-gradient(circle at 70% 30%, #FFC2A8 0 10%, transparent 11%), linear-gradient(180deg, #FFB08A 0%, #FF7A45 45%, #4B3FB8 46%, #2A2270 100%); }
.cc-art.a2 { background: linear-gradient(160deg, #2A2346, #16131F); display: flex; gap: 8px; padding: 14px; }
.cc-art.a2 i { flex: 1; height: 100%; border-radius: 8px; background: linear-gradient(180deg, #7BE0D6, #1E8F85); }
.cc-art.a2 i:nth-child(2) { background: linear-gradient(180deg, #FFB293, #E0876A); } .cc-art.a2 i:nth-child(3) { background: linear-gradient(180deg, #B7AFFF, #5A4BE0); }
.cc-art.a3 { background: linear-gradient(200deg, #4B3FB8, #1B1830 60%, #2A1A22); }
.cc-art.a3 svg { width: 44px; height: 44px; color: #fff; fill: rgba(255,255,255,.9); }
.cc-art.a4 { background: linear-gradient(135deg, #FF7A45, #6B5BFF 80%); }
.cc-art.a4 b { font: 800 22px/1 var(--font-display); color: #fff; letter-spacing: -.01em; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.ccard.sketch .cc-art { opacity: .12; filter: grayscale(1); }
.ccard.sketch { border-style: dashed; border-color: rgba(255, 255, 255, 0.324); }
.cc-type { display: block; padding: 10px 14px 0; font-size: 15px; font-weight: 700; }
.cc-prog { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.108); overflow: hidden; }
.cc-prog i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.cc-stamp { position: absolute; left: 50%; top: 42px; padding: 7px 14px; border-radius: 10px; border: 3px solid var(--ok); color: var(--ok); background: rgba(0, 0, 0, 0.6); font: 800 20px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(-50%) rotate(-12deg) scale(2.4); box-shadow: 0 0 24px rgba(var(--ok-rgb), .45); }
.ccard.approved { border-color: rgba(var(--ok-rgb), .6); box-shadow: 0 0 34px -6px rgba(var(--ok-rgb), .5), 0 24px 50px -20px rgba(0,0,0,.9); }
.stations .station:last-child.busy { border-color: rgba(var(--ok-rgb), .55); box-shadow: 0 0 40px -12px rgba(var(--ok-rgb), .5); }
.s07 .slide-foot { bottom: 106px; }
.s07-flow { justify-content: center; font-size: 21px; }
.s07-flow .decision-t { color: var(--decision); font-weight: 600; }
.s07-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.s07-chips span { font-size: 16px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); background: rgba(255, 255, 255, 0.036); }

/* ======================= 08 · GOOGLE ======================= */
.g-links .gl-base { fill: none; stroke: rgba(255, 255, 255, 0.086); stroke-width: 1.6; }
.g-links .gl { fill: none; stroke: rgba(var(--accent-rgb), .7); stroke-width: 2.4; stroke-dasharray: 8 12; animation: dashflow 1.6s linear infinite; }
.g-links .gl.rev { animation-direction: reverse; }
.g-core { position: absolute; width: 220px; height: 220px; border-radius: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: var(--g-disc); border: 1.5px solid rgba(var(--accent-rgb), .55); box-shadow: 0 0 70px rgba(var(--accent-rgb), .25); }
.s08 .headline { font-size: 66px; }
.g-core small { font: 500 12px/1.35 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); max-width: 150px; }
.g-core .gc-ring { position: absolute; inset: -22px; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), .35); animation: spin 40s linear infinite; }
.g-core .gc-ring.r2 { inset: -52px; border: 1px solid rgba(var(--accent-2-rgb), .15); animation: none; }
.g-core.absorb { box-shadow: 0 0 110px rgba(var(--accent-rgb), .5); }
.gcard { position: absolute; width: 380px; padding: 22px 24px 20px; z-index: 3; border-radius: 22px; }
.gc-top { display: flex; gap: 16px; align-items: flex-start; }
.gc-top img, .gsc-ic { width: 46px; height: 46px; flex: none; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.95); }
.gsc-ic { display: grid; place-items: center; padding: 9px; }
.gsc-ic svg { width: 100%; height: 100%; fill: none; stroke: #458CF5; stroke-width: 2.6; stroke-linecap: round; }
.gc-brand { display: block; font: 500 12px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gc-top b { display: block; margin: 4px 0 2px; font: 700 23px/1.2 var(--font-display); }
.gc-top small { display: block; font-size: 15px; color: var(--muted); }
.gc-kpi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }
.gc-kpi .k-lbl { flex: 1; font-size: 15px; color: var(--muted); }
.gc-kpi .k-val { font: 700 30px/1 var(--font-display); letter-spacing: -.01em; }
.gc-kpi .k-val.sm { font-size: 18px; font-family: var(--font-body); font-weight: 600; }
.gc-kpi .k-d { font: 500 14px/1 var(--font-mono); color: var(--muted); }
.gc-kpi .k-d.up { color: var(--accent); }
.gcard.hit { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 44px -8px rgba(var(--accent-rgb), .45), var(--inner-hi); }
.gweb { position: absolute; width: 340px; padding: 16px 20px; z-index: 3; border-radius: 18px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; }
.gweb .dots { display: flex; gap: 5px; } .gweb .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.252); }
.gweb .dots i:first-child { background: rgba(255,255,255,.3); } .gweb .dots i:nth-child(2) { background: rgba(255,255,255,.3); } .gweb .dots i:nth-child(3) { background: rgba(255,255,255,.3); }
.gweb > b { font-size: 19px; }
.gw-bars { grid-column: 1 / -1; display: flex; gap: 8px; } .gw-bars i { flex: 1; height: 8px; border-radius: 4px; background: rgba(var(--accent-rgb), .45); } .gw-bars i:nth-child(2) { flex: 2; background: rgba(var(--accent-2-rgb), .4); }
.gw-kpi { grid-column: 1 / -1; font-size: 15px; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.gw-kpi b { font: 700 24px/1 var(--font-display); color: var(--text); }
.g-flow { justify-content: center; font-size: 21px; }
.g-flow > span:not(.arr) { padding: 6px 12px; border-radius: 10px; transition: background .35s, color .35s, box-shadow .35s; }
.g-flow > span.on { background: rgba(var(--accent-rgb), .14); color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .45); }

/* ======================= 09 · DECISION ======================= */
.dec-card { position: absolute; left: 96px; top: 300px; width: 900px; z-index: 3; overflow: hidden; padding: 0; }
.dec-card.flash-ok { border-color: rgba(var(--ok-rgb), .8); box-shadow: 0 0 0 1px rgba(var(--ok-rgb), .3), 0 0 80px -10px rgba(var(--ok-rgb), .5); }
.dec-card.flash-no { border-color: rgba(var(--coral-rgb), .8); box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .3), 0 0 80px -10px rgba(var(--coral-rgb), .5); }
.dec-card.flash-wait { border-color: rgba(var(--decision-rgb), .8); box-shadow: 0 0 0 1px rgba(var(--decision-rgb), .3), 0 0 80px -10px rgba(var(--decision-rgb), .5); }
.dc-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 22px; border-bottom: 1px solid var(--line); font: 500 13px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.dc-bar .dots { display: flex; gap: 6px; } .dc-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.dc-bar .dots i { background: rgba(255, 255, 255, .22); }
.dc-right { margin-left: auto; }
.dc-head { display: flex; align-items: center; gap: 18px; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.dc-head b { display: block; font: 700 26px/1.15 var(--font-display); }
.dc-head small { display: block; font-size: 15px; color: var(--muted); margin-top: 3px; }
.dc-head .tag { margin-left: auto; }
.dc-flag { padding: 26px 28px 30px; position: relative; }
.dc-eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--decision); }
.dc-eyebrow svg { width: 16px; height: 16px; }
.dc-flag h3 { margin: 12px 0 8px; font: 700 36px/1.15 var(--font-display); letter-spacing: -.02em; }
.dc-flag > p { margin: 0; font-size: 19px; color: var(--text-2); }
.dc-status { display: flex; align-items: center; gap: 12px; margin: 18px 0 0 !important; font-size: 19px; font-weight: 600; color: var(--decision) !important; }
.dc-status .st-dot { width: 11px; height: 11px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: dotping 1.8s ease-out infinite; }
@keyframes dotping { 0% { box-shadow: 0 0 0 0 rgba(var(--decision-rgb), .6); } 100% { box-shadow: 0 0 0 12px rgba(var(--decision-rgb), 0); } }
.dc-status.s-approve { color: var(--ok) !important; } .dc-status.s-decline { color: var(--coral) !important; } .dc-status.s-defer { color: var(--text-2) !important; }
.dc-status.s-defer .st-dot { animation: none; }
.dc-status.s-approve .st-dot, .dc-status.s-decline .st-dot { animation: none; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dbtn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 15px; font-size: 19px; font-weight: 700; border: 1px solid; background: transparent; overflow: hidden;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s; }
.dbtn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.dbtn.ok { color: var(--ok); border-color: rgba(var(--ok-rgb), .55); background: rgba(var(--ok-rgb), .08); }
.dbtn.no { color: var(--coral); border-color: rgba(var(--coral-rgb), .55); background: rgba(var(--coral-rgb), .06); }
.dbtn.wait { color: var(--text-2); border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.dbtn.reset { color: var(--text-2); border-color: var(--line-2); font-weight: 600; }
.dbtn:hover { transform: translateY(-2px); }
.dbtn.ok:hover { background: rgba(var(--ok-rgb), .16); box-shadow: 0 10px 30px -10px rgba(var(--ok-rgb), .6); }
.dbtn.no:hover { background: rgba(var(--coral-rgb), .15); box-shadow: 0 10px 30px -10px rgba(var(--coral-rgb), .6); }
.dbtn.wait:hover { background: rgba(255, 255, 255, .1); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
.dbtn.chosen.ok { background: var(--g-success); color: var(--c-success-ink); border-color: transparent; }
.dbtn.chosen.no { background: var(--coral); color: #2E0A06; }
.dbtn.chosen.wait { background: #E6E7EC; color: #0A0B0F; }
.dbtn.dim { opacity: .35; }
.dbtn .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .35; transform: scale(0); pointer-events: none; }
.dc-receipt.ok { border-left-color: var(--ok); background: rgba(var(--ok-rgb), .07); }
.dc-receipt { margin: 18px 0 0; padding: 14px 18px; border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0; background: rgba(var(--accent-rgb), .06); font: 500 16px/1.55 var(--font-body); color: var(--text-2); white-space: pre-wrap; }
.dec-card .burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dec-side { position: absolute; left: 1070px; top: 300px; width: 754px; z-index: 3; }
.dec-side h2 { margin: 0; font: 700 46px/1.12 var(--font-display); letter-spacing: -.025em; }
.dec-side p { margin: 20px 0 0; font-size: 21px; line-height: 1.5; color: var(--text-2); }
.dec-side p b { color: var(--text); }
.dec-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dec-steps span { font-size: 17px; font-weight: 600; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--muted); transition: all .35s var(--ease); }
.dec-steps span.on { color: #0A0B0F; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 24px rgba(var(--accent-rgb), .5); }
.dec-steps span.done { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.dec-steps i { width: 24px; height: 1px; background: var(--line-3); }
.dec-note { padding-left: 16px; border-left: 2px solid var(--decision); color: var(--muted) !important; font-size: 18px !important; }
.timeline { position: absolute; left: 1070px; top: 790px; width: 754px; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); }
.timeline::before { content: ''; position: absolute; left: 9px; right: 20px; top: 11px; height: 2px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .6) 0 42%, rgba(255, 255, 255, 0.108) 42%); transition: background .6s; }
.timeline.t-done::before { background: linear-gradient(90deg, rgba(var(--accent-rgb), .6) 0 100%, rgba(255, 255, 255, 0.108) 100%); }
.tl-step { position: relative; padding: 36px 14px 0 0; }
.tl-dot { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #16171D; border: 2px solid rgba(255, 255, 255, 0.252); transition: all .4s; }
.tl-step b { display: block; font-size: 17px; font-weight: 700; }
.tl-step small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.35; }
.tl-step.done .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .7); }
.tl-step.active .tl-dot { border-color: var(--decision); background: rgba(var(--decision-rgb), .25); animation: tlpulse 1.6s ease-out infinite; }
@keyframes tlpulse { 0% { box-shadow: 0 0 0 0 rgba(var(--decision-rgb), .6); } 100% { box-shadow: 0 0 0 14px rgba(var(--decision-rgb), 0); } }
.tl-step.coral .tl-dot { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 12px rgba(var(--coral-rgb), .7); }
.tl-step.grey .tl-dot { background: #C9CAD1; border-color: #C9CAD1; }
.tl-step.decided .tl-dot { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 12px rgba(var(--ok-rgb), .6); }
.tl-step.decided b { color: var(--ok); }
.tl-step.active.ok .tl-dot { border-color: var(--ok); background: rgba(var(--ok-rgb), .25); animation-name: tlpulseOk; }
@keyframes tlpulseOk { 0% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), .55); } 100% { box-shadow: 0 0 0 14px rgba(var(--ok-rgb), 0); } }
.tl-step.pending b { color: var(--muted); }

/* ======================= 10 · DASHBOARD ======================= */
.s10-head { display: flex; justify-content: space-between; align-items: flex-end; }
.s10 .headline { font-size: 62px; margin-top: 16px; }
.s10-meta { text-align: right; }
.s10-meta .mono { font-size: 13px; color: var(--muted); letter-spacing: .2em; }
.s10-meta p { margin: 6px 0 10px; font: 700 24px/1.2 var(--font-display); }
.explore { position: absolute; left: 96px; top: 222px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.explore > span { font-size: 15px; color: var(--muted); margin-right: 4px; }
.ex-btn { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.043); font-size: 15px; font-weight: 600; color: var(--text-2); transition: all .25s; }
.ex-btn:hover { border-color: rgba(var(--accent-rgb), .6); color: var(--accent); background: rgba(var(--accent-rgb), .08); }
#open-reports { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); }
.rdash { position: absolute; left: 96px; right: 96px; top: 278px; bottom: 100px; z-index: 3; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; }
.rd-hdr { display: flex; align-items: center; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.2); }
.rd-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.rd-brand b { display: block; font-size: 16px; }
.rd-brand small { display: block; font-size: 12px; color: var(--muted); }
.rd-tabs { position: relative; flex: 1; display: flex; justify-content: center; gap: 2px; }
.rd-tab { height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .25s, background .25s; }
.rd-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.043); }
.rd-tab.on { color: var(--text); }
.rd-ink { position: absolute; bottom: -13px; height: 2px; left: 0; width: 0; border-radius: 2px; background: var(--grad); box-shadow: 0 0 12px rgba(var(--accent-rgb), .8); transition: left .45s var(--ease), width .45s var(--ease); }
.rd-badges { display: flex; gap: 8px; flex: none; }
.rd-badges .tag { font-size: 11px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: shimmer 1.4s infinite; }
.rd-body { position: relative; flex: 1; min-height: 0; }
.rd-panel { position: absolute; inset: 16px 20px 18px; display: none; flex-direction: column; gap: 14px; }
.rd-panel.on { display: flex; }
.kpis { display: grid; gap: 14px; flex: none; }
.kpis.c5 { grid-template-columns: repeat(5, 1fr); } .kpis.c4 { grid-template-columns: repeat(4, 1fr); } .kpis.c3 { grid-template-columns: repeat(3, 1fr); }
.kpi { position: relative; padding: 15px 18px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.032); overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 80%); }
.kpi.decision::before { background: linear-gradient(90deg, var(--decision), transparent 80%); }
.kpi.coral::before { background: linear-gradient(90deg, var(--coral), transparent 80%); }
.k-lbl { display: block; font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpi .k-val { display: block; margin: 8px 0 3px; font: 700 34px/1.05 var(--font-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.kpi .k-val.txt { font-size: 26px; }
.kpi.decision .k-val { color: var(--decision); }
.kpi.coral .k-val { color: var(--coral); }
.k-d { display: inline-block; font-size: 14px; font-weight: 600; color: var(--muted); }
.k-d.up { color: var(--accent); }
.k-sub { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.rd-row { display: grid; gap: 14px; flex: 1; min-height: 0; }
.rd-row.g3 { grid-template-columns: 1.15fr 1fr 1fr; flex: 1.2; }
.rd-row.g2 { grid-template-columns: 1fr 1fr; flex: 1; }
.rd-row.g2.tall { flex: 1; }
.rd-row.g4 { grid-template-columns: repeat(4, 1fr); }
.rd-row.g1 { grid-template-columns: 1fr; }
.rcard { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 15px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.029); overflow: hidden; }
.rc-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rc-t .tag { font-size: 10.5px; padding: 5px 8px; }
.rcard.soc .rc-t { justify-content: flex-start; font-size: 13px; color: var(--text-2); }
.rcard.soc .rc-t .bi { font-size: 22px; }
.ch { position: relative; flex: 1; min-height: 0; }
.ch canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.donut-wrap { flex: 1; display: flex; align-items: center; gap: 26px; min-height: 0; }
.donut-cv { position: relative; width: 150px; height: 150px; flex: none; }
.donut-cv canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.legend { display: grid; gap: 7px; flex: 1; }
.legend span { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--text-2); }
.legend i { width: 11px; height: 11px; border-radius: 3px; }
.legend b { margin-left: auto; color: var(--text); }
.funcs > div { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.funcs > div:last-child { border-bottom: 0; }
.funcs i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: shimmer 2s infinite; }
.funcs i.g { background: var(--decision); box-shadow: 0 0 10px var(--decision); }
.funcs .tag { margin-left: auto; font-size: 10.5px; padding: 5px 8px; }
.wcal { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-height: 0; }
.wcal > div { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px; border-radius: 11px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.28); }
.wcal span { font: 500 12px/1 var(--font-mono); color: var(--muted); letter-spacing: .08em; }
.wcal i { font: 600 12px/1 var(--font-mono); font-style: normal; padding: 6px 9px; border-radius: 7px; }
.wcal i.ok { background: rgba(var(--accent-rgb), .15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .35); }
.wcal i.sched { background: rgba(var(--accent-2-rgb), .15); color: var(--accent-2); border: 1px solid rgba(var(--accent-2-rgb), .35); }
.wcal i.wait { background: rgba(var(--decision-rgb), .13); color: var(--decision); border: 1px solid rgba(var(--decision-rgb), .35); }
.rflag { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rflag:last-child { border-bottom: 0; }
.rf-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: var(--decision); background: rgba(var(--decision-rgb), .14); }
.rf-ic.iris { color: var(--accent-2); background: rgba(var(--accent-2-rgb), .14); }
.rflag b { display: block; font-size: 15px; line-height: 1.3; }
.rflag small { display: block; font-size: 13.5px; color: var(--muted); }
.rf-btns { display: flex; gap: 6px; }
.mini { height: 32px; padding: 0 11px; border-radius: 9px; font-size: 13px; font-weight: 700; border: 1px solid; background: transparent; white-space: nowrap; transition: all .25s; }
.mini.ok { color: var(--ok); border-color: rgba(var(--ok-rgb), .5); background: rgba(var(--ok-rgb), .07); }
.mini.no { color: var(--coral); border-color: rgba(var(--coral-rgb), .45); }
.mini.wait { color: var(--text-2); border-color: var(--line-3); }
.mini:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.058); }
.mini.chosen.ok { background: var(--g-success); color: var(--c-success-ink); border-color: transparent; } .mini.chosen.no { background: var(--coral); color: #2E0A06; } .mini.chosen.wait { background: #E6E7EC; color: #0A0B0F; }
.mini.result { cursor: default; }
.plan { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.24); margin-bottom: 10px; }
.plan b { display: block; font-size: 18px; }
.plan small { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.plan .tag { font-size: 10.5px; padding: 5px 8px; }
.flow { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.flow:last-of-type { border-bottom: 0; }
.flow > i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.flow.decision > i { color: var(--decision); background: rgba(var(--decision-rgb), .14); }
.flow b { display: block; font-size: 17px; }
.flow small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.flow.big b { font-size: 21px; } .flow.big small { font-size: 16px; }
.soc-bar { margin-top: auto; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.072); overflow: hidden; }
.soc-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--grad); }
.rd-panel.on .soc-bar i, .rd-panel.on .mb-track i { animation: growW 1.3s var(--ease) both; }
@keyframes growW { from { width: 0; } }
.mbar { display: grid; grid-template-columns: 200px 1fr 60px; align-items: center; gap: 14px; padding: 14px 0; }
.mbar > span { font-size: 16px; color: var(--text-2); }
.mb-track { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.072); overflow: hidden; }
.mb-track i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--grad); }
.mb-track i.med { background: linear-gradient(90deg, #FF7A45, #FF9D75); }
.mbar b { font: 500 14px/1 var(--font-mono); color: var(--accent); text-align: right; }
.mbar b.med { color: var(--c-coral-soft); }
.mbar.lg { grid-template-columns: 300px 1fr 90px; padding: 22px 0; }
.mbar.lg > span { font-size: 21px; font-weight: 600; color: var(--text); }
.mbar.lg .mb-track { height: 16px; border-radius: 8px; }
.mbar.lg b { font: 700 26px/1 var(--font-display); }
.flights { margin-top: auto; display: grid; gap: 16px; }
.fl-route { position: relative; height: 44px; border-bottom: 2px dashed rgba(var(--accent-rgb), .35); }
.fl-route::before, .fl-route::after { content: ''; position: absolute; bottom: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.fl-route::before { left: 0; } .fl-route::after { right: 0; }
.fl-plane { position: absolute; left: 0; bottom: 4px; font-style: normal; font-size: 26px; color: var(--accent); animation: fly 4.5s ease-in-out infinite; }
@keyframes fly { from { left: 2%; } to { left: 92%; } }
.fl-load { display: grid; grid-template-columns: 110px 1fr 50px; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.fl-load b { color: var(--accent); font-size: 16px; }
.split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split > div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .06); }
.split > div.decision { border-color: rgba(var(--decision-rgb), .4); background: rgba(var(--decision-rgb), .06); }
.split b { font: 700 32px/1 var(--font-display); }
.split > div.decision b { color: var(--decision); }
.split small { font-size: 15px; color: var(--muted); margin-top: 8px; }
.sp-ic { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.split > div.decision .sp-ic { color: var(--decision); background: rgba(var(--decision-rgb), .14); }
.sp-ic svg { width: 24px; height: 24px; }

/* ======================= 11 · OUTPUTS ======================= */
.s11-lead { margin: 14px 0 0; font-size: 23px; color: var(--muted); }
.outs { position: absolute; left: 96px; top: 300px; width: 1110px; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ocard { height: 292px; display: flex; flex-direction: column; padding: 20px 18px 16px; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: 20px;
  transition: transform .4s var(--ease), border-color .35s, box-shadow .35s; }
.ocard:hover, .ocard:focus-visible { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25), 0 30px 60px -24px rgba(var(--accent-rgb), .45); }
.oc-n { font: 500 14px/1 var(--font-mono); color: var(--accent); letter-spacing: .14em; }
.ocard b { margin: 9px 0 7px; font: 700 19px/1.2 var(--font-display); letter-spacing: -.01em; }
.ocard p { margin: 0; font-size: 14px; line-height: 1.42; color: var(--muted); }
.oc-viz { margin-top: auto; height: 58px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.36); padding: 9px 11px; display: flex; align-items: center; gap: 7px; overflow: hidden; position: relative; }
.oc-go { margin-top: 12px; font: 500 12.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.v-dash i { flex: 1; height: 70%; border-radius: 6px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), .08)); }
.v-dash em { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: sweep 3s ease-in-out infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.v-report { flex-direction: column; align-items: stretch; gap: 6px; }
.v-report small { font-size: 11px; color: var(--muted); }
.v-report > span { display: flex; align-items: flex-end; gap: 5px; height: 20px; }
.v-report > span i { flex: 1; border-radius: 3px; background: rgba(var(--accent-2-rgb), .5); height: 40%; }
.v-report > span i:nth-child(2) { height: 70%; } .v-report > span i:nth-child(3) { height: 55%; } .v-report > span i:nth-child(4) { height: 100%; background: var(--accent); }
.v-road { justify-content: space-between; } .v-road small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.rd-line { position: relative; flex: 1; height: 2px; background: rgba(var(--accent-rgb), .35); display: flex; justify-content: space-around; align-items: center; }
.rd-line i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.v-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.v-month i { height: 15px; border-radius: 3px; background: rgba(255, 255, 255, 0.086); }
.v-month i:nth-child(3n) { background: rgba(var(--accent-rgb), .45); } .v-month i:nth-child(5n) { background: rgba(var(--accent-2-rgb), .5); }
.v-week i { flex: 1; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.072); }
.v-week i.a { background: rgba(var(--accent-rgb), .4); } .v-week i.g { background: rgba(var(--decision-rgb), .45); }
.v-brand .aa { font: 800 24px/1 var(--font-display); margin-right: 4px; }
.v-brand i { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); } .v-brand i:nth-of-type(2) { background: var(--accent-2); } .v-brand i:nth-of-type(3) { background: var(--sky); }
.v-brand small { font-size: 11px; color: var(--muted); margin-left: 4px; }
.v-assets i { flex: 1; font-style: normal; font-size: 11.5px; font-weight: 700; height: 38px; display: grid; place-items: center; border-radius: 7px; background: rgba(var(--accent-2-rgb), .25); }
.v-assets i:nth-child(2) { background: rgba(var(--accent-rgb), .25); } .v-assets i:nth-child(3) { background: rgba(var(--c-coral-rgb), .3); }
.report3d { position: absolute; left: 1250px; top: 244px; width: 574px; height: 660px; z-index: 3; perspective: 1500px; pointer-events: none; }
.r-paper { position: absolute; left: 72px; top: 118px; width: 440px; height: 548px; padding: 26px 32px; border-radius: 16px; color: #0A0B0F;
  background: linear-gradient(170deg, #F6F6F8 0%, #E4E4EA 100%); box-shadow: 0 60px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.5) inset;
  transform: rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg); transform-origin: 30% 50%; }
.rp-eb { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: #5E6070; }
.rp-title { display: block; margin-top: 10px; font: 800 34px/1 var(--font-display); letter-spacing: -.02em; }
.r-paper small { display: block; margin-top: 6px; font-size: 13px; color: #5E6070; }
.rp-spark { width: 100%; height: 50px; margin-top: 10px; overflow: visible; }
.rp-spark path { fill: none; stroke: #6B5BFF; stroke-width: 2.5; stroke-dasharray: 420; stroke-dashoffset: 420; }
.rp-cap { display: block; font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #7A7C86; margin: 2px 0 8px; }
.rp-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid #0A0B0F; }
.rp-rows li { display: flex; gap: 12px; align-items: center; padding: 6px 8px; font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(10, 11, 15, .12); border-radius: 6px; transition: background .35s, color .35s; }
.rp-rows li span { font: 500 12px/1 var(--font-mono); color: #6B5BFF; }
.rp-rows li.hl { background: rgba(107, 91, 255, .12); color: #2B1F9E; }
.rp-tags { display: flex; gap: 6px; margin-top: 12px; }
.rp-tags span { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(10, 11, 15, .2); }
.rp-foot { margin: 12px 0 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.r-float { position: absolute; width: 168px; height: 112px; padding: 12px 14px; border-radius: 16px; }
.r-float span { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.r-float.f1 { left: 10px; top: 10px; } .r-float.f2 { left: 200px; top: 0; } .r-float.f3 { left: 392px; top: 22px; }
.rb { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 10px; }
.rb i { flex: 1; border-radius: 3px 3px 1px 1px; background: rgba(var(--accent-rgb), .6); transform-origin: bottom; }
.f2 .rb i { background: rgba(var(--accent-2-rgb), .7); } .f3 .rb i { background: rgba(var(--c-teal-rgb), .7); }
.s11-foot { position: absolute; left: 96px; width: 1110px; top: 918px; z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.link-btn { border: 0; background: transparent; color: var(--accent); font-size: 17px; font-weight: 700; padding: 8px 0; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ======================= 12 · IMPACT ======================= */
.s12 .headline { font-size: 64px; }
.impact { position: absolute; left: 96px; right: 96px; top: 296px; bottom: 116px; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 22px; }
.icard { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: center; padding: 28px 32px; }
.ic-n { display: block; font: 800 54px/1 var(--font-display); color: var(--hue, var(--c-text-muted)); letter-spacing: -.02em; }
.icard h3 { margin: 10px 0 10px; font: 700 31px/1.15 var(--font-display); letter-spacing: -.02em; }
.icard p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--text-2); }
.ic-viz { position: relative; height: 230px; }
.viz-manual { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.vm-row { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 12px; }
.vm-row > span { font-size: 15px; color: var(--muted); }
.vm-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.vm-bar i { display: block; height: 100%; }
.vm-bar i.m { width: 85%; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.396) 0 6px, rgba(255, 255, 255, 0.252) 6px 12px); }
.vm-bar i.a { width: 15%; background: var(--grad); }
.vm-legend { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.vm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.vm-legend i { width: 12px; height: 12px; border-radius: 3px; }
.vm-legend i.m { background: rgba(255, 255, 255, 0.396); } .vm-legend i.a { background: var(--accent); }
.vm-legend .vm-mode { margin-left: auto; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--text-2); }
.vm-legend .vm-mode.after { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.viz-cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.vc-col { display: flex; flex-direction: column; align-items: stretch; gap: 10px; height: 100%; justify-content: flex-end; }
.vc-col > span { text-align: center; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vc-stack { display: flex; flex-direction: column-reverse; gap: 6px; height: 186px; justify-content: flex-start; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
.vc-stack b { display: block; height: 22px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .7), rgba(var(--sky-rgb), .5)); box-shadow: 0 0 14px -2px rgba(var(--accent-rgb), .5); }
.vc-col:nth-child(2) .vc-stack b { background: linear-gradient(90deg, rgba(var(--sky-rgb), .7), rgba(var(--accent-2-rgb), .55)); }
.vc-col:nth-child(3) .vc-stack b { background: linear-gradient(90deg, rgba(var(--accent-2-rgb), .75), rgba(var(--accent-2-rgb), .45)); }
.viz-dec .vd-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.viz-dec .vd-lines path { fill: none; stroke: rgba(var(--accent-2-rgb), .45); stroke-width: 2; stroke-dasharray: 4 7; animation: dashflow 1.8s linear infinite; }
.vd-in { position: absolute; left: 0; width: 176px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.4); font-size: 15px; font-weight: 600; text-align: center; transition: border-color .3s, color .3s, box-shadow .3s; }
.vd-in.on { border-color: rgba(var(--accent-2-rgb), .7); color: var(--accent-2); box-shadow: 0 0 22px -4px rgba(var(--accent-2-rgb), .6); }
.vd-out { position: absolute; left: 296px; top: 76px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: #0A0B0F; background: var(--accent); box-shadow: 0 0 34px rgba(var(--accent-rgb), .6); }
.vd-out svg { width: 34px; height: 34px; stroke-width: 2.6; }
.viz-imp svg { width: 100%; height: 100%; overflow: visible; }
.vi-grid path { stroke: rgba(255, 255, 255, 0.058); stroke-width: 1; fill: none; }
.vi-area { fill: url(#impArea); }
.vi-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(139, 125, 255, .6)); }
.vi-pts circle { fill: #16171D; stroke: var(--accent); stroke-width: 3; }
.vi-pts circle.on { fill: var(--accent); }
.vi-lbl text { font: 500 12px var(--font-mono); fill: var(--muted); text-anchor: middle; letter-spacing: .08em; }

/* ======================= 13 · TECHNOLOGY ======================= */
.s13 .headline { font-size: 68px; }
.stack-label { position: absolute; left: 96px; top: 208px; z-index: 3; display: flex; align-items: baseline; gap: 18px; }
.stack-label .mono { font-size: 14px; color: var(--accent); letter-spacing: .24em; }
.stack-label b { font: 700 26px/1 var(--font-display); letter-spacing: -.01em; }
.marquee { position: absolute; left: 0; right: 0; top: 252px; z-index: 3; display: flex; flex-direction: column; gap: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); }
.mq-row { overflow: hidden; height: 88px; padding: 4px 0; }
.mq-track { display: flex; width: max-content; animation: mqLeft var(--dur, 60s) linear infinite; will-change: transform; }
.mq-row[data-dir="right"] .mq-track { animation-name: mqRight; }
.mq-row:hover .mq-track { animation-play-state: paused; }
.slide:not(.is-active) .mq-track { animation-play-state: paused; }
@keyframes mqLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes mqRight { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.mq-tile { --brand: #C9D4EE; flex: none; height: 80px; min-width: 214px; margin-right: 16px; padding: 0 26px 0 20px; display: flex; align-items: center; gap: 15px; border-radius: 20px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease), background .3s; }
.mq-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 60%, transparent); box-shadow: 0 0 34px -8px color-mix(in srgb, var(--brand) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); }
.mq-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.mq-logo svg { width: 36px; height: 36px; fill: var(--brand); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 35%, transparent)); }
.mq-mono { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; font: 800 17px/1 var(--font-display); color: var(--brand);
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); letter-spacing: -.02em; }
.mq-name { font-size: 18px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mq-tile.word .mq-name { font: 700 19px/1 var(--font-display); color: var(--text); letter-spacing: -.01em; }
.tech-flow { position: absolute; left: 96px; right: 96px; top: 580px; z-index: 3; display: grid; grid-template-columns: 640px 80px 280px 80px 1fr; align-items: center; }
.tf-caps .mono, .tf-out .mono { font-size: 13px; color: var(--muted); letter-spacing: .2em; }
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.caps span { height: 52px; display: grid; place-items: center; padding: 0 10px; border-radius: 13px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.043); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; }
.tf-arrow { position: relative; height: 2px; margin: 0 14px; background: rgba(255, 255, 255, 0.108); overflow: visible; }
.tf-arrow::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid rgba(var(--accent-rgb), .8); border-right: 0; }
.tf-arrow i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 3px rgba(var(--accent-rgb), .7); animation: tfmove 1.8s ease-in-out infinite; }
@keyframes tfmove { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.tf-core { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 26px 18px; border-radius: 24px; border: 1px solid rgba(var(--accent-rgb), .35); background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), .14), rgba(10, 19, 48, .6) 70%); box-shadow: 0 0 60px -10px rgba(var(--accent-rgb), .35); }
.tf-core b { font-size: 18px; font-weight: 600; color: var(--text-2); line-height: 1.3; }
.tf-out h3 { margin: 10px 0 12px; font: 700 30px/1.15 var(--font-display); letter-spacing: -.02em; }
.tf-out ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.tf-out li { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 500; }
.tf-out li svg { width: 20px; height: 20px; color: var(--accent); stroke-width: 2.4; }
.s13-foot { bottom: 110px; }
.s13-foot .cfg { margin: 0; font-size: 19px; color: var(--muted); }
.s13-foot .cfg b { color: var(--text); font-weight: 600; }
.s13-foot .foot-statement { margin-top: 12px; font-size: 26px; }

/* dashboard panels: fill the frame so no tab looks empty */
.rd-row.g4.social .rcard { padding: 20px 22px; }
.rcard.soc .rc-t { font-size: 14px; margin-bottom: 6px; }
.rcard.soc .flow { flex-direction: column; gap: 12px; padding: 22px 0; }
.rcard.soc .flow > i { width: 42px; height: 42px; font-size: 17px; }
.rcard.soc .flow b { font: 700 26px/1.2 var(--font-display); letter-spacing: -.01em; }
.rcard.soc .flow small { font-size: 15px; margin-top: 6px; }
.rcard.soc .soc-bar { height: 10px; }
#rd-workflow .flow { padding: 20px 0; }
#rd-workflow .flow b { font-size: 21px; }
#rd-workflow .flow small { font-size: 16px; }
#rd-workflow .flow > i { width: 42px; height: 42px; font-size: 17px; }
#rd-workflow .split b { font-size: 40px; }
#rd-workflow .split small { font-size: 17px; }
#rd-workflow .sp-ic { width: 60px; height: 60px; } #rd-workflow .sp-ic svg { width: 30px; height: 30px; }
#rd-google .rcard .rc-t + .mbar, #rd-growth .rcard .rc-t + .mbar { margin-top: auto; }
#rd-google .rcard .mbar:last-child, #rd-growth .rcard .mbar:last-child { margin-bottom: auto; }
#rd-google .mbar { padding: 20px 0; } #rd-google .mbar > span { font-size: 18px; } #rd-google .mb-track { height: 12px; }
#rd-growth .mbar.lg { padding: 30px 0; }
#rd-marketing .plan { padding: 20px 20px; margin-bottom: 14px; } #rd-marketing .plan b { font-size: 21px; } #rd-marketing .plan small { font-size: 15px; }
#rd-intel .flow.big { padding: 18px 0; } #rd-intel .flow.big b { font-size: 24px; }
#rd-intel .flights { gap: 22px; } #rd-intel .fl-route { height: 70px; } #rd-intel .fl-plane { font-size: 32px; }

/* ======================= 03 · CYCLE COUNTER ======================= */
.cyc-count { position: absolute; z-index: 3; width: 520px; padding: 16px 24px 14px; border-radius: var(--r-lg); text-align: center;
  background: var(--wash-violet), var(--g-card-solid); border: 1px solid var(--c-hairline); box-shadow: var(--sh-card); }
.cyc-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cyc-row .mono { font-size: 13px; color: var(--c-text-muted); letter-spacing: .24em; }
.cyc-nums { display: inline-flex; align-items: center; gap: 12px; font: 700 26px/1 var(--f-display); letter-spacing: -.01em; }
.cyc-nums b { display: inline-block; color: var(--c-text-dim); font-weight: 700; min-width: 38px; }
.cyc-nums b.past { color: var(--c-text-muted); }
.cyc-nums b.on { color: var(--c-text); }
.cyc-nums i { font-style: normal; font-size: 18px; color: var(--c-text-dim); }
.cyc-bar { height: 3px; margin: 12px 0 10px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cyc-bar i { display: block; height: 100%; width: 0; background: var(--g-brand); border-radius: inherit; }
.cyc-count p { margin: 0; font-size: 17px; color: var(--c-text-2); }

/* ======================= 14 · CLOSING (dot-matrix wordmark) ======================= */
.s14 .fin-copy { position: absolute; left: 96px; top: 62px; width: 1180px; z-index: 3; }
.s14 .fin-h { font-size: 64px; margin-top: 20px; }
.fin-by { margin: 24px 0 0; font: 500 14px/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-dim); }
.fin-by b { color: var(--c-text-2); font-weight: 500; }
.fin-contact { position: absolute; right: 96px; top: 132px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fin-contact .btn { height: 62px; font-size: 21px; padding: 0 28px; text-decoration: none; margin-bottom: 6px; }
.fin-contact .btn .bi { width: 22px; height: 22px; }
.fin-contact .contact { font-size: 21px; color: var(--c-text-2); font-weight: 500; }
.fin-mark { position: absolute; left: 0; right: 0; top: 318px; height: 540px; z-index: 2; border-radius: var(--r-xl); }
.fin-mark::before { content: ''; position: absolute; inset: 8% 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 50%, rgba(255, 122, 69, .10), transparent 70%), radial-gradient(50% 60% at 72% 50%, rgba(107, 91, 255, .12), transparent 70%); filter: blur(10px); }
.fin-mark canvas { position: relative; width: 100%; height: 100%; display: block; }
.fin-tag { position: absolute; left: 96px; right: 96px; bottom: 116px; margin: 0; z-index: 3; text-align: center; font-size: 20px; color: var(--c-text-muted); }
.fin-tag span { margin: 0 12px; color: var(--c-text-dim); }