/* ============================================================
   Bud — website styles
   ============================================================ */
:root{
  --brand:#2EC4A5; --brand-deep:#1F9B82; --brand-ink:#06231d;
  --ink:#15140F; --ink-2:#5C574F; --ink-3:#9A948A;
  --cream:#F7F5EF; --cream-2:#EFEBE1; --card:#FFFFFF;
  --line:rgba(20,18,15,.09); --line-2:rgba(20,18,15,.06);
  --serif:"DM Serif Display",Georgia,serif;
  --sans:"DM Sans",-apple-system,system-ui,sans-serif;
  --r:22px; --r-lg:30px;
  --shadow:0 1px 2px rgba(20,18,15,.04), 0 10px 30px rgba(20,18,15,.06);
  --shadow-lg:0 30px 70px rgba(20,18,15,.16), 0 8px 24px rgba(20,18,15,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1160px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }
section{ position:relative; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(247,245,239,.82); backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%); border-color:var(--line-2); }
.nav-in{ display:flex; align-items:center; gap:20px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; font-size:20px; letter-spacing:-.02em; }
.brand img{ width:34px; height:34px; border-radius:9px; box-shadow:0 3px 8px rgba(31,155,130,.28); }
.nav-links{ display:flex; gap:28px; margin-left:12px; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--ink-2); transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ margin-left:auto; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans);
  font-weight:600; font-size:15px; border:none; cursor:pointer; border-radius:999px; padding:12px 22px;
  transition:transform .18s var(--ease), box-shadow .2s, background .2s; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--brand); color:var(--brand-ink); box-shadow:0 6px 16px rgba(46,196,165,.34); }
.btn-primary:hover{ background:var(--brand-deep); box-shadow:0 8px 22px rgba(46,196,165,.42); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--ink-3); }

/* ---------- store badges ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:12px; }
.badge{ display:inline-flex; align-items:center; gap:11px; background:#101010; color:#fff;
  border-radius:14px; padding:11px 18px; transition:transform .18s var(--ease), opacity .2s; }
.badge:hover{ transform:translateY(-2px); }
.badge svg{ flex-shrink:0; }
.badge .b-top{ display:block; font-size:10.5px; letter-spacing:.02em; opacity:.82; line-height:1.1; }
.badge .b-big{ display:block; font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.2; margin-top:2px; }
.badge.soon{ background:#1c1b19; opacity:.62; cursor:default; }
.badge.soon:hover{ transform:none; }
.badge.soon .b-top::after{ content:" · coming soon"; }

/* ---------- hero ---------- */
.hero{ overflow:hidden; padding:56px 0 40px; }
.hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--brand-deep); background:color-mix(in srgb,var(--brand) 13%,transparent);
  padding:7px 14px; border-radius:999px; letter-spacing:.01em; }
.hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(44px,6.4vw,78px); line-height:1.02;
  letter-spacing:-.02em; margin:20px 0 0; }
.hero h1 .hl{ color:var(--brand); }
.hero p.lead{ font-size:clamp(17px,2vw,20px); color:var(--ink-2); margin:22px 0 0; max-width:30em; }
.hero-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:30px; }
.rating{ display:flex; align-items:center; gap:10px; margin-top:24px; color:var(--ink-2); font-size:14px; }
.stars{ color:#F4A829; letter-spacing:2px; font-size:15px; }

/* hero phones */
.hero-art{ position:relative; height:600px; }
.glow{ position:absolute; inset:-10% -20% 0 0; z-index:0; filter:blur(40px); opacity:.55;
  background:radial-gradient(60% 60% at 60% 30%, rgba(46,196,165,.55), transparent 70%),
             radial-gradient(50% 50% at 30% 70%, rgba(244,168,41,.28), transparent 70%); }
.phone{ position:absolute; border-radius:44px; box-shadow:var(--shadow-lg); }
.phone.front{ width:300px; right:6%; top:14px; z-index:2; transform:rotate(2deg); }
.phone.back{ width:250px; left:2%; top:96px; z-index:1; transform:rotate(-6deg); opacity:.96; }

/* ---------- trust strip ---------- */
.trust{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--cream-2); }
.trust-in{ display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:center; padding:20px 24px; }
.trust span{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink-2); }
.trust span svg{ color:var(--brand-deep); }

/* ---------- section head ---------- */
.section{ padding:100px 0; }
.section.tight{ padding:76px 0; }
.head{ max-width:640px; }
.head.center{ margin:0 auto; text-align:center; }
.kicker{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-deep); }
.head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.4vw,50px); line-height:1.06;
  letter-spacing:-.02em; margin:14px 0 0; }
.head p{ font-size:17.5px; color:var(--ink-2); margin:16px 0 0; }

/* ---------- bento features ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:48px; }
.card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card.c-3{ grid-column:span 3; } .card.c-2{ grid-column:span 2; }
.f-ico{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand-deep); margin-bottom:18px; }
.card h3{ font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0; }
.card p{ font-size:15px; color:var(--ink-2); margin:9px 0 0; }

/* ---------- spotlight (alternating) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split.rev .split-media{ order:-1; }
.split-media{ position:relative; display:flex; justify-content:center; }
.split-media .glow2{ position:absolute; inset:8% 12%; z-index:0; filter:blur(46px); opacity:.5;
  background:radial-gradient(circle at 50% 40%, rgba(46,196,165,.5), transparent 68%); }
.split-media img.phone-s{ position:relative; z-index:1; width:300px; border-radius:44px; box-shadow:var(--shadow-lg); }
.ul{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:15px; }
.ul li{ display:flex; gap:13px; font-size:16px; color:var(--ink-2); }
.ul li b{ color:var(--ink); font-weight:600; }
.tick{ flex-shrink:0; width:24px; height:24px; border-radius:999px; background:color-mix(in srgb,var(--brand) 16%,transparent);
  color:var(--brand-deep); display:flex; align-items:center; justify-content:center; margin-top:1px; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; counter-reset:s; }
.step{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow); }
.step .n{ font-family:var(--serif); font-size:30px; color:var(--brand); }
.step h3{ font-size:19px; margin:12px 0 0; }
.step p{ font-size:15px; color:var(--ink-2); margin:8px 0 0; }

/* ---------- faq ---------- */
.faq{ max-width:780px; margin:44px auto 0; }
.faq details{ border-bottom:1px solid var(--line); padding:6px 0; }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:20px 4px; font-size:17.5px; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex-shrink:0; width:26px; height:26px; color:var(--brand-deep); transition:transform .3s var(--ease); }
.faq details[open] summary .pm{ transform:rotate(45deg); }
.faq p{ margin:0 4px 20px; color:var(--ink-2); font-size:15.5px; max-width:64ch; }

/* ---------- CTA band ---------- */
.cta{ background:linear-gradient(160deg,#36D6B4,#2EC4A5 55%,#1C9079); color:#fff; border-radius:36px;
  padding:64px 48px; text-align:center; overflow:hidden; position:relative; }
.cta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,46px); line-height:1.06; margin:0; }
.cta p{ font-size:18px; opacity:.92; margin:14px auto 0; max-width:34em; }
.cta .badges{ justify-content:center; margin-top:30px; }
.cta .badge{ background:#0B3B30; }
.cta .badge.soon{ background:rgba(11,59,48,.55); }

/* ---------- footer ---------- */
.footer{ background:#14130F; color:#C9C4B9; padding:64px 0 30px; margin-top:0; }
.footer a{ color:#C9C4B9; transition:color .2s; }
.footer a:hover{ color:#fff; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.footer .brand{ color:#fff; }
.foot-desc{ font-size:14.5px; color:#8B8579; margin:16px 0 0; max-width:30ch; }
.foot-col h4{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#7C7669; margin:0 0 14px; }
.foot-col a{ display:block; font-size:15px; margin-bottom:11px; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(255,255,255,.09); margin-top:44px; padding-top:22px; font-size:13.5px; color:#7C7669; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- legal / prose ---------- */
.legal{ padding:56px 0 90px; }
.legal .wrap{ max-width:820px; }
.legal .back{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-weight:500; font-size:14.5px; }
.legal h1{ font-family:var(--serif); font-weight:400; font-size:clamp(36px,5vw,54px); line-height:1.05; margin:22px 0 6px; }
.legal .updated{ color:var(--ink-3); font-size:14px; }
.legal .intro{ font-size:18px; color:var(--ink-2); margin:20px 0 0; }
.legal .toc{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:20px 24px; margin:32px 0; box-shadow:var(--shadow); }
.legal .toc ol{ margin:8px 0 0; padding-left:20px; columns:2; gap:24px; }
.legal .toc a{ color:var(--ink-2); font-size:14.5px; line-height:2; }
.legal .toc a:hover{ color:var(--brand-deep); }
.legal h2{ font-size:24px; font-weight:700; letter-spacing:-.01em; margin:44px 0 0; scroll-margin-top:90px; }
.legal h2 .num{ color:var(--brand); margin-right:8px; }
.legal h3{ font-size:17px; margin:24px 0 0; }
.legal p, .legal li{ font-size:16px; color:var(--ink-2); }
.legal p{ margin:14px 0 0; }
.legal ul{ margin:12px 0 0; padding-left:22px; }
.legal li{ margin:8px 0; }
.legal a.inline{ color:var(--brand-deep); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.callout{ background:color-mix(in srgb,var(--brand) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  border-radius:var(--r); padding:16px 20px; margin:22px 0 0; font-size:15px; color:var(--ink); }
.contact-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:22px 24px; margin:26px 0 0; box-shadow:var(--shadow); }

/* ---------- support ---------- */
.sup-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.sup-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow); }
.sup-card .f-ico{ margin-bottom:14px; }
.sup-card h3{ font-size:18px; margin:0; }
.sup-card p{ font-size:15px; color:var(--ink-2); margin:8px 0 0; }
.sup-card a.inline{ color:var(--brand-deep); font-weight:600; font-size:15px; display:inline-block; margin-top:12px; }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-in{ grid-template-columns:1fr; gap:28px; }
  .hero{ padding:36px 0 30px; }
  .hero-art{ height:460px; margin-top:8px; }
  .phone.front{ width:250px; right:12%; top:8px; } .phone.back{ width:205px; left:6%; top:80px; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split.rev .split-media{ order:0; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .card.c-3,.card.c-2{ grid-column:span 2; }
  .steps{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .sup-grid{ grid-template-columns:1fr; }
  .legal .toc ol{ columns:1; }
}
@media (max-width:620px){
  .nav-links{ display:none; }
  .section{ padding:72px 0; }
  .bento{ grid-template-columns:1fr; } .card.c-3,.card.c-2{ grid-column:span 1; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .cta{ padding:48px 26px; border-radius:26px; }
  .hero-art{ height:430px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } }