:root{
  --bg:#0d1014;--panel:#14191f;--panel2:#181e25;--ink:#f2f3f0;--muted:#a7afb7;
  --steel:#78828c;--red:#b7443e;--amber:#bd8737;--line:rgba(242,243,240,.14);--green:#6f9a77;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
[id]{scroll-margin-top:86px}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.58}
a{color:inherit} img{max-width:100%;display:block}
a:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
.skip-link{position:fixed;left:14px;top:-80px;z-index:100;background:var(--ink);color:var(--bg);padding:11px 15px;font-weight:800}
.skip-link:focus{top:14px}
.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,74px);background:rgba(13,16,20,.82);backdrop-filter:blur(11px);border-bottom:1px solid var(--line);transition:.25s}
.nav.scrolled{background:rgba(13,16,20,.96);box-shadow:0 10px 35px rgba(0,0,0,.28)}
.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font-weight:900;letter-spacing:.07em;font-size:.93rem}
.brand img{width:39px;height:39px;border-radius:4px;border:1px solid rgba(255,255,255,.3)}
.nav nav{display:flex;gap:28px;align-items:center}.nav nav a{text-decoration:none;font-weight:750;font-size:.9rem;color:#d7dbde}
.nav nav a:hover{color:#fff}.watch{border:1px solid var(--red);padding:9px 13px}
.hero{padding:128px clamp(20px,6vw,90px) 78px;min-height:100svh;display:grid;align-items:center;background:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
radial-gradient(circle at 13% 26%,rgba(183,68,62,.09),transparent 26%),var(--bg);background-size:48px 48px,48px 48px,auto,auto}
.hero-grid{width:min(1380px,100%);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.eyebrow{margin:0 0 14px;font:800 .72rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;color:#d16b63}
h1,h2,h3,p{margin-top:0}
.hero h1{max-width:790px;font-size:clamp(3.8rem,7.3vw,7.8rem);line-height:.91;letter-spacing:-.06em;margin:15px 0 28px;text-wrap:balance}
.hero h1 span{color:#d16b63}
.promise{font:800 clamp(1.05rem,1.7vw,1.38rem)/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;color:#f2d7d4;max-width:680px;margin-bottom:15px}
.hero-deck{max-width:690px;color:#bbc1c6;font-size:clamp(1.05rem,1.6vw,1.27rem)}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:31px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 19px;text-decoration:none;font-weight:850;transition:.2s}
.button.primary{border:1px solid var(--red);background:var(--red);color:#fff;box-shadow:5px 5px 0 #632a27}
.button.primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #632a27}
.button.text{min-height:auto;padding:0 0 5px;border-bottom:1px solid #777f87;color:#d8dcdf}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}
.hero-tags span{padding:7px 9px;border:1px solid var(--line);font:700 .67rem ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#9fa8b0;background:rgba(255,255,255,.025)}
.system-display{position:relative;min-height:600px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(183,68,62,.12),transparent 35%),#0f1419;background-size:36px 36px,36px 36px,auto,auto;box-shadow:0 32px 70px rgba(0,0,0,.38);overflow:hidden}
.system-display::before{content:"DEPENDENCY MAP / LIVE";position:absolute;left:18px;top:16px;padding:7px 9px;border-left:3px solid var(--red);background:rgba(13,16,20,.74);font:700 .65rem ui-monospace,Consolas,monospace;letter-spacing:.1em;color:#d3d8dc}
.system-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:230px;height:230px;border-radius:50%;display:grid;place-content:center;text-align:center;border:1px solid rgba(183,68,62,.7);background:radial-gradient(circle,rgba(183,68,62,.2),rgba(18,23,29,.94) 65%);box-shadow:0 0 80px rgba(183,68,62,.16)}
.system-center span{font:700 .66rem ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#8d98a0}
.system-center strong{display:block;margin-top:5px;font-size:2.15rem;letter-spacing:.03em}
.system-center small{display:block;max-width:150px;margin:9px auto 0;color:#87919a;line-height:1.35}
.system-node{position:absolute;width:165px;padding:15px 16px;border:1px solid rgba(255,255,255,.15);background:rgba(20,25,31,.94);box-shadow:0 16px 36px rgba(0,0,0,.28)}
.system-node::before{content:"";position:absolute;left:-5px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 16px rgba(111,154,119,.5)}
.system-node b{display:block;font:800 .78rem ui-monospace,Consolas,monospace;color:#e4e7e9;letter-spacing:.08em}
.system-node span{display:block;margin-top:5px;font-size:.72rem;color:#77828b}
.node-gps{left:8%;top:20%}.node-pay{right:7%;top:18%}.node-traffic{left:8%;bottom:17%}.node-cold{right:7%;bottom:15%}
.system-link{position:absolute;height:1px;background:linear-gradient(90deg,rgba(183,68,62,.15),rgba(183,68,62,.72),rgba(183,68,62,.15));transform-origin:left center}
.link-a{width:33%;left:23%;top:31%;transform:rotate(20deg)}.link-b{width:33%;left:53%;top:31%;transform:rotate(-20deg)}.link-c{width:33%;left:23%;top:70%;transform:rotate(-20deg)}.link-d{width:33%;left:53%;top:70%;transform:rotate(20deg)}
.section{max-width:1220px;margin:auto;padding:112px clamp(20px,5vw,74px)}
.section h2,.section-head h2,.resilience h2,.cta h2{font-size:clamp(2.7rem,5.5vw,5.2rem);line-height:.96;letter-spacing:-.055em;margin:14px 0 28px;text-wrap:balance}
.section-head{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end;margin-bottom:52px}
.section-head>p{color:var(--muted);margin-bottom:27px}
.flow{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;align-items:stretch;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow article{padding:25px 17px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.flow article.hot{background:rgba(183,68,62,.08)}
.flow article span{display:block;font:700 .69rem ui-monospace,Consolas,monospace;color:var(--red);margin-bottom:31px}
.flow strong{display:block;font-size:1.03rem;margin-bottom:7px}.flow small{color:#8f99a2;line-height:1.45}
.flow i{display:grid;place-items:center;font-style:normal;color:#5f6972}
.scenarios{padding:112px clamp(20px,6vw,88px);background:var(--panel)}
.scenarios>.section-head,.scenario-grid{max-width:1220px;margin-left:auto;margin-right:auto}
.section-head.inverse .eyebrow{color:#d16b63}.section-head.inverse>p{color:#9ea7af}
.scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.scenario-grid article{position:relative;min-height:430px;padding:0 27px 27px;border:1px solid var(--line);background:#11161b;overflow:hidden;transition:transform .22s,border-color .22s}
.scenario-grid article:hover{transform:translateY(-4px);border-color:rgba(183,68,62,.55)}
.scenario-grid article::after{content:"";position:absolute;right:-60px;bottom:-70px;width:180px;height:180px;border:1px solid rgba(255,255,255,.05);border-radius:50%}
.scenario-visual{position:relative;height:190px;margin:0 -27px 24px;overflow:hidden;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px;background-color:#0e1318}
.scenario-visual::before{content:"";position:absolute;inset:0;opacity:.85}
.scenario-visual span,.scenario-visual b{position:relative;z-index:1}
.scenario-visual span{font:700 .64rem ui-monospace,Consolas,monospace;letter-spacing:.12em;color:#9da5ac}
.scenario-visual b{margin-top:5px;font:800 1rem ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#f0f1ef}
.gps-visual::before{background:radial-gradient(circle at 22% 28%,#d16b63 0 3px,transparent 4px),radial-gradient(circle at 55% 44%,#d16b63 0 3px,transparent 4px),radial-gradient(circle at 78% 23%,#d16b63 0 3px,transparent 4px),linear-gradient(28deg,transparent 48%,rgba(209,107,99,.35) 49% 50%,transparent 51%),linear-gradient(150deg,#10171e,#1d2831)}
.payments-visual::before{background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.045) 59px 60px),linear-gradient(155deg,#121920,#2a2020)}
.traffic-visual::before{background:linear-gradient(90deg,transparent 48%,rgba(183,68,62,.5) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,rgba(183,68,62,.5) 49% 51%,transparent 52%),linear-gradient(145deg,#10161b,#202a31)}
.cold-visual::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 12px),radial-gradient(circle at 75% 30%,rgba(111,154,119,.35),transparent 26%),linear-gradient(145deg,#0c151b,#1d2930)}
.scenario-top{display:flex;justify-content:space-between;gap:20px;font:700 .66rem ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#747f88}
.scenario-top b{color:#c6cbd0}.scenario-grid h3{font-size:1.48rem;line-height:1.18;max-width:500px;margin:30px 0 12px}
.scenario-grid p{color:#9ca5ad;max-width:520px;margin-bottom:28px}
.signal{display:flex;gap:7px}.signal em{width:34px;height:4px;background:#77828b}.signal em.off{background:var(--red)}
.method{display:grid;grid-template-columns:.84fr 1.16fr;gap:80px;align-items:start}
.method-copy{position:sticky;top:110px}.lead{color:var(--muted);font-size:clamp(1.1rem,1.8vw,1.38rem)}
.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.method-grid article{padding:26px;border-top:3px solid #3f4851;background:var(--panel)}
.method-grid article:last-child{border-color:var(--red)}
.method-grid span{font:700 .68rem ui-monospace,Consolas,monospace;color:#737e87}
.method-grid h3{font-size:1.26rem;margin:35px 0 9px}.method-grid p{color:#939da5;margin:0}
.resilience{padding:110px clamp(20px,6vw,88px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:
linear-gradient(90deg,transparent,rgba(111,154,119,.05),transparent),#0b0e12}
.resilience-inner{max-width:1050px;margin:auto}
.resilience p:not(.eyebrow){max-width:780px;color:#aeb6bd;font-size:1.08rem}
.status-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;font:700 .72rem ui-monospace,Consolas,monospace;color:#979fa7;text-transform:uppercase;letter-spacing:.06em}
.status-row span{display:flex;align-items:center;gap:8px}.status-row i{width:9px;height:9px;border-radius:50%}.live{background:var(--green)}.degraded{background:var(--amber)}.offline{background:var(--red)}
.cta{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end}.cta p:not(.eyebrow){color:var(--muted)}
footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:center;padding:34px clamp(20px,5vw,74px);border-top:1px solid var(--line);color:#8f98a0;font-size:.87rem}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:.8rem;letter-spacing:.06em}.footer-brand img{width:34px;height:34px;border-radius:4px}
footer span{text-align:center}footer a{text-align:right;color:#c8cdd1}
.reveal{opacity:1;transform:none}.reveal.on{opacity:1;transform:none}
@media(max-width:980px){
  .hero-grid,.method{grid-template-columns:1fr}.hero{min-height:auto}.system-display{max-width:800px;width:100%}
  .section-head{grid-template-columns:1fr;gap:20px}.section-head>p{margin-bottom:0}
  .flow{grid-template-columns:1fr}.flow i{height:26px;transform:rotate(90deg)}
  .method-copy{position:static}.cta{grid-template-columns:1fr}.cta .button{justify-self:start}
}
@media(max-width:700px){
  .nav{height:65px;padding-inline:15px}.brand{font-size:.78rem}.brand img{width:36px;height:36px}
  .nav nav{gap:0}.nav nav a:not(.watch){display:none}.watch{font-size:.76rem;padding:8px 10px}
  .hero{padding:105px 20px 62px}.hero-grid{gap:43px}.system-display{min-height:500px}.system-node{width:130px;padding:12px}.system-center{width:190px;height:190px}.system-center strong{font-size:1.7rem}.node-gps,.node-traffic{left:4%}.node-pay,.node-cold{right:4%}.hero h1{font-size:clamp(3.2rem,15vw,4.8rem)}
  .hero-actions{display:grid;gap:17px}.button.text{justify-self:start}
  .section,.scenarios,.resilience{padding:78px 20px}.section h2,.section-head h2,.resilience h2,.cta h2{font-size:clamp(2.55rem,11vw,4rem)}
  .scenario-grid,.method-grid{grid-template-columns:1fr}.scenario-grid article{min-height:0}.scenario-visual{height:180px}
  footer{grid-template-columns:1fr}footer span,footer a{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.scenario-grid article,.nav,.reveal{transition:none}.reveal{opacity:1;transform:none}}