:root {
  --ink: #101719;
  --ink-soft: #182224;
  --green: #16c875;
  --green-soft: #a8f2ce;
  --paper: #f3f5f1;
  --muted: #9eaaa6;
  --line: rgba(255,255,255,.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: #f8faf8; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.site-header { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 78px); position: sticky; top: 0; z-index: 20; background: rgba(16,23,25,.86); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 760; font-size: 24px; letter-spacing: -.8px; }
.brand > span > span { color: var(--green); }
.brand-mark { width: 37px; height: 37px; overflow: visible; }
.brand-mark path { fill: none; stroke: #f8faf8; stroke-width: 80; stroke-linecap: butt; stroke-linejoin: round; }
.brand-mark .brand-c { stroke: var(--green); stroke-width: 72; }
nav { display: flex; gap: 31px; align-items: center; font-size: 14px; color: #c3cbc8; }
nav a:hover { color: #fff; }
.nav-cta { padding: 11px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; }

.hero { min-height: 760px; padding: clamp(72px, 8vw, 124px) clamp(24px, 7vw, 110px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: clamp(40px, 6vw, 100px); overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(22,200,117,.06); filter: blur(2px); top: -260px; left: 27%; }
.eyebrow, .section-kicker { color: var(--green); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 750; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(55px, 6.2vw, 98px); line-height: .98; letter-spacing: -.061em; margin-bottom: 31px; max-width: 860px; }
h1 em { color: var(--green); font-style: normal; }
.hero-lede { max-width: 650px; font-size: clamp(18px, 1.65vw, 23px); line-height: 1.55; color: #b8c2be; }
.hero-actions { display: flex; gap: 13px; margin-top: 39px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 23px; border-radius: 999px; font-size: 14px; font-weight: 720; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--green); color: #0b1712; }
.button.secondary { border: 1px solid rgba(255,255,255,.16); color: #d6dedb; }

.product-scene { min-height: 590px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(22,200,117,.2); border-radius: 50%; }
.orbit-one { width: 580px; height: 580px; }
.orbit-two { width: 445px; height: 445px; }
.phone { width: 292px; height: 586px; position: relative; padding: 22px 19px 16px; border-radius: 45px; background: #080c0d; box-shadow: 0 34px 80px rgba(0,0,0,.45), inset 0 0 0 7px #273033, inset 0 0 0 8px #070a0b; transform: rotate(2deg); z-index: 3; }
.phone::before { content: ""; width: 88px; height: 23px; border-radius: 20px; background: #1f2729; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); }
.phone-top { display: flex; justify-content: space-between; font-size: 8px; padding: 2px 6px 19px; color: #bdc6c3; }
.app-head { display: flex; flex-direction: column; gap: 4px; margin: 10px 4px 17px; }
.tiny-label { font-size: 7px; letter-spacing: .15em; color: #71807b; }
.app-head strong { font-size: 20px; }
.balance-card { padding: 17px; border-radius: 19px; background: linear-gradient(145deg, #17352a, #11241e); border: 1px solid rgba(22,200,117,.22); }
.balance-card > span, .float-card span { display: block; color: #94a39e; font-size: 9px; }
.balance-card > strong { display: block; font-size: 30px; margin: 6px 0 15px; letter-spacing: -.04em; }
.balance-row { display: flex; justify-content: space-between; color: #aeb9b5; font-size: 8px; }
.mini-title { display: flex; justify-content: space-between; align-items: center; margin: 23px 4px 11px; font-size: 11px; }
.mini-title span { color: var(--green); font-size: 8px; }
.goal-card { display: flex; align-items: center; justify-content: space-between; border-radius: 15px; border: 1px solid rgba(255,255,255,.09); padding: 13px; background: #111718; font-size: 9px; }
.goal-card > div { display: flex; align-items: center; gap: 9px; }
.goal-card p { display: flex; flex-direction: column; margin: 0; gap: 3px; }
.goal-card small { color: #7f8c88; }
.goal-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(22,200,117,.12); color: var(--green); }
.progress { height: 4px; background: #1f2926; border-radius: 8px; margin: 9px 3px 15px; overflow: hidden; }
.progress i { display: block; width: 55%; height: 100%; background: var(--green); }
.goal-card.second { margin-top: 10px; }
.phone-nav { position: absolute; left: 19px; right: 19px; bottom: 17px; display: flex; justify-content: space-around; color: #687470; border-top: 1px solid #1f2927; padding-top: 17px; }
.phone-nav span:first-child { color: var(--green); }
.float-card { position: absolute; z-index: 5; min-width: 156px; padding: 16px 17px; background: rgba(30,42,42,.94); border: 1px solid rgba(255,255,255,.1); border-radius: 17px; box-shadow: 0 18px 50px rgba(0,0,0,.32); backdrop-filter: blur(15px); }
.float-card strong { display: block; font-size: 25px; margin: 5px 0 2px; }
.float-card small { color: var(--green-soft); font-size: 9px; }
.float-budget { left: 2%; top: 28%; }
.float-saved { right: -3%; bottom: 19%; }

.principle { padding: 130px max(24px, 8vw); background: var(--paper); color: var(--ink); display: grid; grid-template-columns: .6fr 1.4fr 1fr; gap: 50px; align-items: start; }
.principle h2, .flow-copy h2, .vision h2, .contact-section h2 { font-size: clamp(43px, 5vw, 72px); line-height: 1.03; letter-spacing: -.05em; }
.principle p:last-child { font-size: 19px; line-height: 1.65; color: #55625e; padding-top: 9px; }

.feature-grid { background: var(--paper); color: var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 max(24px, 8vw) 130px; gap: 15px; }
.feature-card { background: #e8ece6; border-radius: 24px; padding: 32px; min-height: 390px; display: flex; flex-direction: column; }
.feature-number { color: #7b8984; font-size: 11px; letter-spacing: .13em; }
.feature-icon { width: 55px; height: 55px; border-radius: 18px; display: grid; place-items: center; background: var(--ink); color: var(--green); font-size: 22px; margin-top: 52px; }
.feature-card h3 { font-size: 29px; letter-spacing: -.04em; margin: 26px 0 13px; }
.feature-card p { color: #59645f; line-height: 1.62; font-size: 16px; }

.flow-section { padding: 140px max(24px, 8vw); display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.flow-copy p:last-child { color: #aab5b1; line-height: 1.7; font-size: 18px; max-width: 600px; }
.flow-map { display: flex; align-items: center; justify-content: center; gap: 13px; }
.flow-node { padding: 21px 20px; min-width: 145px; border: 1px solid var(--line); border-radius: 18px; background: #141d1f; }
.flow-node small { display: block; color: #7e8d88; margin-bottom: 7px; }
.flow-node strong { font-size: 14px; }
.flow-node.active, .flow-node.result { border-color: rgba(22,200,117,.43); }
.flow-node.result strong { color: var(--green); }
.flow-stack { display: grid; gap: 9px; }
.flow-arrow { color: var(--green); }

.vision { padding: 150px 24px; background: var(--green); color: #07120e; text-align: center; }
.vision-inner { max-width: 970px; margin: auto; }
.vision .section-kicker { color: #183f30; }
.vision p { max-width: 790px; margin: 0 auto; font-size: 20px; line-height: 1.65; color: #16402f; }
.vision .stage-note { margin-top: 28px; font-size: 13px; color: #226148; }

.contact-section { padding: 125px max(24px, 8vw); display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.contact-section h2 { max-width: 750px; margin-bottom: 0; }
.contact-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.contact-actions .secondary { border-color: rgba(255,255,255,.24); }
.contact-actions .secondary span { color: var(--green); margin-left: 7px; }
footer { border-top: 1px solid var(--line); padding: 42px max(24px, 5vw); display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 25px; align-items: center; color: #91a09b; font-size: 13px; }
.footer-brand { color: #fff; font-size: 20px; }
.footer-brand .brand-mark { width: 30px; height: 30px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: #fff; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  nav a:not(.nav-cta) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 85px; }
  .product-scene { margin-top: 30px; }
  .principle { grid-template-columns: 1fr; }
  .principle p:last-child { max-width: 680px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 300px; }
  .feature-icon { margin-top: 34px; }
  .flow-section { grid-template-columns: 1fr; }
  .contact-section { align-items: start; flex-direction: column; }
  .contact-actions { justify-content: flex-start; }
  footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .site-header { height: 70px; }
  .brand { font-size: 20px; }
  .brand-mark { width: 33px; height: 33px; }
  .hero { padding: 64px 21px 85px; }
  h1 { font-size: 53px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .product-scene { min-height: 540px; transform: scale(.88); margin: -25px -28px; }
  .float-budget { left: -1%; }
  .float-saved { right: -2%; }
  .principle, .flow-section, .contact-section { padding: 95px 22px; }
  .feature-grid { padding: 0 14px 95px; }
  .flow-map { align-items: stretch; flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); text-align: center; }
  .vision { padding: 105px 22px; }
  .contact-actions { width: 100%; }
  .contact-actions .button { width: 100%; }
  footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}