@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Nunito+Sans:wght@300;400;600;700;800&display=swap');

:root {
  --green:  #2C4A3E;
  --mint:   #9ACFC8;
  --gold:   #C8A84B;
  --cream:  #FEFAF4;
  --warm:   #EDE8DF;
  --navy:   #1E2E38;
  --red:    #C8180A;
  --text:   #1E2E38;
  --muted:  rgba(30,46,56,0.45);
  --border: rgba(44,74,62,0.12);
  --radius: 16px;
  --shadow: 0 2px 24px rgba(44,74,62,0.08);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito Sans', sans-serif;
  background: var(--cream); color: var(--text);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Fraunces',serif; font-weight:700; line-height:1.15; color:var(--green); }
h1 { font-size: clamp(2rem,5vw,3.6rem); }
h2 { font-size: clamp(1.7rem,3.5vw,2.7rem); }
h3 { font-size: clamp(1.1rem,2vw,1.4rem); }
p  { color: var(--muted); font-size:1.02rem; line-height:1.75; }
em { font-style:italic; color:var(--mint); }

.container { max-width:1100px; margin:0 auto; padding:0 24px; }
.section    { padding:96px 0; }
.section-sm { padding:64px 0; }
.text-center { text-align:center; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:1rem;
  padding:14px 32px; border-radius:50px; border:none; cursor:pointer;
  text-decoration:none; transition:transform .2s, box-shadow .2s, opacity .2s;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--green); color:var(--cream); }
.btn-gold    { background:var(--gold); color:#fff; box-shadow:0 4px 20px rgba(200,168,75,.35); }
.btn-outline { background:transparent; color:var(--green); border:2px solid var(--green); }
.btn-lg      { padding:18px 44px; font-size:1.1rem; }

/* ── Labels ── */
.kicker {
  display:inline-block; font-size:.75rem; font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--mint); margin-bottom:16px;
}
.section-num {
  font-size:.75rem; font-weight:800; letter-spacing:2px;
  color:rgba(44,74,62,.2); text-transform:uppercase; margin-bottom:8px;
}
.badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(154,207,200,.15); border:1px solid rgba(154,207,200,.4);
  border-radius:50px; padding:6px 16px;
  font-size:.8rem; font-weight:800; color:var(--green);
}

/* ── Scroll reveal ── */
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(254,250,244,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; max-width:1100px; margin:0 auto; padding:0 24px;
}
.nav-logo {
  font-family:'Fraunces',serif; font-size:1.4rem; font-weight:700;
  color:var(--green); text-decoration:none;
}
.nav-logo span { color:var(--mint); }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a {
  text-decoration:none; color:var(--muted);
  font-weight:600; font-size:.95rem; transition:color .15s;
}
.nav-links a:hover { color:var(--green); }
.nav-cta { display:flex; align-items:center; gap:12px; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  padding:148px 0 80px; background:var(--cream);
  position:relative;
}
.hero-blob-1 {
  position:absolute; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(154,207,200,.18) 0%, transparent 70%);
  top:-200px; right:-200px; pointer-events:none;
  animation:blobFloat 8s ease-in-out infinite;
}
.hero-blob-2 {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,168,75,.1) 0%, transparent 70%);
  bottom:-100px; left:-100px; pointer-events:none;
  animation:blobFloat 10s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-20px) scale(1.03); }
}
.hero-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center; position:relative; z-index:1;
}
.hero-badge { margin-bottom:24px; }
.hero h1   { margin-bottom:24px; }
.hero h1 em { font-style:italic; color:var(--mint); }
.hero-sub  { font-size:1.1rem; color:var(--muted); line-height:1.75; margin-bottom:36px; }
.hero-ctas { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-note { margin-top:14px; font-size:.82rem; color:var(--muted); font-weight:600; }
.hero-note span { color:var(--green); }

/* ── Phone mockup ── */
.phone-wrap {
  display:flex; justify-content:center; align-items:center;
  position:relative;
}
.phone-scene {
  position:relative;
  width:280px; /* exact width of phone-frame — chips positioned relative to this */
}
.phone-frame {
  width:280px;
  background:var(--navy);
  border-radius:40px;
  padding:14px 14px 24px;
  box-shadow:
    0 40px 80px rgba(30,46,56,.3),
    0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.05);
  position:relative; z-index:2;
}
.phone-notch {
  width:80px; height:18px;
  background:var(--navy); border-radius:0 0 16px 16px;
  margin:0 auto 12px;
}
.phone-screen {
  background:#fff; border-radius:28px; overflow:hidden;
  min-height:520px;
}
.phone-float {
  position:absolute;
  background:#fff; border-radius:16px; padding:12px 16px;
  box-shadow:0 8px 32px rgba(30,46,56,.15);
  white-space:nowrap; font-size:.78rem; font-weight:700; color:var(--text);
  z-index:3;
}
.phone-float-1 { top:40px; right:-20px; }
.phone-float-2 { bottom:80px; left:-20px; }
.phone-float-dot {
  display:inline-block; width:8px; height:8px;
  border-radius:50%; margin-right:6px; vertical-align:middle;
}

