:root {
  --black:#080a0c;
  --black-2:#090b0d;
  --black-3:#14191e;
  --black-4:#1b2228;
  --steel:#87939c;
  --text:#eef0ed;
  --orange:#ff6438;
  --line:rgba(226,232,234,.13);
}

body { position:relative; background:var(--black); color:var(--text); }
.grid-lines { position:absolute; inset:0; background:linear-gradient(90deg,transparent calc(33.333% - 1px),rgba(255,255,255,.035) 33.333%,transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),rgba(255,255,255,.035) 66.666%,transparent calc(66.666% + 1px)); pointer-events:none; }
header { height:11vh; min-height:0; position:relative; z-index:3; display:flex; align-items:center; gap:2vw; padding:0 3vw; background:#0b0e11; border-bottom:1px solid #30373d; }
.brand { display:flex; align-items:center; gap:.8vw; }
.brand>i { width:clamp(20px,2.9vw,44px); height:clamp(20px,2.9vw,44px); display:grid; place-items:center; border:1px solid var(--orange); background:var(--orange); color:#090b0d; font:normal 700 clamp(8px,1.2vw,18px) 'Manrope'; }
.brand>span { display:flex; flex-direction:column; }
.brand b { font:700 clamp(7px,1vw,15px)/1 'Manrope'; letter-spacing:.13em; }
.brand small { margin-top:.25vh; font-size:clamp(3.5px,.47vw,7px); letter-spacing:.2em; color:#7f8b93; }
.demo-nav { margin-left:auto; display:flex; gap:clamp(7px,2.1vw,33px); font-size:clamp(5px,.66vw,10px); color:#bac1c4; text-transform:uppercase; font-weight:600; letter-spacing:.11em; }
.header-cta { padding:clamp(7px,1vw,14px) clamp(9px,1.45vw,22px); background:var(--orange); color:#111417; font-size:clamp(5px,.68vw,11px); font-weight:700; letter-spacing:.08em; }
.header-cta span { margin-left:1.2vw; color:#111417; }

main { height:89vh; position:relative; z-index:2; display:grid; grid-template-columns:5% 55% 40%; }
.north-rail { display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:3vh 0; border-right:1px solid var(--orange); background:#0d1114; }
.north-rail span,.north-rail i { color:#7f8a91; font-size:clamp(3.5px,.48vw,8px); font-weight:700; letter-spacing:.15em; font-style:normal; }
.north-rail b { writing-mode:vertical-rl; transform:rotate(180deg); font:800 clamp(6px,.85vw,13px)/1.2 'Manrope'; letter-spacing:.15em; color:var(--orange); }
.copy { min-width:0; position:relative; overflow:hidden; padding:4vh 3.4vw 0; display:flex; flex-direction:column; border-right:1px solid #2e363c; background:var(--black-2); }
.copy::before { content:'N/'; position:absolute; z-index:0; right:-.09em; top:-.26em; color:rgba(255,100,56,.13); font:900 clamp(130px,25vw,380px)/1 'Manrope'; letter-spacing:-.18em; pointer-events:none; }
.copy>* { position:relative; z-index:1; }
.eyebrow { display:flex; justify-content:space-between; color:#7e8991; font-size:clamp(4px,.54vw,9px); font-weight:600; letter-spacing:.18em; }
.eyebrow span { color:var(--orange); }
h1 { max-width:108%; margin:2.2vh 0 1.8vh; font:500 clamp(30px,6.25vw,96px)/.79 'Manrope'; letter-spacing:-.1em; }
h1 em { display:block; width:max-content; margin:.08em 0 0 -.08em; padding:.03em .13em .07em; background:var(--orange); color:#090b0d; font:800 .93em/.8 'Manrope'; font-style:normal; text-transform:uppercase; letter-spacing:-.11em; }
.copy>p { width:73%; margin:0; color:#b3bbc0; font-size:clamp(6px,.86vw,13px); line-height:1.65; }
.actions { display:flex; align-items:center; gap:2vw; margin-top:clamp(9px,2.8vh,27px); }
.demo-button { padding:clamp(7px,1.15vw,16px) clamp(9px,1.6vw,24px); font-size:clamp(5px,.7vw,11px); }
.primary { background:var(--orange); color:#111417; font-weight:700; }
.primary span { margin-left:1.4vw; color:#111417; }
.text-link { color:#c7cccf; font-size:clamp(5px,.68vw,10px); border-bottom:1px solid #5e686f; padding-bottom:.35vw; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.decision-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:auto; border:1px solid #343d43; border-bottom:0; }
.decision-grid>div { min-height:14vh; padding:1.5vw; position:relative; border-right:1px solid #343d43; background:#0d1013; }
.decision-grid>div:first-child { background:#151b20; color:#eef0ed; box-shadow:inset 0 2px 0 var(--orange); }
.decision-grid>div:nth-child(3) { background:#171c21; }
.decision-grid>div:last-child { border-right:0; }
.decision-grid small { display:block; color:var(--orange); font-size:clamp(3.5px,.48vw,8px); }
.decision-grid>div:first-child small { color:var(--orange); }
.decision-grid b { display:block; margin-top:1.3vh; font:700 clamp(7px,1vw,15px)/1.2 'Manrope'; text-transform:uppercase; }
.decision-grid>div>span { position:absolute; right:1vw; top:1vw; color:#89949a; }
.decision-grid>div:first-child>span { color:var(--orange); }
.sectors { height:7vh; min-height:0; border:1px solid #343d43; display:flex; align-items:center; gap:1.5vw; padding:0 1.5vw; background:#090b0d; }
.sectors b,.sectors span { border:0; padding:0; font-size:clamp(3px,.46vw,7px); letter-spacing:.15em; }
.sectors b { color:var(--orange); }
.sectors span { color:#78838a; }

.dashboard { min-width:0; padding:2.5vh 2.1vw; background:#11161a; color:var(--text); display:flex; flex-direction:column; box-shadow:inset 1px 0 0 rgba(255,255,255,.04); }
.dashboard-head { display:flex; justify-content:space-between; padding-bottom:1.4vh; border-bottom:1px solid #343d43; color:#a6b0b6; font-size:clamp(3.5px,.48vw,8px); font-weight:800; letter-spacing:.13em; }
.dashboard-head small { display:flex; align-items:center; gap:.5vw; color:#b6bec2; letter-spacing:0; }
.dashboard-head small i { width:.5vw; height:.5vw; border-radius:50%; background:var(--orange); box-shadow:0 0 0 .3vw rgba(255,100,56,.12); }
.system-row { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #343d43; }
.system-row span { padding:1.15vh .5vw; border-right:1px solid #343d43; color:#76838a; font-size:clamp(3px,.42vw,7px); font-weight:600; letter-spacing:.12em; }
.metric { margin-top:1.25vh; padding:1.25vh 1.15vw 1.1vh; background:var(--orange); color:#101215; }
.metric>span { display:block; color:#54291d; font-size:clamp(3.5px,.48vw,8px); font-weight:800; letter-spacing:.15em; }
.metric>b { display:inline-block; margin-top:.2vh; font:800 clamp(27px,4.45vw,68px)/1 'Manrope'; letter-spacing:-.09em; color:#101215; }
.metric>small { margin-left:1vw; color:#593023; font-size:clamp(4px,.58vw,9px); font-weight:600; }
.metric>small i { color:#101215; font-style:normal; font-weight:800; }
.chart { flex:1; min-height:0; position:relative; margin:1.2vh 0; padding:1.7vh 1vw 2.4vh; border:1px solid #30393f; background:linear-gradient(180deg,#0d1114,#090c0e); }
.chart svg { position:absolute; inset:1.6vh 0 2.2vh; width:100%; height:calc(100% - 3.8vh); }
.chart .grid { fill:none; stroke:rgba(255,255,255,.16); stroke-width:1; vector-effect:non-scaling-stroke; }
.chart .bars rect { vector-effect:non-scaling-stroke; }
.chart .actual-bars rect { fill:rgba(255,100,56,.72); stroke:#ff7d58; stroke-width:.7; }
.chart .forecast-bars rect { fill:rgba(255,100,56,.12); stroke:#d66c4e; stroke-width:1; stroke-dasharray:3 2; }
.chart .plan { fill:none; stroke:#d9dfe1; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.chart .plan-points circle { fill:#d9dfe1; }
.chart .split { stroke:rgba(255,255,255,.42); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.chart-legend { position:absolute; z-index:2; right:.7vw; top:.55vh; display:flex; gap:1.2vw; color:#aeb6bb; font-size:clamp(3px,.42vw,7px); }
.chart-legend span { display:flex; align-items:center; gap:.35vw; }
.chart-legend i { width:.5vw; height:.55vw; background:rgba(255,100,56,.72); }
.chart-legend span:nth-child(2) i { background:rgba(255,100,56,.12); border:1px dashed #d66c4e; }
.chart-legend span:last-child i { width:1.3vw; height:1px; background:#d9dfe1; }
.y-axis { position:absolute; z-index:2; left:.4vw; top:2.2vh; bottom:2.8vh; display:flex; flex-direction:column; justify-content:space-between; color:#849097; font-size:clamp(3px,.42vw,7px); }
.x-axis { position:absolute; z-index:2; left:10%; right:1vw; bottom:.5vh; display:flex; justify-content:space-between; color:#849097; font-size:clamp(3px,.4vw,6px); }
.chart-phase { position:absolute; z-index:2; left:10%; right:1vw; top:2.3vh; display:grid; grid-template-columns:62% 38%; color:#a5adb1; font-size:clamp(3px,.37vw,6px); font-weight:700; letter-spacing:.12em; }
.chart-phase span:last-child { padding-left:.6vw; color:#ff9676; }
.chart-callout { position:absolute; z-index:3; left:56%; top:21%; padding:.7vh .65vw; border-left:2px solid var(--orange); background:#171d22; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.chart-callout b,.chart-callout span { display:block; }
.chart-callout b { font:600 clamp(6px,.85vw,13px) 'Manrope'; }
.chart-callout span { margin-top:.2vh; color:#77848c; font-size:clamp(3px,.38vw,6px); }
.dashboard-foot { height:9.5vh; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); background:#0d1114; border:1px solid #343d43; }
.dashboard-foot>div { display:flex; flex-direction:column; justify-content:center; border-right:1px solid #343d43; padding-left:1vw; }
.dashboard-foot>div:last-child { border-right:0; }
.dashboard-foot span { color:#90999e; font-size:clamp(3px,.42vw,7px); letter-spacing:.13em; }
.dashboard-foot b { margin-top:.35vh; font:600 clamp(8px,1.2vw,18px) 'Manrope'; color:#fff; }
.dashboard-foot small { margin-top:.2vh; color:#707b81; font-size:clamp(3px,.39vw,6px); letter-spacing:.08em; }

@media (max-aspect-ratio:4/5) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  header { height:68px; padding:0 20px; }
  .demo-nav { display:none; }
  .header-cta { margin-left:auto; }
  main { height:auto; grid-template-columns:44px 1fr; }
  .north-rail { grid-row:1/3; min-height:100svh; }
  .copy { min-height:calc(100svh - 68px); padding:38px 22px 0; }
  h1 { font-size:clamp(42px,12vw,64px); }
  .copy>p { width:100%; font-size:13px; }
  .dashboard { grid-column:1/3; min-height:72svh; padding:28px 24px; }
  .chart { min-height:260px; }
}