:root{
  --bg:#0B1020;
  --panel:rgba(255,255,255,.075);
  --panel2:rgba(255,255,255,.12);
  --surface: rgba(255,255,255,.065);
  --border: rgba(255,255,255,.14);
  --cardShadowFlat: 0 1px 0 rgba(255,255,255,.06);
  --sectionY: 86px;

  --text:#EAF0FF;
  --muted:rgba(234,240,255,.76);
  --muted2:rgba(234,240,255,.56);
  --brand:#27D17E;
  --brand2:#1DAE68;
  --accent:#66B2FF;
  --warning:#FFB020;
  --danger:#FF5A6B;
  --ring:rgba(39,209,126,.45);
  --shadow: 0 24px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --radius: 24px;
  --navH: 80px;
  --brandgreen: rgb(41, 171, 65);
}
/* =========================================================
   THEME SYSTEM
   - default: dark (your current :root variables)
   - light theme overrides via [data-theme="light"]
========================================================= */

/* Light theme overrides */
:root[data-theme="light"]{
  --bg: #F7F9FC;
  --panel: rgba(10, 16, 32, .06);
  --panel2: rgba(10, 16, 32, .10);
  --surface: rgba(255,255,255,.90);
  --border: rgba(11, 16, 32, .10);
  --cardShadowFlat: 0 1px 0 rgba(15, 23, 42, .06);
  --sectionY: 86px;


  --text: #0B1020;
  --muted: rgba(11, 16, 32, .76);
  --muted2: rgba(11, 16, 32, .56);

  --brand: #1DBA6F;
  --brand2: #14985A;
  --accent: #2B7BFF;
  --warning: #D97706;
  --danger: #E11D48;

  --ring: rgba(29, 186, 111, .35);

  --shadow: 0 4px 20px rgba(15, 23, 42, .10);
  --shadow2: 0 1px 4px rgba(0, 0, 0, .07);
}

/* Make the ambient background layer fit light theme */
:root[data-theme="light"] body::before{
  filter: brightness(1.05) contrast(1.03) saturate(1.00);
}
:root[data-theme="light"] body::after{
  opacity: .04;
  mix-blend-mode: multiply;
}

/* Nav in light theme (keep your blur/glass, but lighter) */
:root[data-theme="light"] .nav{
  background: linear-gradient(to bottom, rgba(247,249,252,.92), rgba(247,249,252,.60));
}

/* Generic surfaces: slightly more “card” in light mode */
:root[data-theme="light"] .card,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .proof-card,
:root[data-theme="light"] .proof-stats .stat,
:root[data-theme="light"] .cta-card,
:root[data-theme="light"] .community-preview,
:root[data-theme="light"] .cosmetics-group,
:root[data-theme="light"] .breed,
:root[data-theme="light"] .item,
:root[data-theme="light"] .step,
:root[data-theme="light"] .tag{
  background: #ffffff;
  border-color: rgba(11,16,32,.09);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Inputs in light mode */
:root[data-theme="light"] .footer-input,
:root[data-theme="light"] .control-row select{
  background: rgba(255,255,255,.85);
  border-color: rgba(11,16,32,.14);
  color: var(--text);
}

/* Theme toggle button tweaks */
.theme-btn{
  padding: 12px 14px;
  gap: 8px;
}
.theme-ico{
  font-size: 14px;
  line-height: 1;
}
.theme-label{
  font-weight: 750;
}

/* Optional: on very small screens, hide the label to save space */
@media (max-width: 640px){
  .theme-label{ display:none; }
  .theme-btn{ padding: 10px 12px; }
}


*{ box-sizing:border-box; }
html, body{

  font-size: 17px;
  line-height: 1.62; height:100%; scroll-behavior: smooth; 
}

body{
  margin:0;
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 17px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  position:relative;
}

a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }

.container{
  width:min(1160px, calc(100% - 48px));
  margin:0 auto;
}

/* =========================================================
   BACKGROUND (fixed layer + grain)
========================================================= */
body::before{
  content:"";
  position: fixed;
  inset: -65vh -30vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 900px at 15% 10%, rgba(102, 178, 255, 0.34), transparent 55%),
    radial-gradient(900px 700px at 30% 50%, rgba(102, 178, 255, 0.22), transparent 58%),
    radial-gradient(900px 700px at 85% 25%, rgba(39, 209, 126, 0.30), transparent 55%),
    radial-gradient(900px 700px at 55% 85%, rgba(255, 176, 32, 0.16), transparent 55%);
  background-repeat:no-repeat;
  filter: brightness(1.12) contrast(1.08) saturate(1.08);
  transform: translate3d(0, calc(var(--scrollY, 0) * 0.06px), 0);
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -1;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* =========================================================
   NAV
========================================================= */
.nav{
  position:sticky;
  top:0;
  z-index:9999;
  isolation:isolate;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,10,18,.78), rgba(7,10,18,.35));
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}

.brand h1{
  margin:0;
  font-size:16px;
  letter-spacing:.2px;
}
.brand span{
  display:block;
  font-size:12px;
  color:var(--muted2);
  margin-top:2px;
}

.logo{
  width:34px;
  height:34px;
  border-radius:12px;
  background: url("assets/icon.png") center / cover no-repeat;
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
}
.logo-sm{
  width:28px;
  height:28px;
  border-radius:10px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-links a{
  text-decoration:none;
  color:var(--muted);
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
  transition: background .2s ease, color .2s ease;
}
.nav-links a:hover{ background:rgba(255,255,255,.06); color:var(--text); }

.nav-cta{
  display:flex;
  gap:10px;
  align-items:center;
}

.btn{
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  box-shadow: 0 2px 0 rgba(0,0,0,.10);
  transition: transform .12s ease, background .2s ease, box-shadow .12s ease, border-color .2s ease;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.10); }

.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
}
.btn:active{ transform: translateY(0px); scale: .98; }

.btn-primary{
  color: #0B1020;
  background: var(--brandgreen);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
:root:not([data-theme="light"]) .btn-primary{
  color: #EAF0FF;
  background: var(--brandgreen);
  border-color: rgba(255,255,255,.10);
}
.btn-primary:hover{ transform: translateY(-2px); }
.btn-primary:active{ transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }

.btn-primary:hover{ background: #228E35; }

.btn-large{
  padding:16px 36px;
  font-size:16px;
  font-weight:800;
}

.menu-btn{ display:none; }

/* =========================================================
   HERO
========================================================= */
.hero{
  padding: 64px 0 28px;
  min-height: calc(100vh - var(--navH));
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items:center;
}
.hero-dog{
  width: 84px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.18));
}
.hero-bubble {
    position: relative;
    background: rgba(255,255,255,.92);
    color: #0B1020;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    width: fit-content;
}
.hero-bubble::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,.92);
    transform: rotate(45deg);
    border-radius: 3px;
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size:13px;
}

/* Green glowing dot in the kicker */
.kicker .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px !important; /* force circle */
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(39,209,126,.15);
  flex: 0 0 9px; /* prevents stretching into a square */
}
.dot{
  width: 9px;
  height: 9px;
  border-radius: 999px !important;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(39,209,126,.15);
  display: inline-block;
  flex: 0 0 9px;
}



