:root {
  --forest: #123d2a;
  --forest-2: #1d4f34;
  --forest-3: #2d5f3e;
  --cream: #fff7df;
  --lime: #c7f174;
  --lime-2: #b3df63;
  --mint: #a8d989;
  --gold: #f5c965;
  --gold-deep: #bf8a25;
  --blue: #2e6d99;
  --text: #173c29;
  --muted: #71806d;
  --shadow: 0 22px 55px rgba(13, 56, 37, 0.17);
  --button-shadow: 0 10px 0 #4c7e2b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: #f7f4e7;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: min(1180px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 22px;
  background: rgba(18,61,42,.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(17,61,42,.18);
}
.brand {
  text-decoration: none;
  font: 800 31px/1 Outfit, system-ui, sans-serif;
  letter-spacing: -1.5px;
  color: var(--cream);
}
.brand strong { color: #b9ed6e; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { text-decoration: none; color: rgba(255,255,255,.78); font-size: 14px; font-weight: 700; }
.nav-links a:hover { color: #fff; }
.small-pill {
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 999px;
  color: #fff;
  background: #2f6d99;
  font-weight: 700;
  font-size: 13px;
}

.section-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero {
  min-height: 760px;
  padding: 105px 0 90px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 58px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 800;
  color: #65804b;
}
.eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 5px; background: var(--gold); }
h1, h2, h3 { font-family: "Baloo 2", sans-serif; margin: 0; }
h1 { font-size: clamp(54px, 7vw, 92px); line-height: .9; letter-spacing: -3px; margin-top: 18px; }
h1 span { color: #69a537; }
.hero-lead { max-width: 610px; font-size: 18px; line-height: 1.65; color: #65705f; margin: 28px 0 28px; }
.store-row { display: flex; flex-wrap: wrap; gap: 14px; }
.store-button {
  min-width: 212px;
  min-height: 68px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  border-radius: 18px;
  color: white;
  background: var(--forest);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 0 #0d2d20;
  transition: transform .18s ease, box-shadow .18s ease;
}
.store-button:hover { transform: translateY(3px); box-shadow: 0 5px 0 #0d2d20; }
.store-button small { display:block; font-size:10px; letter-spacing:.05em; }
.store-button b { font-size: 20px; line-height: 1.1; }
.store-icon { font: 30px/1 Arial; }
.play-triangle {
  width: 0; height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 25px solid #fff;
}
.store-note { margin: 17px 0 0; font-size: 12px; color: #83907e; }
.hero-phone-wrap { position: relative; min-height: 620px; display: grid; place-items: center; }
.hero-glow { position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,#c9ef77 0,#c9ef7740 42%,transparent 70%); filter: blur(4px); }
.phone-card {
  position: relative;
  width: 310px;
  border-radius: 44px;
  overflow: hidden;
  border: 10px solid #163e2c;
  box-shadow: 0 30px 70px rgba(26,75,52,.24);
  transform: rotate(3.5deg);
  animation: floatPhone 5s ease-in-out infinite;
}
.phone-card::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.18); border-radius:34px; pointer-events:none; }
@keyframes floatPhone { 0%,100%{transform:rotate(3.5deg) translateY(0)} 50%{transform:rotate(1.5deg) translateY(-14px)} }

.quick-points {
  background: var(--forest);
  color: white;
  border-radius: 34px;
  padding: 30px 46px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  box-shadow: 0 15px 0 #0f3324;
}
.quick-points div { display:flex; align-items:baseline; gap:8px; justify-content:center; border-right: 1px solid rgba(255,255,255,.14); }
.quick-points div:last-child { border-right:0; }
.quick-points strong { font: 800 32px/1 "Baloo 2"; color: var(--lime); }
.quick-points span { color: rgba(255,255,255,.7); font-size:13px; font-weight:600; }

.split-section { padding: 130px 0; display:grid; grid-template-columns: 1fr .9fr; gap: 90px; align-items:center; }
h2 { font-size: clamp(42px, 5vw, 68px); line-height: .95; letter-spacing: -2px; margin: 16px 0 24px; }
.section-copy > p, .showcase-copy > p { color:#6c7868; line-height:1.7; font-size:17px; }
.step-list { display:grid; gap:16px; margin-top:32px; }
.step-list article { display:grid; grid-template-columns:58px 1fr; gap:18px; align-items:start; padding:18px; border-radius:22px; background:#fff; box-shadow:0 8px 30px rgba(31,77,52,.07); }
.step-list article > span { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:var(--lime); box-shadow:0 5px 0 #72a33f; font-weight:900; }
.step-list h3 { font-size:22px; }
.step-list p { margin:4px 0 0; color:#7a8675; line-height:1.5; font-size:14px; }
.visual-panel { max-width: 430px; justify-self:center; padding:18px; border-radius:45px; background:#d7efac; box-shadow:var(--shadow); transform:rotate(-2deg); }
.visual-panel img { border-radius:30px; }

.features-section { padding:120px 0; background:var(--forest); color:white; position:relative; overflow:hidden; }
.features-section::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 10%,#2c68484d,transparent 35%), radial-gradient(circle at 90% 70%,#9fd35a22,transparent 30%); }
.center-heading { position:relative; text-align:center; max-width:760px; margin:0 auto 55px; }
.center-heading .eyebrow { color:#a9ca88; }
.center-heading h2 { color:white; }
.feature-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { padding:28px; min-height:245px; border-radius:28px; background:#f9f3df; color:var(--text); box-shadow:0 8px 0 #dcd0ae; }
.feature-card h3 { font-size:28px; margin:20px 0 8px; }
.feature-card p { color:#6d7969; line-height:1.65; margin:0; font-size:14px; }
.feature-icon { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:#c7f174; box-shadow:0 5px 0 #7eaa42; font:bold 25px/1 "Baloo 2"; }
.coin-icon { border-radius:50%; width:54px; height:54px; background:var(--gold); box-shadow:inset 0 0 0 8px #f9d981,0 5px 0 #c28c31; }
.water-icon { background:#98cfe3; box-shadow:0 5px 0 #5e99ad; }
.heart-icon { background:#efb8c6; box-shadow:0 5px 0 #c67f94; }

.showcase-section { padding:120px 0; display:grid; grid-template-columns: .9fr 1.1fr; gap:80px; align-items:center; }
.showcase-section.reverse { grid-template-columns:1.1fr .9fr; }
.showcase-section.reverse .showcase-copy { order:2; }
.showcase-section.reverse .showcase-image { order:1; }
.showcase-image { max-width:410px; justify-self:center; padding:16px; border-radius:42px; background:#dce9c7; box-shadow:var(--shadow); }
.showcase-image img { border-radius:28px; }

.screens-section { padding:120px 0; background:#e7f0cf; overflow:hidden; }
.screens-section .center-heading h2 { color:var(--text); }
.slider-wrap { position:relative; display:flex; align-items:center; gap:18px; }
.slider-viewport { overflow:hidden; width:100%; padding:25px 0 35px; outline:none; }
.slider-track { display:flex; gap:24px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.slide { flex:0 0 260px; margin:0; text-align:center; transition:transform .35s ease, opacity .35s ease; }
.slide img { width:100%; border-radius:32px; border:7px solid #173e2d; box-shadow:0 18px 40px rgba(30,75,50,.18); }
.slide figcaption { margin-top:14px; font:700 15px/1.2 "Baloo 2"; color:#4f654f; }
.slider-arrow { flex:0 0 auto; width:54px; height:54px; border:0; border-radius:18px; background:var(--lime); color:var(--text); font-size:36px; line-height:1; box-shadow:0 6px 0 #72a33f; cursor:pointer; }
.slider-arrow:active { transform:translateY(3px); box-shadow:0 3px 0 #72a33f; }
.slider-dots { display:flex; justify-content:center; gap:8px; }
.slider-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#8ca77a; opacity:.45; cursor:pointer; }
.slider-dots button.active { width:24px; border-radius:12px; opacity:1; background:#3e6a3b; }

.final-cta { margin-top:110px; margin-bottom:110px; padding:54px 58px; border-radius:34px; background:linear-gradient(135deg,#163f2c,#285c3d); color:white; display:flex; align-items:center; justify-content:space-between; gap:40px; box-shadow:0 16px 0 #0d2e20; }
.final-cta h2 { color:white; margin-bottom:12px; }
.final-cta p { color:rgba(255,255,255,.7); }
.final-cta .eyebrow { color:#b7d69c; }
.compact { flex-wrap:nowrap; }
.compact .store-button { background:#f8f1dc; color:#163e2d; border-color:#fff7df; box-shadow:0 7px 0 #a9c76f; min-width:195px; }
.compact .play-triangle { border-left-color:#163e2d; }

.site-footer { background:#0e3223; color:rgba(255,255,255,.7); }
.footer-inner { min-height:170px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; }
.footer-brand { font-size:28px; }
.footer-links { display:flex; gap:18px; }
.footer-links a { text-decoration:none; font-weight:700; font-size:14px; }
.footer-inner p { grid-column:1/-1; margin: -20px 0 25px; font-size:12px; }

.butterfly { position:fixed; z-index:20; pointer-events:none; width:24px; height:18px; opacity:.75; }
.butterfly span, .butterfly i { position:absolute; top:2px; width:11px; height:14px; border-radius:80% 20% 80% 20%; background:#f7d671; animation:flap .4s ease-in-out infinite alternate; transform-origin:100% 60%; }
.butterfly i { right:0; transform:scaleX(-1); transform-origin:0 60%; background:#d89bd8; }
.butterfly-a { animation:flyA 16s linear infinite; }
.butterfly-b { animation:flyB 21s linear infinite; animation-delay:-7s; }
.butterfly-c { animation:flyA 24s linear infinite reverse; animation-delay:-12s; }
@keyframes flap { to { transform:rotateY(65deg) rotateZ(18deg); } }
@keyframes flyA { 0%{left:-5vw;top:24vh;transform:rotate(8deg)} 30%{left:30vw;top:15vh;transform:rotate(-8deg)} 60%{left:65vw;top:35vh;transform:rotate(8deg)} 100%{left:105vw;top:18vh;transform:rotate(-5deg)} }
@keyframes flyB { 0%{left:105vw;top:75vh} 35%{left:70vw;top:58vh} 70%{left:30vw;top:68vh} 100%{left:-5vw;top:50vh} }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.22s; }

/* Privacy */
.policy-page { background:#f6f1df; }
.policy-hero { padding:110px 0 55px; text-align:center; }
.policy-hero h1 { font-size:clamp(48px,7vw,78px); }
.policy-card { width:min(860px,calc(100% - 40px)); margin:0 auto 100px; background:white; border-radius:34px; padding:48px; box-shadow:var(--shadow); }
.policy-card h2 { font-size:32px; letter-spacing:-1px; margin-top:45px; margin-bottom:14px; }
.policy-card h2:first-child { margin-top:0; }
.policy-card p, .policy-card li { color:#667366; line-height:1.72; }
.policy-card a { color:#2e6d99; font-weight:700; }
.policy-card ul { padding-left:22px; }
.back-home { display:inline-flex; margin-top:20px; text-decoration:none; background:var(--lime); padding:12px 18px; border-radius:16px; box-shadow:0 5px 0 #78a63f; font-weight:800; }

@media (max-width: 900px) {
  .nav-links { display:none; }
  .hero, .split-section, .showcase-section, .showcase-section.reverse { grid-template-columns:1fr; }
  .hero { padding-top:70px; text-align:center; }
  .hero-copy .eyebrow { justify-content:center; }
  .hero-lead { margin-left:auto; margin-right:auto; }
  .store-row { justify-content:center; }
  .hero-phone-wrap { min-height:560px; }
  .quick-points { grid-template-columns:repeat(2,1fr); gap:22px; }
  .quick-points div { border-right:0; }
  .split-section, .showcase-section { gap:50px; padding:90px 0; }
  .showcase-section.reverse .showcase-copy, .showcase-section.reverse .showcase-image { order:initial; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .final-cta { flex-direction:column; text-align:center; }
  .compact { flex-wrap:wrap; justify-content:center; }
}

@media (max-width: 620px) {
  .site-header { width:calc(100% - 20px); margin-top:10px; padding:11px 12px; }
  .brand { font-size:26px; }
  .small-pill { font-size:12px; padding:9px 12px; }
  .section-shell { width:min(100% - 26px,1180px); }
  .hero { min-height:0; padding:62px 0 70px; }
  h1 { font-size:52px; letter-spacing:-2px; }
  h2 { font-size:42px; }
  .hero-phone-wrap { min-height:510px; }
  .phone-card { width:255px; border-width:8px; border-radius:36px; }
  .quick-points { padding:24px 20px; border-radius:26px; }
  .quick-points strong { font-size:26px; }
  .quick-points span { font-size:11px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:0; }
  .visual-panel, .showcase-image { max-width:320px; }
  .slider-arrow { display:none; }
  .slider-viewport { overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .slider-viewport::-webkit-scrollbar { display:none; }
  .slider-track { transform:none !important; width:max-content; }
  .slide { flex-basis:220px; scroll-snap-align:center; }
  .final-cta { padding:40px 24px; margin:80px auto; }
  .footer-inner { grid-template-columns:1fr; padding:38px 0; text-align:center; }
  .footer-links { justify-content:center; }
  .footer-inner p { margin:0; }
  .policy-card { padding:30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .butterfly { display:none; }
}