:root{--ink:#12202b;--muted:#637383;--line:#dbe5ec;--line2:#edf2f6;--blue:#3278a8;--blue2:#55a7c8;--blue3:#dff2f8;--navy:#0d2638;--navy2:#11364f;--paper:#fbfdfe;--soft:#f1f7fa;--amber:#db9c47;--red:#c95d59;--green:#4e8e7b;--shadow:0 24px 70px rgba(19,53,76,.12);--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(1200px,calc(100% - 40px));margin:auto}.eyebrow{display:inline-flex;align-items:center;gap:9px;font:700 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}.eyebrow:before{content:'';width:22px;height:2px;border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--blue2))}.nav{position:sticky;top:0;z-index:100;background:rgba(251,253,254,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(219,229,236,.85)}.navin{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;font-weight:800}.brand img{width:34px;height:34px;object-fit:contain}.brand-copy{line-height:1.05}.brand-copy small{display:block;margin-top:5px;font:700 8px var(--mono);letter-spacing:.12em;color:#71808d;text-transform:uppercase}.product-name{font-weight:800}.links{display:flex;align-items:center;gap:26px;color:#526473;font-weight:650;font-size:13px}.links a:hover,.links a.on{color:var(--blue)}.actions{display:flex;align-items:center;gap:9px}.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 14px;border-radius:11px;font-weight:750;font-size:12px;box-shadow:0 5px 18px rgba(26,58,79,.04)}.btn:hover{transform:translateY(-1px);border-color:#b6d3e2}.btn.primary{background:linear-gradient(135deg,var(--blue),#3e90b7);border-color:transparent;color:#fff;box-shadow:0 14px 30px rgba(50,120,168,.24)}.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}.product-switch{position:relative}.product-switch>button{display:flex;gap:8px;align-items:center}.product-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:245px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.product-switch.open .product-menu{display:grid}.product-menu a{padding:10px 11px;border-radius:9px;font-size:12px;font-weight:700}.product-menu a:hover{background:var(--soft)}
section{padding:82px 0;position:relative;overflow:hidden}.hero{padding:68px 0 64px;background:radial-gradient(circle at 80% 12%,rgba(80,172,205,.22),transparent 29%),radial-gradient(circle at 8% 78%,rgba(255,203,129,.13),transparent 25%),linear-gradient(180deg,#f8fcfe,#fff)}.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}.hero h1{font-size:clamp(54px,6vw,78px);line-height:.99;letter-spacing:-.055em;margin:15px 0 20px;max-width:770px}.hero h1 span{color:var(--blue)}.hero p{font-size:18px;line-height:1.65;color:var(--muted);max-width:650px}.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:27px 0 18px}.micro{display:flex;gap:18px;flex-wrap:wrap;color:#73818d;font-size:11px;font-weight:650}.micro span{display:flex;align-items:center;gap:6px}.micro i{width:6px;height:6px;border-radius:50%;background:var(--blue2)}
.hero-stage{position:relative;min-height:590px;display:grid;place-items:center}.stage-glow{position:absolute;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(73,162,198,.20),rgba(73,162,198,.02) 52%,transparent 70%);filter:blur(2px);animation:breathe 5s ease-in-out infinite}.runway-window{position:relative;z-index:4;width:min(680px,100%);border:1px solid rgba(169,198,214,.75);border-radius:22px;background:rgba(255,255,255,.93);box-shadow:0 34px 80px rgba(23,70,99,.18);overflow:hidden;transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);transition:.35s}.runway-window:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-4px)}.fake-top{height:44px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line2);background:#fbfdfe}.fake-top i{width:8px;height:8px;border-radius:50%;background:#ccd9e1}.fake-top b{margin-left:8px;font:700 8px var(--mono);letter-spacing:.08em;color:#668091}.fake-body{display:grid;grid-template-columns:145px 1fr;min-height:410px}.fake-side{padding:16px 11px;background:linear-gradient(180deg,#e8f3f8,#e1eef4);border-right:1px solid #d5e5ed}.fake-logo{height:37px;border-radius:9px;background:linear-gradient(135deg,#4a96b9,#77bfd4);margin-bottom:16px;position:relative}.fake-logo:after{content:'RUNWAY';position:absolute;left:10px;top:10px;color:#fff;font:700 8px var(--mono);letter-spacing:.11em}.fake-nav{height:28px;border-radius:7px;margin:5px 0;background:rgba(255,255,255,.0);position:relative}.fake-nav:before{content:'';position:absolute;left:9px;top:9px;width:66%;height:8px;border-radius:8px;background:#aec7d5}.fake-nav.on{background:#fff;box-shadow:inset 3px 0 var(--blue)}.fake-nav.on:before{background:#4c8faf}.fake-main{padding:17px;background:#f8fafb}.fake-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.fake-kpi{height:56px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px}.fake-kpi small{display:block;width:60%;height:6px;border-radius:5px;background:#d8e4ea}.fake-kpi b{display:block;width:42%;height:12px;border-radius:5px;background:#315f78;margin-top:8px}.fake-grid{display:grid;grid-template-columns:1.35fr .75fr;gap:8px;margin-top:8px}.fake-card{height:205px;border:1px solid var(--line);background:#fff;border-radius:10px;position:relative;overflow:hidden}.chart-line{position:absolute;inset:28px 18px 24px}.chart-line svg{width:100%;height:100%}.risk-stack{padding:14px}.risk{height:43px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:7px;margin-bottom:8px;background:#fff;position:relative}.risk:first-child{border-left-color:var(--red)}.risk:before,.risk:after{content:'';position:absolute;left:9px;height:5px;border-radius:4px;background:#d7e2e8}.risk:before{top:10px;width:62%}.risk:after{top:22px;width:38%}.pulse-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 0 rgba(85,167,200,.42);animation:pulse 2s infinite}.p1{left:33%;top:42%}.p2{right:28%;top:28%;animation-delay:.7s}.float-card{position:absolute;z-index:6;padding:12px 14px;border:1px solid rgba(174,200,214,.9);border-radius:13px;background:rgba(255,255,255,.96);box-shadow:0 18px 45px rgba(27,66,91,.13);animation:float 4s ease-in-out infinite}.float-card b{display:block;font-size:12px}.float-card small{font:700 8px var(--mono);letter-spacing:.06em;color:var(--blue);text-transform:uppercase}.fc1{left:-2px;top:70px}.fc2{right:-8px;bottom:86px;animation-delay:.7s}.fc3{right:20px;top:8px;animation-delay:1.2s}
.signal{padding:0;border-block:1px solid var(--line);background:#fff}.signal-track{display:flex;width:max-content;gap:9px;padding:13px 0;animation:marquee 27s linear infinite}.signal-chip{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#fbfdfe;font:700 9px var(--mono);color:#607482;letter-spacing:.03em}.signal-chip b{color:var(--blue)}
.section-head{max-width:760px;margin-bottom:38px}.section-head h2,.story-copy h2{font-size:clamp(40px,4.7vw,60px);line-height:1.03;letter-spacing:-.05em;margin:11px 0 14px}.section-head p,.story-copy p{font-size:17px;line-height:1.65;color:var(--muted)}.light{background:#fff}.soft{background:linear-gradient(180deg,#f4f9fb,#eef5f8)}.dark{background:linear-gradient(145deg,#0a2233,#10364e);color:#fff}.dark .section-head p,.dark .story-copy p{color:#bdd0dc}.dark .eyebrow{color:#76cae1}.dark .eyebrow:before{background:#76cae1}.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}.story-grid.reverse{grid-template-columns:1.08fr .92fr}.story-grid.reverse .story-copy{order:2}.story-copy .points{display:grid;gap:12px;margin-top:22px}.point{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start}.point i{width:31px;height:31px;border-radius:10px;background:var(--blue3);display:grid;place-items:center;color:var(--blue);font:700 10px var(--mono)}.dark .point i{background:rgba(113,197,224,.14);color:#8bd8eb}.point b{font-size:13px}.point span{display:block;color:var(--muted);font-size:13px;margin-top:2px}.dark .point span{color:#aebfca}
.visual{position:relative;min-height:500px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 50% 45%,rgba(95,180,207,.16),transparent 42%),linear-gradient(145deg,#fff,#f1f7fa);overflow:hidden;box-shadow:0 28px 65px rgba(29,69,94,.08)}.dark .visual{border-color:rgba(255,255,255,.12);background:radial-gradient(circle at 50% 45%,rgba(89,190,221,.15),transparent 42%),rgba(255,255,255,.035);box-shadow:none}.flow-canvas{padding:46px}.flow-node{position:absolute;width:148px;padding:13px;border:1px solid #d6e4eb;border-radius:14px;background:#fff;box-shadow:0 12px 35px rgba(31,77,102,.08);z-index:3}.flow-node small{display:block;font:700 8px var(--mono);color:var(--blue);text-transform:uppercase}.flow-node b{display:block;font-size:12px;margin-top:3px}.n1{left:8%;top:15%}.n2{left:38%;top:8%}.n3{right:8%;top:21%}.n4{right:12%;bottom:13%}.n5{left:34%;bottom:8%}.n6{left:7%;bottom:22%}.flow-svg{position:absolute;inset:0;width:100%;height:100%}.flow-svg path{fill:none;stroke:#9bc8da;stroke-width:2.2;stroke-dasharray:6 8}.flow-svg .runner{stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:22 280;animation:dash 3.6s linear infinite}.flow-svg .runner.r2{animation-delay:1.2s}.flow-svg .runner.r3{animation-delay:2.4s}.dark .flow-node{background:#12364d;border-color:rgba(255,255,255,.13);color:#fff}.dark .flow-svg path{stroke:#4e94ae}
.timeline-visual{padding:38px 28px}.timeline-head{display:flex;justify-content:space-between;font:700 9px var(--mono);color:#8194a0;margin-bottom:24px}.timeline-row{position:relative;height:68px;border-top:1px solid var(--line2);display:flex;align-items:center}.timeline-row label{width:125px;font-size:11px;font-weight:700;color:#506879}.timeline-track{position:relative;flex:1;height:30px;background:repeating-linear-gradient(to right,#edf3f6 0,#edf3f6 1px,transparent 1px,transparent 44px)}.bar{position:absolute;top:5px;height:20px;border-radius:6px;background:linear-gradient(90deg,#3f88ac,#69b6cf);animation:barGrow 1.2s ease both}.bar.warn{background:linear-gradient(90deg,#d89842,#e9b968)}.bar.blocked{background:linear-gradient(90deg,#bd5551,#db7871)}.receipt{position:absolute;top:0;width:2px;height:30px;background:#79afca}.receipt:before{content:'';position:absolute;left:-3px;top:-3px;width:8px;height:8px;background:#79afca;transform:rotate(45deg)}
.role-orbit{display:grid;place-items:center}.role-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:45px;background:linear-gradient(145deg,var(--blue),#4fa2c2);color:#fff;display:grid;place-items:center;text-align:center;box-shadow:0 0 0 20px rgba(79,162,194,.09),0 25px 55px rgba(33,99,137,.2)}.role-core b{font-size:24px}.role-core small{display:block;font:700 8px var(--mono);letter-spacing:.09em}.orbit{position:absolute;border:1px solid rgba(78,149,180,.2);border-radius:50%;animation:spin 24s linear infinite}.o1{width:360px;height:360px}.o2{width:470px;height:470px;animation-direction:reverse;animation-duration:34s}.role-card{position:absolute;width:150px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 15px 36px rgba(31,76,101,.10);z-index:4}.role-card small{font:700 8px var(--mono);color:var(--blue);text-transform:uppercase}.role-card b{display:block;font-size:12px}.rc1{top:6%;left:37%}.rc2{right:5%;top:38%}.rc3{bottom:6%;left:39%}.rc4{left:5%;top:40%}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.value-card{min-height:245px;padding:25px;border:1px solid var(--line);border-radius:19px;background:#fff;position:relative;overflow:hidden}.value-card:before{content:'';position:absolute;width:120px;height:120px;border-radius:50%;right:-35px;top:-35px;background:rgba(80,168,200,.08)}.value-card span{font:700 10px var(--mono);color:var(--blue)}.value-card h3{font-size:22px;line-height:1.12;letter-spacing:-.035em;margin:18px 0 10px}.value-card p{color:var(--muted);font-size:13px}.value-card .mini-visual{margin-top:22px;height:48px;display:flex;align-items:flex-end;gap:5px}.mini-visual i{flex:1;border-radius:4px 4px 0 0;background:#d9e7ed;animation:mini 2.4s ease-in-out infinite alternate}.mini-visual i:nth-child(2){animation-delay:.3s}.mini-visual i:nth-child(3){animation-delay:.6s}.mini-visual i:nth-child(4){animation-delay:.9s}.mini-visual i:nth-child(5){background:#6baec8;animation-delay:1.2s}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.step{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;min-height:210px;position:relative}.step .num{font:700 10px var(--mono);color:var(--blue)}.step h3{font-size:17px;margin:20px 0 8px}.step p{font-size:12px;color:var(--muted)}.step:after{content:'→';position:absolute;right:-12px;top:50%;z-index:3;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800}.step:last-child:after{display:none}
.journey{display:grid;grid-template-columns:290px 1fr;gap:22px}.journey-nav{display:grid;gap:8px}.journey-nav button{width:100%;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.04);color:#bad0dc;text-align:left;padding:14px;cursor:pointer}.journey-nav button b{display:block;color:#fff;font-size:13px}.journey-nav button small{display:block;margin-top:3px}.journey-nav button.on{background:#fff;color:#627483}.journey-nav button.on b{color:var(--ink)}.journey-screen{min-height:500px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#f7fafb;color:var(--ink);overflow:hidden}.journey-toolbar{height:42px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 13px;gap:6px}.journey-toolbar i{width:7px;height:7px;border-radius:50%;background:#c9d7de}.journey-content{padding:18px}.jscreen{display:none;animation:screenIn .3s ease}.jscreen.on{display:block}.demo-title{font-size:13px;font-weight:800;margin-bottom:12px}.demo-table{border:1px solid var(--line);border-radius:10px;overflow:hidden}.demo-row{display:grid;grid-template-columns:1.2fr .8fr .7fr .7fr;min-height:42px;border-bottom:1px solid var(--line2);align-items:center}.demo-row:last-child{border-bottom:0}.demo-row>span{padding:9px;font-size:10px}.demo-row.head{background:#edf4f7;color:#627784;font:700 8px var(--mono)}.demo-status{display:inline-flex;padding:3px 7px;border-radius:999px;background:#e7f3ef;color:#4d816f;font-weight:800}.demo-status.risk{background:#faeee0;color:#a36d23}.demo-status.block{background:#f9e7e6;color:#a74743}.operator-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.operator{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}.operator b{font-size:11px}.opbar{height:7px;border-radius:7px;background:#e6eef2;margin-top:11px;overflow:hidden}.opbar i{display:block;height:100%;background:#5fa5c1}.roadcards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.road{border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:9px;padding:12px;background:#fff}.road.high{border-left-color:var(--red)}.road b{font-size:11px}.road small{display:block;color:var(--muted);margin-top:4px}.cta{padding:90px 0;background:linear-gradient(145deg,#0b2739,#103b55);color:#fff;text-align:center}.cta h2{font-size:clamp(44px,5vw,66px);line-height:1;letter-spacing:-.055em;margin:0 auto 17px;max-width:850px}.cta p{color:#bed0dc;font-size:17px;max-width:650px;margin:0 auto 26px}.footer{padding:28px 0 36px;background:#081b28;color:#94adbc}.footerin{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer a{font-size:11px;margin-left:16px}
.reveal{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}@keyframes breathe{50%{transform:scale(1.06);opacity:.78}}@keyframes pulse{70%{box-shadow:0 0 0 18px rgba(85,167,200,0)}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes dash{to{stroke-dashoffset:-310}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes barGrow{from{width:0!important;opacity:.5}}@keyframes mini{from{height:14px}to{height:46px}}@keyframes screenIn{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.links{display:none}.hero-grid,.story-grid,.story-grid.reverse{grid-template-columns:1fr}.story-grid.reverse .story-copy{order:initial}.hero-stage{min-height:540px}.value-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.step:after{display:none}.journey{grid-template-columns:1fr}.journey-nav{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.wrap{width:min(100% - 24px,1200px)}section{padding:58px 0}.actions .btn:not(.primary){display:none}.brand-copy small{display:none}.hero h1{font-size:46px}.hero p{font-size:16px}.hero-stage{min-height:500px}.runway-window{transform:none}.fake-body{grid-template-columns:92px 1fr}.fake-kpis{grid-template-columns:repeat(2,1fr)}.fc1,.fc3{display:none}.fc2{right:0}.section-head h2,.story-copy h2{font-size:39px}.value-grid,.steps{grid-template-columns:1fr}.visual{min-height:460px}.role-card{width:128px}.journey-nav{display:flex;overflow:auto}.journey-nav button{min-width:155px}.footerin{display:block}.footer nav{margin-top:12px}.footer a{margin:0 14px 0 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ============ FUTURISTIC REDESIGN OVERRIDES ============ */
:root{--ink:#0a1220;--muted:#5c6c80;--line:#d9e2ef;--line2:#eaf0f8;--blue:#2f6fed;--blue2:#22c7e0;--blue3:#e9f1ff;--violet:#8b6bf0;--navy:#060c18;--navy2:#0d1b32;--paper:#f8fafd;--soft:#eef3fb;--amber:#f0a531;--red:#f1585d;--green:#22c58b;--shadow:0 24px 70px rgba(8,18,38,.16);--mono:'JetBrains Mono',ui-monospace,monospace}

body{background:var(--paper)}
.hero{background:radial-gradient(circle at 82% 6%,rgba(34,199,224,.24),transparent 34%),radial-gradient(circle at 4% 86%,rgba(139,107,240,.16),transparent 30%),linear-gradient(180deg,#f6faff,#fff)}
.dark{background:radial-gradient(circle at 88% -8%,rgba(34,199,224,.16),transparent 42%),radial-gradient(circle at -5% 100%,rgba(139,107,240,.14),transparent 40%),linear-gradient(155deg,#060c18,#0e2038)}
.cta{background:radial-gradient(circle at 18% 4%,rgba(139,107,240,.28),transparent 42%),radial-gradient(circle at 88% 92%,rgba(34,199,224,.18),transparent 40%),linear-gradient(155deg,#060c18,#0d2038)!important}
.dark,.cta{position:relative}
.dark::before,.cta::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at 50% 20%,#000,transparent 72%);-webkit-mask-image:radial-gradient(circle at 50% 20%,#000,transparent 72%)}

section[id]{scroll-margin-top:92px}

/* buttons */
.btn.primary{background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 14px 34px rgba(47,111,237,.32)}
.btn.primary:hover{box-shadow:0 18px 42px rgba(139,107,240,.42)}
.btn{transition:.25s}
.eyebrow:before{background:linear-gradient(90deg,var(--blue),var(--blue2))}

/* hero stage refinement: crisp HUD frame instead of soft blur blob */
.stage-glow{background:radial-gradient(circle,rgba(34,199,224,.18),rgba(139,107,240,.05) 55%,transparent 72%);filter:blur(6px)}
.runway-window{border-color:rgba(47,111,237,.22);box-shadow:0 34px 90px rgba(10,30,60,.22),0 0 0 1px rgba(34,199,224,.08)}
.hud-corner{position:absolute;width:26px;height:26px;border:2px solid var(--blue2);opacity:.85;z-index:5;filter:drop-shadow(0 0 6px rgba(34,199,224,.5))}
.hud-corner.tl{left:8px;top:8px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.hud-corner.tr{right:8px;top:8px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.hud-corner.bl{left:8px;bottom:8px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.hud-corner.br{right:8px;bottom:8px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(34,199,224,.9),transparent);opacity:.8;animation:scanY 4.5s ease-in-out infinite;z-index:4}
@keyframes scanY{0%,100%{top:6%}50%{top:92%}}
.fake-logo{background:linear-gradient(135deg,var(--blue),var(--blue2))!important}
.fake-kpi b{background:linear-gradient(90deg,var(--blue),var(--violet))!important}
.fake-nav.on{box-shadow:inset 3px 0 var(--blue)!important}
.fake-nav.on:before{background:var(--blue)!important}
.pulse-dot{background:var(--blue2)!important;box-shadow:0 0 0 0 rgba(34,199,224,.5)!important}
@keyframes pulse{70%{box-shadow:0 0 0 18px rgba(34,199,224,0)}}

/* value cards: corner-bracket accent instead of soft blob, straight lines */
.value-card:before{display:none}
.value-card{border-radius:14px;transition:.35s cubic-bezier(.2,.8,.2,1)}
.value-card:hover{transform:translateY(-5px);border-color:rgba(47,111,237,.4);box-shadow:0 22px 55px rgba(15,40,80,.14)}
.vc-corner{position:absolute;width:14px;height:14px;border:2px solid var(--blue2);opacity:0;transition:.3s;pointer-events:none}
.value-card:hover .vc-corner{opacity:1}
.vc-tl{top:10px;left:10px;border-right:0;border-bottom:0}
.vc-tr{top:10px;right:10px;border-left:0;border-bottom:0}
.value-card .mini-visual i{background:linear-gradient(180deg,var(--blue3),#cfe3ff)}
.value-card .mini-visual i:nth-child(5){background:linear-gradient(180deg,var(--blue2),var(--blue))}

/* step rail: replace circle-arrow with chevron + connecting rail */
.steps{position:relative;padding-top:6px}
.steps:before{content:'';position:absolute;left:4%;right:4%;top:38px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px);z-index:0}
.step{position:relative;z-index:1;transition:.3s}
.step:hover{transform:translateY(-4px);border-color:rgba(47,111,237,.35)}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--blue3);color:var(--blue)}
.step:after{content:'';width:16px;height:16px;border-radius:3px;background:linear-gradient(135deg,var(--blue),var(--blue2));transform:translateY(-50%) rotate(45deg);box-shadow:0 4px 12px rgba(47,111,237,.4)}

/* circuit / connector line system (straight + corner, no curves) */
.circuit-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.circuit-line{fill:none;stroke:rgba(47,111,237,.28);stroke-width:2}
.dark .circuit-line,.cta .circuit-line{stroke:rgba(255,255,255,.16)}
.circuit-pulse{fill:none;stroke:var(--blue2);stroke-width:3;stroke-linecap:round;stroke-dasharray:14 460;filter:drop-shadow(0 0 5px rgba(34,199,224,.65));animation:pulseGo 3.4s linear infinite}
.circuit-pulse.p2{animation-delay:1.1s}
.circuit-pulse.p3{animation-delay:2.2s}
@keyframes pulseGo{to{stroke-dashoffset:-620}}
.node-pt{fill:var(--blue2)}

/* redesigned node chip (replaces flow-node) */
.chip{position:relative;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 12px 30px rgba(15,40,80,.09);z-index:3;transition:.3s cubic-bezier(.2,.8,.2,1)}
.chip:hover{transform:translateY(-4px);border-color:var(--blue2);box-shadow:0 18px 40px rgba(34,199,224,.24)}
.chip small{display:block;font:700 8px var(--mono);color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.chip b{display:block;font-size:12.5px;margin-top:3px}
.dark .chip,.cta .chip{background:#0e1e38;border-color:rgba(255,255,255,.14);color:#fff}
.dark .chip small,.cta .chip small{color:#7fe6f5}
.chip.hub{background:linear-gradient(150deg,var(--blue),var(--violet));border-color:transparent;color:#fff;text-align:center;box-shadow:0 0 0 12px rgba(47,111,237,.10),0 25px 55px rgba(15,30,70,.3)}
.chip.hub small{color:rgba(255,255,255,.75)}
.chip.hub b{font-size:15px}

/* hub-square frame (replaces circular orbit rings) */
.hub-wrap{position:relative;width:100%;height:100%;display:grid;place-items:center}
.hub-frame{position:absolute;border:1px solid rgba(47,111,237,.18);border-radius:24px}
.hub-frame.f1{width:74%;height:74%}
.hub-frame.f2{width:50%;height:50%;border-style:dashed;border-color:rgba(139,107,240,.28);animation:spinSlow 50s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.hub-tick{position:absolute;width:7px;height:7px;background:var(--blue2);border-radius:50%;box-shadow:0 0 8px rgba(34,199,224,.7);z-index:3}

/* rail diagram (horizontal timeline-of-roles) */
.rail{position:relative;padding:52px 6% 30px}
.rail-line{position:absolute;left:6%;right:6%;top:50%;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue2),var(--violet))}
.rail-stop{position:relative;display:inline-block}
.rail-row{display:flex;justify-content:space-between;position:relative;z-index:2}
.rail-dot{width:14px;height:14px;border-radius:4px;background:#fff;border:3px solid var(--blue);margin:0 auto 12px;box-shadow:0 0 0 5px rgba(47,111,237,.12)}
.rail-item{width:23%;text-align:center}
.rail-item.up{margin-top:-24px}
.rail-item.down{margin-top:24px}
.rail-card{display:inline-block;text-align:left;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 12px 28px rgba(15,40,80,.08);transition:.3s}
.rail-card:hover{transform:translateY(-4px);border-color:var(--blue2)}

/* loop diagram (rounded-rect track, corners rounded, edges straight) */
.loop-wrap{position:relative;padding:34px}
.loop-track{position:absolute;inset:34px;border:2px dashed rgba(47,111,237,.25);border-radius:28px}
.loop-node{position:absolute}

/* mobile / small screens */
@media(max-width:1050px){.rail-row{flex-wrap:wrap;gap:20px}.rail-item{width:46%;margin-top:0!important}.rail-line{display:none}}
@media(max-width:720px){.hub-frame.f1{width:88%;height:88%}.hub-frame.f2{width:60%;height:60%}}

/* fail-safe reveal: visible by default; JS opts elements into a brief hidden
   'pending' state only when it can guarantee revealing them again. This means
   content can never get permanently stuck invisible if JS is slow, blocked,
   or the intersection threshold is never met (the bug behind blank/black
   sections on this site previously). */
.reveal{opacity:1;transform:none}
.reveal.pending{opacity:0;transform:translateY(18px);transition:.7s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none;transition:.7s cubic-bezier(.2,.8,.2,1)}


/* bugfix: .demo-status.risk was unintentionally inheriting the unrelated
   .risk component's box/border/pseudo-element styles (class name collision
   with the hero mockup's risk-bar list), producing a broken overlapping
   badge. Scope the fix to the badge only. */
.demo-status.risk{height:auto;border:0;border-left:0;border-radius:999px;margin:0;position:static;padding:3px 7px}
.demo-status.risk:before,.demo-status.risk:after{display:none}

/* Responsive fallback for the new circuit/hub diagrams: below 760px these
   absolute-positioned layouts (tuned for wide canvases) collapse into a
   simple, safe, stacked list instead of risking clipped/overlapping chips. */
@media(max-width:760px){
  .deck{min-height:0!important;display:flex;flex-direction:column;gap:10px;padding:22px!important}
  .deck .circuit-svg,.deck .hub-wrap,.deck .loop-track-css,.deck .loop-dot{display:none}
  .deck .chip{position:static!important;transform:none!important;width:100%!important;text-align:left!important}
  .deck .chip.hub{order:-1;margin-bottom:4px}
  .deck > div[style*="position:absolute"]:not(.chip){display:none}
  .deck .hub-tick{display:none}
  .deck .runway-strip{position:static;display:flex;flex-direction:column;gap:14px;height:auto}
  .deck .runway-edge,.deck .runway-center,.deck .runway-mark,.deck .runway-blip{display:none}
  .deck .runway-stop{position:static!important;transform:none!important;width:100%!important;text-align:left!important;top:auto!important;bottom:auto!important}
  .deck .runway-badge{position:static;display:inline-flex;margin-bottom:10px}
}

/* bugfix: journey-nav buttons were stretching to fill the full 500px row
   height of the grid (grid items default to stretch), leaving big dead
   space below each button's text. Pack them at their natural size instead,
   and bump several deck font sizes that were reading too small. */
.journey-nav{align-content:start}
.journey-nav button{padding:16px}
.journey-nav button b{font-size:15px}
.journey-nav button small{font-size:12px;color:#9fb7c6}
.journey-screen{min-height:420px}
.demo-row>span{font-size:12.5px}
.demo-row.head{font-size:9.5px}
.demo-status{font-size:11px;padding:4px 9px}

/* subtle dot-grid texture to fill visually empty circuit-diagram canvases */
.deck{background-image:radial-gradient(rgba(47,111,237,.14) 1.2px, transparent 1.2px);background-size:22px 22px;background-position:10px 10px}
.dark .deck,.cta .deck{background-image:radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.2px)}

/* CSS-based loop track (replaces SVG arc track, which distorted under
   non-uniform stretch and threw the corner curves out of alignment with the
   node chips). A real bordered box scales proportionally with its container
   no matter the aspect ratio, so the track and the chips can never drift
   apart the way the old SVG arcs did. */
.loop-track-css{position:absolute;inset:16% 30%;border:2px solid rgba(47,111,237,.28);border-radius:40px}
.loop-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blue2);box-shadow:0 0 10px rgba(34,199,224,.8);animation:loopTravel 6s linear infinite}
@keyframes loopTravel{
  0%,4%{left:50%;top:16%;transform:translate(-50%,-50%)}
  25%,29%{left:70%;top:50%;transform:translate(-50%,-50%)}
  50%,54%{left:50%;top:84%;transform:translate(-50%,-50%)}
  75%,79%{left:30%;top:50%;transform:translate(-50%,-50%)}
  100%{left:50%;top:16%;transform:translate(-50%,-50%)}
}

.fake-kpi.real small{width:auto;height:auto;background:none;font:700 8px var(--mono);letter-spacing:.05em;color:var(--blue);display:block}
.fake-kpi.real b{width:auto!important;height:auto!important;background:none!important;color:var(--ink)!important;font-size:17px;margin-top:5px}

@media(max-width:760px){.roadcards{grid-template-columns:1fr!important}}

/* bugfix: .road / .operator / .demo-table always render on their own white
   card background regardless of section, but had no explicit text color so
   they silently inherited white text from an ancestor .dark/.cta section
   (white-on-white = invisible). Pin them to ink so they're always legible. */
.road b,.operator b,.demo-row>span,.demo-title{color:var(--ink)}
.road small{color:var(--muted)}

/* bugfix: line-height:.99 on the big hero heading was tight enough that
   descenders (e.g. the 'p' in "stop") crowded into ascenders on the line
   below ("build before"), reading as an overlap. Give it breathing room. */
.hero h1{line-height:1.08}

/* bugfix: diagrams using viewBox="0 0 100 100" with preserveAspectRatio="none"
   were stretching stroke-width non-uniformly along with the coordinate
   space -- a 2-unit stroke in a 100-unit viewBox rendered many times
   thicker than 2px once stretched across a real ~600px container. Lock
   stroke width to real screen pixels and make it properly thin. */
.circuit-line,.circuit-pulse{vector-effect:non-scaling-stroke}
.circuit-line{stroke-width:1.25}
.circuit-pulse{stroke-width:2}

/* Runway-strip hero visual: a literal runway metaphor (thin edge lines +
   dashed centerline + a marker travelling down the strip) replacing the
   hub/spoke pattern, which was reading as repetitive, glitchy on rotation,
   and too thick-lined. */
.runway-strip{position:absolute;left:7%;right:7%;top:50%;height:0}
.runway-edge{position:absolute;left:0;right:0;height:1.5px;background:rgba(47,111,237,.3)}
.runway-edge.top{top:-16px}
.runway-edge.bottom{top:16px}
.runway-center{position:absolute;left:0;right:0;top:0;border-top:1.5px dashed rgba(99,140,180,.45)}
.runway-mark{position:absolute;top:0;width:1.5px;height:32px;background:rgba(47,111,237,.28);transform:translate(-50%,-50%)}
.runway-blip{position:absolute;top:0;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--blue2);transform:translateY(-50%);filter:drop-shadow(0 0 6px rgba(34,199,224,.85));animation:flyAcross 4.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes flyAcross{0%{left:-1%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:101%;opacity:0}}
.runway-stop{position:absolute;width:180px;text-align:center}
.runway-stop b{font-size:13px}
.runway-badge{position:absolute;left:24px;top:24px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:rgba(47,111,237,.08);border:1px solid rgba(47,111,237,.18);font:700 9px var(--mono);letter-spacing:.06em;color:var(--blue);z-index:5}
.runway-badge i{width:5px;height:5px;border-radius:50%;background:var(--blue2)}

.cta .btn.inquiry{background:transparent;color:#fff;border-color:rgba(102,168,255,.62)}.cta .btn.inquiry:hover{background:rgba(67,128,214,.18)}