:root {
  --charcoal: #111418;
  --muted: #4f5964;
  --cream: #f8f4ec;
  --cream-strong: #f2ebe0;
  --line: #e6e7eb;
  --shadow: 0 14px 45px rgba(17, 20, 24, 0.12);
  --radius: 18px;
  --brand-teal: #2a6b4f; /* forest teal */
  --brand-green: #4c8f3a; /* moss */
  --brand-brown: #5c442e; /* earth */
  --brand-brown-dark: #3b2d1f;
  --btn-dark: #20523d;
  --bg1: #e6f1e6;
  --bg2: #f3f1e8;
  --bg3: #d2e0d2;
  --bg: #ffffff;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--charcoal);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg1, #ffffff);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  transition: background 0.35s ease;
}

html, body {
  scroll-behavior: smooth;
  scroll-snap-type: none;
}

main {
  position: relative;
  z-index: 1;
}

.scene-wrap {
  position: relative;
  height: auto;
  padding: 0 clamp(12px, 2vw, 24px) 0;
  overflow: hidden;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
.hero-wrap {
  min-height: 130vh;
  height: 140vh;
  background: transparent;
  position: relative;
  overflow: visible;
  z-index: 0;
}

.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -3;
  overflow: hidden;
  background: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.hero-wrap {
  position: relative;
}
.hero-bg.hidden {
  opacity: 0;
  visibility: hidden;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%2320b0f2'/%3E%3Cstop offset='100%25' stop-color='%2388ddff'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='80%25' cy='16%25' r='24%25'%3E%3Cstop offset='0%25' stop-color='%23ffd36a' stop-opacity='0.95'/%3E%3Cstop offset='60%25' stop-color='%23ffb347' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-color='%23ffb347' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='mountain' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%236da3a1'/%3E%3Cstop offset='100%25' stop-color='%234d7e83'/%3E%3C/linearGradient%3E%3ClinearGradient id='hill' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%2358a86c'/%3E%3Cstop offset='100%25' stop-color='%23407b52'/%3E%3C/linearGradient%3E%3ClinearGradient id='grass' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%236dc071'/%3E%3Cstop offset='100%25' stop-color='%2347a25a'/%3E%3C/linearGradient%3E%3ClinearGradient id='tree' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23458c4a'/%3E%3Cstop offset='100%25' stop-color='%23326c38'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23sky)'/%3E%3Crect width='1600' height='900' fill='url(%23sun)'/%3E%3Cpath d='M-100 500 Q 320 360 720 440 T 1400 420 T 1800 360 L 1800 900 L -100 900 Z' fill='url(%23mountain)'/%3E%3Cpath d='M-120 620 Q 320 520 760 600 T 1380 620 T 1800 560 L 1800 900 L -120 900 Z' fill='url(%23hill)'/%3E%3Cpath d='M0 780 Q 260 720 640 760 T 1180 780 T 1800 740 L 1800 900 L 0 900 Z' fill='url(%23grass)'/%3E%3Cpath d='M120 620 L160 520 L200 620 Z M260 640 L300 540 L340 640 Z M1120 660 L1160 560 L1200 660 Z M1340 640 L1380 540 L1420 640 Z' fill='url(%23tree)'/%3E%3Cpath d='M-100 900 L1800 900 L1800 860 Q 900 820 -100 860 Z' fill='%23428d59'/%3E%3C/svg%3E") center/cover no-repeat;
  filter: saturate(1.05) contrast(0.99) brightness(1.05);
  opacity: 0.95;
  animation: bgParallax 24s ease-in-out infinite alternate;
}
.hero-bg .layer-hills {
  position: absolute;
  inset: 0;
  background: inherit;
  filter: none;
  transform: translateY(0);
  animation: hillsParallax 24s ease-in-out infinite alternate;
  z-index: 0;
  mix-blend-mode: normal;
}
.hero-bg .layer-grass {
  position: absolute;
  inset: 0;
  background: inherit;
  filter: none;
  transform: translateY(0);
  animation: grassParallax 18s ease-in-out infinite alternate;
  z-index: 1;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.05) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23grain)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 100% 100%, 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}