.hero h2{
  font-size: clamp(40px, 4.6vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 10px 0 12px;
}

.hero p{
  margin:0 0 22px;
  font-size: 16px;
  line-height:1.6;
  color: var(--muted);
  max-width: 56ch;
}
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.hero-card{
  position:relative;
  border-radius: calc(var(--radius) + 10px);
  background:
    radial-gradient(800px 340px at 50% 0%, rgba(102,178,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 18px;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(800px 400px at 50% 0%, rgba(39,209,126,.18), transparent 60%);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
.hero-card > *{ position:relative; z-index:1; }

.hero-bullets{
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--muted);
  max-width: 56ch;
}
.hero-bullets li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.hero-bullets li::before{
  content:"✓";
  color: var(--brand);
  font-weight: 900;
  line-height: 1;
  margin-top: 2px;
}

.microcopy{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
}

/* Proof blocks */
.hero-proof{
  margin-top: 18px;
  display: grid;
  gap: 12px;
  max-width: 56ch;
}
.proof-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  padding: 14px 16px;
}
.proof-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.proof-meta small{
  display:block;
  color: var(--muted2);
  margin-top: 2px;
  font-size: 12px;
}
.proof-avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}
.proof-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.proof-stats{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.proof-stats .stat{
  flex: 1;
  min-width: 160px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  padding: 12px 14px;
}
.proof-stats .stat strong{
  display:block;
  font-size: 18px;
  font-weight: 900;
}
.proof-stats .stat span{
  color: var(--muted2);
  font-size: 12px;
}
.proof-top{
  text-align: center;
}

.phone{
  width: min(360px, 100%);
  margin: 0 auto;
  position:relative;
  overflow:hidden;
}
.phone .overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(380px 220px at 50% 18%, rgba(39,209,126,.20), transparent 55%),
    radial-gradient(360px 240px at 30% 70%, rgba(102,178,255,.14), transparent 60%);
  mix-blend-mode: screen;
}

/* Floaters */
.floaters{ position:absolute; z-index:3; inset:0; pointer-events:none; }
.floater{
  position:absolute;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  animation: float 6s ease-in-out infinite;
}
.floater small{ display:block; color:var(--muted2); font-size:11px; margin-top:2px; }
.floater strong{ font-size:13px; }
.floater .pill{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.f1{ left:16px; top:14px; animation-duration:7.5s; }
.f2{ right:16px; top:74px; animation-duration:6.3s; }
.f3{ left:18px; bottom:20px; animation-duration:8.2s; }
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* =========================================================
   SECTIONS
========================================================= */
.section{ padding: var(--sectionY) 0; }
@media (max-width: 900px){
  :root, :root[data-theme="light"]{ --sectionY: 68px; }
}


.section-dark{
  background: rgba(0,0,0,.20);
}

.section-cta{
  background: rgba(0,0,0,.20);
}

.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom: 18px;
}
.section-header h3{
  margin:0;
  font-size: 22px;
  letter-spacing:-.01em;
}
.section-header p{
  margin:6px 0 0;
  color:var(--muted);
  max-width: 60ch;
}

/* =========================================================
   GRIDS + CARDS
========================================================= */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; gap: 14px; }
}

.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }

.card{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px;
  box-shadow: var(--cardShadowFlat);
}

.card strong{ display:block; margin-top:10px; font-size:15px; }
.card p{ margin:8px 0 0; color:var(--muted); line-height:1.55; }

.icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(29, 186, 111, .14);
  border: 1px solid rgba(29, 186, 111, .28);
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: var(--cardShadowFlat);
}
:root:not([data-theme="light"]) .icon{
  background: rgba(39, 209, 126, .18);
  border-color: rgba(39, 209, 126, .30);
}


.mt-14{ margin-top:14px; }

/* =========================================================
   DEMO (How it works)
========================================================= */
.demo{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:18px;
}
.demo-left{ padding:18px; }
.demo-right{ padding:22px; }

.demo-muted{
  margin-top:8px;
  color:var(--muted);
}

.demo-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  justify-content: center;
}

.dog-stage{
  position:relative;
  width: 100%;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
}
.bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 260px at 50% 20%, rgba(102,178,255,.18), transparent 60%),
    radial-gradient(500px 240px at 30% 85%, rgba(39,209,126,.12), transparent 60%);
  pointer-events:none;
}
.dog-wrap{ position:relative; padding:12px; }
.dog-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom: 14px;
}
.statline{ display:flex; gap:8px; flex-wrap:wrap; }

.tag{
  display:inline-flex;
  padding:6px 9px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size:11px;
}
.tag b{ color:var(--text); margin-right:4px; }
.slider-state{ margin-left:auto; }

.dog-figure{
  position:relative;
  width:100%;
  min-height: 220px;
  display:grid;
  place-items:center;
}
.dog-img{
  width:clamp(140px, 80%, 240px);
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
  z-index:2;
}
.toy{
  position:absolute;
  width:18%;
  height:auto;
  bottom:18%;
  left:22%;
  z-index:1;
  object-fit:contain;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.40));
}

.controls{
  display:grid;
  gap:10px;
  padding-top: 6px;
}
.control-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.control-row label{ color:var(--muted); font-size:13px; }

.checkbox-label{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}

.control-row select{
  height: 34px;
  min-width: 180px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-size:13px;
}
.slider-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.slider-row label{ color:var(--muted); font-size:13px; }

input[type=range]{ width: 240px; accent-color: var(--brand); }
input[type=checkbox]{ width:18px; height:18px; cursor:pointer; accent-color: var(--brand); }

.steps{ display:grid; gap:10px; margin-top:14px; }
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
}
.step .num{
  width:30px;height:30px;
  border-radius:12px;
  background: rgba(39,209,126,.18);
  display:grid; place-items:center;
  font-weight:700;
  color: var(--text);
  flex-shrink:0;
}
.step p{ margin:2px 0 0; color:var(--muted); font-size:14px; line-height:1.45; }

/* =========================================================
   COSMETICS + BREEDS
========================================================= */
.cosmetics-showcase{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.cosmetics-group{
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.cosmetics-group h4{
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .2px;
}
.item-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.item{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 10px;
  display:grid;
  place-items:center;
  gap: 8px;
  min-height: 110px;
}
.item img{
  width: 100%;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.45));
}
.item span{
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.more-item{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(39,209,126,.14), rgba(102,178,255,.10));
  border-color: rgba(39,209,126,.25);
}
.more-text{
  font-size: 16px !important;
  font-weight: 700;
  color: var(--text) !important;
  white-space: normal !important;
}

.breed-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.breed{
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  padding: 12px 10px;
  display:grid;
  place-items:center;
  gap: 8px;
  min-height: 150px;
  overflow:hidden;
}
.breed img{
  width: 100%;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.45));
}
.breed span{ font-size:12px; color:var(--muted); }

.breed.more{
  background: linear-gradient(135deg, rgba(39,209,126,.14), rgba(102,178,255,.10));
}
.breed.more span{
  color:var(--text);
  font-weight:700;
  text-align:center;
  white-space:pre-line;
}

.chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content: center; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size:12px;
}
.chip .swatch{ width:10px;height:10px;border-radius:99px; background: var(--brand); }
.swatch-accent{ background: var(--accent) !important; }
.swatch-warning{ background: var(--warning) !important; }

.more-note{
  margin: 0 0;
  color: var(--muted2);
  font-size: 12px;
  text-align: center;
}

/* =========================================================
   COMMUNITY
========================================================= */
.community-card{ position:relative; overflow:hidden; }
.community-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity:0.5;
}

.badge-soon{
  background: rgba(39,209,126,.18);
  border-color: rgba(39,209,126,.35);
  border-radius: 18px;
  padding: 5px;
}
.badge-soon-text{ color:var(--brand); }

.community-preview{
  margin-top:24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  padding: 32px;
  position:relative;
  min-height: 280px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.coming-soon-overlay{
  position:absolute;
  inset:0;
  background: rgba(7,10,18,.75);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  border-radius: var(--radius);
}
.coming-soon-badge{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  border-radius:999px;
  background: rgba(39,209,126,.18);
  color: var(--text);
  font-size:18px;
  font-weight:700;
  box-shadow: 0 20px 60px rgba(39,209,126,.25);
}

.community-mockup{
  display:grid;
  gap:16px;
  width:100%;
  max-width:600px;
  z-index:1;
}
.mockup-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.mockup-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  opacity:0.3;
  flex-shrink:0;
}
.mockup-text{ flex:1; display:grid; gap:8px; }
.mockup-name{
  height:14px;
  background: rgba(255,255,255,.15);
  border-radius:8px;
  width:35%;
}
.mockup-stat{
  height:10px;
  background: rgba(255,255,255,.08);
  border-radius:6px;
  width:55%;
}