/* ── Phone screen tabs ── */
.phone-tab-bar {
  display:flex; background:var(--warm);
  padding:8px 8px 0;
}
.phone-tab {
  flex:1; text-align:center; padding:8px 4px;
  font-size:.65rem; font-weight:800; color:var(--muted);
  border-radius:10px 10px 0 0; cursor:pointer;
  transition:background .2s, color .2s;
}
.phone-tab.active { background:#fff; color:var(--green); }
.phone-screen-body { padding:16px; }

/* Standalone phone mockup for pricing/cta cards */
.ps-phone {
  background:#fff;
  border-radius:28px;
  box-shadow:
    0 32px 72px rgba(30,46,56,.22),
    0 0 0 8px var(--navy),
    0 0 0 10px rgba(255,255,255,.06);
  position:relative;
  z-index:2;
  overflow:hidden;
}

/* tracker screen elements */
.ps-date { font-size:.65rem; font-weight:800; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
.ps-title { font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:var(--green); margin-bottom:14px; }
.ps-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.ps-stat { background:var(--warm); border-radius:10px; padding:8px; text-align:center; }
.ps-stat-val { font-family:'Fraunces',serif; font-size:1.1rem; font-weight:700; color:var(--green); }
.ps-stat-lbl { font-size:.58rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.ps-habits { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.ps-habit {
  display:flex; align-items:center; gap:10px;
  background:var(--warm); border-radius:10px; padding:9px 12px;
}
.ps-habit-check {
  width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0;
}
.ps-habit-check.done { background:var(--mint); color:#fff; }
.ps-habit-check.empty { background:var(--border); border:1.5px solid rgba(44,74,62,.15); }
.ps-habit-name { font-size:.78rem; font-weight:700; color:var(--text); }
.ps-energy-wrap { background:var(--warm); border-radius:10px; padding:10px 12px; }
.ps-energy-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ps-energy-label { font-size:.7rem; font-weight:800; color:var(--green); }
.ps-energy-val   { font-size:.8rem; font-weight:800; color:var(--green); }
.ps-energy-bar   { height:8px; background:rgba(44,74,62,.1); border-radius:4px; }
.ps-energy-fill  { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--mint),var(--green)); transition:width 1s ease; }
.ps-win-wrap {
  margin-top:12px; padding:10px 12px;
  background:rgba(200,168,75,.1); border-radius:10px;
  border-left:3px solid var(--gold);
}
.ps-win-label { font-size:.65rem; font-weight:800; color:var(--gold); margin-bottom:3px; }
.ps-win-text  { font-size:.75rem; color:var(--text); font-weight:600; }

/* dashboard screen */
.ps-chart-wrap { margin-bottom:12px; }
.ps-chart-title { font-size:.68rem; font-weight:800; color:var(--green); margin-bottom:8px; }
.ps-bars { display:flex; align-items:flex-end; gap:4px; height:60px; }
.ps-bar {
  flex:1; border-radius:4px 4px 0 0;
  background:linear-gradient(to top, var(--mint), rgba(154,207,200,.4));
  transition:height .8s ease;
}
.ps-bar-labels { display:flex; gap:4px; }
.ps-bar-lbl { flex:1; text-align:center; font-size:.55rem; color:var(--muted); font-weight:700; }
.ps-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ps-mini-stat { background:var(--warm); border-radius:10px; padding:10px; text-align:center; }
.ps-mini-val { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:700; color:var(--green); }
.ps-mini-lbl { font-size:.6rem; font-weight:700; color:var(--muted); text-transform:uppercase; }

/* planner screen */
.ps-week { display:flex; gap:4px; margin-bottom:12px; }
.ps-day {
  flex:1; border-radius:8px; padding:6px 2px; text-align:center;
  background:var(--warm); cursor:pointer;
}
.ps-day.today { background:var(--green); }
.ps-day-name { font-size:.55rem; font-weight:800; color:var(--muted); text-transform:uppercase; }
.ps-day.today .ps-day-name { color:rgba(254,250,244,.6); }
.ps-day-num  { font-size:.85rem; font-weight:800; color:var(--text); }
.ps-day.today .ps-day-num  { color:var(--cream); }
.ps-day-dot  { width:4px; height:4px; border-radius:50%; background:var(--mint); margin:2px auto 0; }
.ps-day.today .ps-day-dot { background:rgba(154,207,200,.5); }
.ps-tasks { display:flex; flex-direction:column; gap:7px; }
.ps-task {
  display:flex; align-items:center; gap:8px;
  background:var(--warm); border-radius:8px; padding:8px 10px;
}
.ps-task-check {
  width:16px; height:16px; border-radius:4px; flex-shrink:0;
}
.ps-task-check.done { background:var(--mint); }
.ps-task-check.empty { border:1.5px solid rgba(44,74,62,.2); }
.ps-task-text { font-size:.75rem; font-weight:700; color:var(--text); }
.ps-task-text.done { text-decoration:line-through; color:var(--muted); }

/* ══════════════════════════════════════
   PAIN
══════════════════════════════════════ */
.pain { background:var(--warm); }
.pain-list {
  max-width:640px; margin:40px auto 0;
  display:flex; flex-direction:column; gap:14px;
}
.pain-item {
  display:flex; align-items:flex-start; gap:16px;
  background:#fff; border-radius:14px; padding:20px 24px;
  border-left:4px solid rgba(200,24,10,.3);
  transition:transform .2s, box-shadow .2s;
}
.pain-item:hover { transform:translateX(4px); box-shadow:var(--shadow); }
.pain-x { color:var(--red); font-size:1.1rem; font-weight:800; flex-shrink:0; margin-top:2px; }
.pain-item p { font-size:.98rem; font-weight:600; color:var(--text); margin:0; line-height:1.5; text-align:left; }
.pain-item p span { color:var(--muted); font-weight:400; display:block; margin-top:3px; }

/* ══════════════════════════════════════
   REVELATION
══════════════════════════════════════ */
.revelation { background:var(--green); text-align:center; padding:80px 0; }
.revelation h2 { color:var(--cream); }
.revelation h2 em { color:var(--mint); }
.revelation p { color:rgba(254,250,244,.55); max-width:600px; margin:20px auto 0; }

/* ══════════════════════════════════════
   STORY
══════════════════════════════════════ */
.story { max-width:720px; margin:0 auto; }
.story p { font-size:1.02rem; color:var(--text); margin-bottom:20px; }
.story p strong { color:var(--green); }
.story-quote {
  border-left:4px solid var(--mint); padding:20px 28px;
  background:rgba(154,207,200,.08); border-radius:0 12px 12px 0;
  font-family:'Fraunces',serif; font-size:1.15rem; font-style:italic;
  color:var(--green); line-height:1.6; margin:28px 0;
}

/* ══════════════════════════════════════
   SCREENS SHOWCASE
══════════════════════════════════════ */
.screens { background:var(--green); overflow:hidden; }
.screens-tabs {
  display:flex; justify-content:center; gap:8px;
  margin-bottom:48px; flex-wrap:wrap;
}
.screen-tab {
  padding:10px 24px; border-radius:50px;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(154,207,200,.2);
  color:rgba(254,250,244,.5); font-weight:800; font-size:.88rem;
  cursor:pointer; transition:all .2s;
}
.screen-tab.active {
  background:var(--mint); color:var(--green);
  border-color:var(--mint); box-shadow:0 4px 20px rgba(154,207,200,.3);
}
.screens-display {
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:center; max-width:980px; margin:0 auto;
}
.screen-desc h2 { color:var(--cream); margin-bottom:16px; }
.screen-desc h2 em { color:var(--mint); }
.screen-desc p { color:rgba(254,250,244,.55); margin-bottom:24px; }
.screen-feat { display:flex; flex-direction:column; gap:14px; }
.screen-feat-item { display:flex; align-items:center; gap:14px; }
.screen-feat-dot { width:8px; height:8px; border-radius:50%; background:var(--mint); flex-shrink:0; }
.screen-feat-text { color:rgba(254,250,244,.7); font-size:.92rem; font-weight:600; }

.screen-visual {
  display:none;
}
.screen-visual.active { display:block; }

.laptop-wrap {
  position:relative;
}
.laptop-frame {
  background:var(--navy); border-radius:16px;
  padding:12px 12px 0; position:relative;
  box-shadow:0 32px 64px rgba(0,0,0,.4);
}
.laptop-screen {
  background:#fff; border-radius:8px; overflow:hidden;
  min-height:320px;
}
.laptop-base {
  width:120%; height:18px; background:rgba(255,255,255,.08);
  border-radius:0 0 8px 8px; margin:0 -10% 0;
  position:relative; left:-10%;
}

/* laptop screen content */
.ls-topbar {
  background:var(--green); padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.ls-topbar-title { color:var(--cream); font-family:'Fraunces',serif; font-size:.85rem; font-weight:700; }
.ls-topbar-user  { color:rgba(154,207,200,.6); font-size:.72rem; font-weight:700; }
.ls-body { padding:16px; }
.ls-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.ls-stat { background:var(--warm); border-radius:10px; padding:10px; text-align:center; }
.ls-stat-val { font-family:'Fraunces',serif; font-size:1.3rem; font-weight:700; color:var(--green); }
.ls-stat-lbl { font-size:.6rem; font-weight:700; color:var(--muted); text-transform:uppercase; }
.ls-chart-area { background:var(--warm); border-radius:12px; padding:14px; margin-bottom:12px; }
.ls-chart-title { font-size:.7rem; font-weight:800; color:var(--green); margin-bottom:10px; }
.ls-chart-bars  { display:flex; align-items:flex-end; gap:6px; height:80px; }
.ls-bar {
  flex:1; border-radius:4px 4px 0 0;
  transition:height .8s ease;
}
.ls-bar.mint    { background:linear-gradient(to top, var(--mint), rgba(154,207,200,.4)); }
.ls-bar.gold    { background:linear-gradient(to top, var(--gold), rgba(200,168,75,.3)); }
.ls-bar.green   { background:linear-gradient(to top, var(--green), rgba(44,74,62,.3)); }
.ls-bar-lbl-row { display:flex; gap:6px; margin-top:4px; }
.ls-bar-lbl { flex:1; text-align:center; font-size:.55rem; color:var(--muted); font-weight:700; }
.ls-wins { display:flex; flex-direction:column; gap:6px; }
.ls-win {
  display:flex; align-items:center; gap:10px;
  background:rgba(200,168,75,.08); border-radius:8px; padding:8px 12px;
  border-left:3px solid var(--gold);
}
.ls-win-day  { font-size:.65rem; font-weight:800; color:var(--gold); width:60px; flex-shrink:0; }
.ls-win-text { font-size:.75rem; color:var(--text); font-weight:600; }

/* patterns screen */
.ls-heatmap { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:12px; }
.ls-hm-cell {
  aspect-ratio:1; border-radius:4px;
}
.ls-hm-0 { background:rgba(44,74,62,.08); }
.ls-hm-1 { background:rgba(154,207,200,.3); }
.ls-hm-2 { background:rgba(154,207,200,.6); }
.ls-hm-3 { background:var(--mint); }
.ls-hm-4 { background:var(--green); }
.ls-line-chart { background:var(--warm); border-radius:12px; padding:14px; }
.ls-line-svg { width:100%; height:70px; }

/* ══════════════════════════════════════
   BENEFITS
══════════════════════════════════════ */
.benefit-row {
  display:flex; align-items:flex-start; gap:24px;
  padding:28px 0; border-bottom:1px solid var(--border);
  transition:transform .2s;
}
.benefit-row:last-child { border-bottom:none; }
.benefit-row:hover { transform:translateX(6px); }
.benefit-icon-wrap {
  width:60px; height:60px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; flex-shrink:0;
}
.benefit-body h3 { font-size:1.15rem; margin-bottom:6px; }
.benefit-body p  { font-size:.92rem; margin:0; }

/* ══════════════════════════════════════
   COUNTER STRIP
══════════════════════════════════════ */
.counter-strip {
  background:var(--green); padding:40px 0;
}
.counter-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; text-align:center;
}
.counter-val {
  font-family:'Fraunces',serif; font-size:2.8rem;
  font-weight:700; color:var(--cream); line-height:1;
}
.counter-val span { color:var(--mint); }
.counter-lbl { font-size:.82rem; color:rgba(254,250,244,.45); font-weight:700; margin-top:6px; }

/* ══════════════════════════════════════
   AUTHOR
══════════════════════════════════════ */
.author { background:var(--warm); }
.author-inner {
  display:grid; grid-template-columns:auto 1fr;
  gap:48px; align-items:start; max-width:760px; margin:0 auto;
}
.author-avatar {
  width:120px; height:120px; border-radius:50%;
  background:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:2.8rem;
  font-weight:700; color:var(--mint); flex-shrink:0;
}
.author-avatar-photo {
  width:140px; height:140px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  box-shadow:0 8px 32px rgba(44,74,62,.2);
  border:4px solid #fff;
}
.author-avatar-photo img {
  width:100%; height:100%; object-fit:cover;
}
.author-name  { font-family:'Fraunces',serif; font-size:1.4rem; color:var(--green); margin-bottom:4px; }
.author-title { font-size:.85rem; color:var(--muted); margin-bottom:16px; }
.author-text p { font-size:.98rem; color:var(--text); margin-bottom:14px; line-height:1.75; }

/* ══════════════════════════════════════
   TESTIMONIALS CAROUSEL
══════════════════════════════════════ */
.testimonials-carousel {
  position:relative; margin-top:48px; overflow:hidden;
}
.testimonials-track {
  display:flex; gap:20px;
  transition:transform .45s cubic-bezier(.25,.46,.45,.94);
}
.testimonials-track .testimonial {
  flex:0 0 calc(33.333% - 14px);
  min-width:0;
}
.carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--green); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-size:1.5rem; z-index:10;
  box-shadow:0 4px 16px rgba(44,74,62,.25);
  transition:opacity .2s;
  line-height:1;
}
.carousel-btn:hover { opacity:.85; }
.carousel-btn:disabled { opacity:.2; cursor:default; }
.carousel-btn-prev { left:-22px; }
.carousel-btn-next { right:-22px; }

.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:48px;
}
.testimonial {
  background:#fff; border-radius:16px; padding:24px;
  border:1.5px solid var(--border); box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s;
}
.testimonial:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(44,74,62,.1); }
.testimonial-stars { color:var(--gold); font-size:.9rem; margin-bottom:12px; }
.testimonial-text  { font-size:.92rem; color:var(--text); line-height:1.65; margin-bottom:16px; }
.testimonial-author { display:flex; align-items:center; gap:10px; }
.testimonial-dot {
  width:36px; height:36px; border-radius:50%;
  background:var(--warm); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:800; color:var(--green); flex-shrink:0;
}
.testimonial-name { font-weight:800; font-size:.88rem; color:var(--text); }
.testimonial-meta { font-size:.78rem; color:var(--muted); }