.hero-bg .ambient {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.hero-bg .ambient.birds {
  top: 16%;
  left: 12%;
  width: 200px;
  height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cpath d='M10 60 Q40 28 70 60 T130 60 T190 55' fill='none' stroke='%232e5826' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M60 72 Q90 38 120 70' fill='none' stroke='%2347803b' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: floatBirds 12s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.08));
  opacity: 0.4;
}
.hero-bg .ambient.clouds.extra {
  top: 26%;
  left: 22%;
  width: 220px;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cpath d='M50 80 Q70 46 110 55 Q140 26 180 48 Q210 44 218 68 Q238 70 238 90 Q200 102 160 96 Q122 114 88 100 Q40 110 28 92 Q36 78 50 80 Z' fill='%23ffffff' fill-opacity='0.8'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: cloudFloat 16s ease-in-out infinite reverse;
  opacity: 0.55;
}
.hero-bg .ambient.trees {
  position: absolute;
  bottom: 24%;
  left: 8%;
  width: 84%;
  height: 20%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360'%3E%3Cdefs%3E%3ClinearGradient id='pinetone' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%234c9a55'/%3E%3Cstop offset='100%25' stop-color='%233a7541'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M120 340 L200 180 L280 340 Z M320 340 L380 200 L440 340 Z M520 340 L600 170 L680 340 Z M820 340 L880 210 L940 340 Z M1020 340 L1100 180 L1180 340 Z M1320 340 L1380 200 L1440 340 Z' fill='url(%23pinetone)' opacity='0.75'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.5;
  filter: blur(0.6px);
}
.hero-bg .ambient.sun {
  top: 8%;
  right: 10%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,232,184,0.6) 0%, rgba(255,232,184,0) 70%);
  animation: sunPulse 6s ease-in-out infinite;
  opacity: 0.75;
}
.hero-bg .ambient.clouds {
  top: 14%;
  left: 40%;
  width: 260px;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120'%3E%3Cpath d='M40 80 Q60 40 100 55 Q130 20 170 50 Q220 40 230 70 Q250 70 250 90 Q200 100 150 95 Q120 110 80 100 Q30 110 20 90 Q25 75 40 80 Z' fill='%23ffffff' fill-opacity='0.7'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: cloudFloat 18s ease-in-out infinite;
  opacity: 0.6;
  transform: translateX(calc(var(--hero-ambient, 0) * -10px));
}
.hero-bg .ambient.clouds.extra {
  top: 26%;
  left: 18%;
  width: 220px;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cpath d='M50 80 Q70 46 110 55 Q140 26 180 48 Q210 44 218 68 Q238 70 238 90 Q200 102 160 96 Q122 114 88 100 Q40 110 28 92 Q36 78 50 80 Z' fill='%23ffffff' fill-opacity='0.8'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: cloudFloat 16s ease-in-out infinite reverse;
  opacity: 0.55;
}
.hero-bg .ambient.smoke {
  bottom: 18%;
  left: 22%;
  width: 80px;
  height: 120px;
  background:
    radial-gradient(35% 35% at 50% 80%, rgba(200,210,210,0.35), rgba(200,210,210,0)),
    radial-gradient(25% 25% at 40% 60%, rgba(200,210,210,0.2), rgba(200,210,210,0));
  animation: smokeRise 9s ease-in-out infinite;
  opacity: 0.38;
  filter: blur(1px);
}
.camp-layer {
  position: absolute;
  bottom: 18vh;
  left: 18vw;
  width: 580px;
  height: 240px;
  pointer-events: none;
  z-index: 3;
  filter: saturate(0.96) brightness(0.98);
}
.camp-layer::before {
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: -6px;
  height: 140px;
  background:
    radial-gradient(38% 38% at 58% 35%, rgba(40,80,50,0.24), transparent 75%),
    radial-gradient(60% 70% at 60% 55%, rgba(50,95,60,0.2), transparent 82%),
    radial-gradient(50% 60% at 40% 70%, rgba(40,80,50,0.16), transparent 84%);
  filter: blur(8px);
  z-index: -2;
}
.camp-layer::after {
  content: "";
  position: absolute;
  left: 180px;
  bottom: -4px;
  width: 280px;
  height: 180px;
  background: radial-gradient(60% 60% at 55% 60%, rgba(255,180,110,0.12), transparent 80%);
  filter: blur(18px);
  z-index: -2;
  pointer-events: none;
}
.camp-layer .camp-tent {
  position: absolute;
  bottom: 0;
  left: 60px;
  width: 260px;
  aspect-ratio: 220 / 160;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Cdefs%3E%3ClinearGradient id='panelLeft' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f0d9a4'/%3E%3Cstop offset='60%25' stop-color='%23d8b269'/%3E%3Cstop offset='100%25' stop-color='%23b58c46'/%3E%3C/linearGradient%3E%3ClinearGradient id='panelRight' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23d8b269'/%3E%3Cstop offset='70%25' stop-color='%23b38645'/%3E%3Cstop offset='100%25' stop-color='%239d723b'/%3E%3C/linearGradient%3E%3ClinearGradient id='panelCenter' x1='0.2' y1='0' x2='0.8' y2='1'%3E%3Cstop offset='0%25' stop-color='%239c7544'/%3E%3Cstop offset='55%25' stop-color='%23835f36'/%3E%3Cstop offset='100%25' stop-color='%234b3828'/%3E%3C/linearGradient%3E%3ClinearGradient id='ridgeLight' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23f8e8be' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%23f0d09a' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20 140 L110 30 L200 140 Z' fill='url(%23panelLeft)' stroke='%23a6794a' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M110 30 L130 140 L200 140 Z' fill='url(%23panelRight)' stroke='%23906438' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M20 140 L110 30 L92 140 Z' fill='url(%23panelLeft)' stroke='%23a6794a' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M110 30 L110 12' stroke='%23a6794a' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M110 36 L94 140 L126 140 Z' fill='url(%23panelCenter)' stroke='%23755a34' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M110 36 L110 140' stroke='%23a6794a' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M48 136 Q110 86 170 136' stroke='url(%23ridgeLight)' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
  animation: tentBounce 6s ease-in-out infinite;
}
.camp-layer .camp-tent::after {
  content: "";
  position: absolute;
  inset: 80% -10% -18% -10%;
  background: radial-gradient(60% 50% at 50% 20%, rgba(0,0,0,0.16), transparent 80%);
  filter: blur(5px);
  z-index: -1;
}
.camp-layer .camp-fire {
  position: absolute;
  bottom: 0;
  left: 340px;
  width: 96px;
  aspect-ratio: 3 / 4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 120'%3E%3Cpath d='M18 98 L45 78 L72 98 L64 102 L45 92 L26 102 Z' fill='%23643c22' stroke='%23472a18' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M26 100 L45 84 L64 100 L45 92 Z' fill='%23512e1c' stroke='%23381f12' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M45 110 C24 110 18 90 24 78 C30 66 24 60 22 48 C20 36 32 26 38 32 C40 20 54 20 56 34 C64 26 68 40 62 52 C72 56 74 76 64 88 C58 96 50 110 45 110 Z' fill='%23ffb347'/%3E%3Cpath d='M45 104 C30 104 26 88 30 80 C34 72 30 66 28 58 C26 50 36 42 40 48 C42 38 52 38 54 48 C60 44 62 56 58 64 C66 68 68 84 60 92 C55 98 49 104 45 104 Z' fill='%23ff9035'/%3E%3Cpath d='M45 96 C36 96 34 86 36 82 C38 78 36 74 35 68 C34 62 40 58 42 62 C43 56 48 56 49 62 C52 60 54 66 52 70 C56 72 57 82 52 86 C49 90 46 96 45 96 Z' fill='%23ff6f1d'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: flicker 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18));
}
.camp-layer .camp-fire::before {
  content: "";
  position: absolute;
  inset: -6% -14% -26% -14%;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(255,180,110,0.1), transparent 75%),
    radial-gradient(40% 50% at 50% 60%, rgba(0,0,0,0.06), transparent 80%);
  filter: blur(7px);
  z-index: -1;
}
.camp-layer .camp-fire::after {
  content: "";
  position: absolute;
  inset: 72% -12% -24% -12%;
  background:
    radial-gradient(45% 55% at 50% 20%, rgba(255,180,110,0.2), transparent 80%),
    radial-gradient(circle, rgba(0,0,0,0.08) 0%, transparent 70%);
  filter: blur(5px);
  z-index: -2;
}
.camp-layer .camp-smoke {
  position: absolute;
  bottom: 92px;
  left: 295px;
  width: 46px;
  height: 100px;
  background:
    radial-gradient(45% 35% at 50% 80%, rgba(200,210,210,0.28), rgba(200,210,210,0)),
    radial-gradient(35% 25% at 40% 60%, rgba(200,210,210,0.16), rgba(200,210,210,0));
  animation: smokeRise 9s ease-in-out infinite;
  opacity: 0.35;
  filter: blur(1px);
}
.camp-layer .camp-log {
  position: absolute;
  bottom: 0;
  width: 98px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 70'%3E%3Cdefs%3E%3ClinearGradient id='logShade' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23745336'/%3E%3Cstop offset='50%25' stop-color='%238c5d3d'/%3E%3Cstop offset='100%25' stop-color='%23573d25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='70' cy='45' rx='55' ry='18' fill='url(%23logShade)'/%3E%3Cellipse cx='118' cy='40' rx='38' ry='16' fill='%23694830'/%3E%3Cellipse cx='118' cy='40' rx='24' ry='10' fill='%23835f3d'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.14));
}
.camp-layer .log-left { left: 248px; transform: rotate(-12deg); }
.camp-layer .log-mid { left: 338px; transform: rotate(0deg); }
.camp-layer .log-right { left: 428px; transform: rotate(12deg); }
.camp-layer .camp-sparks {
  position: absolute;
  bottom: 132px;
  left: 332px;
  width: 70px;
  height: 140px;
  pointer-events: none;
  background:
    radial-gradient(3px 3px at 20% 80%, rgba(255,200,120,0.7), transparent 60%),
    radial-gradient(3px 3px at 60% 50%, rgba(255,180,90,0.7), transparent 60%),
    radial-gradient(3px 3px at 80% 30%, rgba(255,220,150,0.7), transparent 60%);
  animation: sparkRise 2.6s ease-in-out infinite;
  opacity: 0.95;
  filter: blur(0.25px);
}
.camp-layer .camp-cloth {
  position: absolute;
  bottom: 8px;
  left: 300px;
  width: 64px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 80'%3E%3Cpath d='M20 62 Q14 48 30 36 Q28 26 50 24 Q62 14 80 20 Q96 14 106 26 Q122 30 118 46 Q126 58 112 64 Q104 76 88 72 Q74 80 60 74 Q44 78 34 70 Q16 72 20 62 Z' fill='%23f1eade' stroke='%23cfc3ac' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: rotate(6deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
  opacity: 0.9;
}
.camp-layer .camp-mug {
  position: absolute;
  bottom: 10px;
  left: 420px;
  width: 28px;
  height: 20px;
  background: radial-gradient(120% 120% at 30% 30%, #f7f1e4, #d6c3a3);
  border-radius: 6px 6px 8px 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.camp-layer .camp-mug::after {
  content: "";
  position: absolute;
  inset: auto 2px -6px 2px;
  height: 8px;
  background: radial-gradient(60% 80% at 50% 40%, rgba(0,0,0,0.12), transparent 80%);
  filter: blur(2px);
  z-index: -1;
}
.camp-layer .env-shimmer,
.camp-layer .env-sparkle,
.camp-layer .env-leaf {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.camp-layer .env-shimmer {
  bottom: 18px;
  left: 315px;
  width: 90px;
  height: 60px;
  background:
    radial-gradient(40% 50% at 50% 40%, rgba(255,255,255,0.25), transparent 70%),
    radial-gradient(30% 40% at 60% 60%, rgba(200,255,240,0.2), transparent 70%);
  filter: blur(6px);
}
.camp-layer .env-sparkle {
  bottom: 110px;
  left: 350px;
  width: 60px;
  height: 80px;
  background:
    radial-gradient(3px 3px at 30% 60%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(4px 4px at 60% 30%, rgba(255,220,140,0.5), transparent 60%),
    radial-gradient(3px 3px at 70% 70%, rgba(255,255,255,0.5), transparent 60%);
  filter: blur(0.6px);
}
.camp-layer .env-leaf {
  bottom: 14px;
  left: 360px;
  width: 48px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath d='M14 52 Q26 30 54 28 Q82 26 104 18 Q96 44 82 58 Q60 74 32 68 Q22 70 14 52 Z' fill='%234a8f4e' fill-opacity='0.8'/%3E%3Cpath d='M24 50 Q46 40 78 36' stroke='%23346c38' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: blur(1px);
}
.camp-layer .env-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.bg-trees path { filter: drop-shadow(0 6px 12px rgba(0,0,0,0.08)); }
.bg-layer.birds { animation: birdFloat 14s ease-in-out infinite alternate; }
.bg-layer.smoke { animation: smokeDrift 12s ease-in-out infinite alternate; }
.hero-bg .layer.sky,
.hero-bg .layer.hills,
.hero-bg .layer.trees,
.hero-bg .layer.details,
.hero-bg .layer.path,
.hero-bg .layer.stones,
.hero-bg .layer.foreground {
  transform: none;
}
.hero-wrap .scene-inner {
  position: relative;
  z-index: 1;
}
.hero-wrap .scene-inner {
  position: relative;
  z-index: 1;
}

@keyframes birdFloat {
  0% { transform: translateX(0); }
  100% { transform: translateX(50px); }
}
@keyframes smokeDrift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(16px, -14px) scale(1.06); opacity: 0.4; }
}

p.hero-desc,
p.hero-value,
p.hero-real {
  margin: 6px 0;
}

.scene {
  min-height: 90vh;
  position: relative;
  display: grid;
  align-items: stretch;
  padding: 0;
}

.scene-body {
  position: relative;
  min-height: 90vh;
  padding: clamp(2px, 1vw, 10px);
}

.scene-inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 4vw, 36px);
  align-items: center;
  justify-items: stretch;
  background: none;
  border-radius: 0;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.45s ease, background 0.45s ease, box-shadow 0.45s ease, opacity 0.35s ease;
  transform: translateY(calc((1 - var(--scene-progress, 0)) * 40px)) scale(calc(0.9 + var(--scene-progress, 0) * 0.14));
  opacity: calc(0.7 + var(--scene-progress, 0) * 0.3);
}