/* =========================================================
   CTA
========================================================= */
.cta-card{
  text-align:center;
  max-width:720px;
  margin:0 auto;
  padding:42px 32px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.cta-card h3{
  margin:0;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing:-.01em;
}
.cta-card p{
  margin:12px auto 24px;
  color:var(--muted);
  font-size:16px;
  max-width:55ch;
}

/* =========================================================
   FAQ
========================================================= */
.section-narrow{ max-width: 900px; margin: 0 auto; }
.faq{
  display:grid;
  gap:12px;
  max-width: 900px;
  margin: 0 auto;
}
.faq-item{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
.faq-q{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  font-weight: 750;
  color: var(--text);
  user-select: none;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(234,240,255,.75);
  border-bottom: 2px solid rgba(234,240,255,.75);
  transform: rotate(45deg);
  transition: transform .22s ease;
  flex: 0 0 auto;
}
.faq-item[open] .faq-q::after{ transform: rotate(225deg); }

.faq-a{
  padding: 0 18px;
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq-a > p{
  overflow: hidden;
  margin: 0;
  padding: 0 0 16px;
  color: var(--muted);
  line-height: 1.65;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .22s ease;
}
.faq-item[open] .faq-a{ grid-template-rows: 1fr; }
.faq-item[open] .faq-a > p{ opacity: 1; transform: translateY(0); }

.faq-q:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
.faq-item[open] .faq-q{
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* =========================================================
   PINNED “APPLE-STYLE” FEATURES (single source of truth)
========================================================= */
.sf-pin{
  height: 400vh; /* JS can set this based on number of steps */
  position: relative;
  z-index: 1;
}

.sf-stage{
  position: sticky;
  top: var(--navH);
  height: calc(100vh - var(--navH));
  z-index: 1; /* below nav */
  background: transparent;
  backdrop-filter: blur(10px);
}

.sf-inner{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 18px 0 22px;
}

.sf-head{ padding: 10px 0 16px; }
.sf-head h3{ margin:0; }
.sf-head p{ margin: 6px 0 0; color: var(--muted); }

.sf-body{
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 26px;
  align-items: center;
}

.sf-visual{ align-self: center; }

/* CRITICAL: position context for sf-glow */
.sf-frame{
  position: relative;
  height: 88vh;
  max-height: 780px;
  min-height: 520px;

  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.sf-frame img{
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity .2s ease;
}

.sf-glow{
  pointer-events:none;
  position:absolute;
  inset:-40%;
  opacity:.95;
  mix-blend-mode: screen;
}

.sf-steps{
  display: grid;
  gap: 12px;
  align-content: center;
  max-width: 680px;
}

.sf-step{
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  padding: 16px;
  opacity: .35;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}

.sf-step.is-active{
  opacity: 1;
  transform: translateY(0);
  background: rgba(255,255,255,.06);
}

.sf-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(39,209,126,.18), rgba(102,178,255,.12));
  display:grid;
  place-items:center;
  font-size: 20px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

.sf-step h4{ margin: 8px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.sf-step p{ margin: 0 0 10px; color: var(--muted); line-height: 1.6; }
.sf-step ul{ margin: 0; padding-left: 18px; color: var(--muted2); display:grid; gap: 6px; }
@media (max-width: 640px){
  .sf-pin{ height: auto !important; }
  .sf-stage{
    position: relative !important;
    top: auto !important;
    height: auto !important;
    backdrop-filter: none !important;
  }
  .sf-body{ grid-template-columns: 1fr !important; }
  .sf-frame{
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
  }
  .sf-frame img{
    width: 100% !important;
    height: auto !important;
  }
  .sf-step{ opacity: 1 !important; transform: none !important; }
}


/* =========================================================
   FOOTER
========================================================= */
.footer{
  padding: 34px 0 42px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.footer a{ color:var(--muted); text-decoration:none; }
.footer a:hover{ color:var(--text); }

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-blurb{
  margin:10px 0 0;
  max-width:55ch;
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer-title{ color:var(--text); }

.footer-linklist{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.footer-news{ min-width:260px; }
.footer-news-text{ margin:10px 0 10px; }

.footer-form{
  display:flex;
  gap:10px;
}
.footer-input{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--text);
}
.footer-fineprint{
  margin:10px 0 0;
  color:var(--muted2);
  font-size:12px;
}

.footer-copy{
  margin-top:22px;
  color:var(--muted2);
  font-size:12px;
}

/* =========================================================
   REVEAL
========================================================= */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform: translateY(0); }

/* =========================================================
   MOBILE NAV PANEL
========================================================= */
.mobile-nav{
  display:none;
  position:fixed;
  inset: 64px 12px auto 12px;
  background: rgba(7,10,18,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  padding: 10px;
  z-index:9998;
}
.mobile-nav.open{ display:block; }
.mobile-nav a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.mobile-nav a:hover,
.mobile-nav a:active{
  background: rgba(255,255,255,.06);
  color:var(--text);
}

/* =========================================================
   UTILITIES
========================================================= */
.mobile-only{ display:none !important; }
.mobile-hide{ display:block; }

/* =========================================================
   RESPONSIVE: <= 980px
========================================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .demo{ grid-template-columns:1fr; }
  .breed-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .cosmetics-showcase{ grid-template-columns: 1fr; }
  .item-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.feature-carousel{ display:none; }

/* Mobile: scrollytelling OFF, carousel ON */
@media (max-width: 640px){
  .feature-carousel{ display:block; }
}

/* =========================================================
   RESPONSIVE: <= 760px
========================================================= */
@media (max-width: 760px){
  .container{ width:min(1160px, calc(100% - 32px)); }

  .nav-links{ display:none; }
  .menu-btn{ display:inline-flex; }

  .hero{ padding: 48px 0 28px; }
  .hero h2{ font-size: clamp(28px, 8vw, 42px); }

  .grid-3, .grid-2{ grid-template-columns:1fr; }

  input[type=range]{ width:100%; max-width:240px; }

  .control-row{ flex-direction:column; align-items:flex-start; }
  .control-row select{ width:100%; min-width:unset; }

  .floaters{ display:none !important; }
  body::after{ opacity: .035 !important; }
}

/* =========================================================
   TRUE MOBILE (<= 640px coarse pointer)
========================================================= */
@media (max-width: 640px) and (pointer: coarse){
  .mobile-only{ display:block !important; }
  .mobile-hide{ display:none !important; }

  /* Sticky bottom CTA */
  body{ padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .m-cta{
    display:block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9997;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(7,10,18,.86);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .m-cta.is-hidden{ display:none; }
  .m-cta-inner{ max-width: 560px; margin: 0 auto; display: grid; gap: 6px; }
  .m-cta-btn{ width: 100%; justify-content: center; font-weight: 800; border-radius: 16px; }
  .m-cta-sub{ text-align: center; font-size: 12px; color: var(--muted2); }

  /* Hero compression */
  .hero{ padding: 44px 0 18px !important; text-align:center; }
  .hero p{ margin-left:auto; margin-right:auto; margin-bottom: 14px !important; }

  .hero-bullets,
  .hero-proof,
  .microcopy,
  .floaters{ display:none !important; }

  .cta-row{ justify-content:center !important; width:100%; }
  .cta-row .btn{ width:100%; max-width:420px; }
  .phone{ max-width: 320px !important; margin: 0 auto; }
  .hero-card{ padding: 14px !important; }

  /* Section header centering */
  .section-header{
    text-align:center !important;
    align-items:center !important;
    flex-direction:column;
  }
  .section-header > div{ width:100%; text-align:center !important; }
  .section-header p{ margin-left:auto !important; margin-right:auto !important; }

  /* Trust pills: keep one row (scroll) */
  .trust-row{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 8px !important;
    justify-content: center;
  }
  .trust-row::-webkit-scrollbar{ display:none; }
  .trust-pill{
    flex: 0 0 auto;
    padding: 8px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* Breeds: reduce visual load */
  .breed-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .breed-grid .breed:nth-child(n+7){ display:none !important; }

  .feature-carousel{ display:block; }
  .carousel-track{
    display:flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 6px 14px;
  }
  .carousel-track::-webkit-scrollbar{ display:none; }

  .carousel-slide{
    flex: 0 0 85%;
    scroll-snap-align: center;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    padding: 16px;
    text-align: center;
    overflow:hidden;
  }
  .carousel-slide img{
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 0 auto 14px;
    -webkit-clip-path: inset(0 round 16px);
    clip-path: inset(0 round 16px);
  }
  .carousel-slide strong{ display:block; font-size: 16px; margin-bottom: 6px; }
  .carousel-slide p{ font-size: 14px; color: var(--muted); margin: 0; }

  .carousel-dots{
    display:flex;
    justify-content:center;
    gap: 8px;
    margin-top: 12px;
  }
  .carousel-dots span{
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
  }
  .carousel-dots span.active{ background: var(--brand); }
}

/* Ensure CTA safe area on iOS */
@supports (padding: max(0px)){
  .m-cta{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
/* =========================================================
   MOBILE SIM / SMALL VIEWPORT FIX PACK
   Paste at VERY END of styles.css
========================================================= */

/* 1) HARD STOP horizontal overflow (common in simulators) */
html, body { max-width: 100%; overflow-x: hidden; }
* { max-width: 100%; }

/* Make sure the sticky nav can’t exceed viewport width */
.nav { left: 0; right: 0; width: 100%; }

/* Container: prefer padding instead of calc(width) on tiny screens */
@media (max-width: 760px){
  .container{
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Nav inner should wrap instead of forcing wide layout */
.nav-inner{
  flex-wrap: wrap;
  min-width: 0;
}
.brand, .nav-cta{ min-width: 0; }
.nav-cta{ flex-wrap: wrap; justify-content: flex-end; }
.nav-cta .btn{ max-width: 100%; }

/* Mobile nav panel: keep it inside viewport */
.mobile-nav{
  max-width: calc(100vw - 24px);
}

/* 2) Mobile visibility should be width-based in simulators */
.mobile-only{ display: none !important; }
.mobile-hide{ display: block; }

@media (max-width: 640px){
  .mobile-only{ display: block !important; }
  .mobile-hide{ display: none !important; }
}

/* 3) FIX: How micro section styles (section-alt + how-micro) */
.section-alt{
  background: rgba(255,255,255,.02);
}

.how-micro .container{ padding-top: 0; padding-bottom: 0; }

/* Ensure this only “acts mobile” on small screens */
@media (max-width: 640px){
  .how-row{
    display: grid;
    gap: 10px;
  }
  .how-item{
    display:flex;
    gap: 12px;
    align-items:center;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
  }
  .how-ico{
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    background: linear-gradient(135deg, rgba(39,209,126,.20), rgba(102,178,255,.12));
    border: 1px solid rgba(255,255,255,.12);
    flex: 0 0 auto;
    font-size: 18px;
  }
  .how-item strong{ display:block; font-size: 14px; }
  .how-item span{
    display:block;
    font-size: 12px;
    color: var(--muted2);
    margin-top: 2px;
  }
}

/* 4) FIX: Trust section (.section.trust.mobile-only) */
@media (max-width: 640px){
  .section.trust{
    padding: 22px 0 !important; /* compact but present */
  }

  .trust-row{
    display:flex;
    gap: 8px;
    flex-wrap: nowrap;              /* keeps one row */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    justify-content: center;
  }
  .trust-row::-webkit-scrollbar{ display:none; }

  .trust-pill{
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
  }
}

/* 5) Safety: if any single element still pushes width, this catches it */
@media (max-width: 640px){
  .nav-inner, .hero-grid, .demo, .grid-2, .grid-3, .footer-grid{
    min-width: 0;
  }
}
/* =========================================================
   MOBILE FIXES (END OF FILE)
========================================================= */

/* ---------------------------------------------------------
   1) NAVBAR: force single row on mobile
--------------------------------------------------------- */
@media (max-width: 640px){

  /* Prevent wrapping entirely */
  .nav-inner{
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* Brand must stay visible but compact */
  .brand{
    display: flex !important;
    min-width: 0;
    flex-shrink: 1;
  }

  .brand h1{
    font-size: 14px;
    white-space: nowrap;
  }

  .brand span{
    display: none; /* subtitle causes wrap */
  }

  /* Right-side actions stay on same row */
  .nav-inner > div:last-child{
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
  }

  /* Buttons must not force width */
  .nav-inner .btn{
    white-space: nowrap;
    padding: 10px 12px;
  }
}

/* ---------------------------------------------------------
   2) COSMETICS: show only 3 hats + 3 toys on mobile
--------------------------------------------------------- */
@media (max-width: 640px){

  /* Limit grid to 3 columns */
  .item-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Hide everything after the 3rd item */
  .item-grid .item:nth-child(n+4){
    display: none !important;
  }

  /* Keep the "and more..." tile hidden on mobile */
  .item-grid .more-item{
    display: none !important;
  }
}
/* =========================================================
   MOBILE: auto-hide navbar on scroll
   (requires JS toggling .nav--hidden)
========================================================= */
@media (max-width: 640px){
  .nav{
    position: sticky;
    top: 0;
    transition: transform .22s ease, opacity .22s ease;
    will-change: transform;
  }

  .nav.nav--hidden{
    transform: translateY(-110%);
    opacity: 0.98;
  }
}
/* =========================================================
   MOBILE: hide navbar + show CTA (controlled by JS)
========================================================= */

/* Navbar hide animation */
@media (max-width: 640px){
  .nav{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translate3d(0,0,0);
    transition: transform .22s ease;
    will-change: transform;
  }

  .nav.nav--hidden{
    transform: translate3d(0,-110%,0);
  }

  /* CTA is hidden by default on mobile */
  .m-cta{
    display:block; /* keep it mounted so we can animate */
    transform: translate3d(0,120%,0);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    will-change: transform, opacity;
  }

  /* When visible */
  .m-cta.is-visible{
    transform: translate3d(0,0,0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Only reserve space when CTA is actually visible */
  body{
    padding-bottom: 0 !important;
  }
  body.cta-visible{
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Keep CTA fully hidden on desktop */
@media (min-width: 641px){
  .m-cta{ display:none !important; }
  body{ padding-bottom: 0 !important; }
}
/* =========================================================
   DESKTOP FEATURES: force scrollytelling layout to work
   (Overrides any accidental earlier overrides)
========================================================= */

/* Only apply to non-mobile widths */
@media (min-width: 641px){

  /* Ensure the desktop carousel is OFF */
  .feature-carousel{
    display: none !important;
  }
}
/* =========================================================
   FORCE DESKTOP SCROLLYTELLING (restore original behavior)
   Put at VERY END of styles.css
========================================================= */

/* Desktop + tablet: keep scrollytelling ON */
@media (min-width: 641px){
  /* Ensure desktop scrollytelling is not hidden by mobile carousel rules */
  .feature-carousel{ display: none !important; }
}
/* =========================================================
   FORCE MOBILE FEATURES SWITCH (width-based)
   - Hide desktop scrollytelling on small viewports
   - Show mobile carousel on small viewports
   Put at VERY END of styles.css
========================================================= */

@media (max-width: 640px){
  /* hide desktop scrollytelling completely */
  #sfPin,
  .sf-pin,
  .sf-stage{
    display: none !important;
  }

  /* show the mobile carousel */
  .feature-carousel{
    display: block !important;
  }
}

/* Desktop: ensure carousel stays hidden */
@media (min-width: 641px){
  .feature-carousel{
    display: none !important;
  }

  /* show scrollytelling on desktop */
  #sfPin,
  .sf-pin{
    display: block !important;
  }
}
/* =========================================================
   FOOTER FIX — MOBILE
========================================================= */
@media (max-width: 640px){
  .footer-grid{
    justify-content: center !important;
    text-align: center;
  }

  .footer-grid > *{
    width: 100%;
    max-width: 420px; /* keeps content readable */
  }

  .footer-links{
    justify-content: space-evenly;
  }

  .footer-form{
    justify-content: center;
  }
}/* =========================================================
   LIGHT MODE — SOLID CTA GREEN SURFACES
   (No tints, no translucency)
========================================================= */

:root[data-theme="light"]{
  /* Brand-solid greens (CTA-derived) */
  --green-solid: #27D17E;        /* matches CTA start */
  --green-solid-dark: #1DAE68;   /* matches CTA end */
  --green-border: #18A561;

  --text-on-green: #062114;
}

/* ---------------------------------------------------------
   NAV — PURE WHITE (contrast anchor)
--------------------------------------------------------- */
:root[data-theme="light"] .nav{
  background: #ffffff !important;
  backdrop-filter: none !important;
}

/* ---------------------------------------------------------
   SECTION-DARK — SOLID BRAND GREEN
--------------------------------------------------------- */
:root[data-theme="light"] .section-dark{
  background: linear-gradient(
    135deg,
    var(--green-solid),
    var(--green-solid-dark)
  ) !important;

  border-top: 1px solid var(--green-border) !important;
  border-bottom: 1px solid var(--green-border) !important;
}

/* Text contrast on solid green */
:root[data-theme="light"] .section-dark h3,
:root[data-theme="light"] .section-dark strong{
  color: var(--text-on-green) !important;
}
:root[data-theme="light"] .section-dark p{
  color: rgba(6,33,20,.85) !important;
}

/* Cards inside section-dark stay white for hierarchy */
:root[data-theme="light"] .section-dark .card{
  background: #ffffff !important;
  color: rgba(11,16,32,.90);
}

/* ---------------------------------------------------------
   FEATURES — SOLID GREEN CARDS
--------------------------------------------------------- */

/* Desktop scrollytelling cards */
:root[data-theme="light"] #features .sf-step{
  background: linear-gradient(
    135deg,
    var(--green-solid),
    var(--green-solid-dark)
  ) !important;

  border-color: var(--green-border) !important;
  color: var(--text-on-green) !important;
  opacity: .85;
}

/* Active feature card = full intensity */
:root[data-theme="light"] #features .sf-step.is-active{
  opacity: 1 !important;
}

/* Feature text */
:root[data-theme="light"] #features .sf-step h4{
  color: #062114 !important;
}
:root[data-theme="light"] #features .sf-step p,
:root[data-theme="light"] #features .sf-step ul{
  color: rgba(6,33,20,.85) !important;
}

/* Feature icons — solid green */
:root[data-theme="light"] #features .sf-icon{
  background: #1DAE68 !important;
  border-color: #16985D !important;
  color: #062114 !important;
}

/* Mobile feature carousel */
:root[data-theme="light"] .feature-carousel .carousel-slide{
  background: linear-gradient(
    135deg,
    var(--green-solid),
    var(--green-solid-dark)
  ) !important;

  border-color: var(--green-border) !important;
  color: var(--text-on-green) !important;
}

/* ---------------------------------------------------------
   CTA SECTION — SAME SOLID GREEN AS BUTTONS
--------------------------------------------------------- */
:root[data-theme="light"] .section-cta{
  background: var(--brandgreen) !important;
}

/* CTA card floats above green */
:root[data-theme="light"] .section-cta .cta-card{
  background: #ffffff !important;
  border-color: rgba(6,33,20,.22) !important;
}

/* ---------------------------------------------------------
   FOOTER — PURE WHITE
--------------------------------------------------------- */
:root[data-theme="light"] .footer{
  background: #ffffff !important;
  border-top: 1px solid rgba(11,16,32,.12) !important;
  color: rgba(11,16,32,.70) !important;
}

:root[data-theme="light"] .footer a{
  color: rgba(11,16,32,.65) !important;
}
:root[data-theme="light"] .footer a:hover{
  color: rgba(11,16,32,.95) !important;
}

:root[data-theme="light"] .footer-copy{
  color: rgba(11,16,32,.55) !important;
}
/* =========================================================
   LIGHT MODE — WHITE TEXT ON GREEN SECTIONS
========================================================= */

/* Utility: anything that is a solid green surface */
:root[data-theme="light"] .section-dark,
:root[data-theme="light"] .section-cta,
:root[data-theme="light"] #features .sf-step,
:root[data-theme="light"] .feature-carousel .carousel-slide{
  color: #ffffff !important;
}

/* Headings & strong text */
:root[data-theme="light"] .section-dark h3,
:root[data-theme="light"] .section-dark h4,
:root[data-theme="light"] .section-dark strong,
:root[data-theme="light"] .section-cta h3,
:root[data-theme="light"] .section-cta h4,
:root[data-theme="light"] .section-cta strong,
:root[data-theme="light"] #features .sf-step h4,
:root[data-theme="light"] #features .sf-step strong{
  color: #ffffff !important;
}

/* Paragraphs, lists, meta text */
:root[data-theme="light"] .section-dark p,
:root[data-theme="light"] .section-dark span,
:root[data-theme="light"] .section-dark li,
:root[data-theme="light"] .section-cta p,
:root[data-theme="light"] .section-cta span,
:root[data-theme="light"] .section-cta li,
:root[data-theme="light"] #features .sf-step p,
:root[data-theme="light"] #features .sf-step ul,
:root[data-theme="light"] #features .sf-step li{
  color: rgba(255,255,255,.92) !important;
}

/* Icons on green */
:root[data-theme="light"] #features .sf-icon{
  color: #ffffff !important;
}

/* Chips / tags inside green sections */
:root[data-theme="light"] .section-dark .tag,
:root[data-theme="light"] #features .sf-step .tag{
  color: #ffffff !important;
  border-color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.18) !important;
}

/* Ensure links are white and readable */
:root[data-theme="light"] .section-dark a,
:root[data-theme="light"] .section-cta a{
  color: #ffffff !important;
}
:root[data-theme="light"] .section-dark a:hover,
:root[data-theme="light"] .section-cta a:hover{
  opacity: .9;
}
/* =========================================================
   LIGHT MODE — WHITE TEXT ONLY ON GREEN BACKGROUNDS
========================================================= */

/* ---------------------------------------------------------
   1) Section backgrounds that are solid green
--------------------------------------------------------- */
:root[data-theme="light"] .section-dark,
:root[data-theme="light"] .section-cta{
  color: #ffffff !important;
}

/* Headings & body text directly inside green sections */
:root[data-theme="light"] .section-dark > .container,
:root[data-theme="light"] .section-cta > .container{
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   2) Feature cards that are GREEN (not white cards)
--------------------------------------------------------- */

/* Desktop feature steps (these are green) */
:root[data-theme="light"] #features .sf-step{
  color: #ffffff !important;
}

/* Text inside green feature steps */
:root[data-theme="light"] #features .sf-step h4,
:root[data-theme="light"] #features .sf-step strong{
  color: #ffffff !important;
}
:root[data-theme="light"] #features .sf-step p,
:root[data-theme="light"] #features .sf-step ul,
:root[data-theme="light"] #features .sf-step li{
  color: rgba(255,255,255,.92) !important;
}

/* Feature icons on green */
:root[data-theme="light"] #features .sf-step .sf-icon{
  color: #ffffff !important;
}

/* Mobile feature carousel cards (green) */
:root[data-theme="light"] .feature-carousel .carousel-slide{
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   3) EXPLICITLY keep white cards dark-text
   (defensive rule to avoid regressions)
--------------------------------------------------------- */
:root[data-theme="light"] .card,
:root[data-theme="light"] .cta-card,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .proof-card,
:root[data-theme="light"] .breed,
:root[data-theme="light"] .item{
  color: #0B1020 !important;
}

:root[data-theme="light"] .card p,
:root[data-theme="light"] .cta-card p{
  color: rgba(11,16,32,.75) !important;
}
/* =========================================================
   LIGHT MODE FIX: prevent white text inside WHITE cards
   Paste at VERY END of styles.css
========================================================= */

/* 1) CTA card is white => force dark text for all descendants */
:root[data-theme="light"] .section-cta .cta-card,
:root[data-theme="light"] .section-cta .cta-card *{
  color: #0B1020 !important;
}

/* Make CTA paragraph/microcopy slightly muted (still dark) */
:root[data-theme="light"] .section-cta .cta-card p,
:root[data-theme="light"] .section-cta .cta-card .microcopy{
  color: rgba(11,16,32,.75) !important;
}

/* 2) Any standard white card => force dark text (including <strong>) */
:root[data-theme="light"] .card,
:root[data-theme="light"] .card *{
  color: #0B1020 !important;
}

:root[data-theme="light"] .card p{
  color: rgba(11,16,32,.75) !important;
}

/* 3) Keep only the actual GREEN surfaces white-text (not their white children) */
:root[data-theme="light"] .section-dark,
:root[data-theme="light"] .section-cta{
  color: #ffffff !important;
}

/* (Optional but recommended) Ensure green feature cards stay white-text */
:root[data-theme="light"] #features .sf-step,
:root[data-theme="light"] #features .sf-step * ,
:root[data-theme="light"] .feature-carousel .carousel-slide,
:root[data-theme="light"] .feature-carousel .carousel-slide *{
  color: #ffffff !important;
}
/* =========================================================
   LIGHT MODE PATCH — CTA button + white card text fixes
   Paste at VERY END of styles.css
========================================================= */

/* ---------------------------------------------------------
   1) CTA button text must be WHITE on green gradient
   (Overrides any "cta-card * { color: ... }" rules)
--------------------------------------------------------- */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-primary *{
  color: #ffffff !important;
}

/* Optional: also keep normal buttons readable */
:root[data-theme="light"] .btn{
  color: inherit;
}

/* ---------------------------------------------------------
   2) White cards inside green sections MUST be dark text
   Fixes:
   - Problem section card titles (e.g. "Hard to stay consistent")
   - Proof quotes (e.g. “It’s the only habit app…”)
--------------------------------------------------------- */

/* Cards inside green sections */
:root[data-theme="light"] .section-dark .card,
:root[data-theme="light"] .section-dark .card *{
  color: #0B1020 !important;
}

/* Card paragraph tone */
:root[data-theme="light"] .section-dark .card p{
  color: rgba(11,16,32,.75) !important;
}

/* Also ensure proof cards (same structure) are correct */
:root[data-theme="light"] #proof .card,
:root[data-theme="light"] #proof .card *{
  color: #0B1020 !important;
}
:root[data-theme="light"] #proof .card p{
  color: rgba(11,16,32,.75) !important;
}

/* ---------------------------------------------------------
   3) CTA card stays dark EXCEPT primary button stays white
--------------------------------------------------------- */
:root[data-theme="light"] .section-cta .cta-card,
:root[data-theme="light"] .section-cta .cta-card *{
  color: #0B1020 !important;
}

/* Re-assert primary button inside CTA card */
:root[data-theme="light"] .section-cta .cta-card .btn-primary,
:root[data-theme="light"] .section-cta .cta-card .btn-primary *{
  color: #ffffff !important;
}
/* =========================================================
   LIGHT MODE — FOOTER: WHITE BACKGROUND + DARK TEXT
========================================================= */

:root[data-theme="light"] .footer{
  background: #ffffff !important;
  color: #0B1020 !important;
  border-top: 1px solid rgba(11,16,32,.12) !important;
}

/* Force all footer descendants dark (fixes white-on-white) */
:root[data-theme="light"] .footer,
:root[data-theme="light"] .footer *{
  color: #0B1020 !important;
}

/* Footer paragraph / fineprint slightly muted */
:root[data-theme="light"] .footer p,
:root[data-theme="light"] .footer .footer-fineprint,
:root[data-theme="light"] .footer .footer-copy{
  color: rgba(11,16,32,.65) !important;
}

/* Footer links */
:root[data-theme="light"] .footer a{
  color: rgba(11,16,32,.70) !important;
}
:root[data-theme="light"] .footer a:hover{
  color: #0B1020 !important;
}

/* Footer email input */
:root[data-theme="light"] .footer .footer-input{
  background: #ffffff !important;
  color: #0B1020 !important;
  border-color: rgba(11,16,32,.16) !important;
}

/* Keep primary button text white (it’s inside the footer form) */
:root[data-theme="light"] .footer .btn-primary,
:root[data-theme="light"] .footer .btn-primary *{
  color: #ffffff !important;
}
/* =========================================================
   LIGHT MODE — FOOTER FINAL PIN (titles + copyright)
========================================================= */

/* Force the section titles (“Product”, “Legal”, “Stay updated”) */
:root[data-theme="light"] .footer .footer-title{
  color: #0B1020 !important;
}

/* Force the copyright line and everything inside it */
:root[data-theme="light"] .footer .footer-copy,
:root[data-theme="light"] .footer .footer-copy *{
  color: rgba(11,16,32,.65) !important;
}

/* Defensive: if any footer strong tags were being forced white */
:root[data-theme="light"] .footer strong{
  color: #0B1020 !important;
}

/* Keep footer primary button label white */
:root[data-theme="light"] .footer .btn-primary,
:root[data-theme="light"] .footer .btn-primary *{
  color: #ffffff !important;
}
/* =========================================================
   LIGHT MODE — NEUTRALIZE TESTIMONIALS + FEATURES
   Replace green section backgrounds with bgSecondary (#F8FAFC)
   Convert green containers -> white containers with green accents
========================================================= */

:root[data-theme="light"]{
  --bgSecondary: #F3EFE6;
  --ink: #0B1020;
  --inkMuted: rgba(11,16,32,.72);
  --borderSoft: rgba(11,16,32,.10);
  --cardWhite: #ffffff;
}

/* -------------------------------------------
   1) TESTIMONIALS (your "People who..." section)
   Section id="proof" is currently section-dark (green). Make it neutral.
-------------------------------------------- */
:root[data-theme="light"] #proof.section-dark{
  background: var(--panelBg) !important;
  border-top: none !important;
  border-bottom: none !important;
  color: var(--ink) !important;
}

/* Keep testimonial cards white + readable */
:root[data-theme="light"] #proof .card{
  background: var(--cardWhite) !important;
  border-color: var(--borderSoft) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] #proof .card strong{
  color: var(--ink) !important;
}
:root[data-theme="light"] #proof .card p{
  color: var(--inkMuted) !important;
}