/* ══════════════════════════════════════
   PRICING
══════════════════════════════════════ */
.value-compare {
  display:flex; justify-content:center; gap:24px;
  margin:40px auto 0; flex-wrap:wrap; max-width:680px;
}
.value-item { text-align:center; padding:20px 24px; background:var(--warm); border-radius:14px; flex:1; min-width:160px; }
.value-item-price { font-family:'Fraunces',serif; font-size:1.8rem; font-weight:700; color:var(--muted); text-decoration:line-through; }
.value-item-label { font-size:.8rem; color:var(--muted); margin-top:4px; }
.value-vs { display:flex; align-items:center; font-family:'Fraunces',serif; font-size:1.2rem; color:var(--muted); }
.value-item.highlight { background:rgba(154,207,200,.15); border:1.5px solid var(--mint); }
.value-item.highlight .value-item-price { color:var(--green); text-decoration:none; }
.pricing-card {
  max-width:480px; margin:56px auto 0; background:#fff;
  border:2px solid var(--green); border-radius:24px; padding:48px;
  text-align:center; box-shadow:0 16px 48px rgba(44,74,62,.1);
}
.pricing-badge {
  display:inline-block; background:var(--green); color:var(--cream);
  font-size:.75rem; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  padding:6px 18px; border-radius:50px; margin-bottom:24px;
}
.pricing-price { font-family:'Fraunces',serif; font-size:3.5rem; font-weight:700; color:var(--green); line-height:1; }
.pricing-price sup { font-size:1.4rem; vertical-align:super; }
.pricing-period { font-size:.9rem; color:var(--muted); font-weight:600; margin-bottom:32px; }
.pricing-features { list-style:none; text-align:left; display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.pricing-features li { display:flex; align-items:center; gap:12px; font-size:.95rem; font-weight:600; color:var(--text); }
.pricing-check {
  width:22px; height:22px; border-radius:6px;
  background:rgba(154,207,200,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-size:13px; flex-shrink:0; font-weight:800;
}
.pricing-note { font-size:.8rem; color:var(--muted); margin-top:16px; }

/* ══════════════════════════════════════
   GUARANTEE
══════════════════════════════════════ */
.guarantee-box {
  max-width:640px; margin:0 auto;
  background:rgba(154,207,200,.08); border:2px solid rgba(154,207,200,.3);
  border-radius:20px; padding:40px; text-align:center;
}
.guarantee-icon { font-size:3rem; margin-bottom:16px; }
.guarantee-box h3 { font-size:1.5rem; margin-bottom:12px; }
.guarantee-box p  { font-size:.95rem; max-width:480px; margin:0 auto; }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq-list { max-width:680px; margin:48px auto 0; display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--border); padding:24px 0; }
.faq-q {
  font-weight:800; font-size:1rem; color:var(--text); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  list-style:none; user-select:none;
}
.faq-q::after { content:'+'; font-size:1.3rem; color:var(--mint); font-weight:300; flex-shrink:0; transition:transform .2s; }
details[open] .faq-q::after { transform:rotate(45deg); }
.faq-a { padding-top:12px; font-size:.95rem; color:var(--muted); line-height:1.75; }

/* ══════════════════════════════════════
   CTA-MID
══════════════════════════════════════ */
.cta-mid { background:var(--cream); text-align:center; padding:72px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-mid h2 { font-size:clamp(1.6rem,3vw,2.4rem); }
.cta-mid p  { max-width:480px; margin:12px auto 32px; }

/* ══════════════════════════════════════
   STICKY BAR
══════════════════════════════════════ */
.sticky-bar {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--green); padding:14px 24px;
  display:flex; align-items:center; justify-content:center; gap:20px;
  z-index:200; transform:translateY(100%); transition:transform .3s;
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
}
.sticky-bar.visible { transform:translateY(0); }
.sticky-bar-text { color:rgba(254,250,244,.7); font-size:.9rem; font-weight:600; }
.sticky-bar-text strong { color:var(--cream); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer { background:var(--green); padding:56px 0 32px; }
.footer-inner {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:48px; flex-wrap:wrap; padding-bottom:40px;
  border-bottom:1px solid rgba(154,207,200,.15);
}
.footer-logo { font-family:'Fraunces',serif; font-size:1.4rem; font-weight:700; color:var(--cream); }
.footer-logo span { color:var(--mint); }
.footer-tagline { font-size:.88rem; color:rgba(254,250,244,.4); margin-top:6px; }
.footer-links   { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a {
  text-decoration:none; font-size:.88rem; font-weight:600;
  color:rgba(254,250,244,.5); transition:color .15s;
}
.footer-links a:hover { color:var(--cream); }
.footer-bottom { padding-top:28px; text-align:center; font-size:.8rem; color:rgba(254,250,244,.25); }

/* ══════════════════════════════════════
   TRACKER DEMO ANIMATIONS
══════════════════════════════════════ */
@keyframes demoEnergyFill {
  0%, 10%   { width:28%; }
  45%, 65%  { width:73%; }
  90%, 100% { width:28%; }
}
@keyframes demoCheckOn {
  0%, 10%   { background:rgba(44,74,62,.1); color:transparent; transform:scale(.9); }
  22%, 78%  { background:var(--mint); color:#fff; transform:scale(1); }
  90%, 100% { background:rgba(44,74,62,.1); color:transparent; transform:scale(.9); }
}
@keyframes demoFloat1 {
  0%, 100% { transform:translateY(0px) rotate(.4deg); }
  50%      { transform:translateY(-9px) rotate(-.4deg); }
}
@keyframes demoFloat2 {
  0%, 100% { transform:translateY(0px); }
  50%      { transform:translateY(-5px); }
}
@keyframes demoFloat3 {
  0%, 100% { transform:translateY(0px); }
  50%      { transform:translateY(-7px); }
}
@keyframes demoWinType {
  0%, 25%   { clip-path:inset(0 100% 0 0); }
  60%, 100% { clip-path:inset(0 0% 0 0); }
}
@keyframes demoBarsGrow {
  from { transform:scaleY(0); }
  to   { transform:scaleY(1); }
}
@keyframes demoRingDraw {
  from { stroke-dashoffset:188; }
  to   { stroke-dashoffset:56; }
}
/* Flexible phone ring animation — uses CSS custom property for end offset */
@keyframes phoneRingDraw {
  from { stroke-dashoffset:110; }
  to   { stroke-dashoffset:var(--ring-end,0); }
}
.phone-ring {
  animation:phoneRingDraw 1.2s cubic-bezier(.4,0,.2,1) var(--ring-delay,0s) both;
}

/* CTA-mid split layout */
.cta-mid-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  text-align:left;
}
.cta-mid-inner h2 { font-size:clamp(1.5rem,3vw,2.3rem); }
.cta-mid-inner > div > p { max-width:none; margin:12px 0 28px; }

/* Animated demo block */
.cta-demo { position:relative; height:420px; }
.cta-demo-card {
  position:absolute;
  top:28px; left:4px; right:4px;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  box-shadow:0 24px 64px rgba(44,74,62,.11), 0 4px 16px rgba(44,74,62,.06);
  animation:demoFloat1 4s ease-in-out infinite;
  z-index:2;
}
.cta-demo-chip {
  position:absolute;
  background:#fff;
  border-radius:24px;
  padding:8px 14px;
  font-size:.74rem;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(44,74,62,.12);
  z-index:3;
}
.cta-demo-chip.chip-tr {
  top:4px; right:-12px;
  color:var(--green);
  border:1.5px solid rgba(154,207,200,.3);
  animation:demoFloat2 3.5s ease-in-out infinite;
}
.cta-demo-chip.chip-bl {
  bottom:28px; left:-8px;
  color:var(--gold);
  border:1.5px solid rgba(200,168,75,.2);
  animation:demoFloat3 4.2s ease-in-out infinite 1s;
}
.demo-nrg-fill  { animation:demoEnergyFill 6s ease-in-out infinite; width:28%; }
.demo-chk       { animation:demoCheckOn 6s ease-in-out infinite; }
.demo-chk.d2    { animation-delay:.9s; }
.demo-chk.d3    { animation-delay:1.8s; }
.demo-win-type  {
  display:block; white-space:nowrap; overflow:hidden;
  animation:demoWinType 6s ease-in-out infinite 2.4s;
  clip-path:inset(0 100% 0 0);
}

/* Feature mini-cards */
.feat-demo-section { padding:72px 0; background:var(--warm); }
.feat-demo-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:48px;
}
.feat-demo-card {
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 18px 20px;
  text-align:center;
}
.feat-demo-card h4 {
  font-family:'Fraunces',serif;
  font-size:.95rem; font-weight:700;
  color:var(--green); margin:14px 0 6px;
}
.feat-demo-card p { font-size:.8rem; color:var(--muted); line-height:1.5; max-width:none; margin:0; }

/* Pricing section split layout */
.pricing-grid {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:64px;
  align-items:center;
}
.pricing-phone-col {
  position:relative;
  display:flex;
  justify-content:center;
}
.pricing-phone-scene {
  position:relative;
  width:260px;
  animation:demoFloat1 4s ease-in-out infinite;
}
.pricing-chip {
  position:absolute;
  background:#fff;
  border-radius:20px;
  padding:7px 13px;
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(44,74,62,.12);
  z-index:3;
}
.pricing-chip.pc-top {
  top:-12px; right:-24px;
  color:var(--green);
  border:1.5px solid rgba(154,207,200,.3);
  animation:demoFloat2 3.5s ease-in-out infinite;
}
.pricing-chip.pc-bot {
  bottom:40px; left:-20px;
  color:var(--gold);
  border:1.5px solid rgba(200,168,75,.2);
  animation:demoFloat3 4.2s ease-in-out infinite 1.2s;
}
.feat-visual-bars {
  height:80px; display:flex; align-items:flex-end;
  gap:4px; padding:0 8px;
}
.feat-bar {
  flex:1; border-radius:4px 4px 0 0;
  background:linear-gradient(to top,var(--mint),rgba(154,207,200,.3));
  transform-origin:bottom;
  animation:demoBarsGrow .5s cubic-bezier(.4,0,.2,1) both;
}
.feat-bar.lo { background:linear-gradient(to top,var(--gold),rgba(200,168,75,.3)); }
.feat-bar:nth-child(1){animation-delay:.04s} .feat-bar:nth-child(2){animation-delay:.08s}
.feat-bar:nth-child(3){animation-delay:.12s} .feat-bar:nth-child(4){animation-delay:.16s}
.feat-bar:nth-child(5){animation-delay:.20s} .feat-bar:nth-child(6){animation-delay:.24s}
.feat-bar:nth-child(7){animation-delay:.28s}
.feat-ring-wrap { position:relative; width:76px; height:76px; margin:4px auto; }
.feat-ring-arc {
  stroke-dasharray:188; stroke-dashoffset:188;
  animation:demoRingDraw 1.4s cubic-bezier(.4,0,.2,1) .4s both;
}
.feat-ring-center {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.feat-dots { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:6px 4px 0; }
.feat-dot  { width:13px; height:13px; border-radius:3px; }
.feat-dot.on   { background:var(--mint); }
.feat-dot.off  { background:rgba(44,74,62,.08); }
.feat-dot.miss { background:rgba(200,24,10,.15); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:960px) {
  .testimonials-track .testimonial { flex:0 0 calc(50% - 10px); }
}
@media (max-width:700px) {
  .testimonials-track .testimonial { flex:0 0 100%; }
}
@media (max-width:900px) {
  .hero-inner           { grid-template-columns:1fr; }
  .phone-wrap           { display:none; }
  .screens-display      { grid-template-columns:1fr; }
  .laptop-wrap          { display:none; }
  .counter-grid         { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid    { grid-template-columns:1fr; }
  .author-inner         { grid-template-columns:1fr; }
  .author-avatar        { margin:0 auto; }
  .author-avatar-photo  { margin:0 auto; }
  .nav-links            { display:none; }
  .value-compare        { flex-direction:column; align-items:center; }
  .carousel-btn-prev    { left:-12px; }
  .carousel-btn-next    { right:-12px; }
  .cta-mid-inner        { grid-template-columns:1fr; gap:36px; text-align:center; }
  .cta-mid-inner > div > p { margin-left:auto; margin-right:auto; }
  .cta-demo             { height:340px; }
  .feat-demo-grid       { grid-template-columns:1fr; }
  .pricing-grid         { grid-template-columns:1fr; gap:40px; }
  .pricing-phone-col    { order:-1; }
}
@media (max-width:600px) {
  .hero-ctas    { flex-direction:column; align-items:flex-start; }
  .pricing-card { padding:32px 24px; }
  .screens-tabs { gap:6px; }
  .screen-tab   { padding:8px 16px; font-size:.8rem; }
}

/* ══════════════════════════════════════
   STATS STRIP
══════════════════════════════════════ */
.stats-strip { background:var(--green); padding:64px 0; }
.stats-strip-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px; text-align:center;
}
.stats-figure {
  font-family:'Fraunces',serif;
  font-size:clamp(2rem,4vw,3rem); font-weight:700;
  color:var(--mint); line-height:1; margin-bottom:10px;
}
.stats-label {
  font-size:.82rem; font-weight:600;
  color:rgba(254,250,244,.55); line-height:1.5;
}

/* ══════════════════════════════════════
   WHO IS IT FOR
══════════════════════════════════════ */
.who-section { background:var(--cream); }
.who-counter {
  text-align:center; font-size:.85rem; font-weight:800; color:var(--mint);
  margin:20px 0 36px; padding:10px 24px;
  background:rgba(154,207,200,.12); border-radius:50px;
  display:inline-block; position:relative; left:50%; transform:translateX(-50%);
}
.who-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; max-width:860px; margin:0 auto;
}
.who-card {
  background:#fff; border-radius:18px; padding:24px 20px;
  border:2px solid var(--border); cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s, background .2s;
  position:relative; text-align:left;
}
.who-card:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(44,74,62,.12); }
.who-card.selected { border-color:var(--mint); background:rgba(154,207,200,.08); }
.who-icon { font-size:1.6rem; margin-bottom:10px; }
.who-card h4 { font-size:.95rem; margin-bottom:8px; color:var(--green); }
.who-card p  { font-size:.8rem; line-height:1.55; color:var(--muted); }
.who-check {
  position:absolute; top:14px; right:14px;
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; color:transparent;
  transition:all .2s;
}
.who-card.selected .who-check { background:var(--mint); border-color:var(--mint); color:#fff; }

/* ══════════════════════════════════════
   VS COMPARISON
══════════════════════════════════════ */
.vs-section { background:var(--warm); }
.vs-table {
  max-width:760px; margin:48px auto 0;
  border-radius:20px; overflow:hidden;
  border:1px solid var(--border); background:#fff;
}
.vs-header {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  background:var(--green); padding:14px 20px; gap:0;
}
.vs-col-label {
  font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:1.5px; color:rgba(254,250,244,.45); text-align:center;
}
.vs-col-label.vs-bad  { color:rgba(255,120,100,.7); }
.vs-col-label.vs-good { color:var(--mint); }
.vs-row {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--border); align-items:center;
}
.vs-row:last-child { border-bottom:none; }
.vs-aspect {
  padding:16px 20px; font-size:.82rem; font-weight:800;
  color:var(--green); border-right:1px solid var(--border);
}
.vs-bad, .vs-good { padding:16px; font-size:.8rem; font-weight:600; text-align:center; }
.vs-bad  { color:rgba(200,24,10,.75); }
.vs-good { color:var(--green); font-weight:800; }

/* ══════════════════════════════════════
   ADHD FACTS
══════════════════════════════════════ */
.facts-section { background:var(--green); }
.facts-grid {
  max-width:640px; margin:48px auto 0;
  display:flex; flex-direction:column; gap:24px;
}
.fact-label {
  font-size:.85rem; font-weight:700;
  color:rgba(254,250,244,.65); margin-bottom:8px;
}
.fact-bar-wrap {
  background:rgba(255,255,255,.1); border-radius:6px;
  overflow:hidden; height:36px;
}
.fact-bar {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--mint),rgba(154,207,200,.45));
  border-radius:6px;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:12px;
}
.fact-bar.fact-bar-gold { background:linear-gradient(90deg,var(--gold),rgba(200,168,75,.4)); }
.fact-val {
  font-family:'Fraunces',serif; font-size:.95rem;
  font-weight:700; color:var(--green);
}