.scene-wrap {
  background: transparent;
}

.hero-wrap .scene-inner {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  transform: none !important;
  align-content: start;
  justify-items: center;
  padding-top: 0;
}
.explain-wrap .scene-inner {
  grid-template-columns: 1fr;
  transform: translateY(0) scale(1);
}
.how-wrap .scene-inner {
  grid-template-columns: 1fr;
  transform: translateY(0) scale(1);
}
.messy-wrap .scene-inner,
.clean-wrap .scene-inner,
.return-wrap .scene-inner {
  grid-template-columns: 1fr;
  transform: translateY(0) scale(1);
}
.products-wrap .scene-inner {
  grid-template-columns: 1fr;
  transform: translateY(0) scale(1);
}

.hero-copy h1 {
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: -0.03em;
  margin: 8px 0 12px;
  transform: translateY(calc(var(--hero-p, 0) * -40px));
  transition: transform 0.2s ease;
  text-align: center;
}
.hero-copy {
  max-width: 560px;
  z-index: 2;
}

.pill {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e8fbff;
  border: 1px solid #c8ecf1;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 12px;
  text-transform: uppercase;
}

.pill.light {
  background: #f4f8fb;
  border-color: #e6ecf2;
}

.support {
  font-size: 19px;
  font-weight: 700;
  color: var(--charcoal);
  max-width: 540px;
  margin: 0 0 6px;
  transform: translateY(calc(var(--hero-p, 0) * -30px));
  text-align: left;
}

.value-line {
  font-weight: 800;
  color: var(--muted);
  margin: 0 0 10px;
  transform: translateY(calc(var(--hero-p, 0) * -24px));
  text-align: left;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0 10px;
}

.micro {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  margin: 4px 0 0;
  text-align: left;
}

.hero-visual-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 50vh;
  width: 100%;
  justify-items: end;
  transform: none !important;
}

.hero-visual {
  display: none !important;
}

.hero-visual img {
  width: 100%;
  border-radius: 0;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.2));
  transform: none;
  position: static;
  transition: none;
}

/* Pinned hero image overlay */
.hero-pin {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 25;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  --hero-accent: var(--brand-teal);
  --hero-step-scale: 0;
  --hero-bounce: 0px;
  --hero-tilt: 0deg;
  --bin-opacity: 0.15;
}
.hero-pin.hidden {
  opacity: 0;
  visibility: hidden;
}
.hero-pin-inner {
  display: grid;
  grid-template-columns: minmax(320px, 500px) auto;
  align-items: start;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 20px);
  width: min(980px, 90vw);
  padding: clamp(8px, 1.6vw, 16px);
  margin-top: -20px;
  margin-left: clamp(4vw, 8vw, 10vw);
  transform: translate(-40px, -20px) rotate(-1deg) scale(1.02);
}
.hero-pin-copy {
  text-align: left;
  max-width: clamp(380px, 46vw, 500px);
  max-width: 420px;
  color: var(--charcoal);
  text-shadow: 0 2px 12px rgba(0,0,0,0.12);
  transition: opacity 0.25s ease, transform 0.25s ease;
  align-self: center;
  display: grid;
  gap: 10px;
  align-content: center;
  margin-top: clamp(-60px, -8vh, -20px);
  position: relative;
  padding: 20px 24px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0.15)),
    rgba(255,255,255,0.22);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 20px 40px rgba(0,0,0,0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: scale(1.02);
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  align-content: start;
}
.hero-pin-copy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: clamp(500px, 60vw, 600px);
  height: clamp(300px, 50vh, 380px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: -2;
}
.hero-pin-copy .pill { order: 0; }
.hero-pin-copy h1 { order: 1; }
.step-thumb-wrap { order: 2; }
.hero-pin-copy .support { order: 3; }
.hero-pin-copy .value-line { order: 4; }
.hero-pin-copy .micro-note { order: 5; }

.hero-definition-line {
  grid-column: 1 / 2;
  max-width: clamp(420px, 46vw, 560px);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(30, 42, 35, 0.92);
  margin: 0 0 8px;
  text-align: left;
}

.hero-pin-copy.fade-out {
  opacity: 0;
  transform: translateY(8px);
}
.hero-pin-copy h1 {
  margin: 4px 0 2px;
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: -0.02em;
  color: #1a1a1a;
  font-weight: 700;
}
.hero-definition {
  margin: 4px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(30, 42, 35, 0.9);
  line-height: 1.5;
}
.hero-pin-copy .support,
.hero-pin-copy .value-line {
  margin: 4px 0;
  font-weight: 700;
}
.hero-pin-copy .support {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,0.65);
  font-weight: 400;
}
.hero-pin-copy .value-line {
  font-size: 14px;
  color: #2a2a2a;
  font-weight: 600;
}
.hero-pin-copy .pill {
  background: color-mix(in srgb, var(--hero-accent) 18%, #ffffff);
  border-color: color-mix(in srgb, var(--hero-accent) 55%, #c8ecf1);
  color: var(--brand-teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: fit-content;
  padding: 7px 12px;
  font-size: 12px;
  border-width: 1.5px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}
.hero-pin-copy .value-line {
  color: var(--brand-brown);
}
.hero-pin-copy .micro-note {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.hero-pin-visual {
  display: grid;
  justify-items: center;
  margin-top: 24px;
  position: relative;
}
.hero-pin-visual img.step-art {
  width: clamp(260px, 34vw, 420px);
  max-width: 460px;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.24));
}
.step-thumb-wrap {
  margin-top: 6px;
  justify-self: center;
  position: relative;
  display: none;
}
.step-thumb {
  width: clamp(480px, 60vw, 780px);
  display: block;
  border-radius: 16px;
  transform-origin: center;
  transform: scale(calc(1 + var(--hero-step-scale))) translateY(var(--hero-bounce))
    rotate(calc(var(--hero-tilt, 0deg)));
  animation: dropletFloat 2.4s ease-in-out infinite, bubbleDrift 5.6s ease-in-out infinite, glowPulse 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(0,0,0, var(--bin-opacity, 0.15)));
}
.hero-pin-visual img {
  width: min(80vw, 680px);
  max-width: 700px;
  transform: scale(0.94) translateY(18px);
  filter: none;
  display: block;
}

.hero-bg-support {
  position: absolute;
  left: clamp(10px, 6vw, 46px);
  bottom: clamp(-110px, 1vw, -30px);
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  max-width: 420px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-bg-support .section-support {
  margin: 0;
  color: #1f2b27;
  font-weight: 700;
}
.hero-bg-support .section-support.strong {
  color: #0b7f8d;
}

.scene-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 720px);
  min-height: 260px;
  transform: translateY(calc((1 - var(--scene-progress, 0)) * 40px)) scale(calc(0.92 + var(--scene-progress, 0) * 0.12));
  transition: transform 0.45s ease, filter 0.45s ease;
}

@keyframes dropletFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes bubbleDrift {
  0% { opacity: 0.9; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(-8px); }
  100% { opacity: 0.9; transform: translateY(0); }
}