/* -------------------------------------------
   2) FEATURE EXPLANATIONS (the scrollytelling section)
   Make the whole feature area a calm, neutral anchor.
-------------------------------------------- */
:root[data-theme="light"] #features.section-alt{
  background: var(--panelBg) !important;
  border-top: none !important;
  border-bottom: none !important;
  color: var(--ink) !important;
}

/* Headline: strong, confidence-building */
:root[data-theme="light"] #features .sf-head h3{
  color: var(--ink) !important;
  letter-spacing: -0.015em;
  font-weight: 900;
}
:root[data-theme="light"] #features .sf-head p{
  color: var(--inkMuted) !important;
}

/* Visual frame: keep calm, not “neon green” */

:root[data-theme="light"] #features .sf-glow{
  opacity: .55 !important; /* reduce intensity in light mode */
}

/* -------------------------------------------
   3) Convert green feature blocks -> WHITE cards with GREEN accents
   (Desktop feature steps + Mobile carousel)
-------------------------------------------- */

/* Desktop feature step cards become white containers */
:root[data-theme="light"] #features .sf-step{
  background: var(--cardWhite) !important;
  border-color: var(--borderSoft) !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Active state = minimal green accent (border + subtle lift) */
:root[data-theme="light"] #features .sf-step.is-active{
  border-color: rgba(39,209,126,.35) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .08) !important;
}

/* Feature step typography */
:root[data-theme="light"] #features .sf-step h4{
  color: var(--ink) !important;
  font-weight: 850;
}
:root[data-theme="light"] #features .sf-step p{
  color: var(--inkMuted) !important;
}
:root[data-theme="light"] #features .sf-step ul{
  color: var(--inkMuted) !important;
}

/* Green icons (accent only) */
:root[data-theme="light"] #features .sf-icon{
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border-color: rgba(39,209,126,.40) !important;
  color: #ffffff !important;
}

/* Green checkmarks in feature lists */
:root[data-theme="light"] #features .sf-step ul{
  list-style: none !important;
  padding-left: 0 !important;
}
:root[data-theme="light"] #features .sf-step ul li{
  position: relative;
  padding-left: 22px;
}
:root[data-theme="light"] #features .sf-step ul li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 900;
}

/* Optional: a “progress bar” feel for active step (minimal) */
:root[data-theme="light"] #features .sf-step.is-active{
  background:
    linear-gradient(90deg, rgba(39,209,126,.10), transparent 38%),
    var(--cardWhite) !important;
}

/* Mobile carousel slides should match: white cards + green accents */
:root[data-theme="light"] .feature-carousel .carousel-slide{
  background: var(--cardWhite) !important;
  border-color: var(--borderSoft) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] .feature-carousel .carousel-slide strong{
  color: var(--ink) !important;
}
:root[data-theme="light"] .feature-carousel .carousel-slide p{
  color: var(--inkMuted) !important;
}
:root[data-theme="light"] .carousel-dots span.active{
  background: var(--brandgreen) !important;
}/* =========================================================
   LIGHT MODE — FOUNDATION RESET
   Critical background + soft section panels
========================================================= */

