:root{
  --ink:#102528;
  --ink-soft:#486064;
  --paper:#edf2f1;
  --paper-2:#f8faf9;
  --glass:rgba(255,255,255,.72);
  --line:rgba(34,78,82,.18);
  --teal:#174b51;
  --teal-2:#2f7278;
  --cyan:#78c7ca;
  --gold:#d6a84c;
  --danger:#b54b48;
  --shadow:0 28px 70px rgba(17,48,52,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 88% 12%,rgba(120,199,202,.16),transparent 26rem),
    linear-gradient(180deg,#f7faf9 0,#edf2f1 54%,#e5ecea 100%);
  font-family:Arial,Helvetica,sans-serif;
  min-height:100vh;
}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-160%);z-index:100;background:#fff;padding:10px 14px;border:1px solid var(--teal)}
.skip-link:focus{transform:none}
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;padding:0 clamp(18px,4vw,64px);
  background:rgba(247,250,249,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.city-mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.city-mark .seal{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(23,75,81,.55);font:800 11px Georgia,serif;letter-spacing:.06em;background:#fff}
.city-mark strong{display:block;font:800 11px/1 Arial,sans-serif;letter-spacing:.15em}
.city-mark small{display:block;margin-top:5px;color:var(--ink-soft);font:9px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.site-header nav{display:flex;align-items:center;gap:8px}
.nav-link,.nav-exit{border:0;background:transparent;padding:10px 11px;color:#35565a;font:700 9px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.nav-link:hover,.nav-exit:hover{color:var(--teal)}
.nav-exit{border-left:1px solid var(--line);padding-left:18px;margin-left:4px}
.hero{
  width:min(1480px,100%);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.95fr);
  gap:clamp(38px,6vw,96px);align-items:center;
  min-height:calc(100vh - 72px);padding:clamp(58px,8vw,112px) clamp(22px,5vw,82px);
}
.eyebrow{margin:0 0 16px;color:#58797c;font:800 9px/1.2 Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase}
.hero h1{margin:0;font:500 clamp(54px,7.2vw,108px)/.88 Georgia,"Times New Roman",serif;letter-spacing:-.055em}
.hero h1 span{color:var(--teal-2)}
.lede{max-width:660px;margin:28px 0 0;color:var(--ink-soft);font:16px/1.72 Arial,sans-serif}
.hero-actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.primary,.secondary,.terminal button{
  border:1px solid var(--teal);padding:13px 16px;
  font:800 9px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.primary{background:var(--teal);color:#fff}
.primary:hover{background:#21636a}
.secondary{background:rgba(255,255,255,.65);color:var(--teal)}
.secondary:hover{background:#fff}
.hero-stats{display:flex;gap:34px;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.hero-stats div{min-width:100px}
.hero-stats dt{font:500 28px/1 Georgia,serif}
.hero-stats dd{margin:7px 0 0;color:#688184;font:700 8px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hero-visual{position:relative}
.hero-visual:before{content:"";position:absolute;inset:-10% -12%;background:radial-gradient(circle,rgba(120,199,202,.22),transparent 62%);filter:blur(20px)}
.glass-card{position:relative;border:1px solid rgba(34,78,82,.2);background:var(--glass);box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:18px}
.card-head,.forecast-title,.terminal-top{display:flex;justify-content:space-between;gap:20px;align-items:center;color:#56777a;font:800 8px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.live-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:#52a997;box-shadow:0 0 0 5px rgba(82,169,151,.11)}
.twin-map{position:relative;height:440px;margin-top:16px;overflow:hidden;background:
  linear-gradient(rgba(23,75,81,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(23,75,81,.055) 1px,transparent 1px),
  linear-gradient(145deg,#e9f1ef,#f8fbfa);background-size:26px 26px}
.twin-map:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 45% 46%,transparent 0 2px,rgba(23,75,81,.025) 3px 4px,transparent 5px 100%)}
.street{position:absolute;background:rgba(47,114,120,.28);transform-origin:left center}
.s1{left:5%;top:28%;width:86%;height:7px;transform:rotate(18deg)}
.s2{left:16%;top:68%;width:72%;height:10px;transform:rotate(-11deg)}
.s3{left:51%;top:4%;width:58%;height:6px;transform:rotate(86deg)}
.s4{left:4%;top:53%;width:48%;height:5px;transform:rotate(56deg)}
.node{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(23,75,81,.1)}
.n1{left:31%;top:31%}.n2{left:59%;top:41%}.n3{left:72%;top:63%;background:var(--gold)}.n4{left:42%;top:70%}.n5{left:18%;top:53%}
.district{position:absolute;color:#6d898b;font:800 8px/1 Arial,sans-serif;letter-spacing:.1em}
.d1{left:56%;top:25%}.d2{left:67%;top:72%}.d3{left:13%;top:73%}
.telemetry{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.telemetry span{padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.44);color:#668083;font:700 7px/1.4 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.telemetry b{display:block;margin-bottom:5px;color:#17383c;font:600 15px Georgia,serif;letter-spacing:0}
.public-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.42)}
.public-grid article{padding:36px clamp(22px,3vw,46px);border-right:1px solid var(--line)}
.public-grid article:last-child{border-right:0}
.public-grid span{color:#7e989a;font:800 8px Arial,sans-serif;letter-spacing:.1em}
.public-grid h2{margin:18px 0 9px;font:500 22px Georgia,serif}
.public-grid p{margin:0;color:#60797c;font:12px/1.62 Arial,sans-serif}
.twin-section{width:min(1320px,100%);margin:0 auto;display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(40px,7vw,100px);padding:clamp(80px,10vw,140px) clamp(22px,5vw,82px)}
.section-copy h2,.demo-intro h2{margin:0;font:500 clamp(38px,5vw,68px)/1 Georgia,serif;letter-spacing:-.035em}
.section-copy>p:not(.eyebrow){color:var(--ink-soft);font:14px/1.72 Arial,sans-serif}
blockquote{margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--line);font:italic 20px/1.5 Georgia,serif}
blockquote cite{display:block;margin-top:12px;color:#668083;font:700 8px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.forecast-board{border:1px solid var(--line);background:rgba(255,255,255,.65);box-shadow:var(--shadow);padding:18px}
.forecast-title{padding:5px 4px 18px}
.forecast-title b{color:#4a8d81}
.forecast-row{display:grid;grid-template-columns:1.1fr 1.4fr 60px;gap:16px;align-items:center;padding:20px 10px;border-top:1px solid var(--line)}
.forecast-row span{color:#698285;font:800 8px Arial,sans-serif;letter-spacing:.08em}
.forecast-row strong{font:500 18px Georgia,serif}
.forecast-row em{justify-self:end;color:var(--teal);font:700 14px Arial,sans-serif;font-style:normal}
.forecast-foot{padding:16px 10px 4px;border-top:1px solid var(--line);color:#819497;font:8px/1.55 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.demo-shell{padding:clamp(80px,9vw,132px) clamp(22px,5vw,82px);background:#dfe9e7;border-top:1px solid var(--line)}
.demo-intro{width:min(1120px,100%);margin:0 auto 34px}
.demo-intro>p:not(.eyebrow){max-width:760px;color:#536e71;font:14px/1.7 Arial,sans-serif}
.privacy-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:28px;border:1px solid var(--line);background:rgba(255,255,255,.48)}
.privacy-strip span,.privacy-strip b{padding:11px 12px;font:800 8px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.privacy-strip span{color:#789093}
.privacy-strip b{color:#17383c;border-right:1px solid var(--line)}
.terminal{width:min(1120px,100%);min-height:560px;margin:0 auto;border:1px solid rgba(20,61,65,.28);background:#071315;color:#e8f0ef;box-shadow:0 35px 85px rgba(8,33,36,.2)}
.terminal-top{padding:14px 18px;border-bottom:1px solid rgba(124,184,188,.17);color:#7ea5a7;background:#0b1c1f}
#experience{padding:clamp(26px,5vw,56px)}
.screen-kicker{margin:0 0 12px;color:#7fbfc0;font:800 8px Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.screen-title{max-width:820px;margin:0;color:#f2f6f5;font:500 clamp(34px,5vw,60px)/1.05 Georgia,serif;letter-spacing:-.03em}
.screen-copy{max-width:760px;color:#a8bcbd;font:13px/1.7 Arial,sans-serif}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px;max-width:760px}
.choice-grid button,.door-grid button,.action-grid button{background:#0d2225;color:#d8e6e5;border-color:#274d51;text-align:left}
.choice-grid button:hover,.door-grid button:hover,.action-grid button:hover{background:#123035;border-color:#5e969a}
.choice-grid button.selected{background:#174b51;border-color:#78c7ca}
.choice-prompt{margin-top:24px;color:#d5e0df;font:500 17px Georgia,serif}
.progress-track{display:flex;gap:6px;margin:0 0 30px}
.progress-track i{display:block;width:46px;height:3px;background:#1d373a}
.progress-track i.on{background:#77c1c3}
.model-box{margin-top:26px;max-width:800px;border:1px solid #24484c;background:#0a1a1c;padding:18px}
.model-box .label{color:#729da0;font:800 8px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.model-confidence{display:flex;align-items:end;gap:12px;margin-top:12px}
.model-confidence strong{font:500 44px/1 Georgia,serif;color:#f0f5f4}
.model-confidence span{padding-bottom:5px;color:#76989b;font:8px Arial,sans-serif;letter-spacing:.08em}
.sealed{position:relative;margin:28px 0;max-width:720px;padding:24px;border:1px dashed #4f7e82;background:#0a1b1d}
.sealed:before{content:"SEALED PREDICTION";display:block;color:#6d9da0;font:800 8px Arial,sans-serif;letter-spacing:.16em;margin-bottom:12px}
.sealed.blur .prediction-text{filter:blur(7px);user-select:none;opacity:.65}
.prediction-text{font:500 24px/1.35 Georgia,serif;color:#e6efee}
.door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:760px}
.door-grid button{min-height:110px;text-align:center;font-size:10px}
.result-card{margin-top:24px;max-width:780px;padding:20px;border-left:3px solid var(--cyan);background:#0d2225}
.result-card.warn{border-left-color:var(--gold)}
.result-card.danger{border-left-color:var(--danger)}
.result-card h3{margin:0 0 8px;font:500 22px Georgia,serif}
.result-card p{margin:0;color:#a7bcbd;font:12px/1.65 Arial,sans-serif}
.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:800px;margin-top:24px}
.city-events{display:grid;gap:8px;margin-top:24px;max-width:900px}
.event{display:grid;grid-template-columns:1fr 1.5fr auto;gap:14px;padding:14px;border:1px solid #254347;background:#0b1b1e;align-items:center}
.event span{color:#779b9e;font:800 8px Arial,sans-serif;letter-spacing:.08em}
.event strong{font:500 17px Georgia,serif}
.event b{font:700 12px Arial,sans-serif;color:#e0b768}
.asset-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:22px;max-width:860px}
.asset-panel div{border:1px solid #234447;padding:15px;background:#0b1d20}
.asset-panel span{display:block;color:#71999c;font:800 8px Arial,sans-serif;letter-spacing:.08em}
.asset-panel b{display:block;margin-top:7px;font:500 18px Georgia,serif;color:#e8f0ef}
.type-line{margin-top:22px;max-width:860px;border-left:2px solid #6faeb1;padding:10px 13px;color:#b8c9ca;font:12px/1.6 monospace}
.type-line strong{color:#fff}
.countdown{margin-top:28px;color:#89aeb0;font:800 8px Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.confidence-fall{margin:24px 0 0;max-width:700px;font:500 34px/1.4 Georgia,serif;color:#e8f0ef}
.error-stamp{display:inline-block;margin-top:24px;padding:10px 13px;border:1px solid #b75955;color:#ef9b96;font:800 10px Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(22px,5vw,82px);background:#10282b;color:#b7cccd;font:800 8px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
footer a{text-decoration:none}
@media(max-width:1000px){
  .site-header nav .nav-link{display:none}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-visual{max-width:760px}
  .twin-map{height:360px}
  .public-grid{grid-template-columns:repeat(2,1fr)}
  .public-grid article:nth-child(2){border-right:0}
  .public-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .twin-section{grid-template-columns:1fr}
}
@media(max-width:640px){
  .site-header{min-height:64px;padding:0 14px}
  .city-mark small{display:none}
  .nav-exit{font-size:8px;padding-left:12px}
  .hero{padding:56px 18px}
  .hero h1{font-size:50px}
  .hero-stats{gap:16px;overflow:auto}
  .twin-map{height:300px}
  .telemetry{grid-template-columns:1fr}
  .public-grid{grid-template-columns:1fr}
  .public-grid article{border-right:0!important;border-bottom:1px solid var(--line)}
  .twin-section,.demo-shell{padding-left:18px;padding-right:18px}
  .choice-grid,.door-grid,.action-grid,.asset-panel{grid-template-columns:1fr}
  .privacy-strip{display:grid;grid-template-columns:1fr 1fr}
  .event{grid-template-columns:1fr auto}
  .event strong{grid-column:1/-1}
  footer{flex-direction:column}
}