@keyframes glowPulse {
  0% { filter: drop-shadow(0 0 0 rgba(42,107,79,0.18)); }
  50% { filter: drop-shadow(0 0 16px rgba(42,107,79,0.28)); }
  100% { filter: drop-shadow(0 0 0 rgba(42,107,79,0.18)); }
}
@keyframes sunPulse {
  0% { transform: scale(0.96); opacity: 0.7; }
  50% { transform: scale(1.03); opacity: 0.9; }
  100% { transform: scale(0.96); opacity: 0.7; }
}
@keyframes cloudFloat {
  0% { transform: translate(-10px, 0); }
  50% { transform: translate(6px, -4px); }
  100% { transform: translate(-10px, 0); }
}
@keyframes smokeRise {
  0% { transform: translateY(0) scale(1); opacity: 0.45; }
  50% { transform: translateY(-8px) scale(1.05); opacity: 0.3; }
  100% { transform: translateY(0) scale(1); opacity: 0.45; }
}
@keyframes tentSway {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-0.4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes tentBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes fireFlicker {
  0% { transform: translateY(0) scale(1); opacity: 0.9; }
  35% { transform: translateY(-2px) scale(1.03); opacity: 1; }
  70% { transform: translateY(-1px) scale(0.99); opacity: 0.88; }
  100% { transform: translateY(0) scale(1); opacity: 0.94; }
}
@keyframes fireGlow {
  0% { filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2)) drop-shadow(0 0 10px rgba(255,144,53,0.28)); }
  50% { filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2)) drop-shadow(0 0 16px rgba(255,144,53,0.4)); }
  100% { filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2)) drop-shadow(0 0 10px rgba(255,144,53,0.28)); }
}
@keyframes flicker {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-2px) scale(1.05); opacity: 0.9; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes floatProduct {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes sparkRise {
  0% { transform: translateY(6px) scale(0.9); opacity: 0.7; }
  50% { transform: translateY(-12px) scale(1.05); opacity: 1; }
  100% { transform: translateY(-24px) scale(0.95); opacity: 0; }
}
@keyframes bgParallax {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
@keyframes hillsParallax {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}
@keyframes grassParallax {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}
@keyframes floatBirds {
  0% { transform: translateX(0px) translateY(0px); }
  50% { transform: translateX(20px) translateY(-5px); }
  100% { transform: translateX(0px) translateY(0px); }
}
@keyframes birdDrift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(18px, -6px); }
  100% { transform: translate(0, 0); }
}

.scene-visual img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}

.scene-caption,
.scene-line {
  font-weight: 800;
  color: var(--charcoal);
  text-align: center;
  margin: 10px 0;
}

.scene-illustration {
  width: min(70vw, 600px);
  min-height: 220px;
  border-radius: 24px;
  padding: 24px;
  background: radial-gradient(90% 90% at 30% 20%, rgba(255,255,255,0.65), rgba(255,255,255,0.2));
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  transform: translateY(calc((1 - var(--scene-progress, 0)) * 40px)) scale(calc(0.9 + var(--scene-progress, 0) * 0.12));
  transition: transform 0.45s ease;
}