/* ---------------------------------------------------------
   1) PAGE BACKGROUND — darker neutral canvas
   This is the base that everything sits on
--------------------------------------------------------- */
:root[data-theme="light"] body{
  background: #FAF8F3 !important; /* warm off-white */
  color: #0B1020;
}

/* Kill any decorative dark-mode background layers */
:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after{
  display: none !important;
}

/* ---------------------------------------------------------
   2) SOFT SECTION PANELS (informational sections)
   Used instead of green for non-CTA content
--------------------------------------------------------- */

/* Generic soft panel treatment */
:root[data-theme="light"] .section-dark{
  background: #F3EFE6 !important; /* warm off-white panel */
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  color: #0B1020 !important;
}

/* Ensure containers inherit correct color */
:root[data-theme="light"] .section-dark > .container{
  color: inherit;
}

/* Typography inside soft panels */
:root[data-theme="light"] .section-dark h3,
:root[data-theme="light"] .section-dark h4,
:root[data-theme="light"] .section-dark strong{
  color: #0B1020 !important;
}
:root[data-theme="light"] .section-dark p{
  color: rgba(11,16,32,.72) !important;
}

/* ---------------------------------------------------------
   3) SPECIFIC SECTIONS YOU CALLED OUT
--------------------------------------------------------- */

