@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--navy:#1c253a;--navy-d:#0e1424;--navy-dd:#090d19;--navy-l:#2a3552;--panel:#121a2e;--line:rgba(255,255,255,.08);
--gold:#c09d41;--gold-l:#e3c778;--gold-d:#9a7b2c;--cream:#f6f1e6;--cream-d:#ece4d3;--ink:#1c253a;--ink-soft:#4b556b;
--green:#5ee0a0;--amber:#f5b04c;--red:#ff6b6b;--blue:#6cc7ff;--grey:#7c869c;
--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost","Segoe UI",system-ui,sans-serif;--wrap:1240px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px}
@media(min-width:1700px){html{font-size:19px}:root{--wrap:1500px}}
@media(max-width:600px){html{font-size:15.5px}}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--cream);line-height:1.65;overflow-x:hidden}
a{color:inherit}
.wrap{width:min(var(--wrap),100% - 3rem);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.8rem,6.6vw,5.8rem);font-weight:400}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h3{font-size:1.6rem}
em{font-style:italic;color:var(--gold)}
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-d);font-weight:500;display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:currentColor}
.dark .eyebrow,.hero .eyebrow{color:var(--gold-l)}
.lede{font-size:1.15rem;max-width:46rem;color:var(--ink-soft);margin-top:1.3rem}
.dark .lede,.hero .lede{color:#b9c1d6}
section{padding:clamp(4.5rem,8vw,7.5rem) 0}
.dark{background:var(--navy-d);color:#e9edf7}
.pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:.28rem .75rem;border:1px solid rgba(192,157,65,.6);color:var(--gold-l);border-radius:99px;font-weight:500;background:rgba(192,157,65,.08)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.7rem;border-radius:99px;font-weight:500;font-size:.95rem;letter-spacing:.04em;text-decoration:none;border:1px solid var(--gold);transition:.3s;cursor:pointer;font-family:inherit}
.btn-gold{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--navy-dd);box-shadow:0 10px 30px -10px rgba(192,157,65,.7)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-ghost{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--gold-l);color:var(--gold-l)}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:.3s}
.nav.solid{background:rgba(9,13,25,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;color:#fff;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:9px}
.brand b{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:.01em}
.brand small{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);margin-top:-.2rem}
.nav ul{display:flex;gap:1.8rem;list-style:none;font-size:.85rem;letter-spacing:.06em}
.nav ul a{text-decoration:none;opacity:.85}.nav ul a:hover{color:var(--gold-l);opacity:1}
@media(max-width:900px){.nav ul{display:none}}
/* hero */
.hero{min-height:min(100vh,960px);background:radial-gradient(1200px 600px at 75% 20%,rgba(192,157,65,.16),transparent 60%),radial-gradient(900px 500px at 10% 90%,rgba(108,199,255,.08),transparent 60%),linear-gradient(180deg,var(--navy-dd),var(--navy-d));color:#fff;display:flex;align-items:center;padding-top:110px;position:relative;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3.5rem;align-items:center}
@media(max-width:1000px){.hero .grid{grid-template-columns:1fr}}
.hero p.lede{font-size:1.2rem}
.hero .cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.hero .facts{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.8rem;border-top:1px solid var(--line);padding-top:1.6rem}
.hero .facts b{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:500;color:var(--gold-l);line-height:1}
.hero .facts span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa3ba}
.precinct{width:100%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.disclaimer{font-size:.78rem;color:#8e97ad;margin-top:1.4rem;max-width:40rem}
/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:3rem}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--cream-d);border-radius:20px;padding:1.8rem;transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(28,37,58,.35);border-color:var(--gold)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--navy);color:var(--gold-l);display:grid;place-items:center;margin-bottom:1.1rem}
.card .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.45rem;margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.95rem}
/* buildings */
.bld{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem}
@media(max-width:1000px){.bld{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.bld{grid-template-columns:1fr}}
.bld div{border:1px solid rgba(192,157,65,.35);border-radius:18px;padding:1.6rem;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.bld h3{color:#fff}.bld p{color:#aab3c8;font-size:.9rem;margin-top:.4rem}
.bld b{font-family:var(--serif);font-size:2.4rem;color:var(--gold-l);font-weight:500;display:block;margin-top:1rem;line-height:1}
.bld small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8b94aa}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;margin-top:3rem}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:1rem}
.stack div{border-left:2px solid var(--gold);padding:.4rem 0 .4rem 1.2rem}
.stack b{font-weight:500;display:block}
.stack p{color:var(--ink-soft);font-size:.94rem}
.dark .stack p{color:#aab3c8}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:3rem;counter-reset:s}
@media(max-width:1000px){.flow{grid-template-columns:1fr 1fr}}@media(max-width:560px){.flow{grid-template-columns:1fr}}
.flow div{background:#fff;border-radius:16px;padding:1.4rem;border:1px solid var(--cream-d);position:relative}
.flow div::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:2rem;color:var(--gold);display:block;line-height:1;margin-bottom:.6rem}
.flow b{font-weight:500}.flow p{font-size:.88rem;color:var(--ink-soft);margin-top:.3rem}
/* allotment calc */
.calc{background:var(--navy);color:#fff;border-radius:24px;padding:2rem;border:1px solid rgba(192,157,65,.35)}
.calc label{display:block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#9aa3ba;margin-top:1.1rem}
.calc input[type=range]{width:100%;accent-color:var(--gold)}
.calc output{font-family:var(--serif);font-size:1.6rem;color:var(--gold-l)}
.calc .res{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1.4rem}
.calc .res b{display:block;font-family:var(--serif);font-size:2rem;font-weight:500;color:#fff;line-height:1.1}
.calc .res span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa3ba}
.note{font-size:.78rem;color:#8e97ad;margin-top:1rem}
.tbl{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:.85rem .8rem;border-bottom:1px solid var(--cream-d);vertical-align:top}
.tbl th{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);font-weight:500}
.tbl td:first-child{font-weight:500}
footer{background:var(--navy-dd);color:#9aa3ba;padding:3rem 0;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer b{color:#fff;font-weight:500}
/* ---------- HUD ---------- */
.hud{background:var(--navy-dd);color:#e6ebf5;font-family:var(--sans);border-radius:22px;border:1px solid rgba(192,157,65,.3);padding:1rem;box-shadow:0 50px 100px -40px rgba(0,0,0,.7);font-size:14px;line-height:1.45}
.hud.full{border-radius:0;border:0;min-height:100vh;padding:1rem 1.2rem}
.hud *{box-sizing:border-box}
.h-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.3rem .3rem 1rem;border-bottom:1px solid var(--line)}
.h-top .t{display:flex;align-items:center;gap:.7rem}
.h-top .t img{width:34px;height:34px;border-radius:8px}
.h-top .t b{font-weight:500;font-size:1.05rem;display:block}
.h-top .t small{color:#8b94aa;font-size:.78rem}
.h-top .r{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:99px;padding:.32rem .8rem;font-size:.76rem;color:#c6cde0;display:inline-flex;gap:.45rem;align-items:center;cursor:default}
button.chip{cursor:pointer;font-family:inherit}
button.chip.on{border-color:var(--gold);color:var(--gold-l);background:rgba(192,157,65,.12)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px currentColor;display:inline-block}
.dot.a{background:var(--amber)}.dot.r{background:var(--red)}.dot.g{background:var(--grey);box-shadow:none}.dot.b{background:var(--blue)}
.clock{font-size:1.3rem;font-weight:400;letter-spacing:.04em;min-width:4.2rem;text-align:center}
.demo{border:1px solid var(--gold);color:var(--gold-l);border-radius:99px;padding:.32rem .9rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0 .2rem}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:1rem}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
.p{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;position:relative;overflow:hidden}
.p h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#9aa3ba;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem}
.p h4 i{font-style:normal;border:1px solid rgba(192,157,65,.6);color:var(--gold-l);border-radius:99px;padding:.05rem .5rem;font-size:.58rem;letter-spacing:.14em}
.big{font-size:2rem;font-weight:300;line-height:1.05;color:#fff}
.big small{font-size:.9rem;color:#9aa3ba;margin-left:.2rem}
.sub{color:#9aa3ba;font-size:.8rem;margin-top:.25rem}
.bar{height:6px;background:rgba(255,255,255,.07);border-radius:9px;overflow:hidden;margin-top:.6rem}
.bar span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l));transition:width .8s}
.bar.gr span{background:var(--green)}.bar.am span{background:var(--amber)}.bar.rd span{background:var(--red)}.bar.bl span{background:var(--blue)}
.spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:.6rem}
.spark span{flex:1;background:linear-gradient(180deg,var(--gold-l),var(--gold-d));border-radius:2px 2px 0 0;opacity:.85;transition:height .8s}
.g2{display:grid;grid-template-columns:2.2fr 1fr;gap:.8rem;margin-top:.8rem}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;margin-top:.8rem}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
@media(max-width:1100px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}
.bcard{border-left:3px solid var(--green);cursor:pointer;transition:.2s}
.bcard:hover,.bcard.sel{border-color:var(--gold);background:#16203a}
.bcard.warn{border-left-color:var(--amber)}.bcard.alarm{border-left-color:var(--red)}
.bcard .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.bcard .hd b{font-size:1.02rem;font-weight:500;color:#fff}
.tag{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--green)}
.tag.a{color:var(--amber)}.tag.r{color:var(--red)}.tag.g{color:var(--grey)}.tag.b{color:var(--blue)}
.kv{display:flex;justify-content:space-between;font-size:.82rem;padding:.16rem 0;color:#9aa3ba}
.kv span:last-child{color:#e6ebf5}
.riser{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center}
@media(max-width:560px){.riser{grid-template-columns:1fr}}
.riser svg{width:100%;height:auto}
.lvl{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.lvl:last-child{border:0}
.lvl .n{width:4.6rem;color:#9aa3ba;font-size:.78rem}
.lvl .v{font-size:1.25rem;width:4.4rem;color:#fff}
.lvl .bar{flex:1;margin:0}
.tanks{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tank{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:.7rem;text-align:center}
.tank .vis{height:70px;border:1px solid rgba(108,199,255,.35);border-radius:8px;position:relative;overflow:hidden;margin:.3rem auto .5rem;width:60%}
.tank .vis span{position:absolute;inset:auto 0 0;background:linear-gradient(180deg,rgba(108,199,255,.7),rgba(108,199,255,.25));transition:height .8s}
.tank b{display:block;font-size:1.1rem;font-weight:400;color:#fff}
.tank small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#8b94aa}
.hw{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px}
.hw span{aspect-ratio:1;border-radius:6px;border:2px solid var(--green);background:rgba(94,224,160,.08);font-size:.55rem;display:grid;place-items:center;color:#c6cde0}
.hw span.w{border-color:var(--amber);background:rgba(245,176,76,.08)}.hw span.o{border-color:#3a4358;background:transparent;color:#6b7489}.hw span.x{border-color:var(--red);background:rgba(255,107,107,.12)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:#9aa3ba;margin-top:.6rem}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.plant .row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line);gap:.6rem}
.plant .row:last-child{border:0}
.plant .row div small{display:block;color:#8b94aa;font-size:.72rem}
.st{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border-radius:99px;padding:.18rem .6rem;font-weight:600;background:rgba(94,224,160,.12);color:var(--green);white-space:nowrap}
.st.a{background:rgba(245,176,76,.14);color:var(--amber)}.st.r{background:rgba(255,107,107,.16);color:var(--red)}.st.g{background:rgba(255,255,255,.07);color:#aab3c8}.st.b{background:rgba(108,199,255,.14);color:var(--blue)}
.gen .ring{width:120px;height:120px;margin:0 auto .6rem;position:relative}
.gen .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gen .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;font-weight:300}
.chart svg{width:100%;height:auto;display:block}
.alerts li{list-style:none;display:flex;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.84rem}
.alerts li:last-child{border:0}
.alerts time{color:var(--gold-l);min-width:2.9rem}
.atbl{width:100%;border-collapse:collapse;font-size:.82rem}
.atbl th{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#8b94aa;text-align:left;font-weight:500;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.atbl td{padding:.45rem .5rem;border-bottom:1px solid var(--line);color:#d5dbe8}
.atbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.atbl .mini{height:5px;width:90px;background:rgba(255,255,255,.07);border-radius:9px;overflow:hidden;display:inline-block;vertical-align:middle}
.atbl .mini span{display:block;height:100%;background:var(--green)}
.atbl .mini.a span{background:var(--amber)}.atbl .mini.r span{background:var(--red)}
.scroll{overflow-x:auto}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#8b94aa;font-size:.76rem;margin-top:1rem;padding:.4rem .3rem 0}
.sim{display:flex;gap:.4rem;flex-wrap:wrap}