.bubble {
  border-radius: 26px;
  padding: clamp(14px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.bubble-teal {
  background: radial-gradient(80% 80% at 50% 50%, rgba(87, 182, 199, 0.35), rgba(255, 255, 255, 0.3));
}
.bubble-sand {
  background: radial-gradient(80% 80% at 50% 40%, rgba(226, 200, 160, 0.32), rgba(255, 255, 255, 0.32));
}
.bubble-warm {
  background: radial-gradient(80% 80% at 50% 50%, rgba(243, 198, 140, 0.4), rgba(255, 255, 255, 0.28));
}
.bubble-light {
  background: radial-gradient(80% 80% at 50% 45%, rgba(235, 245, 250, 0.4), rgba(255, 255, 255, 0.3));
}
.bubble-white {
  background: rgba(255, 255, 255, 0.4);
}

.explain-wrap .scene-inner {
  grid-template-columns: 1fr;
  background: none;
  transform: translateY(-6vh);
  position: relative;
  background: linear-gradient(135deg, #e5f4ed 0%, #f7fbf9 40%, #fdfefc 100%);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 28px);
}

.explain-wrap .scene-inner::after {
  content: "";
  position: absolute;
  inset: -5%;
  background: radial-gradient(circle at 50% 50%, rgba(127, 200, 217, 0.25), transparent 65%);
  transform: scale(calc(0.9 + var(--scene-progress, 0) * 0.25));
  opacity: calc(0.5 + var(--scene-progress, 0) * 0.4);
  transition: transform 0.45s ease, opacity 0.45s ease;
  z-index: -1;
}

.floating-card {
  background: linear-gradient(135deg, #ffffff, #f7fbf9);
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 18px 44px rgba(27, 66, 41, 0.12);
  border-left: 4px solid var(--brand-green);
  max-width: 640px;
  margin-bottom: 14px;
  transform: translateY(30px) scale(0.94);
  transition: transform 0.45s ease, box-shadow 0.35s ease;
}

.floating-card.active {
  transform: translateY(0) scale(1);
  box-shadow: 0 24px 60px rgba(27, 66, 41, 0.14);
}

.how-wrap .scene-inner {
  position: relative;
  grid-template-columns: minmax(320px, 540px);
  background: linear-gradient(160deg, #f7f2e8 0%, #fbf8f1 40%, #ffffff 100%);
  transform: translateY(3vh);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 30px);
  margin-left: clamp(14vw, 18vw, 22vw);
  row-gap: 12px;
}

.steps-copy h2 {
  margin: 6px 0 8px;
  font-size: 32px;
}

.steps-track {
  display: grid;
  gap: 12px;
  position: relative;
  margin-top: clamp(40px, 8vh, 80px);
}

.step-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  border-left: 3px solid rgba(42,107,79,0.6);
  transform: translateY(18px) scale(0.95);
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  color: #2e332c;
  text-align: left;
  max-width: 420px;
}

.step-card.active {
  transform: translateY(-6px) scale(1);
  box-shadow: 0 16px 40px rgba(34, 64, 42, 0.16);
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(42,107,79,0.16);
  color: #1f3c2d;
  font-weight: 800;
  font-size: 11px;
  box-shadow: none;
  opacity: 0.65;
}
.step-card h3 {
  margin: 2px 0;
  font-size: 22px;
  font-weight: 800;
  color: #1f3c2d;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.step-card p {
  margin: 8px 0 4px;
  font-size: 14px;
  line-height: 1.65;
  color: #324134;
}
.step-card .step-support {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #516351;
  opacity: 0.9;
  margin-top: 2px;
}
.step-pill-small {
  padding: 4px 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  opacity: 0.65 !important;
  width: fit-content !important;
}
.steps-track::after {
  content: "";
  position: absolute;
  right: -90px;
  top: 22px;
  width: 140px;
  height: 60px;
  border: 1px dashed rgba(42,107,79,0.24);
  border-radius: 60% 80% 70% 80%;
  transform: rotate(-8deg);
  pointer-events: none;
  opacity: 0.7;
}

.trust-wrap .trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  background: none;
  padding: 10px 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  transform: translateY(-6vh);
  opacity: calc(0.35 + var(--trust-p, 0) * 0.65);
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 0;
  background: transparent;
  border: none;
  justify-content: center;
}

.products-wrap .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px 22px;
  margin-top: clamp(12px, 4vw, 30px);
}
.products-wrap .section-heading {
  text-align: left;
  align-items: flex-start;
}
.products-wrap .section-support {
  max-width: 680px;
  color: var(--charcoal);
  margin: 6px 0 0;
  font-weight: 600;
}
.products-wrap {
  min-height: 100vh;
  height: auto;
}

.use-cases-outer {
  position: relative;
  height: 400vh;
}
.use-scroll-wrap.use-cases-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(24px, 4vw, 40px) clamp(14px, 4vw, 40px);
  background: linear-gradient(180deg, #f7fbf8 0%, #f1f7f3 40%, #f9fbfa 100%);
  z-index: 4;
  overflow: visible;
}
.use-cases-sticky {
  width: 100%;
  display: flex;
  align-items: center;
}
.use-scroll-inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(12px, 4vw, 32px);
}
.use-left {
  position: relative;
  z-index: 3;
}
.use-left h2 {
  margin: 4px 0 12px;
}
.use-card {
  position: relative;
  top: auto;
  right: auto;
  transform: rotate(-0.4deg) scale(1.0);
  margin-top: 0;
  max-width: 420px;
  display: grid;
  gap: 10px;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0.15)
    ),
    rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 20px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 18px 20px;
  z-index: 3;
}
.use-card .pill {
  display: none;
}
.use-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #1a1a1a;
}
.use-body {
  margin: 0;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
  line-height: 1.5;
  max-width: 520px;
}
.use-right {
  position: relative;
  min-height: 520px;
  width: 100%;
  padding-top: 20px;
  display: grid;
  place-items: center;
  z-index: 1;
}
.use-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.45s ease, visibility 0.3s ease;
  z-index: 1;
}
.use-visual.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.use-scene {
  position: relative;
  width: min(520px, 86vw);
  height: min(400px, 68vw);
  border-radius: 28px;
  background: linear-gradient(180deg, #eaf6ff 0%, #dff3eb 60%, #d7eedf 100%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 2;
}
.scene-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 80% 15%, rgba(255, 211, 106, 0.25), transparent 70%),
    linear-gradient(180deg, #8fd3ff 0%, #bdeaf9 60%, transparent 100%);
  opacity: 0.9;
}
.scene-ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 55%;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(50, 120, 70, 0.15), transparent 80%),
    linear-gradient(180deg, #7acb84 0%, #5da46a 100%);
  border-radius: 50% 50% 0 0;
}
.scene-tent {
  position: absolute;
  bottom: 18%;
  left: 18%;
  width: 220px;
  aspect-ratio: 220 / 160;
  background: inherit;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Cpath d='M20 140 L110 30 L200 140 Z' fill='%23000'/%3E%3C/path%3E%3C/svg%3E") center/contain no-repeat;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Cdefs%3E%3ClinearGradient id='panelLeft2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f0d9a4'/%3E%3Cstop offset='60%25' stop-color='%23d8b269'/%3E%3Cstop offset='100%25' stop-color='%23b58c46'/%3E%3C/linearGradient%3E%3ClinearGradient id='panelRight2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23d8b269'/%3E%3Cstop offset='70%25' stop-color='%23b38645'/%3E%3Cstop offset='100%25' stop-color='%239d723b'/%3E%3C/linearGradient%3E%3ClinearGradient id='panelCenter2' x1='0.2' y1='0' x2='0.8' y2='1'%3E%3Cstop offset='0%25' stop-color='%239c7544'/%3E%3Cstop offset='55%25' stop-color='%23835f36'/%3E%3Cstop offset='100%25' stop-color='%234b3828'/%3E%3C/linearGradient%3E%3ClinearGradient id='ridgeLight2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23f8e8be' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%23f0d09a' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20 140 L110 30 L200 140 Z' fill='url(%23panelLeft2)' stroke='%23a6794a' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M110 30 L130 140 L200 140 Z' fill='url(%23panelRight2)' stroke='%23906438' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M110 30 L110 12' stroke='%23a6794a' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M110 36 L94 140 L126 140 Z' fill='url(%23panelCenter2)' stroke='%23755a34' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M110 36 L110 140' stroke='%23a6794a' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M48 136 Q110 86 170 136' stroke='url(%23ridgeLight2)' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.2));
  z-index: 3;
}
.scene-fire {
  position: absolute;
  bottom: 16%;
  left: 54%;
  width: 90px;
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='flame' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0%25' stop-color='%23e07a2b'/%3E%3Cstop offset='60%25' stop-color='%23ffb347'/%3E%3Cstop offset='100%25' stop-color='%23ffd36a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M60 12 Q80 40 70 58 Q92 66 90 92 Q86 110 60 108 Q30 110 28 88 Q20 66 40 50 Q32 36 44 18 Q56 6 60 12 Z' fill='url(%23flame)' stroke='%23c46827' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='60' cy='94' r='24' fill='%238b5a2b'/%3E%3Cpath d='M32 92 L48 98 M72 98 L88 92' stroke='%238b5a2b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.22));
  z-index: 3;
}
.scene-sparks {
  position: absolute;
  bottom: 42%;
  left: 58%;
  width: 70px;
  height: 70px;
  background:
    radial-gradient(circle at 30% 70%, rgba(255,200,120,0.6), transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255,180,90,0.5), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,220,140,0.7), transparent 55%);
  filter: blur(6px);
  opacity: 0.8;
  animation: sparkRise 3s ease-in-out infinite;
  z-index: 3;
}
.scene-product {
  position: absolute;
  bottom: 12%;
  right: 14%;
  width: 140px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.2));
  z-index: 4;
}
.scene-camp {
  background: linear-gradient(180deg, rgba(245, 249, 253, 0.8), rgba(237, 245, 250, 0.9));
}
.scene-photo {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
}
.scene-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-product-small {
  position: absolute;
  bottom: 14%;
  left: 6%;
  width: 80px;
  height: auto;
  transform: rotate(-6deg);
}
.scene-product-mini {
  position: absolute;
  bottom: 12%;
  left: 8%;
  width: 60px;
  height: auto;
  transform: rotate(-6deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.16));
}
.scene-product-small img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.18));
}
.scene-photo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.scene-photo-fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #bfe5ff 0%, #d1f0ff 40%, #fefaf2 100%);
  z-index: -1;
}
.beach-ground-uc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(244, 226, 196, 0.9) 0%, rgba(229, 205, 164, 0.95) 100%);
  border-radius: 26px 26px 20px 20px;
  box-shadow: inset 0 12px 30px rgba(255,255,255,0.35);
  z-index: 1;
}
.beach-horizon {
  position: absolute;
  bottom: 60%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(120, 180, 210, 0.35);
  z-index: 1;
}
.beach-shower-pole {
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 18px;
  height: 220px;
  background: linear-gradient(180deg, #d5e0e7 0%, #b5c6d0 100%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 14px rgba(0,0,0,0.12);
  z-index: 3;
}
.beach-shower-drops {
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 12px;
  height: 120px;
  background: linear-gradient(180deg, rgba(110, 190, 255, 0.8), rgba(120, 210, 255, 0.45));
  border-radius: 12px;
  filter: blur(0.5px);
  transform: translateX(18px) rotate(-4deg);
  z-index: 3;
  animation: waterDrop 2.6s ease-in-out infinite;
}
.beach-cloth {
  position: absolute;
  left: 16%;
  bottom: 16%;
  width: 200px;
  height: 130px;
  background: linear-gradient(155deg, #f7f8fa, #e6eaef);
  border-radius: 22px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.8),
    0 12px 20px rgba(0,0,0,0.14);
  transform: rotate(-6deg);
  z-index: 4;
}
.beach-foam {
  position: absolute;
  left: 28%;
  bottom: 26%;
  width: 140px;
  height: 90px;
  background:
    radial-gradient(50% 50% at 30% 60%, rgba(255,255,255,0.9), transparent 70%),
    radial-gradient(50% 50% at 70% 40%, rgba(245,245,245,0.85), transparent 70%);
  filter: blur(1.2px);
  opacity: 0.9;
  z-index: 4;
  animation: foamPulse 3.4s ease-in-out infinite;
}
.beach-nessie {
  position: absolute;
  right: 14%;
  bottom: 18%;
  width: 70px;
  height: 90px;
  background: radial-gradient(circle at 40% 40%, #5ab7c9 0 60%, transparent 70%);
  border-radius: 40% 60% 50% 50%;
  filter: blur(0.2px);
  z-index: 4;
}
.beach-product {
  width: 120px;
  right: 22%;
  bottom: 22%;
  transform: rotate(-3deg);
  z-index: 4;
}
@keyframes sparkRise {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-10px); opacity: 0.65; }
}
@keyframes waterDrop {
  0%, 100% { transform: translateY(0) rotate(-4deg); opacity: 1; }
  50% { transform: translateY(-10px) rotate(-2deg); opacity: 0.85; }
}
.products-wrap .scene-inner {
  position: relative;
  top: auto;
  min-height: auto;
  align-content: start;
  padding: clamp(8px, 2vw, 18px);
  background: transparent;
  z-index: 1;
  gap: 16px;
}

.products-wrap .product-card {
  transform: translateY(0);
  transition: opacity 0.35s ease;
  background: none;
  border: none;
  align-self: start;
  opacity: 0;
}

.products-wrap .product-card.show {
  transform: translateY(0);
  opacity: 1;
}

.confidence-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 0 12px 14px;
  box-shadow: none;
  border-left: 3px solid var(--brand-brown);
  max-width: 780px;
  display: grid;
  gap: 10px;
  opacity: calc(0.4 + var(--conf-p, 0) * 0.6);
  transform: translateY(calc((1 - var(--conf-p, 0)) * 40px)) scale(calc(0.95 + var(--conf-p, 0) * 0.05));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.confidence-panel ul {
  margin: 0;
  padding-left: 18px;
  color: var(--charcoal);
  font-weight: 700;
}