/* Testimonials */
:root[data-theme="light"] #proof.section-dark{
  background: #F3EFE6 !important;
}

/* Problem / Solution sections (informational, not CTA) */
:root[data-theme="light"] #problem.section-dark,
:root[data-theme="light"] #solution.section-dark{
  background: #F3EFE6 !important;
}

/* ---------------------------------------------------------
   4) CARDS — float cleanly above panels
--------------------------------------------------------- */
:root[data-theme="light"] .card{
  background: #ffffff !important;
  border: 1px solid rgba(11,16,32,.09) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  color: #0B1020 !important;
}

:root[data-theme="light"] .card strong{
  color: #0B1020 !important;
}
:root[data-theme="light"] .card p{
  color: rgba(11,16,32,.75) !important;
}

/* ---------------------------------------------------------
   5) CTA SECTION — remains brand-forward (green)
--------------------------------------------------------- */
:root[data-theme="light"] .section-cta{
  background: var(--brandgreen) !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* CTA text on green */
:root[data-theme="light"] .section-cta,
:root[data-theme="light"] .section-cta *{
  color: #ffffff;
}

/* CTA card floats above green */
:root[data-theme="light"] .section-cta .cta-card{
  background: #ffffff !important;
  color: #0B1020 !important;
}
:root[data-theme="light"] .section-cta .cta-card *{
  color: #0B1020 !important;
}
:root[data-theme="light"] .section-cta .cta-card .btn-primary,
:root[data-theme="light"] .section-cta .cta-card .btn-primary *{
  color: #ffffff !important;
}
/* =========================================================
   LIGHT MODE — Accent band + stronger neutral contrast
========================================================= */

:root[data-theme="light"]{
  --pageBg: #FAF8F3;
  --panelBg: #F3EFE6;
  --divider: #C4B89A;
  --ink: #0B1020;
  --ink2: rgba(11,16,32,.78);
  --ink3: rgba(11,16,32,.62);
}

/* ---------------------------------------------------------
   A) Mid-page accent band (short, tight)
--------------------------------------------------------- */
:root[data-theme="light"] .accent-band{
  background: rgba(29, 186, 111, .10);
  padding: 36px 0;
}
:root:not([data-theme="light"]) .accent-band{
  background: rgba(39, 209, 126, .14);
}


:root[data-theme="light"] .accent-band-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px;
}
@media (max-width: 900px){
  .accent-band-inner{ flex-direction: column; align-items: flex-start; }
}


:root[data-theme="light"] .accent-copy h3{
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--ink);
}

:root[data-theme="light"] .accent-copy p{
  margin: 8px 0 0;
  color: var(--ink2);
  font-size: 15px;
}
:root[data-theme="light"] .accent-copy strong{
  color: var(--ink);
}

:root[data-theme="light"] .accent-meta{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-shrink: 0;
}

:root[data-theme="light"] .accent-stat{
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  text-align: left;
}
:root[data-theme="light"] .accent-stat strong{
  display:block;
  font-weight: 950;
  color: var(--ink);
}
:root[data-theme="light"] .accent-stat span{
  display:block;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
}

/* Fun visual break: pup parade (no cards, no grid) */
:root[data-theme="light"] .pup-parade{
  display:flex;
  align-items:flex-end;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(39,209,126,.08);
}
:root[data-theme="light"] .pup-parade img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(15,23,42,.10));
}
:root[data-theme="light"] .pup-parade img:nth-child(2){ transform: translateY(-2px); }
:root[data-theme="light"] .pup-parade img:nth-child(3){ transform: translateY(-1px); }

/* Mobile layout for accent band */
@media (max-width: 760px){
  :root[data-theme="light"] .accent-band-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  :root[data-theme="light"] .accent-meta{
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------
   B) Increase contrast in neutral informational sections
   (stronger headings, darker dividers, occasional inset panels)
--------------------------------------------------------- */

/* Darker dividers for soft panels — removed for flat view */

/* Stronger headings in neutral sections */
:root[data-theme="light"] .section-header h3{
  color: var(--ink) !important;
  font-weight: 950;
  letter-spacing: -0.02em;
}
:root[data-theme="light"] .section-header p{
  color: var(--ink2) !important;
}

/* Occasional inset panels (opt-in utility class)
   Use this for “neutral ≠ flat” moments. */
:root[data-theme="light"] .inset-panel{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,16,32,.12);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

/* ---------------------------------------------------------
   C) Illustration density as energy
   - slightly larger hero visual
   - less whitespace around hero visuals
--------------------------------------------------------- */
@media (min-width: 761px){
  :root[data-theme="light"] .hero{
    padding: 52px 0 20px; /* tighter than current 64px top */
  }
  :root[data-theme="light"] .hero-grid{
    gap: 22px; /* less whitespace */
  }
  :root[data-theme="light"] .hero-card{
    padding: 14px; /* tighter */
  }
  :root[data-theme="light"] .phone{
    width: min(420px, 100%); /* slightly larger than 360px */
  }
}
/* =========================================================
   LIGHT MODE — GREEN ACCENT BAND (EMOTIONAL REINFORCEMENT)
========================================================= */

:root[data-theme="light"] .accent-band{
  background: var(--brandgreen) !important;

  border-top: none !important;
  border-bottom: none !important;

  padding: 28px 0; /* still short + tight */
  color: #ffffff !important;
}

/* Text inside accent band */
:root[data-theme="light"] .accent-band h3{
  color: #ffffff !important;
  font-weight: 950;
  letter-spacing: -0.02em;
}

:root[data-theme="light"] .accent-band p{
  color: rgba(255,255,255,.92) !important;
}

:root[data-theme="light"] .accent-band strong{
  color: #ffffff !important;
}

/* Stat pill inside green band */
:root[data-theme="light"] .accent-stat{
  background: rgba(255,255,255,.16) !important;
}

:root[data-theme="light"] .accent-stat strong{
  color: #ffffff !important;
}
:root[data-theme="light"] .accent-stat span{
  color: rgba(255,255,255,.85) !important;
}

/* Pup parade adapts to green */
:root[data-theme="light"] .pup-parade{
  background: rgba(255,255,255,.18) !important;
}
:root[data-theme="light"] .pup-parade img{
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.20));
}

/* Mobile spacing remains compact */
@media (max-width: 760px){
  :root[data-theme="light"] .accent-band{
    padding: 24px 0;
  }
}
/* =========================================================
   LIGHT MODE FIX — feature list text in WHITE cards
========================================================= */

/* White feature cards must use dark text */
:root[data-theme="light"] #features .sf-step,
:root[data-theme="light"] #features .sf-step *{
  color: #0B1020 !important;
}

/* Paragraph + list text hierarchy */
:root[data-theme="light"] #features .sf-step p,
:root[data-theme="light"] #features .sf-step ul,
:root[data-theme="light"] #features .sf-step li{
  color: rgba(11,16,32,.78) !important;
}

/* Headings stronger */
:root[data-theme="light"] #features .sf-step h4{
  color: #0B1020 !important;
}

/* Checkmarks stay green (accent only) */
:root[data-theme="light"] #features .sf-step ul li::before{
  color: var(--brand) !important;
}
/* =========================================================
   LIGHT MODE — REMOVE SECTION DIVIDERS
========================================================= */

/* Remove top/bottom borders from all sections */
:root[data-theme="light"] .section,
:root[data-theme="light"] .section-dark,
:root[data-theme="light"] .section-alt,
:root[data-theme="light"] .section-cta,
:root[data-theme="light"] .accent-band{
  border-top: none !important;
  border-bottom: none !important;
}

/* Keep card borders intact (do NOT affect cards) */
:root[data-theme="light"] .sf-step,
:root[data-theme="light"] .faq-item{
  border-width: 1px !important;
}
/* =========================================================
   LIGHT MODE — KILL ALL SECTION TOP BORDERS (FINAL)
========================================================= */

