/* ===================== DESIGN TOKENS =====================
   Palette reused from the real DuitBox app for brand continuity (cream +
   teal-green is the product's actual identity, not a generic pick) —
   terracotta is demoted to a small "sample stamp" accent only, deliberately
   avoiding the cream+terracotta+serif template.
   Display: Plus Jakarta Sans (rounded, confident, not the expected elegant
   serif). Body: Inter. Amounts: IBM Plex Mono, styled like a receipt
   printout — the one typographic signature, grounded in the product's real
   mechanic (reading receipts/notifications). */
:root{
  --bg: #F6F8F4;
  --surface: #FFFFFF;
  --receipt: #FFFDF6;
  --ink: #17211D;
  --ink-soft: #5B655F;
  --line: #E1E6DD;
  --accent: #2F6F5E;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EFEA;
  --stamp: #D97757;
  --stamp-soft: #FBE9E2;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow: 0 1px 2px rgba(23,33,29,0.04), 0 12px 32px rgba(23,33,29,0.07);
  --display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

.section-inner{ max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top bar ---------- */
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: rgba(246,248,244,0.82); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.topbar-inner{ max-width: 880px; margin:0 auto; padding: 16px 24px; display:flex; align-items:center; justify-content:space-between; }
.wordmark{ font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-0.01em; }
.topbar-cta{ font-family:var(--display); font-weight:700; font-size:13.5px; background:var(--accent); color:var(--accent-ink); padding:9px 16px; border-radius:99px; transition: transform .15s ease; }
.topbar-cta:hover{ transform: translateY(-1px); }

/* ---------- Hero ---------- */
.hero{ padding: 56px 24px 40px; }
.hero-inner{ max-width: 640px; margin: 0 auto; text-align:center; }
.hero-headline{
  font-family:var(--display); font-weight:800; font-size: 52px; line-height:1.06;
  letter-spacing:-0.02em; margin: 0 0 18px;
}
.hero-sub{ font-size:17px; color:var(--ink-soft); max-width:480px; margin: 0 auto 28px; line-height:1.55; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom: 48px; }
.btn-primary{
  font-family:var(--display); font-weight:700; font-size:15px; background:var(--accent); color:var(--accent-ink);
  padding:14px 26px; border-radius:99px; transition: transform .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
  font-family:var(--display); font-weight:700; font-size:15px; background:transparent; color:var(--ink);
  padding:14px 26px; border-radius:99px; border:1.5px solid var(--line); transition: border-color .15s ease, transform .15s ease;
}
.btn-ghost:hover{ border-color: var(--accent); transform: translateY(-1px); }

/* ---------- Hero signature: notification -> ledger morph ---------- */
.hero-stage{ max-width: 400px; margin: 0 auto; position:relative; }
.notif-card{
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow);
  padding: 16px; text-align:left; opacity:0; transform: translateY(-16px);
  animation: notifIn .5s ease .3s forwards;
}
.notif-row{ display:flex; gap:12px; }
.notif-icon{ width:38px; height:38px; border-radius:11px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.notif-app{ font-size:11.5px; color:var(--ink-soft); font-weight:600; margin-bottom:2px; }
.notif-time{ font-weight:400; opacity:.7; }
.notif-title{ font-weight:700; font-size:14px; margin-bottom:3px; }
.notif-text{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.morph-arrow{
  text-align:center; font-size:18px; color: var(--ink-soft); opacity:0;
  animation: fadeIn .4s ease 1.1s forwards; margin: 6px 0;
}
.ledger-row{
  display:flex; align-items:center; gap:12px; background:var(--receipt); border:1.5px dashed var(--line);
  border-radius: var(--radius-md); padding:14px 16px; opacity:0; transform: translateY(16px) scale(.97);
  animation: ledgerIn .5s cubic-bezier(.2,.8,.2,1) 1.4s forwards;
}
.ledger-icon{ width:34px; height:34px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ledger-mid{ flex:1; text-align:left; min-width:0; }
.ledger-cat{ font-weight:700; font-size:13.5px; }
.ledger-sub{ font-size:11.5px; color:var(--ink-soft); }
.ledger-amount{ font-family:var(--mono); font-weight:600; font-size:15px; color:var(--accent); }

@keyframes notifIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes ledgerIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce){
  .notif-card, .morph-arrow, .ledger-row{ animation: none !important; opacity:1 !important; transform:none !important; }
}

/* ---------- Reveal-on-scroll (shared) ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ---------- Section shared bits ---------- */
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px; }
.section-headline{ font-family:var(--display); font-weight:800; font-size:34px; line-height:1.15; letter-spacing:-0.015em; margin:0 0 14px; }
.section-headline.small{ font-size:28px; }
.section-sub{ font-size:15.5px; color:var(--ink-soft); max-width:520px; line-height:1.6; margin:0 0 8px; }

/* ---------- How it works ---------- */
.how{ padding: 72px 0 60px; }
.how .eyebrow, .how .section-headline, .how .section-sub{ text-align:center; margin-left:auto; margin-right:auto; }
.how .section-headline{ text-align:center; }
.how .section-sub{ text-align:center; margin-bottom:44px; }

.steps{ display:flex; flex-direction:column; gap:16px; }
.step{
  display:grid; grid-template-columns: 34px 1fr 24px 1fr; align-items:center; gap:14px;
  background:var(--surface); border-radius:var(--radius-md); padding:18px 20px; box-shadow:var(--shadow);
}
.step-num{ font-family:var(--mono); font-weight:600; color:var(--ink-soft); font-size:13px; }
.step-notif{ display:flex; align-items:center; gap:12px; min-width:0; }
.step-notif-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.step-notif-text{ font-size:13px; color:var(--ink-soft); line-height:1.4; }
.step-arrow{ text-align:center; color:var(--ink-soft); font-size:16px; }
.step-result{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--accent-soft); border-radius:10px; padding:10px 14px; }
.step-result-cat{ font-weight:700; font-size:13.5px; }
.step-result-amount{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--accent); }
.step-footnote{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:28px; }