.faq-scene .faq-list details {
  border-radius: 14px;
}

.email-scene .email-card {
  border-radius: 18px;
}
p.hero-desc,
p.hero-value,
p.hero-real {
  margin: 6px 0;
}
.motion-bg {
  position: fixed;
  inset: -10%;
  z-index: -4;
  pointer-events: none;
  background: radial-gradient(60% 60% at 10% 20%, color-mix(in srgb, var(--bg1) 70%, transparent), transparent 60%),
    radial-gradient(50% 50% at 90% 10%, color-mix(in srgb, var(--bg2) 60%, transparent), transparent 60%),
    radial-gradient(70% 70% at 30% 90%, color-mix(in srgb, var(--bg3) 60%, transparent), transparent 70%);
  transform: translate(
      calc(var(--parallax-x, 0) * 24px),
      calc(var(--parallax-y, 0) * 18px)
    )
    scale(calc(1.05 + var(--scene-shift, 0) * 0.05));
  transition: transform 0.2s ease-out;
  filter: blur(4px);
  transition: background 0.35s ease, transform 0.2s ease-out;
}

/* Remove residual shadows/borders on key storytelling elements */
.scene-inner,
.hero-visual,
.hero-visual::before,
.floating-card,
.step-card,
.product-card,
.trust-chip,
.confidence-panel,
.email-card {
  box-shadow: none !important;
  border: none !important;
}

.hero-visual img {
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.2)) !important;
  animation: floatProduct 4s ease-in-out infinite;
}
.hero-cue {
  margin-top: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(30, 42, 35, 0.8);
  text-align: center;
}

h1,
h2,
h3 {
  line-height: 1.2;
  text-wrap: balance;
}

p {
  margin: 0 0 10px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

.top-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-mark {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-teal);
}

.brand-name {
  font-weight: 700;
  font-size: 16px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}

.nav-preorder {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
}

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cart-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.cart-icon {
  font-size: 16px;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-teal);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

.cart-count.tiny {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.mobile-cta-bar {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.05);
}

.bar-actions {
  display: flex;
  gap: 8px;
}

.bar-title {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
}

.bar-subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

main {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 90px;
  position: relative;
  z-index: 1;
}

[data-scene] {
  opacity: 0;
  transform: translateY(40px) scale(0.985);
  transition: opacity 0.6s ease, transform 0.8s ease;
  scroll-snap-align: start;
}

[data-scene].scene-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.section-tint {
  background: linear-gradient(135deg, #f8fcf9 0%, #ffffff 70%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}

.section-primary {
  padding-top: 12px;
}

.stage {
  position: relative;
  padding: 40px 0;
  z-index: 1;
}

.stage-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  gap: 28px;
  align-items: center;
}

.stage-shell.two-column {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.hero-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-top: 10px;
}

.hero-stage .stage-shell {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
}

.stage-text h1 {
  font-size: clamp(44px, 5vw, 64px);
  margin: 4px 0 10px;
  letter-spacing: -0.03em;
}

.stage-text {
  max-width: 560px;
  transform: translate3d(calc(var(--parallax-x, 0) * 4px), calc(var(--parallax-y, 0) * 3px), 0);
  transition: transform 0.3s ease;
}

.stage-text .eyebrow {
  margin-bottom: 10px;
}

.stage-text .hero-support {
  font-size: 20px;
  font-weight: 700;
  color: var(--charcoal);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0 8px;
}

.hero-pill {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e8fbff;
  border: 1px solid #c8ecf1;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 13px;
}

.hero-value {
  font-weight: 800;
  color: var(--charcoal);
}

.hero-desc {
  color: var(--muted);
  font-weight: 600;
}

.hero-real {
  color: var(--charcoal);
  font-weight: 700;
}

/* --- Pin the hero image and simplify spacing --- */
.hero-visual {
  position: fixed !important;
  top: 50vh !important;
  left: 50vw !important;
  transform: translate(-55%, -48%) scale(0.9) !important;
  width: min(68vw, 620px);
  max-width: 640px;
  padding: 0 !important;
  margin: 0;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 12;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.2));
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -8% -6% -4% -6%;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(255,255,255,0.15), transparent 72%),
    radial-gradient(120% 80% at 78% 70%, rgba(60,120,90,0.2), transparent 70%),
    linear-gradient(to left, rgba(255,220,150,0.15), transparent 50%);
  pointer-events: none;
  z-index: -1;
}
.hero-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 60%;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,0.18), transparent 70%);
  z-index: -1;
}
.hero-wrap .scene-inner {
  padding-top: clamp(4px, 1.5vh, 14px);
}
.hero-copy {
  align-self: flex-start;
  padding-top: clamp(6px, 1.5vh, 12px);
}

.trust-line {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}

.benefits {
  padding: 10px 0;
}

.benefits-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.benefit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #f7fbfd, #ffffff);
  font-weight: 900;
  justify-content: center;
}

.benefit-icon {
  font-size: 22px;
}

.trust-label {
  font-size: 15px;
  letter-spacing: -0.01em;
}

.progress-block {
  margin: 0 auto;
  max-width: 880px;
  display: grid;
  gap: 4px;
  padding: 8px 12px;
}

.progress-block.spotlight {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.progress-banner {
  position: relative;
  z-index: 5;
  padding: 4px 12px 0;
}

.progress-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: var(--charcoal);
  font-size: 14px;
}

.progress-urgency {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(219, 68, 55, 0.1);
  color: #c0392b;
  font-weight: 900;
  font-size: 13px;
}

.progress-outer {
  width: 100%;
  height: 8px;
  background: #eef2f6;
  border-radius: 999px;
  overflow: hidden;
  padding: 1px;
  box-sizing: border-box;
}

.progress-inner {
  height: 100%;
  width: 0;
  background: linear-gradient(135deg, var(--brand-teal), #0d8b96);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.progress-subtext {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.cta-stack {
  display: grid;
  gap: 4px;
  justify-items: end;
}
.cta-urgency {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #c0392b;
  text-align: right;
}
.hero-cta-block {
  position: relative;
  max-width: 280px;
  padding: 0;
  margin: 8px 0 0;
}
.hero-urgency {
  text-align: left;
}
.hero-pin-copy .hero-support {
  text-align: left;
  margin-top: 6px;
}
.hero-pin-copy .hero-support .section-support {
  margin: 0;
}
.btn.hero-primary {
  background: linear-gradient(135deg, #0f9aad, #0b7f8d);
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(11,127,141,0.24);
  width: fit-content;
  letter-spacing: 0.02em;
}
.hero-support {
  text-align: center;
  margin-top: 8px;
}

.confidence-strip {
  max-width: 960px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f6fbfc);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.confidence-strip .strip-item {
  text-align: center;
  font-weight: 800;
  font-size: 14px;
}

.story-stage {
  position: relative;
  padding: 20px 0;
  min-height: 90vh;
}

.stage-visual {
  position: sticky;
  top: 104px;
  display: grid;
  place-items: center;
  padding: 18px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 18px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12);
  min-height: 380px;
  transition: transform 0.4s ease, opacity 0.4s ease, background 0.4s ease;
  transform: translate3d(
      calc(var(--parallax-x, 0) * 10px),
      calc(var(--parallax-y, 0) * 6px + 8px),
      0
    )
    scale(1);
  opacity: 0.97;
}

.story-stage.light .stage-visual {
  background: linear-gradient(160deg, #fef9f5 0%, #ffffff 60%);
}

.stage-visual img {
  width: 100%;
  max-width: 540px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.08));
  transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
  position: relative;
  z-index: 1;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

.generated-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: blur(0px);
  opacity: 1;
  pointer-events: none;
  border-radius: 18px;
}

.story-copy {
  position: absolute;
  bottom: 18px;
  left: 16px;
  right: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(8px);
  opacity: 0.92;
}

.story-kicker {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 11px;
  color: var(--brand-teal);
}

.story-copy h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.story-steps {
  display: grid;
  gap: 10px;
}

.stage-steps {
  display: grid;
  gap: 12px;
  align-self: start;
}

.story-step {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 800;
  color: var(--charcoal);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.story-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.06);
}

