@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #e9efe9;
  --muted: #99a79d;
  --faint: #607168;
  --forest: #13251e;
  --forest-deep: #0b1713;
  --panel: rgba(26, 48, 39, .78);
  --line: rgba(211, 232, 216, .13);
  --lime: #c7ed8c;
  --lime-dark: #83a85c;
  --cream: #e9e4d5;
  --orange: #e9a56f;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--forest-deep); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 20% 0%, #1b392d 0, var(--forest-deep) 42%), var(--forest-deep); font-family: Manrope, system-ui, sans-serif; overflow-x: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; pointer-events: none; border-radius: 999px; filter: blur(1px); opacity: .42; z-index: 0; }
.ambient-one { width: 360px; height: 360px; left: -220px; top: 210px; background: #244f3d; }
.ambient-two { width: 440px; height: 440px; right: -260px; bottom: -160px; background: #3a402b; opacity: .25; }
.site-header, main, .site-footer { position: relative; z-index: 1; }
.site-header { max-width: 1240px; margin: 0 auto; padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; font: 500 13px 'DM Mono', monospace; letter-spacing: .14em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(199,237,140,.7); border-radius: 50%; color: var(--lime); font: 500 12px 'DM Mono', monospace; letter-spacing: -.04em; }
.header-note, .site-footer { color: var(--faint); font: 11px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
main { max-width: 1240px; min-height: calc(100vh - 125px); margin: 0 auto; padding: 25px 40px 70px; }
.screen { display: none; animation: rise .42s ease both; }
.screen.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { margin: 0 0 18px; color: var(--lime); font: 500 11px 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 500; letter-spacing: -.045em; }
h1 { max-width: 720px; margin-bottom: 26px; font-size: clamp(45px, 6vw, 83px); line-height: .98; }
h2 { font-size: clamp(32px, 4.6vw, 62px); line-height: 1; }
h3 { font: 500 clamp(26px, 4vw, 44px)/1.08 var(--serif); letter-spacing: -.025em; }
.lede { max-width: 580px; color: #b8c6bb; font-size: 17px; line-height: 1.7; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(320px, .72fr); gap: clamp(48px, 9vw, 130px); align-items: center; padding: clamp(28px, 7vw, 85px) 0 92px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 34px 0 32px; }
.button { border: 0; border-radius: 3px; padding: 15px 19px; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #16251c; background: var(--lime); font-weight: 800; }
.button-primary:hover { background: #d9f8a5; }
.button-primary span { margin-left: 10px; font-size: 17px; }
.button-quiet { padding-left: 0; color: var(--muted); background: transparent; }
.button-quiet:hover { color: var(--ink); transform: none; }
.button-outline { color: var(--lime); background: transparent; border: 1px solid rgba(199,237,140,.42); }
.button-outline:hover { border-color: var(--lime); background: rgba(199,237,140,.08); }
.trust-row { display: flex; flex-wrap: wrap; gap: 19px; color: var(--faint); font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .05em; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row i { width: 5px; height: 5px; background: var(--lime-dark); border-radius: 50%; }
.scenario-card { max-width: 420px; margin-left: auto; padding: 17px 17px 19px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(46,78,61,.8), rgba(13,30,23,.72)); box-shadow: 0 28px 80px rgba(0,0,0,.2); }
.card-topline, .scenario-footer, .event-meta, .snapshot-top { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.status-dot { width: 6px; height: 6px; margin-right: auto; background: var(--lime); border-radius: 50%; box-shadow: 0 0 15px var(--lime); }
.card-time { color: var(--lime); }
.scenario-visual { position: relative; height: 220px; margin: 17px 0 20px; overflow: hidden; background: linear-gradient(165deg, #223c36, #0d1c19 70%); }
.scenario-visual:after { position: absolute; inset: 0; content: ''; background: linear-gradient(115deg, transparent 48%, rgba(190,228,203,.07) 49%, transparent 50%), linear-gradient(25deg, transparent 48%, rgba(190,228,203,.05) 49%, transparent 50%); background-size: 130px 130px; }
.moon { position: absolute; top: 25px; right: 38px; color: #d9edbb; font: 50px Georgia, serif; transform: rotate(-18deg); }
.window-grid { position: absolute; z-index: 2; right: 84px; bottom: 50px; display: grid; grid-template-columns: repeat(2, 33px); gap: 6px; padding: 7px; border: 5px solid #101e1a; background: #101e1a; box-shadow: 0 0 0 1px rgba(231,236,207,.15); }
.window-grid span { width: 33px; height: 38px; background: #a3bd80; opacity: .68; }
.window-grid span:nth-child(2), .window-grid span:nth-child(3) { opacity: .16; }
.power-line { position: absolute; z-index: 2; width: 150px; height: 1px; background: rgba(202,230,181,.35); transform: rotate(-24deg); }
.power-line-one { left: -20px; bottom: 72px; }.power-line-two { left: 235px; bottom: 35px; transform: rotate(21deg); }
.city-lights { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 21px; align-items: end; height: 51px; padding: 0 20px; background: rgba(6,15,12,.47); }
.city-lights span { width: 28px; height: 15px; background: #b6c87f; opacity: .22; }.city-lights span:nth-child(2) { height: 30px; opacity: .11; }.city-lights span:nth-child(4) { height: 24px; opacity: .16; }.city-lights span:nth-child(6) { height: 42px; opacity: .08; }
.scenario-card-copy .card-kicker { margin-bottom: 8px; color: var(--orange); font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }.scenario-card-copy h2 { max-width: 280px; margin-bottom: 11px; font: 500 30px/1.02 var(--serif); }.scenario-card-copy p:not(.card-kicker) { max-width: 320px; margin-bottom: 25px; color: var(--muted); font-size: 13px; line-height: 1.6; }.scenario-footer { padding-top: 15px; border-top: 1px solid var(--line); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 31px 0; border-top: 1px solid var(--line); }.principles > div { position: relative; padding-left: 39px; }.principle-number { position: absolute; top: 2px; left: 0; color: var(--lime); font: 11px 'DM Mono', monospace; }.principles strong { display: block; margin-bottom: 9px; font-size: 15px; }.principles p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.narrow-shell { max-width: 680px; margin: 0 auto; padding: 45px 0 65px; }.section-heading { margin-bottom: 34px; }.section-heading h2 { margin-bottom: 15px; }.section-heading > p:last-child { color: var(--muted); font-size: 14px; }.setup-form { padding: 29px; border: 1px solid var(--line); background: rgba(22,43,34,.6); }.setup-form label { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; color: #d3dfd3; font-size: 13px; }.setup-form label span { display: inline; margin-left: 5px; color: var(--faint); font: 10px 'DM Mono', monospace; text-transform: uppercase; }.setup-form input, .setup-form select { width: 100%; border: 1px solid rgba(220,236,219,.18); border-radius: 2px; outline: 0; padding: 13px 12px; color: var(--ink); background: rgba(3,16,11,.42); }.setup-form input:focus, .setup-form select:focus { border-color: var(--lime-dark); }.setup-form select option { color: #15251e; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.setup-note { display: flex; gap: 12px; margin: 5px 0 31px; padding: 14px; border-left: 2px solid var(--lime-dark); background: rgba(199,237,140,.055); }.setup-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }.note-icon { color: var(--lime); }.form-actions, .results-actions { display: flex; align-items: center; justify-content: space-between; }
.scenario-shell { padding: 32px 0 45px; }.scenario-header { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 22px; }.scenario-header h2 { margin: 0; font-size: clamp(31px, 5vw, 55px); }.scenario-clock { min-width: 80px; text-align: right; }.scenario-clock span { display: block; color: var(--lime); font: 22px 'DM Mono', monospace; }.scenario-clock small { color: var(--faint); font: 10px 'DM Mono', monospace; }.progress-track { height: 2px; margin-bottom: 39px; background: rgba(210,230,211,.12); }.progress-track span { display: block; width: 12.5%; height: 100%; background: var(--lime); transition: width .35s ease; }.scenario-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; align-items: start; }.event-card { padding: clamp(25px, 4vw, 48px); border: 1px solid var(--line); background: rgba(20,40,32,.72); }.event-meta { margin-bottom: 36px; }.event-meta span:first-child { color: var(--orange); }.event-card h3 { max-width: 730px; margin-bottom: 17px; }.event-card > p:not(.decision-note) { max-width: 680px; margin-bottom: 35px; color: #bac8bd; font-size: 16px; line-height: 1.7; }.choice-list { display: grid; gap: 11px; }.choice { width: 100%; display: flex; align-items: start; gap: 17px; border: 1px solid rgba(209,230,211,.16); padding: 17px; color: var(--ink); text-align: left; background: rgba(6,20,14,.36); }.choice:hover { border-color: var(--lime-dark); background: rgba(199,237,140,.08); }.choice-number { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border: 1px solid rgba(199,237,140,.55); border-radius: 50%; color: var(--lime); font: 11px 'DM Mono', monospace; }.choice strong { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 700; }.choice small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }.decision-note { margin: 24px 0 0; color: var(--faint); font: 10px/1.5 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }.live-panel { padding: 24px; border: 1px solid var(--line); background: rgba(12,27,21,.65); }.panel-label { margin-bottom: 18px; color: var(--faint); font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }.signal-orbit { position: relative; display: grid; place-items: center; width: 175px; height: 175px; margin: 12px auto 25px; }.orbit-ring { position: absolute; inset: 13px; border: 1px solid rgba(199,237,140,.2); border-radius: 50%; }.orbit-ring:after { position: absolute; top: 2px; left: 50%; width: 5px; height: 5px; content: ''; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px var(--lime); }.orbit-core { display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid rgba(199,237,140,.45); border-radius: 50%; background: radial-gradient(circle, rgba(199,237,140,.15), rgba(12,32,23,.8) 69%); text-align: center; }.orbit-core span { color: var(--lime); font: 16px 'DM Mono', monospace; text-transform: lowercase; }.orbit-core small { color: var(--faint); font: 9px 'DM Mono', monospace; text-transform: uppercase; }.signal-list { border-top: 1px solid var(--line); }.signal-list div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }.signal-list span, .signal-list b { font: 10px 'DM Mono', monospace; text-transform: uppercase; }.signal-list span { color: var(--faint); }.signal-list b { color: var(--lime); font-weight: 400; }.live-footnote { margin-top: 20px; color: var(--faint); font-size: 11px; line-height: 1.5; }
.results-shell { padding: 42px 0 60px; }.results-heading { max-width: 720px; margin-bottom: 35px; }.results-heading h2 { margin-bottom: 17px; }.results-heading > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.6; }.results-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }.snapshot-card, .action-card { min-height: 280px; padding: 27px; border: 1px solid var(--line); background: rgba(22,44,34,.68); }.snapshot-card { background: linear-gradient(145deg, rgba(49,81,59,.75), rgba(16,34,26,.74)); }.snapshot-word { margin: 53px 0 12px; color: var(--lime); font: 500 clamp(42px, 7vw, 75px)/.9 var(--serif); text-transform: lowercase; }.snapshot-card p { max-width: 330px; color: #bac8bd; font-size: 13px; line-height: 1.55; }.result-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.result-signals span { padding: 6px 8px; border: 1px solid rgba(199,237,140,.24); color: var(--lime); font: 10px 'DM Mono', monospace; text-transform: uppercase; }.action-card { background: rgba(10,27,20,.74); }.action-list { margin-top: 35px; }.action-item { display: grid; grid-template-columns: 25px 1fr; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }.action-item:last-child { border-bottom: 0; }.action-item-number { color: var(--lime); font: 11px 'DM Mono', monospace; }.action-item strong { display: block; margin-bottom: 5px; font-size: 14px; }.action-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.results-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 46px 0; padding-top: 34px; border-top: 1px solid var(--line); }.plain-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }.plain-list li { position: relative; padding-left: 20px; color: #c5d1c5; font-size: 14px; }.plain-list li:before { position: absolute; left: 0; top: .5em; width: 6px; height: 6px; content: ''; background: var(--lime-dark); border-radius: 50%; }.small-copy { max-width: 390px; margin-bottom: 23px; color: var(--muted); font-size: 13px; line-height: 1.6; }.results-actions { padding-top: 24px; border-top: 1px solid var(--line); }.site-footer { max-width: 1240px; margin: 0 auto; padding: 0 40px 30px; display: flex; justify-content: space-between; }
.briefing-shell { display: grid; grid-template-columns: 1.1fr .9fr; gap: 35px; align-items: stretch; max-width: 1050px; margin: 0 auto; padding: 42px 0 70px; }.briefing-art { position: relative; min-height: 470px; overflow: hidden; border: 1px solid var(--line); background: #1b3028; }.briefing-art img, .scene-backdrop img { width: 100%; height: 100%; display: block; object-fit: cover; }.briefing-art img { position: absolute; inset: 0; }.briefing-art > span { position: absolute; z-index: 2; left: 24px; bottom: 21px; color: var(--lime); font: 10px 'DM Mono', monospace; letter-spacing: .12em; }.scene-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,20,15,.76), rgba(7,20,15,.07) 65%), linear-gradient(0deg, rgba(5,17,12,.5), transparent 45%); pointer-events: none; }.briefing-copy { display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }.briefing-copy h2 { margin-bottom: 20px; }.briefing-copy > p:not(.eyebrow) { color: #bac8bd; font-size: 15px; line-height: 1.7; }.briefing-meta { display: flex; flex-wrap: wrap; gap: 15px 25px; margin: 27px 0 34px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--faint); font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.briefing-meta span:first-child { color: var(--lime); }.scene-backdrop { position: relative; height: min(35vw, 360px); min-height: 225px; overflow: hidden; margin-bottom: 25px; border: 1px solid var(--line); background: #1b3028; box-shadow: 0 25px 70px rgba(0,0,0,.18); }.scene-backdrop img { position: absolute; inset: 0; transition: opacity .5s ease, transform 1.2s ease; }.scene-backdrop:hover img { transform: scale(1.025); }.scene-backdrop-copy { position: absolute; z-index: 2; left: 27px; bottom: 23px; display: grid; gap: 7px; }.scene-backdrop-copy span { color: var(--lime); font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }.scene-backdrop-copy strong { color: #edf2e7; font: 500 23px/1 var(--serif); letter-spacing: -.02em; }.scene-backdrop + .scenario-layout { position: relative; }.scenario-shell { padding-top: 26px; }
.event-echo { margin: -15px 0 25px; padding: 11px 13px; border-left: 2px solid var(--lime-dark); color: var(--lime); background: rgba(199,237,140,.055); font: 10px/1.5 'DM Mono', monospace; letter-spacing: .03em; text-transform: uppercase; }.scene-image-enter { animation: scene-arrive .65s ease both; } @keyframes scene-arrive { from { opacity: .2; transform: scale(1.018); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 800px) { .briefing-shell { grid-template-columns: 1fr; padding-top: 25px; }.briefing-art { min-height: 290px; }.scene-backdrop { height: 245px; } .site-header, main { padding-left: 21px; padding-right: 21px; }.site-footer { padding: 0 21px 22px; }.header-note { display: none; }.hero-grid, .scenario-layout, .results-grid { grid-template-columns: 1fr; }.hero-grid { padding-top: 40px; }.scenario-card { margin: 0; }.principles, .results-lower { grid-template-columns: 1fr; gap: 24px; }.live-panel { order: -1; }.signal-orbit { width: 140px; height: 140px; }.orbit-core { width: 90px; height: 90px; }.results-lower { margin-top: 30px; }.results-actions { align-items: start; gap: 20px; flex-direction: column-reverse; } }
@media (max-width: 500px) { h1 { font-size: 44px; }.form-row { grid-template-columns: 1fr; gap: 0; }.setup-form { padding: 21px; }.scenario-header { align-items: start; flex-direction: column; gap: 18px; }.scenario-clock { text-align: left; }.event-card { padding: 22px; }.event-meta { gap: 15px; align-items: start; flex-direction: column; }.scenario-visual { height: 190px; }.window-grid { right: 42px; }.site-footer { gap: 12px; flex-direction: column; } }