/* ---------- Feature strip ---------- */
.features{ padding: 40px 0 60px; }
.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.feature-card{ background:var(--surface); border-radius:var(--radius-lg); padding:26px 22px; box-shadow:var(--shadow); }
.feature-icon{ font-size:26px; margin-bottom:12px; }
.feature-card h3{ font-family:var(--display); font-size:18px; font-weight:700; margin:0 0 8px; }
.feature-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0; }

/* ---------- Reassurance ---------- */
.reassure{ padding: 60px 0; }
.reassure-inner{ text-align:center; max-width:560px; }
.reassure-inner .section-sub{ margin:0 auto; }

/* ---------- Three doors (receipt-stub CTAs) ---------- */
.doors{ padding: 40px 0 80px; }
.doors .eyebrow, .doors .section-headline{ text-align:center; margin-left:auto; margin-right:auto; }
.doors .section-headline{ text-align:center; margin-bottom: 40px; }

.door-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.door-stub{
  position:relative; display:block; background:var(--receipt); border-radius: var(--radius-md);
  padding: 22px 20px 20px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
  border: 1.5px solid var(--line);
}
.door-stub:not(.door-stub-disabled):hover{ transform: translateY(-4px); box-shadow: 0 4px 8px rgba(23,33,29,0.06), 0 20px 40px rgba(23,33,29,0.1); }
.door-tear{
  position:absolute; top:-1px; left:0; right:0; height:8px;
  background-image: radial-gradient(circle at 8px 0, transparent 5px, var(--bg) 5px);
  background-size: 16px 8px; background-repeat: repeat-x;
}
.door-stub-top{ position:relative; height:12px; margin-bottom:14px; }
.door-stamp{
  position:absolute; top:0; right:0; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  color:var(--stamp); border:1.5px solid var(--stamp); border-radius:5px; padding:2px 6px; transform: rotate(6deg);
}
.door-label{ font-family:var(--display); font-weight:800; font-size:18px; margin-bottom:4px; }
.door-detail{ font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; }
.door-go{ font-family:var(--mono); font-weight:600; font-size:12.5px; color:var(--accent); }
.door-stub-disabled{ opacity:.55; cursor:default; }
.door-stub-disabled .door-go{ color:var(--ink-soft); }
.door-stub-demo .door-go{ color:var(--stamp); }

/* ---------- Footer ---------- */
.footer{ padding: 28px 24px 40px; text-align:center; }
.footer-inner{ font-size:12.5px; color:var(--ink-soft); }
.footer-dot{ margin:0 6px; opacity:.5; }

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .hero-headline{ font-size:38px; }
  .section-headline{ font-size:26px; }
  .feature-grid, .door-grid{ grid-template-columns: 1fr; }
  .step{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
  .step-num{ order:-1; }
  .step-arrow{ display:block; align-self:center; transform: rotate(90deg); }
  .step-result{ width:100%; }
}

/* ---------- Accessibility: visible keyboard focus ---------- */
a:focus-visible, button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }