:root{
  --green:#0E5C3A;
  --green-2:#0a4a2e;
  --green-soft:#e8f3ec;
  --blue:#0B6FA3;
  --blue-2:#0a577f;
  --amber:#F5B400;
  --amber-soft:#FFE9A8;
  --cream:#FBF8F1;
  --cream-2:#F4EEDF;
  --ink:#0F1B17;
  --ink-2:#3a4a44;
  --line: rgba(15,27,23,.08);
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Manrope', system-ui, sans-serif;
  background:var(--cream);
  color:var(--ink);
}
.serif{ font-family:'Instrument Serif', serif; font-weight:400; font-style:italic; letter-spacing:-0.01em; }
.display{ font-weight:700; letter-spacing:-0.035em; line-height:0.98; }
.h-section{ font-weight:700; letter-spacing:-0.025em; line-height:1.02; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; }

.bg-sun{
  background:
    radial-gradient(900px 600px at 85% -10%, #FFE9A8 0%, rgba(255,233,168,0) 60%),
    radial-gradient(700px 500px at 0% 110%, #d6ecdd 0%, rgba(214,236,221,0) 65%),
    linear-gradient(180deg, #FBF8F1 0%, #F4EEDF 100%);
}
.bg-forest{
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(245,180,0,.12) 0%, rgba(245,180,0,0) 60%),
    linear-gradient(180deg, #0E5C3A 0%, #0a4a2e 100%);
}
.bg-cream-2{ background: linear-gradient(180deg,#F4EEDF,#FBF8F1); }

.glass{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 50px -22px rgba(14,92,58,0.22), 0 6px 14px -6px rgba(11,111,163,0.12);
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-weight:600; font-size:15px; letter-spacing:-0.005em;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--green); color:#fff; box-shadow: 0 10px 24px -10px rgba(14,92,58,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover{ background:var(--green-2); transform:translateY(-1px); box-shadow: 0 14px 30px -10px rgba(14,92,58,.6); }
.btn-wa{ background:#25D366; color:#0a3a1f; box-shadow: 0 10px 24px -10px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-wa:hover{ background:#1fb858; transform:translateY(-1px); }
.btn-ghost{ background:rgba(255,255,255,0.7); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ background:#fff; }
.btn-amber{ background:var(--amber); color:#3b2a00; box-shadow: 0 10px 24px -10px rgba(245,180,0,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-amber:hover{ background:#e7a900; transform:translateY(-1px); }

.sun-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 8px; border-radius:999px;
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  font-size:13px; font-weight:500;
}
.sun-dot{
  width:18px; height:18px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #FFD24A 0%, #F5B400 60%, #d99a00 100%);
  box-shadow: 0 0 0 3px rgba(245,180,0,.18);
}

.num-mark{
  width:38px; height:38px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px;
  background:#fff; color:var(--green);
  border:1px solid var(--line);
  box-shadow: 0 6px 14px -6px rgba(14,92,58,.25);
}

.frame{ border-radius:28px; overflow:hidden; position:relative; box-shadow: 0 30px 60px -25px rgba(14,92,58,.35), 0 8px 20px -8px rgba(11,111,163,.18); }
.frame img{ display:block; width:100%; height:100%; object-fit:cover; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.marquee-track{ animation: marquee 40s linear infinite; }

.wa-fab{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px 12px 12px; border-radius:999px;
  background:#25D366; color:#0a3a1f; font-weight:700;
  box-shadow: 0 18px 40px -10px rgba(37,211,102,.55), 0 4px 12px -4px rgba(0,0,0,.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-fab:hover{ transform:translateY(-2px) scale(1.02); }
.wa-pulse{ position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  80%{ box-shadow:0 0 0 22px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

.rays{
  position:absolute; inset:0;
  background:
    conic-gradient(from 200deg at 100% 0%,
      rgba(245,180,0,0) 0deg, rgba(245,180,0,.10) 18deg,
      rgba(245,180,0,0) 36deg, rgba(245,180,0,.08) 60deg,
      rgba(245,180,0,0) 80deg);
  pointer-events:none;
}

.field{
  width:100%; padding:13px 14px; border-radius:14px;
  background:#fff; border:1px solid var(--line);
  font-size:15px; font-family:inherit; color:var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus{ outline:none; border-color:var(--green); box-shadow: 0 0 0 4px rgba(14,92,58,.12); }
label.lbl{ font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; display:block; }

.bill-card{ background: linear-gradient(180deg, #fff 0%, #fbf6e6 100%); border:1px solid #f0e2b3; border-radius:18px; }
.pin{ width:10px; height:10px; border-radius:999px; background:var(--amber); box-shadow:0 0 0 4px rgba(245,180,0,.25); display:inline-block; }
.qmark{ font-family:'Instrument Serif', serif; font-style:italic; color:var(--amber); font-size:80px; line-height:0.6; }

/* === Header === */
.site-header{ position:sticky; top:0; z-index:40; }
.site-header .bar{ background:rgba(251,248,241,.9); backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,0,0,.05); }
.nav-link{ font-size:14px; font-weight:500; color:var(--ink-2); transition:color .2s; }
.nav-link:hover, .nav-link.active{ color:var(--ink); }

/* Dropdown */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-4px);
  background:#fff; border-radius:18px; padding:6px 14px 14px;
  box-shadow: 0 20px 50px -20px rgba(14,92,58,.25), 0 6px 16px -6px rgba(0,0,0,.08);
  border:1px solid var(--line);
  width:340px; opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s;
  padding-top:20px;
}
.dropdown::before{
  content:''; position:absolute; top:-12px; left:0; right:0; height:12px;
}
.has-dropdown:hover .dropdown{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dd-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; transition:background .2s; }
.dd-item:hover{ background:var(--cream); }

/* Mobile menu */
.mobile-menu{ display:none; }
.mobile-menu.open{ display:block; }

/* Page hero (smaller than landing hero) */
.page-hero{ padding-top:64px; padding-bottom:64px; position:relative; overflow:hidden; }
@media (min-width:1024px){ .page-hero{ padding-top:90px; padding-bottom:90px; } }