:root{
  --bg: #FAF7F0;
  --surface1: #FFFBF5;
  --surface2: #F5F1E8;
  --ink: #2D2424;
  --muted: #7A6F6F;
  --border: #E8DFD4;
  --shadow: 0 18px 60px rgba(45,36,36,.08);
  --radius2: 24px;
  --grad1: #5B9A8B;
  --grad2: #D4735E;
  --grad3: #E8B86D;
  --good: #88AB8E;
  --accent-primary: #5B9A8B;
  --accent-secondary: #D4735E;
  --accent-warning: #E8B86D;
  --accent-success: #88AB8E;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 600px at 16% 8%, rgba(91,154,139,.16), transparent 55%),
    radial-gradient(900px 600px at 82% 18%, rgba(212,115,94,.12), transparent 55%),
    radial-gradient(900px 700px at 58% 102%, rgba(232,184,109,.12), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, calc(100% - 48px)); margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:12.5px; line-height:1.35}
.full{width:100%}

.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:14px; top:14px; width:auto; height:auto; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,.08); z-index:999}

.glass{
  background: linear-gradient(180deg, rgba(255,251,245,.92), rgba(255,251,245,.74));
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(250,247,240,.82);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(45,36,36,.06);
  backdrop-filter: blur(10px);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px}

.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
.brand.small{opacity:.98}
.brand-mark{width:32px; height:32px; object-fit:contain; display:block; border-radius:10px;}
.brand-name{font-size:14px}

.nav{display:flex; gap:18px; align-items:center}
.nav a{color: rgba(45,36,36,.78); font-weight:700; font-size:13px}
.nav a:hover{color: rgba(45,36,36,.98)}
.topbar-cta{display:flex; gap:10px; align-items:center}

.btn{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight:800;
  font-size: 13px;
  cursor:pointer;
  transition: transform .08s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  background: var(--surface1);
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  border-color: rgba(91,154,139,.35);
  background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
  color: var(--surface1);
}
.btn-primary:hover{filter:brightness(1.02)}
.btn-ghost{background: rgba(255,251,245,.86); color: rgba(45,36,36,.92)}
.btn-ghost:hover{filter:brightness(1.02)}

.hamburger{display:none; width:42px; height:40px; border-radius:14px; border:1px solid var(--border); background: rgba(255,251,245,.76)}
.hamburger span{display:block; height:2px; width:18px; margin:5px auto; background:rgba(45,36,36,.75); border-radius:4px}

.mobile-nav{padding:10px 24px 18px; display:flex; flex-direction:column; gap:10px}
.mobile-nav a{padding:10px 12px; border-radius:14px; background: rgba(255,255,255,.76); border:1px solid rgba(0,0,0,.06); color: rgba(11,15,26,.74); font-weight:800; font-size:13px}
.mobile-nav a:hover{color: rgba(11,15,26,.95)}

.hero{padding:46px 0 22px}
.hero-inner{display:grid; grid-template-columns: 1.05fr .95fr; gap:34px; align-items:center}

.pill{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.85); color: rgba(11,15,26,.74); font-size:12.5px; font-weight:800}
.dot{width:8px; height:8px; border-radius:99px; background: var(--grad1); box-shadow:0 0 0 6px rgba(91,154,139,.16)}

h1{margin:14px 0 10px; font-size: clamp(38px, 4.3vw, 56px); line-height:1.02; letter-spacing:-1.2px}
.gradient-text{background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.subhead{margin:0 0 18px; color: rgba(45,36,36,.74); font-size:15.5px; line-height:1.55; max-width:560px}

.hero-actions{display:flex; gap:12px; align-items:center; margin:16px 0 18px}
.hero-actions + .quick-actions{margin-top:6px}

.quick-actions{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; align-items:stretch; margin:0 0 18px}
.quick-action{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background: rgba(255,251,245,.92); border:1px solid var(--border)}
.quick-icon{width:32px; height:32px; display:grid; place-items:center; color: var(--accent-primary);}
.quick-icon.shared{color: var(--accent-secondary);}
.quick-icon.budgets{color: var(--accent-warning);}
.quick-icon.insights{color: var(--accent-primary);}
.quick-icon.history{color: var(--accent-success);}
.quick-label{font-weight:800; color: var(--ink); font-size:13px}

.store-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.store-badge{min-width:178px; padding:10px 12px; border-radius:16px; background: rgba(255,255,255,.82); border:1px solid rgba(0,0,0,.08)}
.store-badge .store-top{font-weight:900; font-size:13px}
.store-badge .store-sub{color: rgba(11,15,26,.68); font-weight:800; font-size:12px; margin-top:2px}
.store-badge.disabled{opacity:.72}

.trust-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.trust-pill{padding:8px 10px; border-radius:999px; background: rgba(255,255,255,.86); border:1px solid rgba(0,0,0,.07); color: rgba(11,15,26,.72); font-weight:900; font-size:12px}

.visual-wrap{position:relative}
.hero-visual{padding:18px}
.visual-head{display:flex; align-items:center; justify-content:space-between}
.chip{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.85); color: rgba(11,15,26,.70); font-weight:900; font-size:12px}
.status{display:flex; align-items:center; gap:8px; color: rgba(11,15,26,.68); font-weight:900; font-size:12px}
.pulse{width:8px; height:8px; border-radius:99px; background: var(--grad1); box-shadow: 0 0 0 0 rgba(91,154,139,.35); animation:pulse 1.6s infinite}
@keyframes pulse{to{box-shadow:0 0 0 14px rgba(46,233,166,0)}}

.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:14px}
.kpi{padding:12px; border-radius:18px; background: rgba(255,251,245,.90); border:1px solid var(--border)}
.kpi-label{color: rgba(45,36,36,.68); font-weight:900; font-size:12px}
.kpi-value{font-size:20px; font-weight:900; letter-spacing:-.4px; margin-top:6px}
.kpi-note{color: rgba(45,36,36,.66); font-size:12px; font-weight:800; margin-top:4px}

.ai-card{margin-top:12px; padding:12px; border-radius:18px; background: radial-gradient(300px 130px at 10% 0%, rgba(91,154,139,.16), transparent 60%), radial-gradient(320px 150px at 90% 20%, rgba(232,184,109,.16), transparent 60%), rgba(255,251,245,.88); border:1px solid var(--border)}
.ai-title{font-weight:900; font-size:12.5px; color: rgba(45,36,36,.78)}
.ai-text{margin-top:6px; color: rgba(45,36,36,.74); font-weight:700; font-size:13px; line-height:1.45}
.ai-actions{display:flex; gap:8px; margin-top:10px}
.mini-btn{border:1px solid var(--border); background: rgba(255,251,245,.92); padding:8px 10px; border-radius:999px; font-weight:900; font-size:12px; cursor:pointer}
.mini-btn.ghost{background: rgba(255,251,245,.78); color: rgba(45,36,36,.78)}

.mini-grid{margin-top:12px; display:grid; grid-template-columns: 1fr; gap:10px}
.mini{padding:12px; border-radius:18px; background: rgba(255,251,245,.90); border:1px solid var(--border)}
.mini-h{font-weight:900; font-size:12.5px; color: rgba(45,36,36,.78)}
.bar{height:10px; border-radius:999px; background: rgba(0,0,0,.06); overflow:hidden; margin-top:8px; position:relative}
.bar-fill{height:100%; background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3)); border-radius:999px; width:0}
.bar.big{height:14px}
.mini-sub{margin-top:8px; color: rgba(11,15,26,.66); font-weight:800; font-size:12px}

.halo{position:absolute; inset:-60px; background: radial-gradient(260px 160px at 20% 15%, rgba(46,233,166,.25), transparent 60%), radial-gradient(260px 160px at 80% 35%, rgba(124,92,255,.20), transparent 60%), radial-gradient(280px 180px at 55% 90%, rgba(76,195,255,.18), transparent 60%); filter: blur(18px); pointer-events:none; z-index:-1}

.section{padding:56px 0}
.section.alt{background: rgba(255,251,245,.76)}
.section-head{margin-bottom:18px}
.section h2{margin:0 0 8px; font-size:28px; letter-spacing:-.7px}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin-top:14px}
.feature{padding:18px}
.feature-icon{width:38px; height:38px; display:grid; place-items:center; color: var(--accent-primary);}
.feature-icon svg{width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.feature h3{margin:12px 0 8px; font-size:16px}
.feature p{margin:0; color: rgba(45,36,36,.70); font-size:13.5px; line-height:1.5; font-weight:650}
.feature.tight{gap:6px}
.feature.tight p{margin-top:4px}

.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center}
.checklist{margin:16px 0 18px; padding-left:18px; color: rgba(11,15,26,.72); font-weight:750}
.checklist li{margin:8px 0}
.card.pad{padding:18px}

