:root {
  --ink: #192526;
  --muted: #667371;
  --line: #dfe6df;
  --paper: #f7f8f4;
  --cream: #eff1e8;
  --white: #ffffff;
  --green: #176451;
  --green-dark: #0f4037;
  --lime: #b3d841;
  --gold: #e6c36d;
  --shadow: 0 22px 55px rgba(24, 49, 40, 0.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.page-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.glow-left { width: 500px; height: 500px; left: -250px; top: 150px; background: rgba(179,216,65,.19); }
.glow-right { width: 520px; height: 520px; right: -300px; top: 620px; background: rgba(93,169,136,.12); }

.site-header, main, footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.8px; font-size: 21px; }
.brand > span:last-child span { color: var(--green); }
.brand-mark { position: relative; width: 28px; height: 28px; display: block; background: var(--green); border-radius: 9px 9px 9px 2px; overflow: hidden; transform: rotate(-10deg); }
.brand-mark i { position: absolute; display: block; height: 2px; border-radius: 2px; background: var(--lime); transform: rotate(-45deg); }
.brand-mark i:nth-child(1) { width: 22px; left: -1px; top: 7px; }
.brand-mark i:nth-child(2) { width: 30px; left: -4px; top: 13px; }
.brand-mark i:nth-child(3) { width: 23px; left: 5px; top: 19px; }
nav { display: flex; align-items: center; gap: 29px; margin-left: auto; }
nav a, .header-cta, footer > a:last-child { font-size: 13px; font-weight: 700; }
nav a { color: #4f5f5d; transition: color .2s; }
nav a:hover { color: var(--green); }
.header-cta { display: inline-flex; align-items: center; gap: 7px; color: var(--white); background: var(--green); border-radius: 8px; padding: 11px 15px; }
.header-cta span { color: var(--lime); font-size: 16px; }

.hero { display: grid; grid-template-columns: 1.07fr .93fr; gap: 78px; align-items: center; min-height: 545px; padding: 55px 30px 72px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 1.45px; color: var(--green); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; }
.eyebrow span { display: block; width: 22px; height: 1px; background: var(--lime); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 660px; margin-bottom: 22px; font-size: clamp(39px, 5vw, 68px); line-height: 1.07; letter-spacing: -3.2px; font-weight: 800; }
h1 em { font-family: Georgia, serif; color: var(--green); font-weight: 400; letter-spacing: -3.5px; }
.hero-text { max-width: 570px; margin-bottom: 30px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; border: 0; border-radius: 8px; padding: 14px 19px; font-weight: 800; font-size: 13px; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--green); box-shadow: 0 9px 22px rgba(23,100,81,.19); }
.button-primary span { color: var(--lime); font-size: 18px; }
.text-link { color: var(--green); font-size: 13px; font-weight: 800; }
.text-link span { padding-left: 4px; }
.trust-row { display: flex; gap: 24px; margin-top: 43px; color: var(--muted); font-size: 11px; }
.trust-row span + span { border-left: 1px solid var(--line); padding-left: 24px; }
.trust-row b { display: block; margin-bottom: 1px; color: var(--ink); font-size: 16px; }

.hero-panel { position: relative; min-height: 397px; overflow: hidden; padding: 27px 31px; color: var(--white); border-radius: 20px; background: linear-gradient(144deg, #174a3f 0%, #0f2d29 92%); box-shadow: var(--shadow); }
.hero-panel::after { position: absolute; inset: auto -80px -150px auto; width: 360px; height: 360px; content: ""; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.panel-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.panel-label { color: rgba(255,255,255,.64); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .5px; }
.status-dot { display: inline-flex; align-items: center; gap: 5px; color: #e0f2bc; border-radius: 14px; background: rgba(179,216,65,.13); padding: 5px 8px; font-size: 10px; font-weight: 700; }
.status-dot::before { width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--lime); }
.solar-orb { position: relative; z-index: 1; width: 162px; height: 146px; margin: 23px auto 8px; }
.orb-core { position: absolute; left: 51px; top: 42px; width: 60px; height: 60px; border-radius: 50%; background: #c5e865; box-shadow: 0 0 0 17px rgba(179,216,65,.11), 0 0 34px rgba(197,232,101,.34); }
.orb-ring { position: absolute; left: 15px; top: 7px; width: 132px; height: 132px; border: 1px solid rgba(219,241,151,.31); border-radius: 50%; }
.ring-two { left: 29px; top: 21px; width: 104px; height: 104px; border-color: rgba(219,241,151,.18); }
.ray { position: absolute; display: block; width: 20px; height: 2px; border-radius: 2px; background: rgba(226,248,168,.8); }
.ray-a { left: 0; top: 72px; }.ray-b { right: 0; top: 72px; }.ray-c { left: 17px; top: 25px; transform: rotate(45deg); }.ray-d { right: 17px; bottom: 27px; transform: rotate(45deg); }
.panel-total { position: relative; z-index: 2; text-align: center; }
.panel-total span { display: block; color: rgba(255,255,255,.64); font-size: 11px; }.panel-total strong { display: block; margin: 3px 0; color: var(--white); font-size: 31px; letter-spacing: -1.6px; }.panel-total small { color: #b9d4be; font-size: 10px; }.up-arrow { color: var(--lime); }
.mini-bars { position: absolute; bottom: 0; left: 0; right: 0; height: 52px; display: flex; align-items: end; gap: 5px; padding: 0 31px; opacity: .8; }
.mini-bars span { flex: 1; background: linear-gradient(to top, rgba(179,216,65,.35), rgba(179,216,65,.02)); border-radius: 4px 4px 0 0; }

.simulator-section { padding: 78px 0 58px; }.section-heading { max-width: 650px; margin: 0 auto 38px; text-align: center; }.section-heading .eyebrow { justify-content: center; }.section-heading h2, .projection-heading h2, .attention-section h2 { margin-bottom: 11px; font-size: clamp(27px, 3vw, 38px); line-height: 1.16; letter-spacing: -1.8px; }.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.simulator-shell { display: grid; grid-template-columns: 1.12fr .88fr; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 19px 45px rgba(20, 49, 40, .08); }
.calculator-form { padding: 33px 36px 31px; }.form-header { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 25px; }.step-badge { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; color: var(--green); border-radius: 50%; background: #e8f0e5; font-family: "DM Mono", monospace; font-size: 10px; }.form-header strong { display: block; margin-top: 1px; font-size: 15px; }.form-header p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.fields-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }.field { display: block; }.field > span { display: block; margin-bottom: 7px; color: #52615f; font-size: 11px; font-weight: 700; }.full-field { grid-column: 1 / -1; }
input[type="month"], input[type="number"] { width: 100%; height: 42px; color: var(--ink); outline: none; border: 1px solid #dce4df; border-radius: 7px; background: #fbfcfb; padding: 0 11px; font-size: 13px; transition: border .2s, box-shadow .2s; }
input[type="month"]:focus, input[type="number"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,100,81,.09); }.input-prefix { display: flex; overflow: hidden; height: 42px; border: 1px solid #dce4df; border-radius: 7px; background: #fbfcfb; }.input-prefix:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,100,81,.09); }.input-prefix span { display: grid; place-items: center; width: 44px; color: var(--muted); border-right: 1px solid #dce4df; font-family: "DM Mono", monospace; font-size: 11px; }.input-prefix input { height: auto; border: 0; box-shadow: none; background: transparent; }.input-prefix input:focus { box-shadow: none; }
.info-button { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 3px; vertical-align: 1px; color: var(--green); border: 1px solid #b9cac3; border-radius: 50%; background: transparent; padding: 0; font-size: 9px; font-family: Georgia, serif; font-weight: 700; }.compact-field { margin-top: -1px; }.range-row { display: flex; align-items: center; gap: 12px; }.range-row output { width: 43px; color: var(--green); font-family: "DM Mono", monospace; font-size: 12px; font-weight: 500; }.range-row input { accent-color: var(--green); flex: 1; }
.form-note { display: flex; gap: 8px; margin: 23px 0 20px; padding: 11px 13px; color: #52645d; border-radius: 7px; background: #f1f5ed; }.form-note span { color: var(--green); }.form-note p { margin: 0; font-size: 10px; line-height: 1.55; }.form-note b { color: var(--ink); }.button-wide { width: 100%; }

.results-panel { display: flex; flex-direction: column; padding: 32px 31px; color: var(--white); background: var(--green-dark); }.result-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.result-kicker { color: #b9d3c2; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }.live-label { display: inline-flex; align-items: center; gap: 5px; color: #d9e6dd; font-size: 9px; }.live-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }.recovery-card { margin-top: 31px; }.recovery-card > span, .result-split span { display: block; color: #bcd0c4; font-size: 10px; }.recovery-card strong { display: block; margin: 7px 0 5px; color: #e4f5ba; font-size: 33px; letter-spacing: -1.7px; line-height: 1.1; }.recovery-card p { min-height: 33px; margin: 0; color: #c7d7cd; font-size: 10px; line-height: 1.65; }.recovery-line { height: 4px; margin: 14px 0 22px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.12); }.recovery-line i { display: block; width: 70%; height: 100%; border-radius: inherit; background: var(--lime); transition: width .35s ease; }
.result-split { display: grid; grid-template-columns: 1fr 1fr; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }.result-split > div:first-child { border-right: 1px solid rgba(255,255,255,.14); padding-right: 12px; }.result-split > div:last-child { padding-left: 15px; }.result-split strong { display: block; margin: 4px 0 3px; font-size: 16px; letter-spacing: -.7px; }.result-split small { display: block; color: #a8c0b2; font-size: 9px; }.results-disclaimer { margin: auto 0 0; padding-top: 19px; color: #a8c0b2; font-size: 9px; line-height: 1.7; }

.projection-section { padding: 70px 0 80px; }.projection-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }.projection-heading h2 { margin-bottom: 0; }.period-switcher { display: flex; flex-wrap: wrap; gap: 5px; }.period-switcher button { min-width: 52px; padding: 8px 11px; color: #62706b; border: 1px solid var(--line); border-radius: 6px; background: transparent; font-size: 11px; font-weight: 800; transition: all .2s; }.period-switcher button:hover, .period-switcher button.active { color: var(--white); border-color: var(--green); background: var(--green); }
.projection-content { display: grid; grid-template-columns: .7fr 1.3fr; gap: 34px; align-items: stretch; padding: 30px 35px; border-radius: 16px; background: #eaf0e7; }.projection-stat { display: flex; flex-direction: column; justify-content: center; }.projection-stat span { color: var(--muted); font-size: 12px; }.projection-stat strong { margin: 5px 0 7px; color: var(--green); font-size: clamp(29px, 3.4vw, 43px); letter-spacing: -2.1px; line-height: 1.1; }.projection-stat p { margin: 0; color: #61716a; font-size: 10px; }.bar-chart { display: flex; align-items: end; gap: 14px; height: 180px; padding: 15px 0 0; border-bottom: 1px solid #cbd7cf; }.chart-item { display: flex; flex: 1; flex-direction: column; justify-content: end; align-items: center; height: 100%; min-width: 32px; }.chart-value { margin-bottom: 7px; color: var(--green-dark); font-family: "DM Mono", monospace; font-size: 9px; white-space: nowrap; }.chart-bar { width: 100%; max-width: 50px; min-height: 8px; border-radius: 6px 6px 0 0; background: #b4d745; transition: height .45s cubic-bezier(.22,.61,.36,1), background .2s; }.chart-item.current .chart-bar { background: var(--green); }.chart-year { margin-top: 8px; color: #61716a; font-size: 10px; }.chart-caption { margin: 11px 0 0; color: var(--muted); text-align: right; font-size: 10px; }

.process-section { padding: 67px 0 80px; }.process-heading { margin-bottom: 33px; }.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.process-card { min-height: 202px; padding: 25px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.5); }.process-card h3 { margin: 21px 0 7px; font-size: 16px; letter-spacing: -.55px; }.process-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.process-number { color: var(--green); font-family: "DM Mono", monospace; font-size: 11px; }.featured-card { position: relative; overflow: hidden; color: var(--white); border-color: var(--green); background: var(--green); }.featured-card::after { position: absolute; width: 150px; height: 150px; content: ""; right: -45px; bottom: -62px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; }.featured-card .process-number, .featured-card p { color: #d5e5ce; }.card-chip { position: relative; z-index: 1; display: inline-block; margin-top: 17px; color: #dff0c8; border-radius: 30px; background: rgba(255,255,255,.12); padding: 5px 8px; font-size: 9px; }

.attention-section { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 56px; padding: 31px 35px; border-radius: 15px; background: #fbf3de; }.attention-icon { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; color: #836520; border-radius: 50%; background: #f0d382; font-weight: 800; }.attention-section h2 { margin: 0 0 7px; font-size: 23px; }.attention-section p { max-width: 850px; margin: 0; color: #655e4e; font-size: 12px; line-height: 1.7; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0 32px; border-top: 1px solid var(--line); }footer .brand { font-size: 16px; }footer .brand-mark { width: 22px; height: 22px; border-radius: 7px 7px 7px 2px; }footer .brand-mark i:nth-child(1) { width: 17px; top: 5px; }footer .brand-mark i:nth-child(2) { width: 24px; top: 11px; }footer .brand-mark i:nth-child(3) { width: 17px; top: 16px; }footer p { flex: 1; margin: 0; color: var(--muted); text-align: center; font-size: 10px; }footer > a:last-child { color: var(--green); }

[data-tooltip] { position: relative; }[data-tooltip]::after { position: absolute; z-index: 5; visibility: hidden; width: 195px; left: 50%; bottom: calc(100% + 8px); content: attr(data-tooltip); transform: translateX(-50%); color: var(--white); border-radius: 6px; background: var(--ink); padding: 7px 9px; text-align: left; font-family: "Manrope", Arial, sans-serif; font-size: 9px; font-weight: 500; line-height: 1.45; opacity: 0; transition: opacity .15s; pointer-events: none; }[data-tooltip]:hover::after, [data-tooltip]:focus::after { visibility: visible; opacity: 1; }

@media (max-width: 840px) { .hero { grid-template-columns: 1fr; gap: 38px; padding-right: 0; padding-left: 0; }.hero-panel { max-width: 520px; width: 100%; }.simulator-shell { grid-template-columns: 1fr; }.results-panel { min-height: 380px; }.projection-content { grid-template-columns: 1fr; }.projection-stat { text-align: center; }.process-grid { grid-template-columns: 1fr; }.process-card { min-height: auto; }.featured-card { min-height: 200px; } }
@media (max-width: 600px) { .site-header, main, footer { width: min(100% - 32px, 1180px); }.site-header { height: 72px; }.site-header nav { display: none; }.header-cta { margin-left: auto; padding: 9px 10px; font-size: 11px; }.hero { min-height: auto; padding: 46px 0 54px; }.hero-copy h1 { font-size: 43px; letter-spacing: -2.3px; }.hero-text { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }.trust-row { margin-top: 31px; }.hero-panel { min-height: 360px; }.simulator-section { padding-top: 52px; }.calculator-form { padding: 26px 20px; }.fields-grid { grid-template-columns: 1fr; }.full-field { grid-column: auto; }.results-panel { padding: 28px 21px; }.projection-heading { align-items: flex-start; flex-direction: column; }.projection-content { padding: 25px 20px 20px; }.bar-chart { gap: 7px; }.chart-value { font-size: 8px; }.chart-caption { text-align: left; }.attention-section { padding: 24px 20px; }.attention-section h2 { font-size: 21px; }footer { align-items: flex-start; flex-direction: column; }footer p { text-align: left; }.page-glow { opacity: .55; } }