.story-step.active {
  border-color: var(--brand-teal);
  box-shadow: 0 14px 26px rgba(13, 139, 150, 0.1);
  background: linear-gradient(135deg, #f2fbfd, #ffffff);
}

.stage-visual.step-2 {
  background: linear-gradient(160deg, #fef9f5 0%, #ffffff 60%);
}
.stage-visual.step-3 {
  background: linear-gradient(160deg, #f8f5ff 0%, #ffffff 60%);
}
.stage-visual.step-4 {
  background: linear-gradient(160deg, #f6fbff 0%, #ffffff 60%);
}
.stage-visual.step-5 {
  background: linear-gradient(160deg, #f4fff7 0%, #ffffff 60%);
}
.stage-visual.step-6 {
  background: linear-gradient(160deg, #fefeff 0%, #ffffff 60%);
}

.stage-visual.step-2 img,
.stage-visual.step-3 img,
.stage-visual.step-4 img,
.stage-visual.step-5 img,
.stage-visual.step-6 img {
  transform: translateY(-4px) scale(1.01);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.stage-visual.step-6 img {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.12));
}

.stage-visual.in-motion {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.story-copy.lift {
  transform: translateY(0);
  opacity: 1;
}

.story-step {
  padding: 12px 14px;
}


.eyebrow {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: var(--brand-teal);
  margin: 0 0 6px;
}

.preorder-note {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cream);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
}

.btn {
  border: none;
  cursor: pointer;
  padding: 13px 17px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
}

.btn.xl {
  padding: 14px 20px;
  font-size: 16px;
}

.btn.primary {
  background: linear-gradient(135deg, var(--brand-teal), #0d8b96);
  color: #fff;
  box-shadow: 0 14px 32px rgba(13, 139, 150, 0.28);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

.btn.primary:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 18px 42px rgba(13, 139, 150, 0.35);
  filter: saturate(1.05);
}

.btn:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
}

.btn.ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--charcoal);
}

.btn.ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: #d5d8de;
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

.btn.full {
  width: 100%;
  justify-content: center;
}

.section-heading h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
}

.shipping-note {
  font-weight: 800;
  color: var(--brand-teal);
}

.confidence-lead {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 700;
}

.feature-grid,
.product-grid,
.steps,
.confidence-grid {
  display: grid;
  gap: 14px;
}

.trust-bar {
  padding: 8px 0 2px;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f7fbfd);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 15px;
  color: var(--charcoal);
  justify-content: center;
  padding: 8px 10px;
}

.trust-icon {
  font-size: 20px;
}

.trust-label {
  letter-spacing: -0.01em;
}

.feature-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream);
  margin-bottom: 8px;
  font-size: 18px;
}

.how .steps {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.step {
  padding: 16px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #ffffff, #f7fbfd);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step h3 {
  margin: 4px 0;
  font-weight: 900;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-teal);
  color: #fff;
  font-weight: 900;
  margin-bottom: 12px;
  font-size: 16px;
  box-shadow: 0 8px 18px rgba(13, 139, 150, 0.3);
}

.step:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.bundle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #fdfbf6 0%, #f4fbfc 100%);
  box-shadow: var(--shadow);
}

.bundle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bundle-copy {
  color: var(--muted);
}

.bundle-price-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 12px;
}

.bundle-price {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
}

.bundle-includes {
  color: var(--muted);
  font-weight: 600;
}

.bundle-value {
  color: var(--charcoal);
  font-weight: 700;
}

.bundle-choice {
  color: var(--brand-teal);
  font-weight: 800;
}

.bundle-urgency {
  margin: 6px 0 0;
  color: var(--brand-brown-dark);
  font-weight: 700;
}

.bundle-visual {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.06);
  max-width: 520px;
  margin-inline: auto;
}

.products-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06);
  height: 100%;
  position: relative;
}

.product-featured {
  transform: scale(1.08);
  box-shadow: 0 18px 48px rgba(15, 154, 173, 0.18);
  border: 1px solid rgba(15,154,173,0.18);
  background: #f5fbfc;
  z-index: 2;
}

.product-standard {
  opacity: 0.92;
}

.product-image-wrap {
  background: none;
  border-radius: 0;
  padding: 0;
  display: grid;
  place-items: center;
  min-height: 260px;
}

.product-image {
  width: auto;
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 12px;
  border: none;
  margin: 0 auto;
}

.product-featured .product-image {
  max-height: 400px;
  transform: scale(1.04);
}

.product-body {
  display: grid;
  gap: 6px;
  grid-template-rows: auto auto auto auto auto;
  flex: 1;
  padding-left: 0;
  justify-items: start;
}

