/* ================= GoalPath landing page ================= */
/* Brand colors come from the logo (navy mountain, blue/green/gold ring); goal-category
   and allocation colors match the app so the preview visuals read the same way. */
:root{
  --brand:#1f3a5f; --brand-2:#2f5d92; --brand-soft:#e8eff8;
  --ink:#152238; --ink-soft:#43506a; --muted:#6b7588;
  --paper:#ffffff; --tint:#f5f8fc; --line:#e2e8f0;
  --rm:#198754; --rg:#0d6efd;
  --c-lifestyle:#198754; --c-discretionary:#0d6efd; --c-family:#6f42c1; --c-philanthropy:#fd7e14;
  --radius:16px; --shadow:0 18px 50px -18px rgba(21,34,56,.28); --shadow-sm:0 4px 18px -6px rgba(21,34,56,.16);
  --font:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
img,svg{display:block;}
a{color:inherit;}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0;}
p{margin:0;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 24px;}
.container.narrow{max-width:820px;}
.skip-link{position:absolute; left:-9999px; top:8px; background:var(--brand); color:#fff; padding:8px 14px; border-radius:8px; z-index:100;}
.skip-link:focus{left:8px;}
:focus-visible{outline:3px solid var(--brand-2); outline-offset:3px; border-radius:6px;}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; border:1.5px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-lg{padding:14px 26px; font-size:16.5px;}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 20px -8px rgba(31,58,95,.7);}
.btn-primary:hover{background:var(--brand-2);}
.btn-ghost{color:var(--brand); border-color:#c7d4e6; background:rgba(255,255,255,.7);}
.btn-ghost:hover{border-color:var(--brand); background:#fff;}
.btn-light{background:#fff; color:var(--brand);}
.btn-outline-light{color:#fff; border-color:rgba(255,255,255,.55);}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08);}
[hidden]{display:none !important;}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;}
.nav.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(21,34,56,.5);}
.nav-inner{display:flex; align-items:center; gap:28px; height:72px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--brand);}
.nav-links{display:flex; gap:26px; margin-left:12px;}
.nav-links a{text-decoration:none; color:var(--ink-soft); font-size:15px; font-weight:500;}
.nav-links a:hover{color:var(--brand);}
.nav-actions{display:flex; gap:10px; margin-left:auto;}
.nav-toggle{display:none; margin-left:auto; width:44px; height:44px; border:0; background:none; border-radius:10px; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px;}
.nav-toggle span{width:22px; height:2px; background:var(--brand); border-radius:2px; transition:transform .2s, opacity .2s;}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .nav-toggle span:nth-child(2){opacity:0;}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; padding:72px 0 210px; background:
  radial-gradient(900px 480px at 85% -10%, #dbe8f8 0%, transparent 60%),
  radial-gradient(700px 420px at -10% 10%, #e9f4ee 0%, transparent 60%),
  linear-gradient(180deg, #f7faff 0%, #eef4fb 100%);}
.hero-landscape{position:absolute; left:0; right:0; bottom:0; width:100%; height:300px; z-index:0;}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;}
.eyebrow{display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-2); background:var(--brand-soft); padding:6px 12px; border-radius:999px; margin-bottom:18px;}
.eyebrow-light{color:#cfe0f5; background:rgba(255,255,255,.1);}
.hero h1{font-size:clamp(38px, 5.2vw, 60px); font-weight:800; color:var(--ink);}
.hero h1 .accent{background:linear-gradient(90deg, var(--brand-2), var(--c-lifestyle)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lead{font-size:clamp(17px, 1.6vw, 19.5px); color:var(--ink-soft); margin-top:20px; max-width:540px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.hero-ctas.center{justify-content:center;}
.hero-checks{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14.5px; color:var(--ink-soft);}
.hero-checks li{display:flex; align-items:center; gap:8px;}
.hero-checks li::before, .check-list li::before{content:""; flex:none; width:18px; height:18px; border-radius:50%; background:var(--c-lifestyle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;}

/* hero product preview */
.hero-visual{position:relative; margin:0;}
.mock{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden; transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); transition:transform .5s ease;}
.hero-visual:hover .mock{transform:perspective(1400px) rotateY(0) rotateX(0);}
.mock-bar{display:flex; align-items:center; gap:6px; padding:12px 16px; background:#f4f7fb; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--muted);}
.mock-bar i{width:10px; height:10px; border-radius:50%; background:#d5dce6;}
.mock-bar span{margin-left:10px;}
.mock-body{padding:20px;}
.mock-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.mock-stats div{background:var(--tint); border-radius:12px; padding:12px;}
.mock-stats b{display:block; font-size:22px; color:var(--brand); letter-spacing:-.02em;}
.mock-stats div:first-child b{color:var(--c-lifestyle);}
.mock-stats small{font-size:11.5px; color:var(--muted);}
.mock-goals{margin-top:16px; display:grid; gap:9px;}
.mock-goal{display:grid; grid-template-columns:10px 120px 1fr 40px; align-items:center; gap:10px; font-size:13px;}
.mock-goal .dot{width:10px; height:10px; border-radius:50%;}
.mock-goal .g-name{color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.g-bar{height:8px; border-radius:99px; background:#edf1f6; overflow:hidden;}
.g-bar i{display:block; height:100%; border-radius:99px;}
.g-pct{text-align:right; font-weight:600; color:var(--ink);}
.mock-chart{margin-top:18px; border-top:1px solid var(--line); padding-top:14px;}
.mock-chart-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:8px;}
.legend i, .donut-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 4px 0 8px;}
.mock-chart svg{width:100%; height:110px; border-radius:8px; overflow:hidden;}
.float-card{position:absolute; background:#fff; border-radius:14px; box-shadow:var(--shadow-sm); border:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:2px; font-size:13px; max-width:210px; animation:float 6s ease-in-out infinite;}
.float-card b{font-size:14px;}
.float-card small{color:var(--muted); font-size:12px; line-height:1.4;}
.float-a{left:-34px; bottom:-26px;}
.float-b{right:-18px; top:-26px; animation-delay:-3s;}
.pill{align-self:flex-start; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; margin-bottom:4px;}
.pill.ok{background:#e3f4ea; color:var(--c-lifestyle);}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.hero-visual figcaption, .visual-note{position:absolute; right:4px; bottom:-48px; font-size:11.5px; color:var(--muted);}
.visual-note{position:static; display:block; text-align:right; margin-top:10px;}

/* ---- value strip ---- */
.strip{background:var(--brand); color:#fff;}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:30px; padding-bottom:30px;}
.strip-grid div{display:flex; align-items:center; gap:14px;}
.strip-grid b{font-size:30px; font-weight:800; letter-spacing:-.03em; color:#ffd77a;}
.strip-grid span{font-size:14.5px; color:#d4e1f2; line-height:1.4;}

/* ---- sections ---- */
.section{padding:104px 0;}
.section-tint{background:var(--tint);}
.section-dark{background:linear-gradient(160deg, #142a47 0%, #1f3a5f 60%, #24507f 100%); color:#fff;}
.section-head{text-align:center; max-width:760px; margin:0 auto 56px;}
.section-head.left{text-align:left; margin-left:0;}
.section-head h2{font-size:clamp(30px, 3.6vw, 44px); font-weight:800;}
.section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px;}
.section-dark .section-head h2{color:#fff;}

/* why: compare */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.compare-card{border-radius:var(--radius); padding:34px; border:1px solid var(--line);}
.compare-card h3{font-size:21px; margin-bottom:18px;}
.muted-card{background:#fafbfc;}
.muted-card h3{color:var(--muted);}
.brand-card{background:linear-gradient(160deg, #fff 0%, #eef5ff 100%); border-color:#cddcf0; box-shadow:var(--shadow-sm);}
.brand-card h3{color:var(--brand);}
.x-list, .check-list{list-style:none; padding:0; margin:0; display:grid; gap:14px;}
.x-list li, .check-list li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft);}
.check-list li::before{margin-top:4px;}
.x-list li::before{content:"×"; flex:none; width:18px; height:18px; margin-top:4px; border-radius:50%; background:#e7eaef; color:#8a93a3; font-size:14px; line-height:18px; text-align:center; font-weight:700;}

/* benefits */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:transform .2s, box-shadow .2s;}
.feature:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.feature .icon{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--ic) 12%, white); margin-bottom:20px;}
.feature .icon svg{width:24px; height:24px; fill:none; stroke:var(--ic); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.feature h3{font-size:19px; margin-bottom:10px;}
.feature p{color:var(--ink-soft); font-size:15.5px;}

/* goal categories */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.cat{position:relative; border-radius:var(--radius); padding:28px 24px; background:color-mix(in srgb, var(--cc) 7%, white); border:1px solid color-mix(in srgb, var(--cc) 22%, white); overflow:hidden;}
.cat::before{content:""; position:absolute; left:0; top:0; right:0; height:5px; background:var(--cc);}
.cat-tag{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cc);}
.cat h3{font-size:20px; margin:8px 0 10px;}
.cat p{font-size:15px; color:var(--ink-soft);}

/* how it works */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:none;}
.steps li{position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:28px 24px;}
.step-num{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#ffd77a; color:var(--brand); font-weight:800; margin-bottom:18px;}
.steps h3{font-size:19px; color:#fff; margin-bottom:8px;}
.steps p{color:#c8d6ea; font-size:15px;}

/* spotlights */
.spotlight{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
.spotlight + .spotlight{margin-top:110px;}
.spotlight.reverse .spot-copy{order:2;}
.spot-copy h2{font-size:clamp(28px, 3vw, 38px); font-weight:800; margin-bottom:16px;}
.spot-copy p{color:var(--ink-soft); font-size:17.5px; margin-bottom:24px;}
.spot-visual{background:linear-gradient(160deg, #f3f7fd, #e7eff9); border-radius:24px; padding:44px;}
.donut-card, .fan-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; display:flex; align-items:center; gap:28px;}
.donut{width:150px; height:150px; flex:none;}
.donut-legend{display:grid; gap:14px; flex:1; font-size:15px;}
.donut-legend div{display:grid; grid-template-columns:auto 1fr auto; align-items:center;}
.donut-legend i{margin:0 10px 0 0; width:12px; height:12px;}
.donut-legend b{font-size:18px;}
.fan-card{flex-direction:column; align-items:stretch; gap:16px;}
.fan-card svg{width:100%; height:180px;}
.fan-meta{display:flex; justify-content:space-between; align-items:baseline; color:var(--muted); font-size:14.5px;}
.fan-meta b{font-size:28px; color:var(--c-lifestyle);}
.doc-stack{position:relative; height:280px;}
.doc{position:absolute; background:#fff; border-radius:10px; box-shadow:var(--shadow);}
.doc-back{inset:24px 0 0 40px; transform:rotate(4deg); opacity:.7;}
.doc-front{inset:0 40px 24px 0; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; border-top:6px solid var(--brand);}
.doc-front b{font-size:21px; color:var(--brand);}
.doc-front small{color:var(--muted);}
.doc-lines{display:grid; gap:8px; width:70%; margin-top:16px;}
.doc-lines i{display:block; height:7px; border-radius:4px; background:#e9eef5; width:100%; margin:0 auto;}

/* security */
.security{display:grid; grid-template-columns:.9fr 1.4fr; gap:56px; align-items:center;}
.security .section-head{margin-bottom:0;}
.sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.sec{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;}
.sec h3{font-size:17px; margin-bottom:8px; color:var(--brand);}
.sec p{font-size:14.5px; color:var(--ink-soft);}

/* faq */
.faq{display:grid; gap:12px;}
.faq details{border:1px solid var(--line); border-radius:14px; background:#fff; transition:box-shadow .2s;}
.faq details[open]{box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer; list-style:none; padding:20px 56px 20px 24px; font-weight:600; font-size:17px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-size:20px; font-weight:500; transition:transform .2s;}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details p{padding:0 24px 22px; color:var(--ink-soft);}

/* final cta */
.cta{padding:0 0 104px;}
.cta-inner{background:radial-gradient(600px 300px at 90% 0%, rgba(255,215,122,.22), transparent 60%), linear-gradient(135deg, #1f3a5f 0%, #2f5d92 100%); border-radius:28px; padding:72px 40px; text-align:center; color:#fff; box-shadow:var(--shadow);}
.cta h2{font-size:clamp(28px, 3.4vw, 42px); font-weight:800; max-width:760px; margin:0 auto;}
.cta p{color:#d4e1f2; font-size:18px; margin-top:14px;}

/* footer */
.footer{border-top:1px solid var(--line); padding:48px 0 32px; background:#fbfcfe;}
.footer-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start;}
.tagline{color:var(--muted); font-size:14px; margin-top:8px;}
.footer-links{display:flex; flex-wrap:wrap; gap:12px 26px;}
.footer-links a{text-decoration:none; color:var(--ink-soft); font-size:15px;}
.footer-links a:hover{color:var(--brand);}
.footer-legal{margin-top:36px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:8px; font-size:13px; color:var(--muted);}

/* reveal on scroll (only when JS has opted in, so content never stays hidden) */
.js-reveal .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.js-reveal .reveal.in{opacity:1; transform:none;}

/* ---- responsive ---- */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; gap:64px;}
  .hero-visual{max-width:560px; margin:0 auto; width:100%;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid, .steps{grid-template-columns:repeat(2,1fr);}
  .strip-grid{grid-template-columns:repeat(2,1fr);}
  .spotlight{gap:44px;}
  .security{grid-template-columns:1fr;}
}
@media (max-width: 860px){
  .nav-toggle{display:flex;}
  .nav-links, .nav-actions{display:none;}
  .nav.open .nav-inner{flex-wrap:wrap; height:auto; padding-top:14px; padding-bottom:18px;}
  .nav.open .nav-links{display:flex; flex-direction:column; gap:0; width:100%; order:3; margin:8px 0 0;}
  .nav.open .nav-links a{padding:12px 4px; border-bottom:1px solid var(--line);}
  .nav.open .nav-actions{display:flex; width:100%; order:4; margin:14px 0 0;}
  .nav.open .nav-actions .btn{flex:1;}
  .nav.open{background:#fff;}
  .spotlight, .spotlight.reverse{grid-template-columns:1fr;}
  .spotlight.reverse .spot-copy{order:0;}
  .compare{grid-template-columns:1fr;}
  .sec-grid{grid-template-columns:1fr;}
}
@media (max-width: 600px){
  .container{padding:0 16px;}
  .hero{padding:44px 0 170px;}
  .hero-landscape{height:200px;}
  .hero-ctas .btn{flex:1 1 100%;}
  .mock{transform:none;}
  .mock-goal{grid-template-columns:10px 96px 1fr 36px;}
  .float-a{left:-6px; bottom:-30px;}
  .float-b{display:none;}
  .hero-visual figcaption{position:static; text-align:right; margin-top:40px;}
  .card-grid, .cat-grid, .steps, .strip-grid{grid-template-columns:1fr;}
  .section{padding:72px 0;}
  .compare-card, .feature{padding:24px;}
  .spot-visual{padding:22px;}
  .donut-card{flex-direction:column;}
  .doc-stack{height:240px;}
  .cta{padding-bottom:72px;}
  .cta-inner{padding:52px 22px; border-radius:20px;}
}