/* ============ TOKENS ============ */
:root{
  --cream:#FBF6EC;
  --cream-2:#F3ECDC;
  --navy:#16303F;
  --navy-2:#0F2530;
  --ink:#1F2A24;
  --pistachio:#8FAE6B;
  --pistachio-dark:#6F9150;
  --strawberry:#E8748A;
  --strawberry-dark:#CF5670;
  --blueberry:#5C6FA8;
  --blueberry-dark:#465690;
  --vanilla:#F4D9A0;
  --vanilla-dark:#DEB158;
  --line: rgba(22,48,63,0.12);
  --shadow-soft: 0 12px 30px rgba(22,48,63,0.14);
  --radius-scoop: 44% 56% 58% 42% / 48% 45% 55% 52%;
}

html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Baloo 2', sans-serif;
  color:var(--navy);
  font-weight:700;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}
button{font-family:inherit; cursor:pointer; border:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ============ NAV ============ */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,236,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Baloo 2'; font-weight:800; font-size:20px; color:var(--navy);}
.brand-scoop{width:26px; height:26px; border-radius:var(--radius-scoop); background:linear-gradient(160deg,var(--strawberry),var(--strawberry-dark)); box-shadow:inset -3px -3px 6px rgba(0,0,0,0.15), inset 3px 3px 5px rgba(255,255,255,0.4);}
.nav-links{display:flex; gap:32px; font-size:15px; font-weight:500; color:var(--navy); list-style:none; margin:0; padding:0;}
.nav-links a{opacity:0.75; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{
  background:var(--navy); color:var(--cream); padding:11px 22px; border-radius:999px; font-size:14px; font-weight:600;
  transition:transform .18s ease, background .18s ease;
}
.nav-cta:hover{background:var(--navy-2); transform:translateY(-1px); color:var(--cream);}
.nav-login{font-size:14px; font-weight:600; color:var(--navy); opacity:0.75; transition:opacity .18s ease;}
.nav-login:hover{opacity:1;}
.nav-right{display:flex; align-items:center; gap:18px;}
@media(max-width:800px){.nav-links{display:none;}}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:96px 0 60px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(143,174,107,0.16), transparent 55%),
    radial-gradient(ellipse at 85% 10%, rgba(232,116,138,0.14), transparent 50%);
  overflow:hidden;
}
.hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; position:relative; z-index:2;}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;}}

.blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:0.5; z-index:1; pointer-events:none;}
.blob-1{width:420px; height:420px; top:-140px; left:-120px; background:radial-gradient(circle, rgba(143,174,107,0.35), transparent 70%);}
.blob-2{width:380px; height:380px; bottom:-160px; right:-100px; background:radial-gradient(circle, rgba(232,116,138,0.3), transparent 70%);}
.blob-3{width:260px; height:260px; top:30%; right:8%; background:radial-gradient(circle, rgba(92,111,168,0.22), transparent 70%);}

/* ============ 3D HERO SCENE ============ */
.scene-3d{position:relative; height:460px; perspective:1400px;}
.rig{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  transform:rotateX(8deg) rotateY(-10deg);
}
.rig-float{
  position:absolute; left:50%; top:52%;
  width:0; height:0;
  transform-style:preserve-3d;
  animation:rigFloat 6s ease-in-out infinite;
}
@keyframes rigFloat{0%,100%{transform:translateY(0) translateZ(0);} 50%{transform:translateY(-14px) translateZ(10px);}}