/* ══════════════════════════════════════
   PERSONAL QUOTE
══════════════════════════════════════ */
.quote-section { background:#1A3830; padding:80px 0; }
.quote-inner   { max-width:680px; margin:0 auto; text-align:center; }
.quote-marks {
  font-family:'Fraunces',serif; font-size:5rem; line-height:.5;
  color:var(--mint); opacity:.3; margin-bottom:16px;
}
.quote-text {
  font-family:'Fraunces',serif; font-style:italic;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  color:var(--cream); line-height:1.7; margin-bottom:24px;
}
.quote-author { font-size:.82rem; font-weight:700; color:var(--mint); }

/* ══════════════════════════════════════
   TRUST BADGES
══════════════════════════════════════ */
.trust-section { background:var(--green); padding:36px 0; }
.trust-badges  { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.trust-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(154,207,200,.12); border:1px solid rgba(154,207,200,.22);
  border-radius:50px; padding:8px 18px;
  font-size:.8rem; font-weight:700; color:rgba(254,250,244,.8);
  white-space:nowrap;
}

/* ── Responsive additions ── */
@media (max-width:900px) {
  .stats-strip-grid { grid-template-columns:repeat(2,1fr); }
  .who-grid         { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .stats-strip-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .who-grid         { grid-template-columns:1fr; }
  .vs-aspect        { font-size:.75rem; padding:12px 14px; }
  .vs-bad,.vs-good  { padding:12px 10px; font-size:.75rem; }
}