/* Self-hosted Sora — no external font dependency, loads instantly and offline. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/sora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/sora-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/sora-latin-800-normal.woff2") format("woff2"); }


/* Images carry their real pixel size as width/height attributes so the browser
   can reserve the space before the file arrives (Cumulative Layout Shift).
   Those attributes are also a presentational hint for the literal height, so
   height:auto is required to keep the width-driven sizing the layout expects. */
img[width][height] { height: auto; }

:root {
  --bg: #061528;
  --bg-2: #081d34;
  --panel: #0a2039;
  --panel-2: #0c2946;
  --line: rgba(190, 219, 242, .16);
  --line-strong: rgba(190, 219, 242, .28);
  --text: #f5f8fb;
  --muted: #a3b8ce;
  --muted-2: #9db1c7;
  --green: #00d08a;
  --green-2: #37eea7;
  --blue: #2563eb;
  --blue-2: #4f83ff;
  --red: #ff5364;
  --amber: #ffb000;
  --shadow: 0 34px 80px rgba(0, 5, 14, .52);
  --radius: 22px;
  --container: min(1220px, calc(100% - 44px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "Sora", Inter, system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(0, 208, 138, .28); color: white; }

#networkCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .28; }
main, .site-footer { position: relative; z-index: 1; }
.container { width: var(--container); margin: 0 auto; }
.section { position: relative; padding: 130px 0; }
.scroll-progress { position: fixed; inset: 0 auto auto 0; width: 100%; height: 2px; z-index: 1000; background: rgba(255,255,255,.03); }
.scroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--blue-2)); box-shadow: 0 0 18px rgba(0,208,138,.75); }

.site-header { position: fixed; z-index: 100; top: 18px; left: 50%; transform: translateX(-50%); width: min(1320px, calc(100% - 36px)); height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 22px; border: 1px solid transparent; border-radius: 18px; transition: .35s ease; }
.site-header.scrolled { background: rgba(6, 21, 40, .82); border-color: var(--line); box-shadow: 0 18px 50px rgba(0, 3, 12, .3); backdrop-filter: blur(18px); top: 10px; height: 66px; }
.brand { width: 245px; height: 56px; overflow: hidden; display: flex; align-items: center; }
.brand img { width: 236px; margin-left: -2px; }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; color: #b6c7d8; }
.desktop-nav a { position: relative; padding: 16px 0; transition: color .25s ease; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 10px; height: 1px; background: var(--green); transition: right .25s ease; }
.desktop-nav a:hover { color: #fff; }
.desktop-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.text-link { font-size: 12px; color: #b6c7d8; }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.menu-button span { width: 17px; height: 1px; background: white; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-weight: 600; font-size: 13px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #00130d; background: linear-gradient(135deg, var(--green-2), var(--green)); box-shadow: 0 14px 34px rgba(0, 208, 138, .18); }
.button-primary:hover { box-shadow: 0 18px 48px rgba(0, 208, 138, .32); }
.button-ghost { color: #e8f0f7; border-color: var(--line-strong); background: rgba(255,255,255,.025); }
.button-ghost:hover { border-color: rgba(55,238,167,.5); background: rgba(0,208,138,.05); }
.button-small { min-height: 42px; padding: 0 17px; border-radius: 10px; font-size: 12px; }
.play-icon { font-size: 10px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; }

.eyebrow { color: var(--green-2); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.status-dot, .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(0,208,138,.08), 0 0 14px rgba(0,208,138,.8); margin-right: 9px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 24px 0 25px; font-size: clamp(48px, 5.2vw, 78px); line-height: 1.02; letter-spacing: -.052em; max-width: 780px; }
h1 span { color: transparent; background: linear-gradient(100deg, #f9fbfd 5%, #71e9bb 60%, #49a0ff 100%); -webkit-background-clip: text; background-clip: text; }
h2 { margin: 16px 0 20px; font-size: clamp(38px, 4vw, 60px); line-height: 1.08; letter-spacing: -.045em; }
h3 { font-size: 23px; letter-spacing: -.025em; }
p { color: var(--muted); line-height: 1.8; }

.hero { min-height: 100vh; padding: 170px 0 100px; display: flex; align-items: center; overflow: hidden; background: radial-gradient(circle at 72% 20%, rgba(20,93,160,.14), transparent 30%), radial-gradient(circle at 20% 85%, rgba(0,208,138,.08), transparent 27%), linear-gradient(180deg, #051323 0%, #061528 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 86%); }
.hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 62px; align-items: center; }
.hero-copy { position: relative; z-index: 3; }
.hero-lead { max-width: 660px; font-size: 16px; }
.hero-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.trust-row { margin-top: 50px; display: flex; align-items: center; gap: 0; border-top: 1px solid var(--line); max-width: 650px; }
.trust-row div { flex: 1; padding: 21px 22px 0 0; }
.trust-row div + div { border-left: 1px solid var(--line); padding-left: 22px; }
.trust-row strong { display: block; font-size: 14px; color: #eef6fb; }
.trust-row span { display: block; font-size: 10px; color: var(--muted-2); margin-top: 5px; text-transform: uppercase; letter-spacing: .08em; }
.hero-stage { position: relative; height: 620px; perspective: 1400px; }
.app-window { position: absolute; width: 790px; top: 86px; left: -40px; border: 1px solid rgba(133,181,220,.2); border-radius: 17px; overflow: hidden; background: #081d34; box-shadow: 0 50px 110px rgba(0,3,10,.72), 0 0 0 1px rgba(0,208,138,.06); transform: rotateY(-7deg) rotateX(2deg); transform-origin: center; transition: transform .25s ease-out; }
.window-bar { height: 38px; display: flex; align-items: center; gap: 18px; padding: 0 13px; background: #0a1d32; border-bottom: 1px solid var(--line); font-size: 9px; color: var(--muted); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #42617d; }
.window-label { flex: 1; text-align: center; }
.window-label span { width: 5px; height: 5px; display: inline-block; background: var(--green); border-radius: 50%; margin-right: 6px; box-shadow: 0 0 8px var(--green); }
.window-status { color: var(--green); letter-spacing: .1em; }
.app-window img { width: 100%; display: block; }
.floating-card { position: absolute; z-index: 4; background: linear-gradient(145deg, rgba(12,42,72,.95), rgba(5,20,38,.95)); border: 1px solid rgba(116,171,215,.22); box-shadow: 0 22px 60px rgba(0,4,12,.55); backdrop-filter: blur(14px); }
.reliability-card { right: -30px; top: 45px; width: 190px; border-radius: 18px; padding: 17px; }
.mini-label { font-size: 8px; letter-spacing: .12em; color: var(--muted); }
.gauge { margin-top: 13px; padding-left: 13px; border-left: 2px solid var(--green); }
.gauge b { display: block; font-size: 25px; }
.gauge span { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
.signal-row { display: flex; gap: 4px; align-items: end; height: 24px; margin-top: 16px; }
.signal-row i { flex: 1; background: linear-gradient(to top, var(--blue), var(--green)); border-radius: 2px; animation: signal 1.5s ease-in-out infinite alternate; }
.signal-row i:nth-child(1){height:35%}.signal-row i:nth-child(2){height:58%;animation-delay:.1s}.signal-row i:nth-child(3){height:44%;animation-delay:.2s}.signal-row i:nth-child(4){height:84%;animation-delay:.3s}.signal-row i:nth-child(5){height:68%;animation-delay:.4s}
.event-card { left: -15px; bottom: 85px; display: flex; align-items: center; gap: 12px; width: 286px; padding: 14px 16px; border-radius: 14px; }
.event-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--amber); background: rgba(255,176,0,.08); }
.event-card b, .event-card span { display: block; }
.event-card b { font-size: 11px; }
.event-card div span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.report-card { right: 15px; bottom: 24px; width: 190px; border-radius: 14px; padding: 15px; }
.report-card span { color: var(--green); font-size: 8px; letter-spacing: .12em; }
.report-card b { display: block; margin-top: 7px; font-size: 11px; }
.report-line { height: 3px; margin-top: 14px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.report-line i { display: block; width: 84%; height: 100%; background: linear-gradient(90deg,var(--green),var(--blue)); animation: breathe 1.8s infinite alternate; }
.stage-orbit { position: absolute; border: 1px solid rgba(76,145,197,.12); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; right: -150px; top: 10px; animation: spin 24s linear infinite; }
.orbit-two { width: 340px; height: 340px; left: 50px; bottom: -40px; border-style: dashed; animation: spin 18s linear infinite reverse; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hero-glow-one { width: 380px; height: 380px; background: rgba(37,99,235,.12); right: 8%; top: 16%; }
.hero-glow-two { width: 300px; height: 300px; background: rgba(0,208,138,.08); left: 14%; bottom: 2%; }
.scroll-cue { position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue span { width: 28px; height: 42px; border: 1px solid var(--line-strong); border-radius: 18px; position: relative; }
.scroll-cue span::after { content:""; position:absolute; width:3px; height:7px; border-radius:5px; background:var(--green); left:50%; top:8px; transform:translateX(-50%); animation: scrollCue 1.7s infinite; }

.metrics-band { position: relative; z-index: 2; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(5,18,33,.74); backdrop-filter: blur(10px); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metric { padding: 38px 30px; text-align: center; position: relative; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric strong { font-size: 34px; letter-spacing: -.04em; }
.metric em { font-style: normal; font-size: 18px; color: var(--green); }
.metric span { display: block; font-size: 9px; color: var(--muted); letter-spacing: .11em; text-transform: uppercase; margin-top: 7px; }

.platform { background: linear-gradient(180deg, #061528, #071a30); }
.section-heading { max-width: 820px; margin-bottom: 68px; }
.section-heading.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-heading p { max-width: 690px; margin: 0 auto; }
.feature-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 18px; }
.feature-card { position: relative; min-height: 370px; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: linear-gradient(145deg, rgba(12,42,72,.68), rgba(6,25,45,.52)); overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.feature-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 12%, rgba(0,208,138,.1), transparent 30%); opacity:0; transition:.35s; }
.feature-card:hover { transform: translateY(-7px); border-color: rgba(55,238,167,.28); box-shadow: 0 26px 60px rgba(0,5,14,.28); }
.feature-card:hover::before { opacity:1; }
.feature-card > * { position: relative; z-index: 2; }
.feature-card.large { grid-row: span 1; }
.feature-number { position:absolute; right:24px; top:20px; font-size:10px; color:var(--muted-2); letter-spacing:.1em; }
.feature-icon { width: 49px; height: 49px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 26px; color: var(--green-2); background: rgba(0,208,138,.07); border: 1px solid rgba(0,208,138,.18); font-size: 22px; }
.feature-card p { font-size: 13px; max-width: 430px; }
.feature-card ul { list-style: none; margin: 25px 0 0; padding: 0; display: grid; gap: 12px; }
.feature-card li { color: #b7c7d6; font-size: 11px; }
.feature-card li::before { content:"✓"; color:var(--green); margin-right:10px; }
.icon-sld { position:relative; }
.icon-sld span { position:absolute; width:7px; height:7px; border:1px solid var(--green); border-radius:2px; }
.icon-sld span:nth-child(1){left:9px;top:20px}.icon-sld span:nth-child(2){right:9px;top:10px}.icon-sld span:nth-child(3){right:10px;bottom:9px}
.icon-sld::before,.icon-sld::after{content:"";position:absolute;height:1px;background:var(--green);transform-origin:left}.icon-sld::before{width:20px;left:15px;top:22px;transform:rotate(-28deg)}.icon-sld::after{width:19px;left:15px;top:23px;transform:rotate(24deg)}
.topology-mini { position:absolute; right:-20px; bottom:-10px; width:250px; height:190px; opacity:.52; }
.topology-mini .node { position:absolute; width:13px; height:13px; border-radius:4px; border:1px solid var(--green); background:#0a2039; box-shadow:0 0 12px rgba(0,208,138,.35); }
.topology-mini .n1{left:20px;top:20px}.topology-mini .n2{right:25px;top:35px}.topology-mini .n3{left:88px;top:87px}.topology-mini .n4{right:54px;bottom:20px}.topology-mini .n5{left:32px;bottom:28px}
.topology-mini .line { position:absolute;height:1px;background:linear-gradient(90deg,var(--green),transparent);transform-origin:left; }
.topology-mini .l1{width:130px;left:33px;top:29px;transform:rotate(8deg)}.topology-mini .l2{width:76px;left:38px;top:34px;transform:rotate(48deg)}.topology-mini .l3{width:95px;left:98px;top:95px;transform:rotate(42deg)}.topology-mini .l4{width:80px;left:43px;bottom:35px;transform:rotate(-43deg)}
.mini-sim { margin-top: 35px; display:grid; gap:10px; }
.mini-sim > div:not(.flow-track) { display:flex; align-items:center; justify-content:space-between; font-size:9px; color:var(--muted); }
.mini-sim b { font-size:9px; }.offline{color:var(--red)}.online{color:var(--green)}
.flow-track { height:6px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden; }
.flow-track i { display:block; width:45%; height:100%; background:linear-gradient(90deg,var(--green),var(--blue)); border-radius:5px; animation:flow 2s linear infinite; }
.compliance-score { margin-top: 34px; height: 135px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle, rgba(0,208,138,.12), transparent 63%); border:1px solid var(--line); }
.compliance-score strong { font-size:48px; }.compliance-score > span { font-size:14px;color:var(--muted);align-self:center;margin-top:15px}.compliance-score small { position:absolute; bottom:20px; font-size:8px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.feature-card.wide { grid-column: 1 / -1; min-height: 330px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; }
.wide-card-copy { max-width:600px; }
.inline-link { display:inline-flex; align-items:center; gap:10px; color:#dffaf0; font-size:12px; font-weight:600; margin-top:13px; }
.inline-link span { color:var(--green); transition:transform .2s; }.inline-link:hover span{transform:translateX(4px)}
.report-preview { position:absolute; right:55px; bottom:-70px; width:390px; height:330px; perspective:900px; }
.report-sheet { position:absolute; width:250px; height:330px; border-radius:7px; background:#edf4f6; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.report-sheet.back { right:0; top:30px; transform:rotate(8deg); opacity:.55; }
.report-sheet.front { right:52px; top:0; padding:23px; transform:rotate(-3deg); }
.sheet-brand{display:flex;align-items:center;gap:9px;color:#0a2039;font-size:7px;font-weight:700;letter-spacing:.08em}.sheet-brand img{width:25px;height:25px;object-fit:cover;object-position:left;border-radius:5px}.sheet-title{height:13px;width:70%;background:#17344d;margin-top:28px;border-radius:3px}.sheet-sub{height:6px;width:42%;background:#93a8b8;margin-top:8px;border-radius:3px}.sheet-chart{height:100px;margin-top:25px;border-left:1px solid #b8c7d1;border-bottom:1px solid #b8c7d1;display:flex;align-items:end;gap:11px;padding:0 10px}.sheet-chart i{flex:1;background:linear-gradient(#00d08a,#2563eb);border-radius:3px 3px 0 0}.sheet-chart i:nth-child(1){height:35%}.sheet-chart i:nth-child(2){height:58%}.sheet-chart i:nth-child(3){height:48%}.sheet-chart i:nth-child(4){height:80%}.sheet-chart i:nth-child(5){height:68%}.sheet-row{display:flex;gap:9px;margin-top:15px}.sheet-row b{width:24px;height:8px;background:#00d08a;border-radius:2px}.sheet-row span{flex:1;height:7px;background:#c7d3db;border-radius:2px}

.workflow { background: radial-gradient(circle at 80% 50%, rgba(37,99,235,.08), transparent 35%), #051423; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.workflow-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:75px; align-items:center; }
.workflow-copy p { max-width:490px; }
.workflow-tabs { margin-top:38px; display:grid; gap:8px; }
.workflow-tab { position:relative; display:grid; grid-template-columns:34px 1fr; gap:2px 12px; text-align:left; padding:18px 18px; border:1px solid transparent; border-radius:14px; color:var(--muted); background:transparent; cursor:pointer; transition:.25s; }
.workflow-tab::before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:2px; background:var(--green); opacity:0; }
.workflow-tab:hover { background:rgba(255,255,255,.025); }
.workflow-tab.active { background:rgba(0,208,138,.055); border-color:rgba(0,208,138,.14); color:#fff; }
.workflow-tab.active::before { opacity:1; }
.workflow-tab span { grid-row:1/3; color:var(--green); font-size:10px; padding-top:3px; }
.workflow-tab b { font-size:13px; }.workflow-tab small{font-size:9px;color:var(--muted);margin-top:5px}
.workflow-visual { position:relative; perspective:1200px; }
.screen-shell { position:relative; z-index:2; border:1px solid rgba(118,175,218,.2); border-radius:18px; overflow:hidden; background:#06172b; box-shadow:var(--shadow); transform:rotateY(-4deg); }
.screen-topbar { height:38px; display:flex; align-items:center; gap:6px; padding:0 13px; border-bottom:1px solid var(--line); background:#0a2038; }
.screen-topbar span{width:6px;height:6px;border-radius:50%;background:#486179}.screen-topbar b{margin-left:auto;font-size:8px;color:var(--muted);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.screen-canvas{position:relative;aspect-ratio:1.94/1;overflow:hidden;background:#081d34}.screen-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .55s ease,transform .8s ease}.screen-image.active{opacity:1;transform:scale(1)}
.insight-screen{position:absolute;inset:0;padding:34px;background:radial-gradient(circle at 85% 20%,rgba(37,99,235,.16),transparent 28%),#071a30;opacity:0;transform:translateY(18px);pointer-events:none;transition:.55s}.insight-screen.active{opacity:1;transform:none}.insight-header span{font-size:8px;color:var(--green);letter-spacing:.14em}.insight-header b{display:block;margin-top:8px;font-size:21px}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.insight-kpi{padding:15px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}.insight-kpi span{display:block;color:var(--muted);font-size:7px;letter-spacing:.1em}.insight-kpi b{display:block;margin-top:8px;font-size:20px}.insight-kpi small{display:block;margin-top:4px;color:var(--green);font-size:7px}.insight-chart{height:115px;margin-top:20px;display:flex;align-items:end;gap:11px;padding:15px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.insight-chart i{flex:1;height:var(--h);background:linear-gradient(to top,var(--blue),var(--green));border-radius:3px 3px 0 0}.insight-summary{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 15px;border:1px solid rgba(0,208,138,.18);border-radius:12px;background:rgba(0,208,138,.045)}.insight-summary .check{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(0,208,138,.12);color:var(--green)}.insight-summary p{font-size:9px;margin:0;line-height:1.5}.insight-summary b{color:#fff}.screen-reflection{position:absolute;left:7%;right:7%;bottom:-45px;height:70px;background:rgba(37,99,235,.12);filter:blur(35px);border-radius:50%}

.digital-twin { background:linear-gradient(180deg,#07182c,#061528); }
.section-heading.split { max-width:none; display:grid; grid-template-columns:1fr .8fr; gap:80px; align-items:end; }
.section-heading.split p { margin:0 0 8px auto; max-width:520px; }
.twin-shell { border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#071b31; box-shadow:0 30px 80px rgba(0,5,14,.25); }
.scenario-bar { min-height:72px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }
.scenario-title{font-size:11px;color:var(--muted)}.scenario-title b{color:#fff;margin-left:5px}.live-dot{width:6px;height:6px;margin-right:10px}
.scenario-controls{display:flex;gap:7px}.scenario{border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);padding:10px 14px;font-size:9px;cursor:pointer;transition:.25s}.scenario:hover,.scenario.active{color:#fff;border-color:rgba(0,208,138,.35);background:rgba(0,208,138,.08)}
.twin-grid { display:grid; grid-template-columns:1fr 280px; min-height:565px; }
.network { position:relative; min-height:565px; background-image:radial-gradient(rgba(106,154,191,.18) .8px,transparent .8px);background-size:18px 18px; overflow:hidden; }
.network svg { position:absolute; inset:0; width:100%; height:100%; }
.power-line { fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.82; stroke-dasharray:8 8; animation:powerFlow 1.2s linear infinite; filter:drop-shadow(0 0 4px rgba(0,208,138,.35)); transition:stroke .45s, opacity .45s; }
.backup-a,.backup-b{stroke:var(--muted-2);opacity:.28;animation:none}.network[data-mode="failure"] .line-a{stroke:var(--red);opacity:.28;animation:none}.network[data-mode="failure"] .backup-a{stroke:var(--amber);opacity:1;animation:powerFlow 1.2s linear infinite}.network[data-mode="maintenance"] .line-b{stroke:var(--amber);opacity:.42;animation:none}.network[data-mode="maintenance"] .backup-b{stroke:var(--green);opacity:1;animation:powerFlow 1.2s linear infinite}
.twin-node{position:absolute;width:120px;padding:12px 13px;border:1px solid rgba(102,153,194,.25);border-radius:12px;background:linear-gradient(145deg,#0d2946,#091c31);box-shadow:0 14px 28px rgba(0,5,14,.28);transition:.45s}.twin-node span{display:block;font-size:9px;font-weight:700}.twin-node b{display:block;font-size:7px;color:var(--green);margin-top:4px}.twin-node i{position:absolute;right:11px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.utility-a{left:8%;top:7%}.utility-b{right:8%;top:7%}.generator-a{left:33%;top:7%}.generator-b{right:33%;top:7%}.switch-a{left:24%;top:35%}.switch-b{right:24%;top:35%}.ups-a{left:31%;top:58%}.ups-b{right:31%;top:58%}.load{left:50%;bottom:7%;transform:translateX(-50%);width:150px;text-align:center}
.network[data-mode="failure"] .utility-a{border-color:rgba(255,83,100,.45);opacity:.62}.network[data-mode="failure"] .utility-a b,.network[data-mode="failure"] .utility-a i{color:var(--red);background:var(--red);box-shadow:0 0 10px var(--red)}.network[data-mode="failure"] .generator-a{border-color:rgba(255,176,0,.5);box-shadow:0 0 25px rgba(255,176,0,.12)}.network[data-mode="failure"] .generator-a b,.network[data-mode="failure"] .generator-a i{color:var(--amber);background:var(--amber);box-shadow:0 0 10px var(--amber)}
.network[data-mode="maintenance"] .utility-b{border-color:rgba(255,176,0,.45);opacity:.62}.network[data-mode="maintenance"] .utility-b b,.network[data-mode="maintenance"] .utility-b i{color:var(--amber);background:var(--amber);box-shadow:0 0 10px var(--amber)}.network[data-mode="maintenance"] .generator-b{border-color:rgba(0,208,138,.55);box-shadow:0 0 25px rgba(0,208,138,.12)}
.twin-inspector{border-left:1px solid var(--line);padding:24px;background:#081d34}.inspector-label{font-size:8px;color:var(--green);letter-spacing:.12em}.telemetry-list{display:grid;gap:0;margin-top:17px}.telemetry-list div{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line);font-size:8px;color:var(--muted)}.telemetry-list b{font-size:9px;color:#fff}.telemetry-list .good{color:var(--green)}.event-log{margin-top:28px}.log-head{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:var(--muted);letter-spacing:.1em}.log-head button{border:0;background:none;color:var(--muted-2);font-size:8px;cursor:pointer}.event-log ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;max-height:220px;overflow:auto}.event-log li{display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:8px;line-height:1.4}.event-log time{color:var(--green)}.event-log span{color:#b9c7d5}

.learning { background:radial-gradient(circle at 23% 50%,rgba(0,208,138,.07),transparent 30%),#051423;overflow:hidden; }
.learning-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.learning-visual{min-height:520px;display:grid;place-items:center}.academy-orbit{position:relative;width:430px;height:430px;border:1px solid rgba(0,208,138,.18);border-radius:50%;animation:spin 30s linear infinite}.academy-orbit::before,.academy-orbit::after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(90,145,190,.18);inset:55px}.academy-orbit::after{inset:110px;border-style:solid}.academy-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:165px;height:165px;border-radius:35px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#0d2b48,#071a30);border:1px solid rgba(0,208,138,.22);box-shadow:0 30px 60px rgba(0,5,14,.4);animation:spin 30s linear infinite reverse}.academy-core img{width:58px;height:58px;object-fit:cover;object-position:left;border-radius:10px}.academy-core span{font-size:23px;font-weight:800;margin-top:10px}.academy-core b{font-size:7px;color:var(--green);letter-spacing:.15em;margin-top:4px}.orbit-badge{position:absolute;min-width:96px;padding:12px 14px;text-align:center;border-radius:11px;background:#0b2541;border:1px solid var(--line);font-size:8px;letter-spacing:.1em;box-shadow:0 15px 35px rgba(0,5,14,.35);animation:spin 30s linear infinite reverse}.badge-one{left:-36px;top:42%}.badge-two{right:-40px;top:18%}.badge-three{right:-32px;bottom:18%}.badge-four{left:20%;bottom:-19px}.learning-copy p{max-width:530px}.learning-points{display:grid;gap:20px;margin-top:35px}.learning-points>div{display:grid;grid-template-columns:38px 1fr;gap:15px;align-items:start}.learning-points span{color:var(--green);font-size:10px;padding-top:3px}.learning-points p{font-size:11px;line-height:1.65;margin:0;border-bottom:1px solid var(--line);padding-bottom:19px}.learning-points b{color:#fff}

.reports{background:#061528}.report-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.report-types{display:grid;gap:8px;margin-top:33px}.report-type{text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018);color:var(--muted);cursor:pointer;transition:.25s}.report-type span,.report-type small{display:block}.report-type span{font-size:11px;font-weight:600}.report-type small{font-size:8px;margin-top:5px}.report-type:hover,.report-type.active{border-color:rgba(0,208,138,.3);background:rgba(0,208,138,.055);color:#fff}.report-dashboard{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#0b2440,#07192c);box-shadow:var(--shadow)}.dashboard-header,.dashboard-footer{height:58px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted)}.dashboard-header b{font-size:8px;color:var(--green)}.dashboard-body{padding:35px;display:grid;grid-template-columns:150px 1fr;gap:33px;align-items:center}.donut{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 74%,var(--blue) 74% 92%,rgba(255,255,255,.06) 92%);position:relative}.donut::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#0a2039}.donut div{position:relative;z-index:2}.donut b{font-size:42px}.donut span{font-size:10px;color:var(--muted)}.dash-bars{display:grid;gap:13px}.dash-bars::before{content:"SYSTEM READINESS";font-size:7px;color:var(--muted);letter-spacing:.12em;margin-bottom:3px}.dash-bars i{height:7px;border-radius:5px;background:linear-gradient(90deg,var(--green) var(--w),rgba(255,255,255,.055) var(--w));}.dash-status{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dash-status span{padding:13px;border:1px solid var(--line);border-radius:10px;font-size:8px;color:#b7c6d4}.dash-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:7px}.dashboard-footer{border-top:1px solid var(--line);border-bottom:0;height:48px}.dashboard-footer b{color:var(--green);font-size:8px}

/* Pricing */
.pricing{overflow:hidden;background:radial-gradient(circle at 50% 8%,rgba(37,99,235,.12),transparent 32%),linear-gradient(180deg,#061528 0%,#071a2e 54%,#061528 100%)}
.pricing::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,transparent,black 16%,black 82%,transparent)}
.pricing>.container{position:relative;z-index:2}.pricing-glow{position:absolute;border-radius:50%;filter:blur(95px);pointer-events:none}.pricing-glow-one{width:380px;height:380px;left:-170px;top:29%;background:rgba(0,208,138,.08)}.pricing-glow-two{width:420px;height:420px;right:-190px;top:48%;background:rgba(37,99,235,.09)}
.pricing-toolbar{width:max-content;max-width:100%;margin:-26px auto 42px;display:flex;align-items:center;gap:14px}.billing-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:13px;background:rgba(3,15,28,.74);box-shadow:0 14px 38px rgba(0,5,14,.24)}.billing-option{min-width:92px;height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:.25s}.billing-option:hover{color:#fff}.billing-option.active{color:#00150e;background:linear-gradient(135deg,var(--green-2),var(--green));box-shadow:0 9px 24px rgba(0,208,138,.18)}.billing-save{padding:9px 12px;border:1px solid rgba(0,208,138,.18);border-radius:999px;color:var(--green-2);background:rgba(0,208,138,.055);font-size:8px;font-weight:600;letter-spacing:.04em}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}.pricing-card{position:relative;min-height:660px;padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(155deg,rgba(12,41,70,.88),rgba(5,19,35,.94));box-shadow:0 24px 65px rgba(0,5,14,.26);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;overflow:hidden}.pricing-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:.55}.pricing-card:hover{transform:translateY(-7px);border-color:rgba(76,162,221,.34);box-shadow:0 35px 85px rgba(0,5,14,.42)}.pricing-card.featured{border-color:rgba(0,208,138,.44);background:radial-gradient(circle at 50% 0,rgba(0,208,138,.11),transparent 34%),linear-gradient(155deg,rgba(12,48,72,.96),rgba(5,20,36,.98));box-shadow:0 30px 80px rgba(0,208,138,.08),0 28px 70px rgba(0,5,14,.4)}.pricing-card.featured::after{content:"";position:absolute;inset:-1px;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 34px rgba(0,208,138,.035)}
.popular-badge{position:absolute;top:20px;right:20px;padding:8px 10px;border:1px solid rgba(0,208,138,.25);border-radius:999px;background:rgba(0,208,138,.07);color:var(--green-2);font-size:7px;font-weight:700;letter-spacing:.12em}.popular-badge .status-dot{width:5px;height:5px;margin-right:7px;box-shadow:0 0 8px var(--green)}.plan-topline{display:flex;align-items:center;gap:11px;color:var(--muted-2);font-size:7px;letter-spacing:.13em}.plan-topline span{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:7px;color:var(--green)}.pricing-card h3{margin:28px 0 11px;font-size:31px}.plan-audience{min-height:87px;margin-bottom:20px;font-size:10px;line-height:1.65}.plan-price{min-height:67px;display:flex;align-items:baseline;gap:3px;margin-top:3px}.price-prefix{align-self:center;margin-right:7px;color:var(--muted);font-size:10px}.currency{align-self:flex-start;margin-top:13px;color:var(--green-2);font-size:15px;font-weight:700}.price-number{font-size:54px;line-height:1;letter-spacing:-.055em}.price-period{color:var(--muted);font-size:9px}.price-note{height:34px;color:var(--muted-2);font-size:8px}.seat-chip{margin:14px 0 19px;padding:12px 13px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.018)}.seat-chip span{font-size:7px;color:var(--muted);letter-spacing:.13em}.seat-chip b{font-size:10px}.plan-button{width:100%}.plan-features{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}.plan-features li{position:relative;padding-left:25px;color:#6f87a0;font-size:9px;line-height:1.45}.plan-features li::before{content:"—";position:absolute;left:2px;color:#4f6882}.plan-features li.included{color:#d6e3ee}.plan-features li.included::before{content:"✓";color:var(--green-2);font-weight:800}.plan-features li.limited{color:#c8d3dd}.plan-features li.limited::before{content:"◐";color:var(--amber)}
.plan-comparison{margin-top:26px;border:1px solid var(--line);border-radius:22px;background:rgba(4,18,33,.68);overflow:hidden;box-shadow:0 28px 65px rgba(0,5,14,.24)}.comparison-heading{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:end;padding:30px 34px;border-bottom:1px solid var(--line)}.comparison-heading h3{margin:11px 0 0}.comparison-heading p{margin:0;font-size:10px;line-height:1.65}.comparison-scroll{overflow-x:auto}.comparison-table{min-width:820px}.comparison-row{display:grid;grid-template-columns:1.8fr repeat(3,1fr);min-height:54px;border-bottom:1px solid rgba(190,219,242,.09)}.comparison-row:last-child{border-bottom:0}.comparison-row>*{padding:15px 18px;display:flex;align-items:center;border-left:1px solid rgba(190,219,242,.075);font-size:9px;color:#afc0d0}.comparison-row>*:first-child{border-left:0;color:#dce7f0}.comparison-head{min-height:48px;background:rgba(255,255,255,.022)}.comparison-head b{color:var(--green-2);font-size:8px;letter-spacing:.1em;text-transform:uppercase}.comparison-head b:first-child{color:var(--muted)}.matrix-yes{color:var(--green-2)!important;font-size:14px!important;font-weight:800}.matrix-no{color:#4c6883!important}.matrix-limited{color:var(--amber)!important}.pricing-footnote{margin-top:18px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:15px;background:linear-gradient(90deg,rgba(0,208,138,.04),rgba(37,99,235,.035));font-size:9px;color:var(--muted)}.pricing-footnote a{color:#e7f0f7;font-weight:600}.pricing-footnote a b{margin-left:7px;color:var(--green)}

.cta{min-height:660px;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(0,208,138,.11),transparent 30%),linear-gradient(180deg,#061528,#04101e)}.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,black,transparent 65%)}.cta-inner{position:relative;z-index:2}.cta-icon{width:83px;height:83px;margin:0 auto 25px;border:1px solid rgba(0,208,138,.25);border-radius:24px;background:#0a2139;display:grid;place-items:center;box-shadow:0 0 60px rgba(0,208,138,.13)}.cta-icon img{width:62px;height:62px;object-fit:cover;object-position:left;border-radius:12px}.cta p{max-width:650px;margin:0 auto}.cta-actions{margin-top:34px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

.site-footer{background:#030e1a;border-top:1px solid var(--line);padding:65px 0 25px}.footer-grid{display:grid;grid-template-columns:1fr .8fr 1.1fr;gap:70px;align-items:start}.footer-brand img{width:260px}.footer-brand p{font-size:10px;letter-spacing:.11em;text-transform:uppercase;margin:10px 0 0}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.footer-links div{display:grid;gap:10px}.footer-links span{font-size:9px;color:var(--green);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}.footer-links a{font-size:10px;color:var(--muted)}.footer-links a:hover{color:#fff}.footer-meta{text-align:right}.footer-meta p{font-size:9px;letter-spacing:.11em;color:var(--green);line-height:1.7}.footer-meta a{font-size:10px;color:#d9e4ee}.footer-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;font-size:8px;color:var(--muted-2)}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .12s; }.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}

@keyframes signal{to{height:95%}}@keyframes breathe{to{opacity:.45}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scrollCue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,16px)}}@keyframes flow{from{transform:translateX(-110%)}to{transform:translateX(250%)}}@keyframes powerFlow{to{stroke-dashoffset:-32}}

@media (max-width: 1180px){
  .desktop-nav{display:none}.hero-grid{grid-template-columns:1fr}.hero{padding-top:145px}.hero-copy{max-width:830px}.hero-stage{height:540px;margin-top:10px}.app-window{left:50%;transform:translateX(-50%) rotateY(-4deg);width:min(900px,90vw)}.reliability-card{right:5%}.event-card{left:4%}.report-card{right:8%}.workflow-grid,.learning-grid,.report-grid{grid-template-columns:1fr;gap:55px}.workflow-copy,.learning-copy,.report-copy{max-width:730px}.learning-visual{order:2}.report-dashboard{max-width:900px}.footer-grid{grid-template-columns:1fr 1fr}.footer-meta{grid-column:1/-1;text-align:left}.feature-grid{grid-template-columns:1fr 1fr}.pricing-grid{grid-template-columns:1fr 1fr}.pricing-card[data-plan="enterprise"]{grid-column:1/-1;min-height:570px}.pricing-card[data-plan="enterprise"] .plan-audience{min-height:auto;max-width:650px}.pricing-card[data-plan="enterprise"] .plan-features{grid-template-columns:1fr 1fr}.feature-card.large{grid-column:1/-1}.feature-card.wide{grid-template-columns:1fr 1fr}.twin-grid{grid-template-columns:1fr}.twin-inspector{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:25px}.event-log{margin-top:0}}
@media (max-width: 760px){
  :root{--container:min(100% - 28px,1220px)}.section{padding:92px 0}.site-header{width:calc(100% - 20px);top:8px;padding:0 10px;height:62px;background:rgba(6,21,40,.82);border-color:var(--line);backdrop-filter:blur(18px)}.brand{width:182px;height:50px}.brand img{width:178px}.header-actions .text-link,.header-actions .button{display:none}.menu-button{display:flex}.site-header.menu-open{height:auto;min-height:62px;align-items:flex-start;padding-top:6px;padding-bottom:12px;flex-wrap:wrap}.site-header.menu-open .desktop-nav{display:grid;order:3;width:100%;gap:0;padding:8px 6px 2px}.site-header.menu-open .desktop-nav a{padding:13px 4px;border-top:1px solid var(--line)}
  .hero{min-height:auto;padding:140px 0 90px}.hero-grid{gap:25px}h1{font-size:45px}.hero-lead{font-size:13px}.hero-actions{display:grid}.hero-actions .button{width:100%}.trust-row{margin-top:35px}.trust-row div{padding-right:10px}.trust-row div+div{padding-left:10px}.trust-row strong{font-size:11px}.trust-row span{font-size:7px}.hero-stage{height:390px}.app-window{top:58px;width:720px;left:50%;transform:translateX(-50%) scale(.58);transform-origin:top center}.floating-card{transform:scale(.78)}.reliability-card{right:-5%;top:18px}.event-card{left:-10%;bottom:50px}.report-card{right:0;bottom:8px}.scroll-cue{display:none}
  .metrics-grid{grid-template-columns:1fr 1fr}.metric:nth-child(3){border-left:0;border-top:1px solid var(--line)}.metric:nth-child(4){border-top:1px solid var(--line)}.metric{padding:27px 12px}.metric strong{font-size:28px}
  .section-heading{margin-bottom:46px}.section-heading.split{grid-template-columns:1fr;gap:10px}.section-heading.split p{margin:0}.feature-grid{grid-template-columns:1fr}.feature-card.large,.feature-card.wide{grid-column:auto}.feature-card{min-height:auto}.feature-card.wide{display:block;min-height:560px}.report-preview{right:50%;transform:translateX(50%);bottom:-80px}.topology-mini{opacity:.25}.workflow-tabs{margin-bottom:15px}.screen-shell{transform:none}.insight-screen{padding:18px}.insight-grid{gap:6px}.insight-kpi{padding:9px}.insight-kpi b{font-size:15px}.insight-chart{height:80px;gap:6px;padding:8px}.insight-summary{margin-top:10px}.insight-summary p{font-size:7px}
  .scenario-bar{align-items:flex-start;flex-direction:column;padding:18px}.scenario-controls{width:100%;overflow:auto}.scenario{white-space:nowrap}.network{min-height:480px}.twin-grid{min-height:auto}.twin-node{transform:scale(.72);transform-origin:center}.utility-a{left:1%}.utility-b{right:1%}.generator-a{left:28%}.generator-b{right:28%}.switch-a{left:17%}.switch-b{right:17%}.ups-a{left:21%}.ups-b{right:21%}.load{transform:translateX(-50%) scale(.72)}.twin-inspector{grid-template-columns:1fr}.academy-orbit{width:320px;height:320px}.academy-core{width:125px;height:125px}.academy-core img{width:45px;height:45px}.orbit-badge{min-width:78px;padding:10px;font-size:7px}.badge-one{left:-20px}.badge-two{right:-25px}.badge-three{right:-22px}.learning-visual{min-height:380px}.report-grid{gap:45px}.pricing-toolbar{margin-top:-18px;flex-direction:column}.pricing-grid{grid-template-columns:1fr}.pricing-card,.pricing-card[data-plan="enterprise"]{grid-column:auto;min-height:auto;padding:25px}.pricing-card[data-plan="enterprise"] .plan-features{grid-template-columns:1fr}.plan-audience{min-height:auto}.comparison-heading{grid-template-columns:1fr;gap:10px;padding:24px}.pricing-footnote{align-items:flex-start;flex-direction:column;gap:9px}.dashboard-body{grid-template-columns:1fr}.donut{margin:0 auto}.dash-status{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:40px}.footer-meta{text-align:left}.footer-bottom{display:grid;gap:10px}.footer-brand img{width:225px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}

/* ============================================================
   Readability pass — raises every font size to a legible floor.
   Placed last so it wins over earlier rules and media queries.
   ============================================================ */
.desktop-nav { font-size: 14px; }
.text-link { font-size: 13px; }
.button { font-size: 14px; }
.button-small { font-size: 13px; }
.eyebrow { font-size: 12px; }
.hero-lead { font-size: 18px; }
.trust-row strong { font-size: 15px; }
.trust-row span { font-size: 11px; }
.window-bar { font-size: 11px; }
.mini-label { font-size: 10px; letter-spacing: .1em; }
.gauge b { font-size: 26px; }
.gauge span { font-size: 11px; }
.event-card b { font-size: 13px; }
.event-card div span { font-size: 11px; }
.report-card span { font-size: 10px; }
.report-card b { font-size: 13px; }
.scroll-cue { font-size: 11px; }
.metric span { font-size: 11px; }
.feature-card p { font-size: 15px; }
.feature-card li { font-size: 13px; }
.feature-number { font-size: 11px; }
.mini-sim > div:not(.flow-track), .mini-sim b { font-size: 11px; }
.compliance-score small { font-size: 10px; }
.inline-link { font-size: 14px; }
.workflow-tab span { font-size: 11px; }
.workflow-tab b { font-size: 15px; }
.workflow-tab small { font-size: 11px; }
.screen-topbar b { font-size: 10px; }
.insight-header span { font-size: 10px; }
.insight-kpi span { font-size: 9px; }
.insight-kpi small { font-size: 9px; }
.insight-summary p { font-size: 12px; }
.scenario-title { font-size: 13px; }
.scenario { font-size: 12px; }
.twin-node span { font-size: 11px; }
.twin-node b { font-size: 10px; }
.inspector-label { font-size: 10px; }
.telemetry-list div { font-size: 11px; }
.telemetry-list b { font-size: 12px; }
.log-head, .log-head button { font-size: 10px; }
.event-log li { font-size: 11px; }
.learning-points span { font-size: 12px; }
.learning-points p { font-size: 14px; }
.academy-core b { font-size: 9px; }
.orbit-badge { font-size: 10px; }
.report-type span { font-size: 14px; }
.report-type small { font-size: 11px; }
.dashboard-header, .dashboard-footer { font-size: 11px; }
.dashboard-header b, .dashboard-footer b { font-size: 10px; }
.donut span { font-size: 11px; }
.dash-bars::before { font-size: 9px; }
.dash-status span { font-size: 11px; }
.billing-option { font-size: 12px; }
.billing-save { font-size: 11px; }
.popular-badge { font-size: 9px; }
.plan-topline { font-size: 9px; }
.plan-audience { font-size: 13px; }
.price-prefix { font-size: 12px; }
.price-period { font-size: 12px; }
.price-note { font-size: 12px; height: auto; min-height: 34px; }
.seat-chip span { font-size: 9px; }
.seat-chip b { font-size: 12px; }
.plan-features li { font-size: 13px; }
.comparison-heading p { font-size: 13px; }
.comparison-row > * { font-size: 13px; }
.comparison-head b { font-size: 11px; }
.pricing-footnote { font-size: 12px; }
.footer-brand p { font-size: 11px; }
.footer-links span { font-size: 10px; }
.footer-links a { font-size: 13px; }
.footer-meta p { font-size: 10px; }
.footer-meta a { font-size: 13px; }
.footer-bottom { font-size: 11px; }

/* ============================================================
   "Straight from the platform" — real product screenshots.
   ============================================================ */
.screens { background: linear-gradient(180deg, #061528, #051423); border-top: 1px solid var(--line); }
.screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.screen-card { margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: linear-gradient(155deg, rgba(12,41,70,.7), rgba(5,19,35,.85)); box-shadow: 0 24px 60px rgba(0,5,14,.3); transition: transform .3s ease, border-color .3s ease; }
.screen-card:hover { transform: translateY(-6px); border-color: rgba(0,208,138,.3); }
.screen-card-bar { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; background: #0a1d32; border-bottom: 1px solid var(--line); }
.screen-card-bar i { width: 7px; height: 7px; border-radius: 50%; background: #42617d; }
.screen-card-bar span { margin-left: auto; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.screen-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); }
.screen-card figcaption { padding: 18px 20px 22px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.screen-card figcaption b { display: block; color: #fff; font-size: 15px; margin-bottom: 6px; }
@media (max-width: 1180px) { .screens-grid { grid-template-columns: 1fr; max-width: 730px; margin: 0 auto; } }

/* ============================================================
   Digital twin — legibility pass.
   The section had 10-11px labels in a muted grey inside a very
   large panel: technically present, practically unreadable. The
   panel is the closest thing on the page to the real software,
   so it has to read like an instrument, not like fine print.
   ============================================================ */
.twin-node { width: 148px; padding: 13px 14px; }
.twin-node span { font-size: 13px; letter-spacing: .01em; }
.twin-node b { font-size: 12px; margin-top: 5px; }
.scenario-title { font-size: 14px; }
.scenario { font-size: 13px; }
.inspector-label { font-size: 11px; }
.telemetry-list div { font-size: 13px; color: var(--muted); padding: 15px 0; }
.telemetry-list b { font-size: 14px; }
.log-head { font-size: 11px; }
.log-head button { font-size: 11px; }
.event-log li { font-size: 12px; }
.event-log time { font-variant-numeric: tabular-nums; }
.event-log span { color: #cdd9e6; }
.twin-inspector { padding: 26px; }

/* The symbol sits above the label, so a node reads as a piece of equipment
   rather than a text box — the same read as the Designer canvas. */
.twin-node { display: grid; gap: 9px; }
/* .network svg is the connection-line overlay: absolute and full-bleed.
   The node symbols are svg inside .network too, so they need to opt out of it. */
.network .twin-node svg.node-symbol {
  position: static; inset: auto;
  width: 26px; height: 26px;
  color: var(--green);
  opacity: .92;
  transition: color .45s, opacity .45s, transform .45s;
}
.twin-node.load .node-symbol { color: #7fb3ff; }
.network[data-mode="failure"] .utility-a .node-symbol { color: var(--red); opacity: .55; }
.network[data-mode="failure"] .generator-a .node-symbol { color: var(--amber); transform: scale(1.06); }
.network[data-mode="maintenance"] .utility-b .node-symbol { color: var(--amber); opacity: .55; }
.network[data-mode="maintenance"] .generator-b .node-symbol { color: var(--green); transform: scale(1.06); }

/* The nodes gained a symbol row, so the canvas needs the height to match —
   otherwise the bottom rank collides with the rack group. */
.twin-grid { min-height: 700px; }
.network { min-height: 700px; }
.twin-node.load { width: 176px; }
@media (max-width: 760px) {
  .twin-grid, .network { min-height: 560px; }
  .twin-node { transform: scale(.8); }
  .twin-node.load { transform: translateX(-50%) scale(.8); }
}

/* The scenario rules colour the rating <b> and the status dot <i> together, so
   <b> also picked up a solid background. Invisible at 7px; a solid bar over the
   text now that the rating is legible. The dot keeps its fill, the text does not. */
.network[data-mode="failure"] .utility-a b,
.network[data-mode="failure"] .generator-a b,
.network[data-mode="maintenance"] .utility-b b,
.network[data-mode="maintenance"] .generator-b b { background: none; box-shadow: none; }

/* ============================================================
   Downloads — the funnel: try the demo, take the software,
   ask for a licence. Three ranked cards, not a wall of copy.
   ============================================================ */
.downloads { background: linear-gradient(180deg,#061528 0%,#08203a 55%,#061528 100%); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.step-card {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 28px 26px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg,#0c2946,#081d32);
  box-shadow: var(--shadow);
  transition: border-color .3s, transform .3s;
}
.step-card:hover { border-color: rgba(0,208,138,.32); transform: translateY(-3px); }
.step-rank { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.step-rank span {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(0,208,138,.35); border-radius: 10px;
  color: var(--green); font-size: 13px; font-weight: 700;
}
.step-card h3 { font-size: 21px; margin: 0 0 10px; }
.step-card p { font-size: 14px; line-height: 1.68; color: var(--muted); margin: 0 0 22px; }
.step-button { width: 100%; justify-content: center; margin-top: auto; }
.step-button.whatsapp { background: #25d366; color: #04240f; gap: 9px; }
.step-button.whatsapp:hover { opacity: .92; }
.step-meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 13px; font-size: 12px; color: var(--muted-2);
}
.download-note {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  margin-top: 30px; padding: 18px 22px;
  border: 1px solid rgba(255,176,0,.28); border-radius: 14px;
  background: rgba(255,176,0,.06); font-size: 13px; line-height: 1.65;
}
.download-note b { color: #ffce6a; }
.download-note span { color: var(--muted); }
@media (max-width: 1180px) { .steps-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } }

/* Contact line under the closing call to action. */
.cta-contact {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--muted);
}
.cta-contact a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 208, 138, .45);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.cta-contact a:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Standards & compliance                                              */
/* ------------------------------------------------------------------ */
.standards { position: relative; }

.std-verdicts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 56px;
}
.verdict-block {
  padding: 30px 32px 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 38, 62, .55), rgba(9, 24, 42, .35));
}
.verdict-label {
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--accent);
}
.verdict-scale {
  display: flex;
  gap: 10px;
  margin: 20px 0 20px;
  flex-wrap: wrap;
}
.verdict-scale span {
  flex: 1 1 auto;
  text-align: center;
  padding: 11px 6px;
  border-radius: 11px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
  background: rgba(255, 255, 255, .015);
}
.verdict-scale span.hit {
  color: #04180f;
  background: linear-gradient(135deg, #00d08a, #3ee9a8);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(0, 208, 138, .3);
}
.verdict-block p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}

.std-register {
  margin-top: 22px;
  padding: 34px 34px 30px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(8, 22, 38, .5);
}
.std-register-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.std-register-head h3 {
  margin: 0 0 10px;
  font-size: 23px;
  letter-spacing: -.01em;
}
.std-register-head p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}
.std-register-head i { color: var(--text); font-style: italic; }
.std-count {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 208, 138, .3);
  background: rgba(0, 208, 138, .07);
}
.std-count strong { font-size: 38px; line-height: 1; color: var(--accent); letter-spacing: -.03em; }
.std-count span { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; line-height: 1.5; }

.std-subjects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
  margin: 28px 0 26px;
}
.std-subject {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .017);
  transition: border-color .2s ease, transform .2s ease;
}
.std-subject:hover { border-color: rgba(0, 208, 138, .38); transform: translateY(-2px); }
.std-subject b {
  min-width: 30px;
  font-size: 19px;
  color: var(--accent);
  letter-spacing: -.02em;
}
.std-subject span { font-size: 13.5px; color: var(--text); line-height: 1.35; }

.std-bodies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.std-bodies span {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--muted);
  background: rgba(255, 255, 255, .02);
}
.std-edition {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-2);
}

.std-note {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 22px;
  padding: 20px 26px;
  border-radius: 16px;
  border: 1px solid rgba(0, 208, 138, .22);
  background: rgba(0, 208, 138, .05);
  font-size: 14.5px;
  line-height: 1.65;
}
.std-note b { color: var(--text); }
.std-note span { color: var(--muted); flex: 1 1 300px; }

@media (max-width: 900px) {
  .std-verdicts { grid-template-columns: 1fr; }
  .std-register { padding: 26px 20px 24px; }
  .std-register-head { flex-direction: column; gap: 20px; }
}

/* Shown in place of a price until the owner supplies one. Smaller than a
   number, because "On request" is a sentence and reads wrong at 56px. */
.price-number.on-request {
  font-size: 30px;
  letter-spacing: -.01em;
  color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Academy — the training platform, described by its own contents      */
/* rather than by a spinning diagram of abstract nouns.                */
/* ------------------------------------------------------------------ */
.academy-panel {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(12, 41, 70, .62), rgba(5, 19, 35, .9));
  box-shadow: 0 30px 70px rgba(0, 5, 14, .38);
}
.academy-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 15px;
  background: #0a1d32;
  border-bottom: 1px solid var(--line);
}
.academy-bar span {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

.academy-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  padding: 18px 18px 4px;
}
.academy-modes > div {
  padding: 12px 13px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.academy-modes b { display: block; font-size: 14px; color: #fff; }
.academy-modes span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.academy-modes .on {
  border-color: rgba(0, 208, 138, .45);
  background: rgba(0, 208, 138, .09);
}
.academy-modes .on b { color: var(--green); }

.academy-bank { padding: 16px 18px 6px; }
.bank-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 11px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.bank-head span { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.bank-head b { font-size: 12.5px; color: var(--green); }

.bank-row {
  display: grid;
  grid-template-columns: 92px 1fr 22px;
  align-items: center;
  gap: 11px;
  padding: 5px 0;
}
.bank-row span { font-size: 12px; color: var(--text); }
.bank-row i {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  position: relative;
  overflow: hidden;
}
.bank-row i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, #00d08a, #4fd1c5);
}
.bank-row b { font-size: 11.5px; color: var(--muted); text-align: right; }

.academy-foot {
  padding: 14px 18px 17px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}
.academy-foot span { font-size: 12px; line-height: 1.6; color: var(--muted); }

@media (max-width: 980px) {
  .academy-panel { max-width: none; }
  .academy-modes { grid-template-columns: 1fr; }
}

/* The header logo is sized to the bar rather than clipped by it. The old rule
   showed a 236x85 image inside a 56px box with overflow:hidden, which cut the
   bottom off the hexagon mark as well as the strapline. */
.brand { width: auto; height: 50px; overflow: visible; }
.brand img { height: 100%; width: auto; margin-left: 0; display: block; }
.site-header.scrolled .brand { height: 44px; }
@media (max-width: 980px) {
  .brand { width: auto; height: 40px; }
  .brand img { height: 100%; width: auto; }
}

/* Coming-soon treatment. The panel is dimmed and the modes lose their live
   accent, so nothing on it can be mistaken for a feature that ships today. */
.soon-tag {
  margin-left: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: .12em;
  color: #f0a23a;
  background: rgba(240, 162, 58, .12);
  border: 1px solid rgba(240, 162, 58, .32);
}
.academy-panel.is-preview { border-style: dashed; }
.academy-panel.is-preview .academy-modes > div { opacity: .62; }
.academy-panel.is-preview .academy-foot { margin-top: 4px; }

.plan-features li.soon { color: var(--muted); }
.plan-features li.soon::before { content: "◔"; color: #f0a23a; }
.plan-features li.soon em {
  font-style: normal;
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  color: #f0a23a;
}