:root{
  --navy-deep:#12152e;
  --navy:#1d2350;
  --navy-soft:#2a3170;
  --purple:#8d7fd8;
  --purple-soft:#b6acdf;
  --gold:#d7a94a;
  --gold-soft:#eccf95;
  --pink:#ef5da8;
  --green:#1fae63;
  --orange:#ff7d3b;
  --cream:#f7f3ec;
  --cream-2:#efe9dd;
  --ink:#1b1b26;
  --line: rgba(255,255,255,.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
h1,h2,h3,h4,.display-font{
  font-family:'Fredoka', sans-serif;
  letter-spacing:-0.01em;
}
a{text-decoration:none;}
.eyebrow{
  font-family:'Inter',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.btn{border-radius:100px; font-weight:600; padding:.75rem 1.6rem; font-size:.95rem; transition:.25s;}
.btn:active{transform:scale(.96);}
.btn-gold{background:var(--gold); color:var(--navy-deep); border:1px solid var(--gold);}
.btn-gold:hover{background:#c79a3c; color:var(--navy-deep); transform:translateY(-2px);}
.btn-outline-cream{border:1px solid rgba(247,243,236,.55); color:var(--cream);}
.btn-outline-cream:hover{background:rgba(247,243,236,.1); color:var(--cream); transform:translateY(-2px);}
.btn-navy{background:var(--navy); color:var(--cream); border:1px solid var(--navy);}
.btn-navy:hover{background:var(--navy-soft); color:var(--cream); transform:translateY(-2px);}
.btn-pink{background:var(--pink); color:#fff; border:1px solid var(--pink);}
.btn-pink:hover{background:#d9488f; color:#fff; transform:translateY(-2px);}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-14px) rotate(var(--r,0deg));}}
@keyframes spinSlow{from{transform:rotate(0);} to{transform:rotate(360deg);}}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes pop{0%{transform:scale(.9); opacity:0;} 100%{transform:scale(1); opacity:1;}}
@keyframes fadeSwap{from{opacity:0;} to{opacity:1;}}

/* ---------- NAV ---------- */
.navbar-snooze{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 0; transition:.35s ease; background:transparent;
}
.navbar-snooze.scrolled{
  background:rgba(18,21,46,.92); backdrop-filter:blur(10px);
  padding:.7rem 0; box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.nav-logo{height:34px; display:block;}
.navbar-snooze .nav-link{
  color:var(--cream); opacity:.85; font-weight:500; font-size:.92rem;
  margin:0 .85rem; padding:.3rem 0 !important; border-bottom:1px solid transparent;
}
.navbar-snooze .nav-link:hover{opacity:1; border-color:var(--gold);}

/* ---------- MARQUEE ---------- */
.marquee-wrap{background:var(--gold); overflow:hidden; white-space:nowrap; padding:.55rem 0; position:relative; z-index:2;}
.marquee-track{display:inline-block; animation:marquee 22s linear infinite;}
.marquee-track span{font-family:'Fredoka',sans-serif; font-weight:600; font-size:.85rem; color:var(--navy-deep); margin:0 1.4rem;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 100% at 85% 0%, #262c5e 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color:var(--cream); padding:6rem 0 5rem; overflow:hidden;
}
.hero .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none;}
.blob-1{width:340px; height:340px; background:var(--purple); top:-100px; right:-60px;}
.blob-2{width:260px; height:260px; background:var(--pink); bottom:-80px; left:-60px; opacity:.22;}
.hero .doodle{position:absolute; font-size:1.6rem; opacity:.55; animation:floaty 5s ease-in-out infinite;}
.hero-eyebrow{color:var(--gold-soft);}
.hero h1{font-size:clamp(2.3rem, 4.4vw, 3.6rem); font-weight:600; line-height:1.08; margin:1rem 0 1.2rem;}
.hero h1 .accent{color:var(--gold);}
.hero p.lead-copy{color:rgba(247,243,236,.82); font-size:1.08rem; max-width:480px;}
.badge-row{gap:.6rem; margin-top:1.8rem;}
.trust-pill{display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--line); border-radius:100px; padding:.4rem .9rem; font-size:.78rem; color:var(--cream); opacity:.9;}
.trust-pill i{color:var(--gold);}
.hero-media{position:relative;}
.hero-media img{border-radius:20px; box-shadow:0 30px 60px rgba(0,0,0,.45); width:100%;}
.moon-badge{
  position:absolute; top:30px; right:14px; width:92px; height:92px; border-radius:50%;
  background:var(--gold); display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.35); text-align:center; animation:floaty 4.5s ease-in-out infinite; --r:-8deg;
}
.moon-badge span{font-family:'Fredoka',sans-serif; font-weight:600; font-size:.72rem; color:var(--navy-deep); line-height:1.15;}
.sticker{
  position:absolute; background:#fff; color:var(--navy-deep); border-radius:14px; padding:.5rem .8rem;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:.78rem; box-shadow:0 14px 26px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:.4rem; animation:floaty 6s ease-in-out infinite;
}
.sticker-left{left:-18px; bottom:36px; --r:-6deg;}
.sticker-left i{color:var(--pink);}

section{padding:5rem 0;}
.section-title{font-size:clamp(1.9rem,3vw,2.7rem); font-weight:600; color:var(--navy-deep);}
.section-sub{color:#5c5c6c; max-width:560px;}

/* ---------- CHAPTER DIVIDER ---------- */
.chapter-divider{display:flex; align-items:center; justify-content:center; gap:1rem; padding:2.6rem 0 1rem;}
.chapter-divider .line{height:1px; background:rgba(27,27,38,.15); flex:1; max-width:120px;}
.chapter-divider .moon-phase{width:26px; height:26px; border-radius:50%; background:var(--navy); position:relative; overflow:hidden; animation:spinSlow 12s linear infinite;}
.chapter-divider .moon-phase::after{content:""; position:absolute; top:0; right:0; width:60%; height:100%; background:var(--cream); border-radius:50%;}
.chapter-divider .moon-phase.full::after{display:none;}
.chapter-divider .moon-phase.new::after{width:100%; background:var(--cream);}
.chapter-divider .label{font-family:'Fredoka',sans-serif; color:var(--navy); font-size:.95rem; white-space:nowrap;}

/* ---------- PRODUCT SECTION ---------- */
.product-gallery{position:relative;}
.product-gallery img{border-radius:18px; width:100%; box-shadow:0 20px 40px rgba(27,27,38,.12); background:#fff;}
#colorPreview{transition:opacity .18s ease;}
.gallery-caption{
  text-align:center; font-size:.82rem; color:#75757f; margin-top:.6rem;
}
.feature-list{list-style:none; padding:0; margin:1.6rem 0;}
.feature-list li{display:flex; gap:.8rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px dashed rgba(27,27,38,.12);}
.feature-list li:last-child{border-bottom:none;}
.feature-list i{color:var(--purple); font-size:1.1rem; margin-top:.15rem;}
.feature-list strong{display:block; font-size:.96rem;}
.feature-list span{font-size:.87rem; color:#63636f;}

.swatch-label{font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:#4a4a58; margin-bottom:.6rem; display:block;}
.swatches{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.4rem;}
.swatch-wrap{text-align:center;}
.swatch{width:36px; height:36px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(27,27,38,.18); cursor:pointer; transition:.2s;}
.swatch:hover{transform:scale(1.12);}
.swatch.active{box-shadow:0 0 0 2px var(--navy); transform:scale(1.12);}
.swatch-wrap small{display:block; font-size:.62rem; margin-top:.3rem; color:#75757f; max-width:60px;}
.size-pills{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.6rem 0;}
.size-pill{border:1px solid rgba(27,27,38,.2); border-radius:10px; padding:.5rem 1.05rem; font-weight:600; font-size:.85rem; cursor:pointer; background:#fff; transition:.2s;}
.size-pill.active{background:var(--navy); color:var(--cream); border-color:var(--navy); animation:pop .25s ease;}

/* ---------- BUY SECTION ---------- */
.buy-section{background:var(--navy-deep); color:var(--cream);}
.buy-card{background:rgba(247,243,236,.05); border:1px solid var(--line); border-radius:22px; padding:2.2rem;}
.price-tag{font-family:'Fredoka',sans-serif; font-size:2.4rem; font-weight:600;}
.price-old{font-size:1.1rem; color:rgba(247,243,236,.5); text-decoration:line-through; margin-left:.5rem;}
.qty-box{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:100px; overflow:hidden;}
.qty-box button{background:transparent; border:none; color:var(--cream); width:36px; height:36px; font-size:1.1rem;}
.qty-box span{width:32px; text-align:center; font-weight:600;}

.step-dot{width:26px; height:26px; border-radius:50%; background:rgba(27,27,38,.12); color:#75757f; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700;}
.step-dot.active{background:var(--navy); color:#fff;}
.step-line{flex:1; height:2px; background:rgba(27,27,38,.12); margin:0 .4rem;}
.qr-box{
  width:200px; height:200px; margin:0 auto; border:2px dashed rgba(27,27,38,.3); border-radius:16px;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#6a6a76; font-size:.8rem; padding:1rem; background:#fff; overflow:hidden;
}
.qr-box img{max-width:100%; max-height:100%; border-radius:10px;}

/* ---------- COMING SOON ---------- */
.soon-card{background:#fff; border-radius:20px; padding:0; height:100%; border:1px solid rgba(27,27,38,.08); position:relative; overflow:hidden; transition:.3s;}
.soon-card:hover{transform:translateY(-6px) rotate(-.5deg); box-shadow:0 20px 36px rgba(27,27,38,.12);}
.soon-art{height:150px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.soon-art i{font-size:3rem; color:#fff; position:relative; z-index:2; animation:floaty 5s ease-in-out infinite;}
.soon-art.a1{background:linear-gradient(135deg,#7c5cbf,#b6acdf);}
.soon-art.a2{background:linear-gradient(135deg,#1fae63,#8fd9b0);}
.soon-art.a3{background:linear-gradient(135deg,#1d2350,#3b82c9);}
.soon-art.a4{background:linear-gradient(135deg,#ff7d3b,#ffbb8a);}
.soon-body{padding:1.4rem 1.5rem 1.6rem;}
.soon-ribbon{
  position:absolute; top:1rem; right:1rem; z-index:3; background:rgba(255,255,255,.92); color:var(--navy-deep);
  font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .6rem; border-radius:100px;
}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-deep); color:rgba(247,243,236,.65); padding:3.5rem 0 1.6rem;}
footer .foot-logo{height:26px; margin-bottom:1rem;}
footer a{color:rgba(247,243,236,.65);}
footer a:hover{color:var(--gold);}
.foot-links li{margin-bottom:.5rem; font-size:.9rem;}
.foot-bottom{border-top:1px solid var(--line); margin-top:2.4rem; padding-top:1.4rem; font-size:.8rem;}

/* toast */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-deep); color:var(--cream); padding:.85rem 1.4rem; border-radius:100px;
  font-size:.88rem; font-weight:600; box-shadow:0 14px 30px rgba(0,0,0,.3); z-index:2000;
  opacity:0; pointer-events:none; transition:.3s;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width: 767px){
  .chapter-divider .label{display:none;}
  section{padding:3.4rem 0;}
  .sticker-left{display:none;}
}