:root {
  --ink: #1b1231;
  --cream: #fff7e8;
  --peach: #ff8b67;
  --sun: #ffd84d;
  --pink: #ff5eaa;
  --green: #baff6a;
  --blue: #79d8ff;
  --line: rgba(27, 18, 49, .18);
  --radius: 28px;
  --shadow: 0 24px 70px rgba(45, 21, 62, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.site-header { position: absolute; z-index: 20; top: 20px; left: 50%; transform: translateX(-50%); width: min(1120px, calc(100% - 32px)); min-height: 64px; padding: 9px 10px 9px 18px; display: flex; align-items: center; gap: 28px; color: #fff; background: rgba(27,18,49,.72); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; backdrop-filter: blur(18px); }
.brand { text-decoration: none; font-size: 26px; font-weight: 850; letter-spacing: -.06em; }
.brand span { color: var(--green); }
.site-header nav { display: flex; gap: 24px; margin-left: auto; }
.site-header nav a { text-decoration: none; font-size: 14px; opacity: .82; }
.site-header nav a:hover { opacity: 1; }
.nav-cta { border: 0; padding: 14px 18px; border-radius: 14px; background: #fff; color: var(--ink); font-weight: 750; cursor: pointer; }

.hero { min-height: 800px; padding: 170px max(6vw, calc((100vw - 1180px)/2)) 100px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 50px; color: #fff; overflow: hidden; position: relative; background: radial-gradient(circle at 77% 42%, rgba(255,94,170,.66) 0 10%, transparent 32%), linear-gradient(155deg, #171026 5%, #441339 48%, #ff744f 100%); }
.hero:after { content:""; position:absolute; left:-8%; bottom:-180px; width:116%; height:270px; border-radius:50%; background: var(--cream); transform: rotate(-2deg); }
.hero-copy { position: relative; z-index: 2; max-width: 720px; }
.eyebrow, .section-number { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; }
.eyebrow { padding: 9px 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 100px; background: rgba(255,255,255,.1); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(186,255,106,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 26px 0; font-size: clamp(58px, 7.4vw, 106px); line-height: .87; letter-spacing: -.072em; font-weight: 850; }
h1 em { color: var(--green); font-style: normal; }
.hero-copy > p { max-width: 620px; color: rgba(255,255,255,.78); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 22px; min-height: 58px; padding: 0 22px; border: 0; border-radius: 16px; text-decoration: none; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(27,18,49,.15); }
.button-light { color: var(--ink); background: #fff; }
.button-dark { color: #fff; background: var(--ink); width: 100%; }
.button-green { color: var(--ink); background: var(--green); width: 100%; }
.button-sun { color: var(--ink); background: var(--sun); }
.text-button { padding: 12px 0; border: 0; color: #fff; background: transparent; font-weight: 750; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.45); }
.hero-copy .microcopy { margin-top: 18px; max-width: 560px; font-size: 12px; color: rgba(255,255,255,.58); }

.hero-object { position: relative; z-index: 2; min-height: 520px; display: grid; place-items: center; }
.money-card { position: relative; z-index: 3; width: min(370px, 78vw); aspect-ratio: .76; padding: 30px; display: flex; flex-direction: column; border-radius: 36px; color: var(--ink); background: var(--sun); box-shadow: 0 40px 80px rgba(15,4,26,.32); transform: rotate(7deg); }
.money-card:before { content:""; position:absolute; inset:10px; border: 1px solid rgba(27,18,49,.16); border-radius: 28px; }
.card-kicker { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.money-card > strong { margin: auto 0 22px; font-size: clamp(54px, 6vw, 78px); letter-spacing: -.07em; }
.card-row { display:flex; justify-content:space-between; padding: 13px 0; border-top:1px solid rgba(27,18,49,.15); font-size: 13px; }
.smile { position:absolute; right: 26px; top: 24px; width: 44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--pink); font-size: 28px; }
.orbit { position:absolute; border:1px solid rgba(255,255,255,.28); border-radius:50%; }
.orbit-one { width:480px; height:480px; transform:rotate(25deg); }
.orbit-two { width:340px; height:570px; transform:rotate(-40deg); }
.sticker { position:absolute; z-index:4; padding: 12px 18px; border-radius: 100px; color:var(--ink); font-weight:900; text-transform:uppercase; font-size:12px; box-shadow:var(--shadow); }
.sticker-one { left: 0; top: 18%; background:var(--green); transform:rotate(-12deg); }
.sticker-two { right: -5%; bottom: 18%; background:var(--blue); transform:rotate(9deg); }

section { position: relative; }
.section-intro { display:grid; grid-template-columns: .5fr 1.25fr .75fr; gap:40px; align-items:end; margin-bottom:60px; }
.section-number { color: rgba(27,18,49,.58); }
.section-intro h2, .eligibility h2, .how h2, .use-cases h2, .trust h2, .faq h2, .closing h2 { margin:0; font-size: clamp(45px, 6vw, 82px); line-height:.95; letter-spacing:-.065em; }
.section-intro > p { margin:0; line-height:1.6; color:rgba(27,18,49,.65); }
.calculator-section { padding: 90px max(6vw, calc((100vw - 1180px)/2)) 120px; background:var(--cream); }
.calculator { display:grid; grid-template-columns: 1.08fr .92fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.calculator-controls { padding: clamp(30px,5vw,64px); background:#fff; }
.control-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.control-heading > span { font-weight:700; }
.control-heading output { font-size:clamp(36px,5vw,62px); font-weight:850; letter-spacing:-.06em; }
input[type="range"] { width:100%; margin:34px 0 10px; accent-color:var(--pink); }
.range-labels { display:flex; justify-content:space-between; font-size:12px; color:rgba(27,18,49,.55); }
.tenure-control { margin:48px 0 32px; padding:0; border:0; }
.tenure-control legend { margin-bottom:14px; font-weight:700; }
.segment-group { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:7px; border:1px solid var(--line); border-radius:16px; background:#f6f0e6; }
.segment-group input { position:absolute; opacity:0; }
.segment-group span { display:block; padding:13px 10px; text-align:center; border-radius:11px; cursor:pointer; font-weight:700; }
.segment-group input:checked + span { background:var(--ink); color:#fff; box-shadow:0 5px 14px rgba(27,18,49,.18); }
.assumption-note { display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:16px; background:#f7efff; font-size:12px; line-height:1.5; }
.calculator-result { padding:clamp(30px,5vw,64px); display:flex; flex-direction:column; color:#fff; background:var(--ink); }
.result-top { display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:28px; }
.result-top > span { color:rgba(255,255,255,.64); }
.result-top strong { margin:8px 0 0; font-size:clamp(48px,6vw,76px); color:var(--green); letter-spacing:-.065em; }
.result-top small { color:rgba(255,255,255,.55); }
.breakdown { margin:24px 0 34px; }
.breakdown div { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.breakdown dt { color:rgba(255,255,255,.62); }
.breakdown dd { margin:0; font-weight:750; }
.breakdown .fee-row { border-bottom:0; }
.breakdown .net-row { margin-top:8px; padding:16px 14px; border:0; border-radius:12px; color:var(--ink); background:var(--green); }
.breakdown .net-row dt { color:rgba(27,18,49,.68); }
.calculator-result .button { background:var(--sun); color:var(--ink); }
.calculator-result > p { margin:14px 0 0; font-size:11px; line-height:1.5; color:rgba(255,255,255,.5); }

.eligibility { padding:120px max(6vw, calc((100vw - 1180px)/2)); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,8vw,120px); background:var(--blue); }
.eligibility-copy > p { max-width:530px; margin:28px 0; line-height:1.6; }
.check-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.check-list span { padding:17px; display:flex; flex-direction:column; gap:5px; border:1px solid rgba(27,18,49,.18); border-radius:16px; background:rgba(255,255,255,.25); }
.eligibility-card { padding:clamp(28px,5vw,52px); display:flex; flex-direction:column; gap:20px; border-radius:var(--radius); background:var(--ink); color:#fff; box-shadow:var(--shadow); }
.card-progress { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.15); }
.card-progress b { color:var(--green); }
.eligibility-card label { display:flex; flex-direction:column; gap:9px; font-size:14px; font-weight:700; }
.eligibility-card select { width:100%; padding:16px; border:1px solid rgba(255,255,255,.18); border-radius:13px; color:#fff; background:#2a2040; }
.eligibility-card .check-row { flex-direction:row; align-items:flex-start; font-weight:500; color:rgba(255,255,255,.72); }
.eligibility-card .check-row input { margin-top:4px; accent-color:var(--green); }
.eligibility-card small { color:rgba(255,255,255,.48); }
.eligibility-result { display:none; padding:14px; border-radius:13px; background:rgba(186,255,106,.12); color:var(--green); line-height:1.45; }
.eligibility-result.show { display:block; }

.how { padding:120px max(6vw, calc((100vw - 1180px)/2)); color:#fff; background:var(--ink); }
.section-intro.light { grid-template-columns:.5fr 1.5fr; }
.light .section-number { color:rgba(255,255,255,.5); }
.steps { margin:60px 0 45px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(255,255,255,.18); }
.steps li { min-height:290px; padding:22px 22px 20px 0; border-right:1px solid rgba(255,255,255,.15); }
.steps li + li { padding-left:22px; }
.steps span { font-size:12px; color:var(--green); }
.steps h3 { margin:70px 0 12px; font-size:28px; letter-spacing:-.04em; }
.steps p { color:rgba(255,255,255,.58); line-height:1.55; font-size:14px; }

.use-cases { min-height:620px; padding:120px max(6vw, calc((100vw - 1180px)/2)); text-align:center; overflow:hidden; background:var(--pink); }
.use-cases h2 { max-width:760px; margin:22px auto 70px; }
.ticker { width:max-content; display:flex; gap:35px; align-items:center; transform:rotate(-3deg) translateX(-8%); font-size:clamp(42px,7vw,96px); font-weight:850; letter-spacing:-.06em; white-space:nowrap; color:#fff; text-shadow:3px 3px 0 var(--ink); }
.ticker i { color:var(--sun); font-style:normal; }
.use-cases > p { max-width:700px; margin:90px auto 0; padding:20px; border-radius:16px; background:rgba(255,255,255,.34); line-height:1.55; }

.trust { padding:120px max(6vw, calc((100vw - 1180px)/2)); background:var(--green); }
.trust > div:first-child { display:grid; grid-template-columns:.5fr 1.5fr; gap:40px; margin-bottom:70px; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.trust-grid article { min-height:300px; padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid article span { font-size:12px; }
.trust-grid h3 { margin:90px 0 16px; font-size:26px; letter-spacing:-.04em; }
.trust-grid p { color:rgba(27,18,49,.64); line-height:1.55; }

.app-coming-soon { min-height:680px; padding:100px max(6vw, calc((100vw - 1180px)/2)); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(50px,9vw,130px); overflow:hidden; background:var(--sun); }
.app-copy h2 { margin:20px 0 28px; font-size:clamp(48px,6vw,84px); line-height:.94; letter-spacing:-.065em; }
.app-copy > p { max-width:620px; font-size:18px; line-height:1.65; color:rgba(27,18,49,.68); }
.play-store-badge { width:max-content; margin-top:34px; padding:13px 18px; display:flex; align-items:center; gap:14px; border:2px solid var(--ink); border-radius:16px; color:#fff; background:var(--ink); box-shadow:8px 8px 0 var(--pink); }
.play-store-badge > span:last-child { display:flex; flex-direction:column; }
.play-store-badge small { color:rgba(255,255,255,.62); }
.play-store-badge strong { font-size:17px; }
.play-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--ink); background:var(--green); }
.app-phone { position:relative; justify-self:center; width:min(340px,78vw); aspect-ratio:.53; padding:58px 24px 26px; border:10px solid var(--ink); border-radius:52px; background:linear-gradient(165deg,#321b4d,#ff5eaa 58%,#ff8b67); box-shadow:28px 34px 0 rgba(27,18,49,.17); transform:rotate(5deg); color:#fff; }
.phone-speaker { position:absolute; top:18px; left:50%; width:88px; height:8px; border-radius:20px; background:rgba(255,255,255,.25); transform:translateX(-50%); }
.phone-brand { font-size:28px; font-weight:850; letter-spacing:-.06em; }
.phone-brand span { color:var(--green); }
.phone-card { margin-top:72px; padding:24px; display:flex; flex-direction:column; border-radius:24px; color:var(--ink); background:var(--sun); box-shadow:0 22px 50px rgba(20,13,35,.24); }
.phone-card small { text-transform:uppercase; letter-spacing:.1em; }
.phone-card strong { margin:16px 0 42px; font-size:46px; letter-spacing:-.06em; }
.phone-card span { font-weight:750; }
.phone-status { position:absolute; left:24px; right:24px; bottom:26px; padding:15px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid rgba(255,255,255,.22); border-radius:17px; background:rgba(27,18,49,.62); backdrop-filter:blur(12px); font-weight:800; }
.phone-status i { width:8px; height:8px; border-radius:50%; background:var(--green); }

.faq { padding:120px max(6vw, calc((100vw - 1180px)/2)); display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; background:#fff; }
.faq-heading { position:sticky; top:30px; align-self:start; }
.faq-heading h2 { margin-top:20px; }
.accordion details { border-top:1px solid var(--line); }
.accordion details:last-child { border-bottom:1px solid var(--line); }
.accordion summary { padding:25px 0; display:flex; justify-content:space-between; gap:25px; cursor:pointer; list-style:none; font-size:20px; font-weight:750; }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary span { font-size:30px; font-weight:400; transition:transform .2s; }
.accordion details[open] summary span { transform:rotate(45deg); }
.accordion details p { max-width:690px; padding:0 40px 24px 0; color:rgba(27,18,49,.62); line-height:1.65; }

.legal { padding:70px max(6vw, calc((100vw - 1180px)/2)); color:#fff; background:#211735; }
.legal h2 { font-size:18px; }
.legal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding:30px 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.legal-grid p { margin:0; color:rgba(255,255,255,.56); line-height:1.65; font-size:13px; }
.legal nav { display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; }
.legal nav a { font-size:13px; }
.closing { padding:120px max(6vw, calc((100vw - 1180px)/2)); text-align:center; color:#fff; background:linear-gradient(150deg,#ff6e4e,#a22c71 54%,#211735); }
.closing > span { text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
.closing h2 { margin:22px auto 44px; }
footer { padding:35px max(6vw, calc((100vw - 1180px)/2)); display:flex; align-items:center; gap:26px; color:#fff; background:#140d23; }
footer p { margin:0; color:rgba(255,255,255,.5); }
footer > span { margin-left:auto; color:rgba(255,255,255,.4); font-size:13px; }

dialog { width:min(620px,calc(100% - 28px)); max-height:calc(100vh - 28px); padding:0; border:0; border-radius:28px; color:var(--ink); background:#fff; box-shadow:0 30px 100px rgba(0,0,0,.38); }
dialog::backdrop { background:rgba(20,13,35,.72); backdrop-filter:blur(8px); }
.dialog-shell { position:relative; min-height:580px; padding:38px; display:flex; flex-direction:column; }
.dialog-close { position:absolute; right:20px; top:18px; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer; font-size:24px; }
.flow-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-right:50px; }
.flow-progress span { height:6px; border-radius:10px; background:#e9e1d7; }
.flow-progress span.active { background:var(--pink); }
.flow-screen { display:none; flex:1; padding-top:70px; }
.flow-screen.active { display:flex; flex-direction:column; }
.flow-screen h2 { margin:14px 0 18px; font-size:48px; line-height:1; letter-spacing:-.055em; }
.flow-screen > p { color:rgba(27,18,49,.62); line-height:1.55; }
.flow-screen .button { margin-top:auto; }
.flow-summary { margin:30px 0; padding:24px; display:flex; justify-content:space-between; align-items:center; border-radius:18px; background:var(--sun); }
.flow-summary strong { font-size:28px; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0; }
.choice-grid button { padding:24px 12px; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; font-weight:750; }
.choice-grid button.selected { background:var(--green); border-color:var(--ink); }
.document-chips { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0; }
.document-chips span { padding:12px 16px; border-radius:100px; background:#eaf4ff; font-weight:750; }
.review-stamp { margin:30px 0; padding:26px; display:flex; justify-content:space-between; align-items:center; border:2px solid var(--ink); border-radius:18px; font-size:22px; font-weight:850; background:var(--green); transform:rotate(-1deg); }
.review-stamp span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--ink); }
.dialog-note { display:block; margin-top:16px; text-align:center; color:rgba(27,18,49,.48); }

@media (max-width: 900px) {
  .site-header nav { display:none; }
  .site-header { gap:12px; }
  .site-header .nav-cta { margin-left:auto; }
  .hero { min-height:auto; padding-top:140px; grid-template-columns:1fr; }
  .hero-copy { text-align:center; margin:auto; }
  .hero-copy > p, .hero-copy .microcopy { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-object { min-height:440px; }
  .section-intro, .eligibility, .app-coming-soon, .faq { grid-template-columns:1fr; }
  .app-coming-soon { text-align:center; }
  .app-copy > p { margin-left:auto; margin-right:auto; }
  .play-store-badge { margin-left:auto; margin-right:auto; text-align:left; }
  .section-intro { gap:20px; }
  .calculator { grid-template-columns:1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .steps li { min-height:240px; border-bottom:1px solid rgba(255,255,255,.15); }
  .steps li:nth-child(odd) { padding-left:0; }
  .trust > div:first-child { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .faq-heading { position:static; }
  .legal-grid { grid-template-columns:1fr; gap:20px; }
}

@media (max-width: 600px) {
  .site-header { top:10px; width:calc(100% - 20px); min-height:56px; border-radius:17px; }
  .site-header .nav-cta { padding:12px; font-size:12px; }
  .hero { padding:118px 20px 90px; gap:10px; }
  h1 { font-size:56px; }
  .hero-actions { flex-direction:column; gap:8px; }
  .hero-object { min-height:390px; transform:scale(.86); }
  .sticker-one { left:-7%; }
  .sticker-two { right:-9%; }
  .calculator-section, .eligibility, .how, .use-cases, .trust, .app-coming-soon, .faq, .closing { padding:80px 20px; }
  .section-intro h2, .eligibility h2, .how h2, .use-cases h2, .trust h2, .faq h2, .closing h2 { font-size:46px; }
  .calculator-controls, .calculator-result { padding:28px 20px; }
  .control-heading { display:block; }
  .control-heading output { display:block; margin-top:8px; }
  .segment-group span { padding:12px 4px; font-size:12px; }
  .eligibility { gap:40px; }
  .check-list { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr; }
  .steps li, .steps li + li { min-height:auto; padding:22px 0; border-right:0; }
  .steps h3 { margin:35px 0 10px; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-grid article { min-height:auto; }
  .trust-grid h3 { margin:55px 0 12px; }
  .faq { gap:40px; }
  .app-coming-soon { gap:60px; }
  .app-copy h2 { font-size:46px; }
  footer { align-items:flex-start; flex-wrap:wrap; }
  footer > span { width:100%; margin:0; }
  .dialog-shell { min-height:570px; padding:28px 22px; }
  .flow-screen h2 { font-size:40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *:before, *:after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}