/* Design tokens */
:root{
  --bg: #ffffff;
  --bg-elev: #f7faf9;
  --text: #111827;
  --muted: #6b7280;
  --brand-1: #34a853; /* primary green */
  --brand-2: #66d17a; /* mid green */
  --brand-3: #b8f1c6; /* light mint */
  --card: #ffffff;
  --ring: rgba(52,168,83,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.10);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin:0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, rgba(52,168,83,.10), transparent 60%),
              radial-gradient(900px 600px at -10% 10%, rgba(184,241,198,.18), transparent 60%),
              var(--bg);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

/* Accessibility */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{ position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#000;color:#fff;border-radius:.5rem;z-index:1000 }

.container{ width: min(1120px, 92%); margin:0 auto; }

/* Nav */
.navbar{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(8px);
  transition: background .3s ease, border-color .3s ease;
}
.navbar.scrolled{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.08) }
.nav-container{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0 }
.logo{ color:#0f172a; text-decoration:none; font-weight:700; letter-spacing:.5px }
.nav-actions{ display:flex; align-items:center; gap:1rem }

/* Primary nav links */
.nav-links{ display:flex; align-items:center; gap:1rem; margin:0; padding:0; list-style:none }
.nav-links a{ color:#0f172a; text-decoration:none; font-weight:600; font-size:14px }
.nav-links a:hover{ color: var(--brand-1) }

/* Mobile toggle */
.nav-toggle{ display:none; width:40px; height:40px; border:0; background:transparent; border-radius:8px; align-items:center; justify-content:center; cursor:pointer }
.nav-toggle .bar{ width:20px; height:2px; background:#0f172a; border-radius:2px; display:block; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle .bar + .bar{ margin-top:4px }
body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(6px) rotate(45deg) }
body.nav-open .nav-toggle .bar:nth-child(2){ opacity: 0 }
body.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; text-decoration:none; font-weight:600; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; will-change: transform }
.btn:active{ transform: translateY(1px) }
.btn-solid{ background: linear-gradient(135deg, var(--brand-1), var(--brand-3)); color:#0b0b0f; box-shadow: 0 8px 20px rgba(52,168,83,.28) }
.btn-solid:hover{ box-shadow: 0 10px 26px rgba(52,168,83,.36) }
.btn-outline{ color: #0f172a; border:1px solid rgba(0,0,0,.10); background: #fff }
.btn-outline:hover{ background: #f5f7fa }
.btn-ghost{ color: #0f172a; border:1px solid transparent; background: transparent }
.btn-ghost:hover{ background: #f5f7fa; border-color: rgba(0,0,0,.06) }
.btn-cta{ background: linear-gradient(135deg, var(--brand-2), var(--brand-3)); color:#091012; box-shadow: 0 10px 28px rgba(102,209,122,.28) }
.btn-cta:hover{ box-shadow: 0 12px 34px rgba(102,209,122,.38) }

/* Hero */
.hero{ position: relative; padding: clamp(32px, 6vw, 96px) 0; overflow: hidden }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; gap: min(5vw, 40px) }
.hero-copy .sub{ color: var(--muted); margin: .8rem 0 1.2rem }
.store-buttons{ display:flex; gap:.6rem; flex-wrap: wrap }
.gradient-text{ line-height: 1.05; letter-spacing: -0.02em; font-size: clamp(34px, 6.2vw, 60px); background: linear-gradient(90deg, #0f172a, #334155 60%, #0f172a); -webkit-background-clip:text; background-clip:text; color: transparent }

/* Marquee */
.hero-marquee{ margin-top: 1rem; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.hero-marquee .track{ display:inline-flex; gap:2rem; white-space: nowrap; color: #64748b; opacity:.9; animation: marquee 20s linear infinite }
.hero-marquee .track span{ display:inline-block }
@keyframes marquee{ from{ transform: translateX(0)} to{ transform: translateX(-50%)} }

/* Phone mock */
.hero-visual{ position: relative; min-height: 440px }
.phone{ width: min(85vw, 320px); aspect-ratio: 290 / 580; height: auto; margin-inline: auto; background: #101014; border-radius: 36px; border:1px solid rgba(0,0,0,.06); box-shadow: 0 8px 24px rgba(0,0,0,.10); position: relative; overflow: hidden }
.phone-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width: 40%; height: 24px; background:#111; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px }
.phone-screen{ position:absolute; inset: 10px; border-radius: 28px; overflow:hidden; background: #0b0b0f; border:1px solid rgba(0,0,0,.06) }
.screen-gradient{ position:absolute; inset:-20% -10% -10% -20%; background: radial-gradient(800px 500px at 20% 10%, rgba(52,168,83,.35), transparent 55%), radial-gradient(600px 450px at 90% 90%, rgba(102,209,122,.35), transparent 50%), radial-gradient(400px 260px at 10% 80%, rgba(184,241,198,.35), transparent 50%); filter: blur(8px); z-index: 0 }
.phone-screen.has-shot .screen-gradient{ display: none }
.app-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; z-index: 1; background:#0b0b0f }
.floating-icons{ position:absolute; inset: 0; display:block; pointer-events:none }
.floating-icons span,
.floating-icons svg{ position:absolute; animation: float 6s ease-in-out calc(var(--i) * .6s) infinite; z-index: 2 }
.floating-icons span{ font-size: 40px; text-shadow: 0 8px 24px rgba(0,0,0,.5) }
.floating-icons svg{ width: 48px; height: 48px; color: var(--c, #34a853); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)) }
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }

/* Blobs */
.blob{ position:absolute; filter: blur(24px); opacity:.4; pointer-events:none }
.blob.b1{ width: 420px; height: 420px; right: -120px; bottom: -80px; background: radial-gradient(closest-side, var(--brand-1), transparent 70%); animation: pulse 10s ease-in-out infinite }
.blob.b2{ width: 360px; height: 360px; left: -120px; top: -100px; background: radial-gradient(closest-side, var(--brand-2), transparent 70%); animation: pulse 12s ease-in-out 1.4s infinite }
@keyframes pulse{ 0%,100%{ transform: scale(1)} 50%{ transform: scale(1.06)} }

/* Sections */
section{ content-visibility: auto; contain-intrinsic-size: 1px 600px; }
.features{ background: linear-gradient(180deg, transparent, rgba(52,168,83,.04)); padding: 72px 0; text-align:center }
.features h2{ margin:0 0 1.2rem }
.feature-list{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 20px }
.feature{ background: var(--card); border:1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 18px 16px; text-align:left; box-shadow: 0 10px 20px rgba(0,0,0,.06) }
.feature h3{ margin: 0 0 .35rem }
.feature p{ margin: 0; color: var(--muted) }

/* Trusted logos */
.trusted{ padding: 28px 0 0 }
.trusted-title{ color: #64748b; font-weight: 600; font-size: 14px; text-align:center; margin: 0 0 8px }
.logo-row{ display:flex; justify-content:center; gap: 12px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none }
.logo-badge{ font-weight:600; letter-spacing:.2px; font-size: 13px; color:#475569; background:#f1f5f9; border:1px solid #e2e8f0; padding:8px 12px; border-radius: 999px }

/* How it works */
.how{ padding: 56px 0 }
.steps{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 16px }
.step{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 18px 16px; box-shadow: 0 8px 20px rgba(0,0,0,.05) }
.step h3{ margin: 8px 0 6px; font-size: 18px }
.step p{ margin: 0; color: var(--muted) }
.icon-circle{ width: 44px; height: 44px; border-radius: 999px; display:grid; place-items:center; background: color-mix(in hsl, var(--brand-3) 60%, white); border: 1px solid rgba(0,0,0,.06) }
.icon-circle svg{ width: 22px; height: 22px; stroke: var(--brand-1); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* Testimonials */
.testimonials{ padding: 56px 0; background: linear-gradient(180deg, rgba(52,168,83,.04), transparent) }
.quotes{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 16px }
.quote{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 18px 16px; box-shadow: 0 8px 20px rgba(0,0,0,.05) }
.quote blockquote{ margin:0 0 8px; color:#0f172a }
.quote figcaption{ color:#64748b; font-size: 14px }

/* FAQ */
.faq{ padding: 56px 0 }
.faq-list{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 16px }
.faq details{ border:1px solid rgba(0,0,0,.08); border-radius: 12px; background:#fff; box-shadow: 0 6px 14px rgba(0,0,0,.04) }
.faq summary{ cursor: pointer; list-style: none; padding: 14px 14px; font-weight:600; color:#0f172a; display:flex; align-items:center; justify-content:space-between }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"\25BE"; color:#64748b; transition: transform .2s ease }
.faq details[open] summary::after{ transform: rotate(180deg) }
.faq .content{ padding: 0 14px 14px; color: var(--muted) }
.faq-cta{ margin-top: 14px; text-align:center }

.cta{ padding: 84px 0; text-align:center; background: radial-gradient(600px 400px at 50% -10%, rgba(52,168,83,.15), transparent 60%) }
.cta .sub{ color: var(--muted); margin:.4rem 0 1.2rem }

/* Footer */
.footer{ padding: 24px 0; background: #f5f7fa; border-top: 1px solid rgba(0,0,0,.08) }
.footer-grid{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap }
.footer a{ color: var(--muted); text-decoration:none }
.footer a:hover{ color: #0f172a }

/* Reveal animations */
[data-animate]{ opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease }
[data-animate].is-visible{ opacity:1; transform:none }
[data-animate="rise"]{ transform: translateY(16px) }
[data-animate="fade-in"]{ transform: none; opacity: 0 }

/* Responsive */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; text-align:center }
  .hero-copy{ order: 2 }
  .hero-visual{ order: 1; min-height: 0 }
  .feature-list{ grid-template-columns: 1fr 1fr }
  .steps{ grid-template-columns: 1fr 1fr }
  .quotes{ grid-template-columns: 1fr 1fr }
  .faq-list{ grid-template-columns: 1fr 1fr }
  .nav-toggle{ display:inline-flex }
  .nav-links{ position: fixed; left: 12px; right: 12px; top: 64px; display:none; flex-direction: column; align-items: stretch; gap: 6px; background: #fff; border:1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.12); z-index: 200 }
  .nav-links a{ padding: 10px 10px; border-radius: 8px }
  .nav-links a:hover{ background: #f5f7fa }
  body.nav-open .nav-links{ display:flex }
  .nav-cta{ display:none }
  body.nav-open .nav-cta{ display:inline-flex; position: fixed; left:12px; right:12px; bottom: 16px; justify-content:center; z-index: 200 }
  body.nav-open::after{ content:""; position: fixed; inset: 0; background: rgba(0,0,0,.3); backdrop-filter: blur(2px); z-index: 150 }
  .desk-only{ display:none !important }
}
@media (max-width: 640px){
  .feature-list{ grid-template-columns: 1fr }
  .phone{ transform: none; width: min(88vw, 320px) }
  .steps{ grid-template-columns: 1fr }
  .quotes{ grid-template-columns: 1fr }
  .faq-list{ grid-template-columns: 1fr }
  .hero{ padding: 28px 0 }
  .hero-marquee{ display:none }
  .store-buttons{ flex-direction: column; gap: 8px }
  .store-buttons .btn{ width: 100%; justify-content: center }
  .floating-icons svg{ width: 36px; height: 36px }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}