.floor-shadow{
  position:absolute; left:50%; top:calc(52% + 148px); width:260px; height:46px; margin-left:-130px;
  background:radial-gradient(ellipse, rgba(22,48,63,0.28), transparent 72%);
  filter:blur(4px); transform:translateZ(-40px);
}
.cone{
  position:absolute; left:50%; top:0; margin-left:-58px; width:116px; height:150px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0 3px, transparent 3px 11px),
    linear-gradient(160deg, #D9A66C, #A8703A);
  clip-path:polygon(50% 100%, 0 0, 100% 0);
  box-shadow:6px 14px 22px rgba(120,70,20,0.35);
}
.scoop{
  position:absolute; left:50%;
  border-radius:50% 50% 46% 46% / 60% 60% 40% 40%;
  box-shadow:inset -10px -12px 20px rgba(0,0,0,0.16), inset 8px 10px 18px rgba(255,255,255,0.35), 0 18px 30px rgba(22,48,63,0.22);
}
.scoop::after{content:''; position:absolute; top:14%; left:16%; width:30%; height:18%; background:rgba(255,255,255,0.55); border-radius:50%; filter:blur(5px);}
.scoop-1{width:168px; height:120px; margin-left:-84px; top:-92px; z-index:3; background:linear-gradient(160deg,var(--strawberry),var(--strawberry-dark)); transform:translateZ(70px);}
.scoop-2{width:150px; height:108px; margin-left:-75px; top:-166px; z-index:4; background:linear-gradient(160deg,var(--vanilla),var(--vanilla-dark)); transform:translateZ(96px);}
.scoop-3{width:128px; height:92px; margin-left:-64px; top:-232px; z-index:5; background:linear-gradient(160deg,var(--pistachio),var(--pistachio-dark)); transform:translateZ(122px);}
.cherry{
  position:absolute; left:50%; margin-left:-11px; top:-266px; width:22px; height:22px; border-radius:50%; z-index:6;
  background:radial-gradient(circle at 30% 28%, #FF8FA0, #C4324B 68%);
  box-shadow:0 6px 10px rgba(180,30,60,0.4);
  transform:translateZ(140px);
}
.cherry::before{content:''; position:absolute; top:-11px; left:9px; width:3px; height:14px; background:#6F8F4E; border-radius:2px; transform:rotate(18deg);}
.drizzle{position:absolute; z-index:6; opacity:0.85; transform:translateZ(130px);}
.crumb{position:absolute; border-radius:50%; z-index:7; animation:crumbFloat 4.5s ease-in-out infinite;}
@keyframes crumbFloat{0%,100%{transform:translateZ(150px) translateY(0);} 50%{transform:translateZ(160px) translateY(-8px);}}
.milk-splash{position:absolute; left:-6%; bottom:8%; width:150px; height:90px; z-index:2; transform:translateZ(-10px); opacity:0.9;}
.dairy-card{
  position:absolute; right:-4%; top:8%; width:118px; padding:14px 12px; border-radius:16px; z-index:6;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(6px);
  box-shadow:0 14px 26px rgba(22,48,63,0.18);
  transform:translateZ(160px) rotateY(6deg);
  font-size:11px; text-align:center;
}
.dairy-card .jar{width:34px; height:40px; margin:0 auto 8px; border-radius:6px 6px 10px 10px; background:linear-gradient(160deg,#fff,#EDE7D6); border:1px solid var(--line); position:relative;}
.dairy-card .jar::before{content:''; position:absolute; top:-6px; left:6px; width:22px; height:8px; background:#DCE7CE; border-radius:3px;}
.dairy-card b{display:block; color:var(--navy); font-family:'Baloo 2'; font-size:12.5px; margin-top:2px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:var(--vanilla);
  font-size:12.5px; font-weight:600; letter-spacing:0.04em;
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--pistachio);}
.hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.06; margin-bottom:22px;}
.hero h1 em{font-style:normal; color:var(--strawberry-dark);}
.hero p.lede{font-size:18px; line-height:1.55; color:rgba(31,42,36,0.72); max-width:490px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{background:var(--navy); color:var(--cream); padding:15px 28px; border-radius:999px; font-size:15px; font-weight:600; box-shadow:0 10px 24px rgba(22,48,63,0.28); transition:transform .18s ease; display:inline-block;}
.btn-primary:hover{transform:translateY(-2px); color:var(--cream);}
.btn-ghost{background:transparent; color:var(--navy); padding:15px 26px; border-radius:999px; font-size:15px; font-weight:600; border:1.5px solid var(--line); transition:border-color .18s ease, background .18s ease; display:inline-block;}
.btn-ghost:hover{border-color:var(--navy); background:rgba(22,48,63,0.04);}
.hero-note{margin-top:20px; font-size:13px; color:rgba(31,42,36,0.55); display:flex; align-items:center; gap:8px;}
.pulse-dot{width:8px; height:8px; border-radius:50%; background:var(--pistachio); display:inline-block; animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}

/* ============ LOGO STRIP ============ */
.strip{padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.strip .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
.strip-label{font-size:12.5px; font-weight:600; color:rgba(22,48,63,0.5); letter-spacing:0.04em;}
.strip-items{display:flex; gap:28px; flex-wrap:wrap; font-family:'Baloo 2'; font-weight:600; color:rgba(22,48,63,0.38); font-size:16px;}

/* ============ FEATURES ============ */
.section{padding:100px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head .eyebrow{background:transparent; color:var(--strawberry-dark); padding:0; margin-bottom:14px;}
.section-head .eyebrow::before{background:var(--strawberry);}
.section-head h2{font-size:clamp(28px,3.4vw,38px); line-height:1.15; margin-bottom:14px;}
.section-head p{font-size:16.5px; color:rgba(31,42,36,0.68); line-height:1.6;}
.flavor-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media(max-width:940px){.flavor-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.flavor-grid{grid-template-columns:1fr;}}
.flavor-card{background:#fff; border-radius:24px; padding:30px 24px 26px; border:1px solid var(--line); transition:transform .22s ease, box-shadow .22s ease; position:relative; overflow:hidden;}
.flavor-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-soft);}
.scoop-icon{width:56px; height:56px; border-radius:var(--radius-scoop); margin-bottom:20px; box-shadow:inset -4px -4px 8px rgba(0,0,0,0.12), inset 3px 3px 6px rgba(255,255,255,0.35);}
.flavor-card:nth-child(1) .scoop-icon{background:linear-gradient(155deg,var(--pistachio),var(--pistachio-dark));}
.flavor-card:nth-child(2) .scoop-icon{background:linear-gradient(155deg,var(--strawberry),var(--strawberry-dark));}
.flavor-card:nth-child(3) .scoop-icon{background:linear-gradient(155deg,var(--blueberry),var(--blueberry-dark));}
.flavor-card:nth-child(4) .scoop-icon{background:linear-gradient(155deg,var(--vanilla),var(--vanilla-dark));}
.flavor-card h3{font-size:19px; margin-bottom:8px;}
.flavor-card p{font-size:14.5px; color:rgba(31,42,36,0.66); line-height:1.55; margin-bottom:14px;}
.flavor-tag{font-size:12px; font-family:'IBM Plex Mono'; color:rgba(22,48,63,0.45);}

/* ============ GALLERY ============ */
.gallery-3d{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; perspective:1200px;}
@media(max-width:900px){.gallery-3d{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.gallery-3d{grid-template-columns:repeat(2,1fr);}}
.photo-frame{aspect-ratio:0.82/1; border-radius:20px; position:relative; overflow:hidden; box-shadow:0 16px 30px rgba(22,48,63,0.18); transition:transform .3s ease, box-shadow .3s ease;}
.gallery-3d > *:nth-child(odd){transform:translateY(-14px);}
.photo-frame:hover{transform:translateY(-20px) rotateY(-4deg) scale(1.03); box-shadow:0 26px 40px rgba(22,48,63,0.26);}
.photo-frame .shade{position:absolute; inset:0; background:linear-gradient(200deg, rgba(255,255,255,0.35), transparent 45%);}
.photo-frame .fname{position:absolute; bottom:10px; left:0; right:0; text-align:center; color:#fff; font-family:'Baloo 2'; font-weight:700; font-size:12.5px; text-shadow:0 2px 6px rgba(0,0,0,0.35);}
.pf-1{background:radial-gradient(circle at 35% 25%, #F5A0B4, var(--strawberry-dark) 75%);}
.pf-2{background:radial-gradient(circle at 35% 25%, #C9E0A8, var(--pistachio-dark) 75%);}
.pf-3{background:radial-gradient(circle at 35% 25%, #B7C4F0, var(--blueberry-dark) 75%);}
.pf-4{background:radial-gradient(circle at 35% 25%, #FCE9BE, var(--vanilla-dark) 75%);}
.pf-5{background:radial-gradient(circle at 35% 25%, #E3C2A8, #8E6448 75%);}
.pf-6{background:radial-gradient(circle at 35% 25%, #E6CDF2, #9B72BE 75%);}
.gallery-note{font-size:12.5px; color:rgba(31,42,36,0.5); margin-top:18px; text-align:center;}

/* ============ INSTALL BAND ============ */
.band{background:var(--navy); color:var(--cream); border-radius:32px; margin:0 auto; padding:64px 48px; position:relative; overflow:hidden;}
.band::after{content:''; position:absolute; right:-60px; bottom:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(143,174,107,0.35), transparent 70%);}
.band-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; position:relative; z-index:1;}
@media(max-width:860px){.band-grid{grid-template-columns:1fr;}}
.band h2{color:var(--cream); font-size:clamp(26px,3vw,32px); margin-bottom:16px;}
.band p{color:rgba(251,246,236,0.75); font-size:15.5px; line-height:1.65; margin-bottom:8px;}
.install-list{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:14px; padding:0;}
.install-list li{display:flex; gap:12px; font-size:14.5px; color:rgba(251,246,236,0.88); align-items:flex-start;}
.install-list li::before{content:'✓'; color:var(--pistachio); font-weight:700; flex-shrink:0;}
.wp-card{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:20px; padding:26px;}
.wp-card .wp-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.1); font-size:14px;}
.wp-card .wp-row:last-child{border-bottom:none;}
.wp-card .wp-row b{font-weight:600; color:var(--vanilla); font-family:'IBM Plex Mono'; font-size:13px;}

/* ============ TESTIMONIAL ============ */
.quote-wrap{max-width:720px; margin:0 auto; text-align:center;}
.quote-mark{font-family:'Baloo 2'; font-size:60px; color:var(--strawberry); line-height:1; margin-bottom:8px;}
.quote-wrap p{font-family:'Baloo 2'; font-size:clamp(20px,2.6vw,26px); color:var(--navy); line-height:1.4; margin-bottom:22px;}
.quote-attr{font-size:14px; color:rgba(31,42,36,0.6); font-weight:600;}

/* ============ CTA + FOOTER ============ */
.cta-final{text-align:center; padding:100px 0 60px;}
.cta-final h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:16px;}
.cta-final p{font-size:16.5px; color:rgba(31,42,36,0.68); margin-bottom:32px;}
.site-footer{border-top:1px solid var(--line); padding:36px 0; font-size:13px; color:rgba(31,42,36,0.5);}
.site-footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

/* ============ STORE PAGE WRAPPER ============ */
.store-page-header{padding:60px 0 20px; text-align:center;}
.store-page-header h1{font-size:clamp(28px,3.6vw,38px); margin-bottom:10px;}
.store-page-header p{color:rgba(31,42,36,0.68); max-width:520px; margin:0 auto;}