/* Nuclear option: no borders on any section containers */
:root[data-theme="light"] .section,
:root[data-theme="light"] .section-dark,
:root[data-theme="light"] .section-alt,
:root[data-theme="light"] .section-cta,
:root[data-theme="light"] .accent-band,
:root[data-theme="light"] section{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Explicitly target the problem sections by ID */
:root[data-theme="light"] #proof,
:root[data-theme="light"] #proof.section-dark,
:root[data-theme="light"] #proof.section-dark::before,
:root[data-theme="light"] #proof.section-dark::after{
  border-top: 0 !important;
}

:root[data-theme="light"] #goals,
:root[data-theme="light"] #adapts,
:root[data-theme="light"] section:has(h3:contains("Adapts to your goals")){
  border-top: 0 !important;
}

/* Safety: if any pseudo-elements are drawing lines */
:root[data-theme="light"] section::before,
:root[data-theme="light"] section::after{
  border: none !important;
}
/* =========================================================
   ACCENT BAND — BASE (DARK MODE default)
   Works without data-theme (your default is dark)
========================================================= */

.accent-band{
  padding: 28px 0;              /* short + tight */
  border: none;                 /* no section dividers */
  background: var(--brandgreen);
  color: #fff;
}

.accent-band-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.accent-copy h3{
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: #fff;
}

.accent-copy p{
  margin: 8px 0 0;
  font-size: 15px;
  color: rgba(255,255,255,.92);
}
.accent-copy strong{ color:#fff; }

.accent-meta{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-shrink: 0;
}

.accent-stat{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  text-align: left;
}
.accent-stat strong{
  display:block;
  font-weight: 950;
  color: #fff;
}
.accent-stat span{
  display:block;
  font-size: 12px;
  margin-top: 2px;
  color: rgba(255,255,255,.85);
}

/* Fun visual break */
.pup-parade{
  display:flex;
  align-items:flex-end;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.pup-parade img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.22));
}
.pup-parade img:nth-child(2){ transform: translateY(-2px); }
.pup-parade img:nth-child(3){ transform: translateY(-1px); }

@media (max-width: 760px){
  .accent-band{ padding: 24px 0; text-align: center;}
  .accent-band-inner{
    flex-direction: column;
    align-items: center;
  }
  .accent-meta{
    width: 100%;
    justify-content: space-evenly;
  }
}

/* =========================================================
   ACCENT BAND — LIGHT MODE (explicit, matches your request)
========================================================= */

:root[data-theme="light"] .accent-band{
  background: var(--brandgreen) !important;
  color: #fff !important;
  border: none !important;
}
:root[data-theme="light"] .accent-band *{
  color: inherit;
}

/* =========================================================
   DARK MODE — CTA SECTION GREEN
   (light mode remains unchanged)
========================================================= */

/* Dark mode CTA background */
.section-cta{
  background: var(--brandgreen);
  border: none;
}

/* CTA text hierarchy */
.section-cta h3,
.section-cta p,
.section-cta strong{
  color: #ffffff;
}

/* CTA card inside section */
.section-cta .cta-card{
  background: rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* Muted text inside CTA */
.section-cta .microcopy,
.section-cta .t-sub{
  color: rgba(255,255,255,.85);
}

/* Ensure primary CTA button stays white-on-green */
.section-cta .btn-primary,
.section-cta .btn-primary *{
  color: #ffffff !important;
}

/* Secondary buttons inside CTA */
.section-cta .btn:not(.btn-primary){
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.35);
  color: #ffffff;
}
/* =========================================================
   DARK MODE — CTA SECTION GREEN, CARD NEUTRAL
========================================================= */

/* CTA SECTION = green surface (dark mode default) */
.section-cta{
  background: var(--brandgreen) !important;
}

/* CTA CARD = neutral panel sitting ON green */
.section-cta .cta-card{
  background: rgba(7,10,18,.55) !important;   /* dark neutral, not green */
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}

/* Ensure CTA card text stays white */
.section-cta .cta-card,
.section-cta .cta-card *{
  color: #ffffff !important;
}

/* Subtle hierarchy inside CTA */
.section-cta .cta-card p,
.section-cta .cta-card .microcopy,
.section-cta .cta-card .t-sub{
  color: rgba(255,255,255,.85) !important;
}

/* Buttons */
.section-cta .btn-primary,
.section-cta .btn-primary *{
  color: #ffffff !important;
}

.section-cta .btn:not(.btn-primary){
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  color: #ffffff;
}
/* =========================================================
   HERO v2 — Duolingo/Finch flat style
   · No dark gradients · no glassmorphism · no glow
   · Soft green blob · rounded icon chips · pill CTA
========================================================= */

/* Remove full-viewport min-height from base hero rule */
.hero{ padding: 56px 0 52px; min-height: 0; }

/* Left column */
.hero-left{
  display: grid;
  gap: 20px;
  align-content: start;
}

/* Headline */
.hero h2{
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.024em;
}

/* Bullets: flat list with rounded icon chips */
.hero-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: none;
}
.hero-bullets li{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}
.hero-bullets li::before{
  content: none;
  display: none;
}


/* Full-width pill CTA */
.hero-cta{
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  padding: 16px 28px;
  width: fit-content;
  max-width: 320px;
}

/* Stats row */
.hero-stats{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-stat strong{
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}
.hero-stat span{
  display: block;
  font-size: 11px;
  color: var(--muted2);
  margin-top: 1px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero-stat-sep{
  color: var(--muted2);
  font-size: 18px;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}

/* RIGHT: phone + organic blob */
.hero-right{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

/* Organic green blob — flat, no glow */
.hero-blob{
  position: absolute;
  inset: 0;
  background: rgba(39,209,126,.16);
  border-radius: 62% 38% 54% 46% / 38% 52% 48% 62%;
  pointer-events: none;
  z-index: 0;
}

/* Phone container: flat shadow, clipped corners */
.hero-right .phone{
  position: relative;
  z-index: 1;
  width: min(270px, 100%);
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
}
.hero-right .phone img{
  width: 100%;
  height: auto;
  display: block;
}

/* Light mode tweaks */
:root[data-theme="light"] .hero-blob{
  background: rgba(39,209,126,.13);
}
:root[data-theme="light"] .h-ico{
  background: rgba(39,209,126,.14);
}

/* ≥ 700px: 2-column grid
   (placed after the max-width:980px rule in cascade order — wins for 700–980px) */
@media (min-width: 700px){
  .hero-grid{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
  }
}

/* 700px – 980px: compact phone */
@media (max-width: 980px) and (min-width: 700px){
  .hero-right .phone{ width: min(230px, 100%); }
  .hero-right{ padding: 20px; }
}

/* < 700px: single column */
@media (max-width: 699px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-right{ margin-top: 24px; padding: 24px; }
  .hero-right .phone{ width: min(260px, 80%); }
}

/* Mobile */
@media (max-width: 640px){
  .hero{ padding: 40px 0 36px; }
  .hero-left{ gap: 16px; }
  .hero-stats{ display: none; }
  .hero-right{ padding: 20px; }
  .hero-right .phone{ width: min(200px, 72%); }
}

/* Subtle in-app separators between major beats */
.section + .section{
  border-top: 1px solid rgba(11,16,32,.06);
}
:root:not([data-theme="light"]) .section + .section{
  border-top-color: rgba(255,255,255,.06);
}

/* Collectables hook (Duolingo/Finch-style progress chips) */
.collect-progress{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin: 18px 0 26px;
}
.collect-chip{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--cardShadowFlat);
}
.collect-chip .small{
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: 14px;
}
.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,16,32,.08);
  overflow: hidden;
}
:root:not([data-theme="light"]) .progress{
  background: rgba(255,255,255,.10);
}
.progress > span{
  display:block;
  height:100%;
  border-radius: 999px;
  background: rgba(29,186,111,.95);
}
.progress-alt > span{
  background: rgba(43,123,255,.9);
}

@media (max-width: 900px){
  .collect-progress{ grid-template-columns: 1fr; }
}


/* ===== HERO (fixed) ===== */
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
}

.hero-left{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero h2{
  font-size: clamp(44px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-sub{
  margin: 0;
  max-width: 56ch;
}

.hero-bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-bullets li{
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
}

.h-ico{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(39,209,126,.15);
  display: grid;
  place-items: center;
  color: var(--brandgreen);
}

.h-ico .hi{
  width: 18px;
  height: 18px;
  fill: var(--brandgreen);
}

.hero-proof{
  margin: 4px 0 0;
  color: var(--muted);
  max-width: 60ch;
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; text-align: center; }
  .hero-left{ align-items: center; }
  .hero-bullets li{ justify-content: center; text-align: left; }
}