.steps{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.step{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:18px; background: rgba(255,251,245,.90); border:1px solid var(--border)}
.step-n{width:30px; height:30px; border-radius:12px; display:grid; place-items:center; font-weight:900; background: rgba(91,154,139,.12); border:1px solid var(--border)}
.step-h{font-weight:900}
.note{margin-top:8px}

.security-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-top:12px}
.sec{padding:12px; border-radius:18px; background: rgba(255,251,245,.90); border:1px solid var(--border)}
.sec-label{color: rgba(45,36,36,.62); font-weight:900; font-size:12px}
.sec-value{font-weight:900; font-size:16px; margin-top:6px}
.sec-value.ok{color: var(--good)}

.card.pad{background: var(--surface1); border:1px solid var(--border); border-radius:18px}
.spend-card p{margin:0}
.spend-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.spend-insight{margin-top:12px; padding:12px; border-radius:14px; background: rgba(91,154,139,.10); border:1px solid rgba(91,154,139,.18)}
.invest-card{position:relative; overflow:hidden}
.invest-head{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.invest-chart{position:relative; height:140px; border-radius:14px; background: rgba(91,154,139,.12); overflow:hidden; margin-bottom:12px; border:1px solid var(--border)}
.chart-line{position:absolute; inset:22% 8% 20% 4%; border-radius:999px; background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3)); box-shadow:0 10px 30px rgba(91,154,139,.25)}
.chart-glow{position:absolute; inset:30% 12% 6% 8%; border-radius:999px; background: radial-gradient(120px 60px at 70% 30%, rgba(232,184,109,.35), transparent 70%)}
.pill-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pill.small{padding:6px 10px; font-size:12px; border:1px solid var(--border); background: rgba(255,251,245,.9)}
.pill.small.active{background: rgba(91,154,139,.16); border-color: rgba(91,154,139,.35)}
.invest-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; border:1px solid transparent}
.badge.accent{background: rgba(91,154,139,.16); color: var(--accent-primary); border-color: rgba(91,154,139,.28)}
.badge.success{background: rgba(136,171,142,.18); color: var(--accent-success); border-color: rgba(136,171,142,.26)}
.badge.warning{background: rgba(232,184,109,.18); color: #5a4425; border-color: rgba(232,184,109,.30)}
.goals-card{display:flex; flex-direction:column; gap:10px}
.goals-badges{display:flex; gap:8px; flex-wrap:wrap}
.ai-mock{display:flex; flex-direction:column; gap:12px}
.chat{display:flex; flex-direction:column; gap:10px}
.chat-row{display:flex; flex-direction:column; gap:4px}
.chat-bubble{padding:12px 14px; border-radius:14px; max-width:100%; box-shadow:0 6px 18px rgba(45,36,36,.08); border:1px solid var(--border)}
.chat-bubble.user{align-self:flex-end; background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3)); color: var(--surface1); border:none}
.chat-bubble.bot{align-self:flex-start; background: var(--surface1); color: var(--ink)}
.chat-bubble.thinking{color: var(--muted); font-style:italic}
.chat-meta{color: var(--muted); font-size:12px}
.suggested{display:flex; flex-direction:column; gap:8px}
.ai-safe{margin-top:4px}

.cta{padding:20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.cta-actions{width:min(340px, 100%)}

.footer{padding:22px 0 34px; border-top:1px solid rgba(0,0,0,.06)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-right{display:flex; gap:14px}

/* Modal */
.modal{position:fixed; inset:0; z-index:80; display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.38)}
.modal-card{position:relative; width:min(520px, calc(100% - 36px)); margin:11vh auto 0; padding:16px}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.icon-btn{width:40px; height:38px; border-radius:14px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.84); color: rgba(11,15,26,.92); cursor:pointer}
.modal-form{display:flex; flex-direction:column; gap:10px; margin-top:12px}
label{display:flex; flex-direction:column; gap:6px}
input{padding:12px; border-radius:14px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.90); color: rgba(11,15,26,.92); outline:none}
input::placeholder{color: rgba(11,15,26,.42)}
input:focus{border-color: rgba(76,195,255,.45)}

.toast{margin-top:12px; padding:14px; border-radius:18px; border:1px solid rgba(46,233,166,.28); background: rgba(46,233,166,.14)}
.toast-title{font-weight:900}

@media (max-width: 920px){
  .hero-inner{grid-template-columns: 1fr; gap:18px}
  .grid3{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .kpis{grid-template-columns: 1fr}
  .nav{display:none}
  .topbar-cta{display:none}
  .hamburger{display:block}
  .cta{flex-direction:column; align-items:flex-start}
  .footer-inner{flex-direction:column; align-items:flex-start}
}