.product-body .btn {
  margin-top: 10px;
  padding: 11px 16px;
  font-size: 14px;
  justify-self: start;
  width: auto;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(11, 127, 141, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-featured .btn.primary {
  background: linear-gradient(135deg, #0f9aad, #0b7f8d);
  box-shadow: 0 18px 42px rgba(11, 127, 141, 0.32);
}
.product-standard .btn.primary {
  background: linear-gradient(135deg, #2a6b4f, #1f523c);
  box-shadow: 0 8px 18px rgba(32, 82, 60, 0.16);
  opacity: 0.92;
}

.product-featured .badge.best-value {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #0f9aad;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(15,154,173,0.25);
  z-index: 3;
}

.product-body .btn:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 36px rgba(11, 127, 141, 0.24);
}

.product-desc {
  margin: 0;
  color: var(--muted);
}

.product-desc.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.product-desc.secondary {
  color: var(--charcoal);
  font-weight: 600;
}

.value-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.value-badges.compact .pill.tiny {
  padding: 4px 8px;
  font-size: 11px;
}
.value-badges .pill.tiny {
  padding: 5px 9px;
  font-size: 11px;
  border-radius: 12px;
  background: #f3f7f4;
  border: 1px solid rgba(0,0,0,0.05);
}
.value-badges .pill.tiny.save {
  background: #e8fbff;
  border-color: #c8ecf1;
  color: #0b7f8d;
  font-weight: 800;
}
.value-badges .pill.tiny.per-wash {
  background: #fff6e7;
  border-color: #ffd9a0;
  color: #ad6a00;
  font-weight: 900;
  font-size: 13px;
}
.value-badges .pill.tiny.per-wash.highlight {
  background: #ffeed1;
  border-color: #ffcf85;
  color: #ad6a00;
  font-weight: 900;
}
.value-badges .pill.tiny.muted {
  background: #f6f6f6;
  border-color: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.55);
}
.value-badges .pill.tiny.accent {
  background: #0f9aad;
  color: #fff;
  border: none;
}
.ship-note {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  padding-top: 2px;
}

.product-featured .ship-note {
  color: var(--brand-teal);
  font-weight: 800;
}
.product-standard .ship-note {
  opacity: 0.85;
}
.product-standard .product-name,
.product-standard .product-desc {
  opacity: 0.9;
}
.helper-note {
  margin: 4px 0 0;
  font-weight: 800;
  color: #0b7f8d;
  font-size: 13px;
}

.price-row.tight {
  align-items: center;
  gap: 10px;
}
.price-row .price {
  font-weight: 900;
  font-size: 18px;
}
.qty.inline {
  display: inline-grid;
  grid-template-columns: auto 46px auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.qty.inline input {
  border: none;
  width: 46px;
  text-align: center;
  padding: 6px 0;
  font-size: 14px;
}
.qty.inline button {
  border: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 18px;
  color: var(--charcoal);
}
.helper-note {
  margin: 4px 0 0;
  font-weight: 800;
  color: #0b7f8d;
  font-size: 13px;
}

.product-featured .product-image-wrap {
  position: relative;
  align-items: center;
}
.product-featured .product-image {
  position: relative;
  z-index: 1;
}

.image-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.image-modal-content {
  max-width: 80%;
  max-height: 80%;
  border-radius: 12px;
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 32px;
  cursor: pointer;
}

.product-image {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.product-image:hover {
  transform: scale(1.03);
}

.inline-email .email-card {
  padding: 16px 18px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
}

.inline-email h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.inline-email .email-form {
  align-items: center;
}

.coming-soon {
  display: grid;
  gap: 16px;
}

.coming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.coming-grid .product-card {
  padding: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
  transform: scale(1);
  min-height: 210px;
}

.coming-grid .product-image img {
  max-height: 110px;
  object-fit: contain;
}

.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-name {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #e8fbff;
  color: var(--brand-teal);
  font-weight: 800;
  font-size: 12px;
  border: 1px solid #c8ecf1;
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.product-desc {
  margin: 0;
  color: var(--muted);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  margin-top: 4px;
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fafafa;
}

.qty button {
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}

.qty input {
  width: 44px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
}

.accent-nessie {
  border-top: 5px solid var(--brand-teal);
}

.accent-gecko {
  border-top: 5px solid var(--brand-green);
}

.accent-sascloth {
  border-top: 5px solid var(--brand-brown);
}

.confidence-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.confidence-card {
  border: none;
  border-radius: 0;
  padding: 6px 0;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}

.faq details {
  border: none;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  box-shadow: none;
}

.faq details + details {
  margin-top: 8px;
}

.faq summary {
  cursor: pointer;
  font-weight: 800;
}

.faq p {
  color: var(--muted);
}

.faq-centered, .email-centered {
  max-width: 720px;
  margin: 0 auto;
}

.faq-centered .section-heading h2 {
  text-align: center;
}

.faq-list.faq details {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.faq-list.faq details + details {
  margin-top: 6px;
}

.faq-list.faq summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 19px;
}

.faq-list.faq p {
  color: var(--muted);
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
}
.email-inline {
  margin-top: 24px;
}

.email-card {
  border: none;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  display: grid;
  gap: 10px;
  align-items: center;
}

.email-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.email-form input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 15px;
}

.footer {
  padding: 24px 18px 80px;
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.footer-note {
  font-size: 13px;
  line-height: 1.5;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 90vw);
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
  z-index: 30;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 25;
}

.cart-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.cart-header,
.cart-footer {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cart-footer {
  border-top: 1px solid var(--line);
  border-bottom: none;
  background: #fff;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.05);
}

.cart-body {
  padding: 18px;
  overflow-y: auto;
  background: #f8f9fb;
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

.cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.cart-item h4 {
  margin: 0;
  font-size: 16px;
}

.cart-item .cart-meta {
  color: var(--muted);
  font-size: 13px;
}

.cart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.cart-actions button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.cart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.cart-notice {
  font-size: 13px;
  color: var(--muted);
}

.cart-empty {
  color: var(--muted);
}

.close-cart {
  border: none;
  background: #f4f5f7;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  .stage-shell {
    grid-template-columns: 1fr;
  }

  .stage-visual {
    position: relative;
    top: auto;
  }

  .stage-steps {
    order: 2;
  }
}

@media (min-width: 768px) {
  main {
    padding: 24px 26px 60px;
    gap: 80px;
  }

  .top-nav {
    padding: 16px 26px;
  }

  .nav-links {
    display: flex;
  }

  .mobile-cta-bar {
    display: none;
  }

  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 28px;
    align-items: center;
    column-gap: 32px;
  }

  .hero-text h1 {
    font-size: 44px;
  }

  .bundle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 26px;
    column-gap: 32px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .feature-grid,
  .confidence-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .email-card {
    grid-template-columns: 1.2fr 1fr;
    padding: 20px 24px;
  }
}

@media (min-width: 1024px) {
  main {
    padding: 28px 48px 80px;
  }

  .hero {
    padding: 34px;
  }

  .bundle {
    padding: 32px;
  }

  .section-heading h2 {
    font-size: 28px;
  }

  .product-card {
    padding: 18px;
  }
}
.preorder-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f5fafc);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
  margin-top: 8px;
}

.preorder-strip .strip-item {
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--charcoal);
}
.scene-road,
.scene-kids,
.scene-beach,
.scene-travel,
.scene-workout {
  position: relative;
  width: min(520px, 86vw);
  height: min(400px, 68vw);
  border-radius: 28px;
  background: linear-gradient(180deg, #eaf6ff 0%, #dff3eb 60%, #d7eedf 100%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.scene-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 80% 15%, rgba(255, 211, 106, 0.25), transparent 70%),
    linear-gradient(180deg, #8fd3ff 0%, #bdeaf9 60%, transparent 100%);
  opacity: 0.9;
}
.scene-ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 55%;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(50, 120, 70, 0.15), transparent 80%),
    linear-gradient(180deg, #7acb84 0%, #5da46a 100%);
  border-radius: 50% 50% 0 0;
}

/* Road trips */
.scene-road .scene-backdrop {
  background:
    linear-gradient(180deg, #eaf3ff 0%, #dfeaf5 70%, #f6fafc 100%),
    linear-gradient(90deg, rgba(255,255,255,0.3), transparent);
}
.scene-road .road-dash {
  position: absolute;
  bottom: 22%;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, rgba(120,120,120,0.35) 0 16px, transparent 16px 32px);
  transform: skewX(-6deg);
}
.scene-road .road-seat {
  position: absolute;
  bottom: 12%;
  left: 16%;
  width: 52%;
  height: 26%;
  background: linear-gradient(145deg, #d7e3e6, #b8c7cc);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.scene-road .road-dash-detail {
  position: absolute;
  bottom: 40%;
  right: 12%;
  width: 26%;
  height: 18%;
  background: linear-gradient(180deg, #cfdcdf, #a9b8be);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.scene-road .scene-product {
  right: 18%;
  bottom: 18%;
  width: 130px;
}

/* Kids */
.scene-kids .scene-backdrop {
  background: linear-gradient(180deg, #f7f3ff 0%, #f4f8ff 60%, #fdfdf8 100%);
}
.scene-kids .scene-ground {
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(120, 150, 200, 0.12), transparent 80%),
    linear-gradient(180deg, #dfe8fa 0%, #c2d4f4 100%);
}
.kids-hand {
  position: absolute;
  bottom: 24%;
  left: 24%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 40% 40%, #f0c8a4 0 50%, transparent 60%), radial-gradient(circle at 70% 60%, #e7b88d 0 50%, transparent 60%);
  filter: blur(0.6px);
  border-radius: 50%;
}
.kids-smudge {
  position: absolute;
  bottom: 26%;
  left: 40%;
  width: 90px;
  height: 50px;
  background: radial-gradient(ellipse at 50% 50%, rgba(210,130,90,0.35), transparent 70%);
  transform: rotate(-8deg);
}
.scene-kids .scene-product {
  right: 18%;
  bottom: 18%;
  width: 130px;
}

/* Beach */
.scene-beach .scene-backdrop {
  background: linear-gradient(180deg, #bfe5ff 0%, #d1f0ff 40%, #fefaf2 100%);
}
.beach-sand {
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  height: 45%;
  background: linear-gradient(180deg, #f4e2c4 0%, #e3cda2 100%);
  border-radius: 50% 50% 0 0;
}
.beach-wave {
  position: absolute;
  bottom: 42%;
  left: -10%;
  right: -10%;
  height: 20%;
  background:
    radial-gradient(60% 80% at 40% 30%, rgba(120, 200, 230, 0.35), transparent 60%),
    linear-gradient(180deg, #8dd0f5 0%, #74c4ec 100%);
  border-radius: 50% 50% 0 0;
  filter: blur(1px);
}
.beach-towel {
  position: absolute;
  bottom: 14%;
  left: 26%;
  width: 160px;
  height: 80px;
  background: repeating-linear-gradient(90deg, #f6c16f 0 14px, #fef2d6 14px 24px);
  border-radius: 12px;
  transform: rotate(-6deg);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.scene-beach .scene-product {
  right: 20%;
  bottom: 20%;
  width: 130px;
}

/* Travel */
.scene-travel .scene-backdrop {
  background: linear-gradient(180deg, #e9f2ff 0%, #dfe9f9 60%, #f7fbff 100%);
}
.travel-case {
  position: absolute;
  bottom: 14%;
  left: 24%;
  width: 210px;
  height: 130px;
  background: linear-gradient(145deg, #d5dfea, #aebed1);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
.travel-handle {
  position: absolute;
  bottom: 40%;
  left: 40%;
  width: 90px;
  height: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #c9d4e0, #9cb1c6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.scene-travel .scene-product {
  right: 22%;
  bottom: 18%;
  width: 120px;
}

/* Workout */
.scene-workout .scene-backdrop {
  background: linear-gradient(180deg, #e7f6ff 0%, #dbedf8 60%, #f4fbff 100%);
}
.workout-towel {
  position: absolute;
  bottom: 18%;
  left: 24%;
  width: 200px;
  height: 110px;
  background: linear-gradient(160deg, #dfe9ef, #c8d6de);
  border-radius: 16px;
  transform: rotate(-5deg);
  box-shadow: 0 12px 22px rgba(0,0,0,0.14);
}
.workout-drops {
  position: absolute;
  bottom: 32%;
  left: 34%;
  width: 70px;
  height: 70px;
  background:
    radial-gradient(circle at 40% 40%, rgba(100,140,180,0.25), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(80,120,170,0.25), transparent 60%);
  filter: blur(1px);
}
.scene-workout .scene-product {
  right: 20%;
  bottom: 18%;
  width: 130px;
}