/* ==========================================================================
   CHARMED SKIN — stylesheet
   Design tokens
   ========================================================================== */
:root{
  --cream:        #FBF1EA;
  --cream-deep:   #F3E4DA;
  --blush:        #F7D7CE;
  --magenta:      #C81259;
  --magenta-deep: #8A0C3F;
  --plum:         #34101E;
  --plum-soft:    #5C2A3C;
  --purple:       #5B2A86;
  --purple-soft:  #8452B3;
  --gold:         #C9A227;
  --gold-light:   #F0D68A;
  --gold-deep:    #9C7A17;
  --white:        #FFFFFF;

  --choc:         #2A1810;
  --choc-deep:    #180C08;
  --choc-soft:    #3E241A;

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-script:  'Great Vibes', cursive;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --container: 1240px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --shadow-soft: 0 20px 60px -20px rgba(88, 15, 50, 0.35);
  --shadow-card: 0 14px 34px -12px rgba(88, 15, 50, 0.22);

  --ease-glam: cubic-bezier(.22,.85,.32,1.15);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--plum);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--magenta-deep);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: var(--gold);
}
.section-heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  color: var(--plum);
  margin-top: 14px;
}
.section-heading em{
  font-family: var(--font-script);
  font-style: normal;
  color: var(--magenta);
  font-size: 1.35em;
  font-weight: 400;
  padding: 0 4px;
}
.section-sub{
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--plum-soft);
  max-width: 620px;
}
.section-head{
  text-align:center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing:.03em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease-glam), box-shadow .35s ease, background .3s ease, color .3s ease;
}
.btn:hover{ transform: translateY(-3px) scale(1.02); }
.btn-primary{
  background: linear-gradient(135deg, var(--magenta), var(--magenta-deep));
  color: var(--white);
  box-shadow: 0 14px 30px -10px rgba(200,18,89,.55);
}
.btn-primary:hover{ box-shadow: 0 20px 40px -12px rgba(200,18,89,.65); }
.btn-ghost{
  background: transparent;
  color: var(--plum);
  border-color: rgba(52,16,30,.25);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--magenta-deep); }
.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--plum);
  box-shadow: 0 14px 30px -10px rgba(201,162,39,.55);
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(46px) rotateX(6deg);
  transform-origin: top center;
  transition: opacity .9s var(--ease-glam), transform .9s var(--ease-glam);
  will-change: transform, opacity;
}
.reveal.in-view{ opacity: 1; transform: translateY(0) rotateX(0); }
.reveal-delay-1{ transition-delay: .1s; }
.reveal-delay-2{ transition-delay: .22s; }
.reveal-delay-3{ transition-delay: .34s; }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  padding: 18px 0;
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-nav::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background: linear-gradient(180deg, var(--choc) 0%, var(--choc-deep) 100%);
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.site-nav.scrolled{
  padding: 12px 0;
  box-shadow: 0 8px 30px -18px rgba(0,0,0,.55);
}
.site-nav.scrolled::before{
  background: linear-gradient(180deg, var(--choc-deep) 0%, #0D0705 100%);
  backdrop-filter: blur(14px);
}
.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family: var(--font-script);
  font-size: 32px;
  line-height:1;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-light) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.brand small{
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight:500;
}
.nav-links{
  display:flex;
  gap: 34px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}
.nav-links a{
  position:relative;
  padding: 4px 0;
  color: var(--cream);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background: var(--gold);
  transition: right .35s var(--ease-glam);
}
.nav-links a:hover{ color: var(--gold-light); }
.nav-links a:hover::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.site-nav .btn-ghost{
  color: var(--gold-light);
  border-color: rgba(240,214,138,.4);
}
.site-nav .btn-ghost:hover{
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(240,214,138,.08);
}
.nav-toggle{
  display:none;
  background:none; border:none;
  width: 40px; height: 34px;
  position:relative;
  z-index: 600;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px; height:2px;
  background: var(--gold-light);
  transition: transform .35s ease, opacity .35s ease, top .35s ease;
}
.nav-toggle span:nth-child(1){ top: 9px; }
.nav-toggle span:nth-child(2){ top: 17px; }
.nav-toggle span:nth-child(3){ top: 25px; }
.nav-toggle.open span:nth-child(1){ top:17px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:17px; transform: rotate(-45deg); }

/* ==========================================================================
   HERO — 3D scene
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  padding-top: 110px;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(240,214,138,.55), transparent 60%),
    radial-gradient(70% 60% at 15% 85%, rgba(200,18,89,.14), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--blush) 100%);
}
.hero .container{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: 40px;
  position:relative;
  z-index:5;
}
.hero-copy .eyebrow{ margin-bottom: 4px; }
.hero-title{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(42px, 6vw, 70px);
  line-height: 1.02;
  color: var(--plum);
  letter-spacing: -.01em;
}
.hero-title .script{
  display:block;
  font-family: var(--font-script);
  font-weight:400;
  font-size: 1.05em;
  color: var(--magenta);
  line-height: 1;
  margin-bottom: 2px;
}
.hero-title .grad{
  background: linear-gradient(100deg, var(--magenta-deep), var(--magenta) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-text{
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--plum-soft);
  max-width: 480px;
}
.hero-actions{
  margin-top: 34px;
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-trust{
  display:flex;
  gap: 26px;
  margin-top: 46px;
  flex-wrap: wrap;
}
.hero-trust div{ font-size: 12.5px; color: var(--plum-soft); }
.hero-trust strong{
  display:block;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--magenta-deep);
}

/* --- 3D stage --- */
.hero-stage{
  position: relative;
  height: 560px;
  perspective: 1400px;
}
.stage-inner{
  position:absolute; inset:0;
  transform-style: preserve-3d;
}
.pedestal{
  position:absolute;
  bottom: 38px; left:50%;
  width: 340px; height: 70px;
  transform: translateX(-50%) rotateX(78deg);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(240,214,138,.35) 65%, transparent 78%);
  filter: blur(1px);
}
.pedestal::after{
  content:"";
  position:absolute; inset: -30px -60px;
  background: radial-gradient(closest-side, rgba(200,18,89,.16), transparent 70%);
  border-radius: 50%;
  z-index:-1;
}

.prop{
  position:absolute;
  transform-style: preserve-3d;
  animation: hover-float 7s ease-in-out infinite;
}
@keyframes hover-float{
  0%,100%{ transform: translateY(0) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)); }
  50%{ transform: translateY(-22px) rotateY(calc(var(--ry,0deg) + 14deg)) rotateZ(var(--rz,0deg)); }
}

/* real product photos, cut out and floated in the 3D scene */
.prop-photo{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:2;
  transform: translateZ(24px);
  filter:
    drop-shadow(0 4px 8px rgba(52,16,30,.22))
    drop-shadow(0 34px 34px rgba(52,16,30,.42));
}
.prop-shadow{
  position:absolute;
  left:50%; bottom:-14px;
  width:74%; height:24px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(24,12,8,.42), transparent 72%);
  border-radius:50%;
  filter: blur(3px);
  z-index:1;
  animation: shadow-pulse 7s ease-in-out infinite;
}
@keyframes shadow-pulse{
  0%,100%{ transform: translateX(-50%) scale(1); opacity:.6; }
  50%{ transform: translateX(-50%) scale(.76); opacity:.32; }
}

/* Composition: soap tucks against the lotion's base on the left/center —
   a grouped cluster — while the tall wash bottle stands clear on the
   right, all three resting on the same ground line. */

/* soap bar — Seductress Premium Soap — front-left, grounded */
.soap{
  left: 0%; top: 59%;
  width: 208px;
  --ry: 16deg; --rz: -6deg;
  z-index: 3;
  animation-duration: 8.5s;
}

/* box + tube — Instant Whitening Lotion SPF 60 — back-center, tallest */
.bottle{
  left: 27%; top: 26%;
  width: 248px;
  --ry: -8deg; --rz: 2deg;
  z-index: 2;
  animation-duration: 9.5s;
  animation-delay: -2s;
}

/* pump bottle — Niacinamide + Glutathione Wash — front-right, standing clear */
.jar{
  right: 3%; top: 15%;
  width: 136px;
  --ry: -14deg; --rz: 4deg;
  z-index: 3;
  animation-duration: 7.8s;
  animation-delay: -4s;
}

/* petals */
.petal-field{ position:absolute; inset:0; pointer-events:none; }
.petal{
  position:absolute;
  top: -40px;
  width: 14px; height: 18px;
  background: linear-gradient(160deg, #f6b8cf, var(--magenta));
  border-radius: 60% 10% 60% 10%;
  opacity: .8;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes fall{
  0%{ transform: translate3d(0,-60px,0) rotate(0deg); opacity:0; }
  10%{ opacity:.85; }
  100%{ transform: translate3d(var(--drift, 40px), 640px, 0) rotate(340deg); opacity:0; }
}

/* sparkles */
.sparkle{
  position:absolute;
  width: 8px; height:8px;
  background: var(--gold-light);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  animation: twinkle 2.4s ease-in-out infinite;
  opacity:0;
}
@keyframes twinkle{
  0%,100%{ opacity:0; transform: scale(.4) rotate(0deg); }
  50%{ opacity:1; transform: scale(1.15) rotate(60deg); }
}

.scroll-cue{
  position:absolute;
  left:50%; bottom: 26px;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size: 10.5px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color: var(--plum-soft);
  z-index:6;
}
.scroll-cue svg{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(7px);} }

/* ==========================================================================
   About
   ========================================================================== */
.about{
  position:relative;
  padding: 130px 0 110px;
  background: var(--white);
}
.about-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 64px;
  align-items:center;
}
.marble-frame{
  position:relative;
  border-radius: var(--radius-lg);
  padding: 3px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-light));
  box-shadow: var(--shadow-soft);
  transform: perspective(1200px) rotateY(6deg);
  transition: transform .6s var(--ease-glam);
}
.marble-frame:hover{ transform: perspective(1200px) rotateY(0deg); }
.marble-panel{
  border-radius: calc(var(--radius-lg) - 3px);
  padding: 54px 40px;
  min-height: 360px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(155deg, #efe3f6 0%, #f7d9e3 38%, #fbeedb 100%);
  position:relative;
  overflow:hidden;
}
.marble-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(2px 60px at 20% 10%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 90px at 70% 60%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 140px at 45% 90%, rgba(155,90,150,.25), transparent);
  mix-blend-mode: overlay;
  opacity:.6;
}
.marble-panel .quote{
  position:relative;
  font-family: var(--font-script);
  font-size: 40px;
  color: var(--magenta-deep);
  line-height:1.15;
}
.marble-panel .quote-body{
  position:relative;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight:600;
  font-size: 21px;
  line-height:1.5;
  color: var(--plum);
}
.badge-row{
  position:relative;
  display:flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap:wrap;
}
.badge-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  font-size: 12.5px;
  font-weight:600;
  color: var(--plum);
  border: 1px solid rgba(255,255,255,.7);
}
.badge-pill svg{ flex-shrink:0; }

.about-copy p{
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--plum-soft);
  margin-top: 18px;
}
.about-stats{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 40px;
}
.stat{
  text-align:center;
  padding: 20px 8px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--cream), var(--blush));
  border: 1px solid rgba(200,18,89,.08);
}
.stat strong{
  display:block;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--magenta-deep);
}
.stat span{ font-size:12px; color: var(--plum-soft); letter-spacing:.02em; }

/* ==========================================================================
   Promise — 3D flip cards
   ========================================================================== */
.promise{
  padding: 120px 0;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(91,42,134,.10), transparent 60%),
    linear-gradient(180deg, var(--blush) 0%, var(--cream) 100%);
}
.promise-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.flip-card{
  perspective: 1400px;
  height: 300px;
}
.flip-inner{
  position:relative;
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-glam);
}
.flip-card:hover .flip-inner,
.flip-card.flipped .flip-inner{ transform: rotateY(180deg); }
.flip-face{
  position:absolute; inset:0;
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  padding: 40px 32px;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-card);
}
.flip-front{
  background: linear-gradient(150deg, var(--white), var(--cream));
  align-items:flex-start;
  justify-content:space-between;
  border: 1px solid rgba(200,18,89,.08);
}
.flip-front .icon-wrap{
  width: 62px; height:62px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  box-shadow: 0 14px 26px -10px rgba(91,42,134,.5);
}
.flip-front h3{
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--plum);
  margin-top: 24px;
}
.flip-front .tap-hint{
  font-size: 11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color: var(--plum-soft);
  opacity:.65;
}
.flip-back{
  background: linear-gradient(160deg, var(--magenta-deep), var(--purple));
  color: var(--white);
  transform: rotateY(180deg);
  justify-content:center;
  text-align:left;
}
.flip-back p{
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.92);
}
.flip-back .mark{
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--gold-light);
  margin-bottom: 10px;
  display:block;
}

/* ==========================================================================
   Products — tilt gallery
   ========================================================================== */
.products{
  padding: 120px 0 130px;
  background: var(--white);
}
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.tilt-card{
  perspective: 1000px;
}
.tilt-inner{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  background: var(--cream);
  box-shadow: var(--shadow-card);
  transition: transform .12s ease-out, box-shadow .3s ease;
  transform-style: preserve-3d;
  cursor: pointer;
}
.tilt-inner:hover{ box-shadow: 0 26px 50px -16px rgba(88,15,50,.4); }
.tilt-media{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
}
.tilt-media img{
  width:100%; height:100%; object-fit: cover;
  transform: scale(1.02) translateZ(0);
  transition: transform .6s ease;
}
.tilt-inner:hover .tilt-media img{ transform: scale(1.1); }
.tilt-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(200deg, transparent 40%, rgba(52,16,30,.55));
  opacity:0;
  transition: opacity .4s ease;
}
.tilt-inner:hover .tilt-media::after{ opacity:1; }
.tilt-zoom{
  position:absolute; right:14px; bottom:14px;
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.tilt-inner:hover .tilt-zoom{ opacity:1; transform:translateY(0); }
.tilt-body{
  padding: 22px 24px 26px;
  transform: translateZ(20px);
}
.tilt-body .tag{
  font-size: 11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--magenta);
  font-weight:600;
}
.tilt-body h3{
  font-family: var(--font-display);
  font-size: 21px;
  margin-top: 8px;
  color: var(--plum);
}
.tilt-body p{
  margin-top: 8px;
  font-size: 14px;
  line-height:1.6;
  color: var(--plum-soft);
}

/* lightbox */
.lightbox{
  position: fixed; inset:0;
  z-index: 900;
  display:flex; align-items:center; justify-content:center;
  padding: 30px;
  background: rgba(52,16,30,.82);
  backdrop-filter: blur(6px);
  opacity:0; visibility:hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-inner{
  position:relative;
  max-width: 900px; width:100%;
  max-height: 88vh;
  border-radius: var(--radius-md);
  overflow:auto;
  background: var(--white);
  transform: scale(.9) rotateX(6deg);
  transition: transform .4s var(--ease-glam);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
}
.lightbox.open .lightbox-inner{ transform: scale(1) rotateX(0); }
.lightbox-inner img{ width:100%; display:block; }
.lightbox-close{
  position:absolute; top:14px; right:14px;
  width:42px; height:42px; border-radius:50%;
  background: var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  border:none;
  z-index:2;
}

/* ==========================================================================
   Opportunity band
   ========================================================================== */
.opportunity{
  position:relative;
  padding: 100px 0;
  overflow:hidden;
  background: linear-gradient(120deg, var(--magenta-deep), var(--magenta) 55%, var(--purple));
  color: var(--white);
}
.opportunity::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(50% 80% at 90% 20%, rgba(240,214,138,.28), transparent 60%);
}
.opportunity-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items:center;
}
.opportunity .eyebrow{ color: var(--gold-light); }
.opportunity .eyebrow::before{ background: var(--gold-light); }
.opportunity h2{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(28px,3.6vw,42px);
  line-height:1.2;
  margin-top:14px;
}
.opportunity h2 em{
  font-family: var(--font-script);
  font-style:normal;
  color: var(--gold-light);
  font-size: 1.2em;
}
.opportunity p{
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,.88);
  max-width: 520px;
}
.opportunity-actions{ margin-top: 30px; display:flex; gap:16px; flex-wrap:wrap; }
.perk-list{ display:flex; flex-direction:column; gap:18px; }
.perk{
  display:flex; gap:16px; align-items:flex-start;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  transform: perspective(800px) rotateY(-4deg);
  transition: transform .5s var(--ease-glam), background .3s ease;
}
.perk:hover{ transform: perspective(800px) rotateY(0deg) translateX(4px); background: rgba(255,255,255,.14); }
.perk .num{
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold-light);
  flex-shrink:0;
}
.perk h4{ font-size:15.5px; font-weight:600; }
.perk p{ margin-top:4px; font-size:13.5px; color: rgba(255,255,255,.78); line-height:1.6; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--plum);
  color: rgba(255,255,255,.75);
  padding: 70px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr .8fr .8fr 1fr;
  gap: 40px;
}
.footer-brand .brand{ color: var(--gold-light); }
.footer-brand p{
  margin-top: 16px;
  font-size:14px;
  line-height:1.75;
  max-width: 300px;
  color: rgba(255,255,255,.62);
}
.footer-tagline{
  margin-top:18px;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--gold-light);
}
.footer-col h5{
  font-size:12.5px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--gold-light); margin-bottom:18px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color: rgba(255,255,255,.68); transition: color .3s ease; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-size:12.5px; color: rgba(255,255,255,.5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .hero .container{ grid-template-columns: 1fr; text-align:center; }
  .hero-text{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-trust{ justify-content:center; }
  .hero-stage{ height: 420px; margin-top: 20px; }
  .about-grid{ grid-template-columns:1fr; }
  .marble-frame{ transform:none; order:2; }
  .promise-grid{ grid-template-columns: repeat(2,1fr); }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .opportunity-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta{ position: fixed; top:0; right:0; left:0; bottom:0; z-index:400;
    background: linear-gradient(180deg, var(--choc) 0%, var(--choc-deep) 100%); flex-direction:column; justify-content:center; align-items:center; gap:26px;
    transform: translateY(-100%); transition: transform .5s var(--ease-glam); }
  .nav-cta.open{ transform: translateY(0); display:flex; }
  .nav-cta .nav-links{ display:flex; flex-direction:column; align-items:center; gap:26px; font-size:20px; }
  .promise-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

@media (max-width: 480px){
  .container{ padding:0 20px; }
  .hero-stage{ height: 320px; }
  .soap{ width:128px; top:60%; }
  .bottle{ width:150px; top:8%; left:24%; }
  .jar{ width:82px; top:16%; }
  .marble-panel{ padding: 38px 26px; }
  .about-stats{ grid-template-columns: 1fr; gap:12px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}
/* Production integration refinements */
html { scroll-padding-top: 88px; }
.nav-toggle:focus-visible,
.btn:focus-visible,
.nav-links a:focus-visible,
.tilt-inner:focus-visible,
.lightbox-close:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.prop-photo { user-select: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Chocolate + pink visual synchronization — presentation only
   ========================================================================== */
:root{
  --magenta:#e14f83;
  --magenta-deep:#a91f52;
  --blush:#f8d8e2;
  --cream:#fff8f4;
  --cream-deep:#f5e8e3;
  --plum:#29131b;
  --plum-soft:#67434e;
  --choc:#211013;
  --choc-deep:#100709;
  --choc-soft:#3a2024;
  --gold:#d7a56f;
  --gold-light:#f2cfaa;
  --gold-deep:#a66e3f;
  --shadow-soft:0 34px 80px -30px rgba(47,17,27,.48);
  --shadow-card:0 22px 50px -28px rgba(47,17,27,.38);
}

body{
  background:
    radial-gradient(circle at 10% 6%,rgba(225,79,131,.08),transparent 24rem),
    var(--cream);
}

.site-nav{
  padding:13px 0;
  isolation:isolate;
}
.site-nav::before{
  background:
    radial-gradient(circle at 18% -50%,rgba(225,79,131,.28),transparent 42%),
    linear-gradient(112deg,rgba(42,20,24,.98),rgba(15,7,9,.985));
  border-bottom:1px solid rgba(244,164,190,.18);
  box-shadow:0 12px 40px rgba(15,7,9,.22),inset 0 -1px 0 rgba(255,255,255,.035);
}
.site-nav::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-5px;height:5px;
  background:linear-gradient(90deg,transparent,rgba(225,79,131,.55),rgba(242,207,170,.5),transparent);
  filter:blur(4px);
  opacity:.7;
  pointer-events:none;
}
.site-nav.scrolled{padding:9px 0;}
.site-nav.scrolled::before{
  background:linear-gradient(112deg,rgba(35,16,20,.94),rgba(13,6,8,.96));
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
}
.site-nav .container{min-height:54px;gap:28px;}
.brand{
  align-items:center;
  gap:12px;
  color:var(--white);
  background:none;
  filter:none;
  min-width:max-content;
}
.brand-mark{
  position:relative;
  width:46px;height:46px;flex:0 0 46px;
  padding:3px;
  border-radius:15px;
  background:linear-gradient(145deg,var(--gold-light),var(--magenta),var(--choc-soft));
  box-shadow:0 12px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.65);
  transform:perspective(300px) rotateY(-7deg);
}
.brand-mark::after{
  content:"";position:absolute;inset:3px;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);pointer-events:none;
}
.brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.brand-copy{display:flex;flex-direction:column;gap:3px;}
.brand-copy strong{
  font-family:var(--font-display);font-size:18px;line-height:1;font-weight:800;
  letter-spacing:.035em;color:#fff5f7;text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.brand-copy small{
  font-size:8px;line-height:1;letter-spacing:.22em;color:#f1b2c7;font-weight:600;
}
.nav-links{gap:30px;}
.nav-links a{color:#f8e9ed;font-weight:600;letter-spacing:.035em;}
.nav-links a::after{background:linear-gradient(90deg,var(--magenta),var(--gold-light));}
.nav-links a:hover{color:#f7b2c9;}
.site-nav .btn-ghost{
  color:#fff4f7;border-color:rgba(244,164,190,.45);
  background:linear-gradient(145deg,rgba(225,79,131,.18),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 28px rgba(0,0,0,.18);
}
.site-nav .btn-ghost:hover{color:white;border-color:#ef8caf;background:rgba(225,79,131,.28);}
.nav-toggle span{background:#f7b2c9;box-shadow:0 0 12px rgba(225,79,131,.45);}

.hero{
  padding-top:118px;
  background:
    radial-gradient(50% 55% at 80% 18%,rgba(242,207,170,.58),transparent 64%),
    radial-gradient(45% 55% at 75% 64%,rgba(225,79,131,.20),transparent 70%),
    radial-gradient(65% 65% at 7% 88%,rgba(88,32,49,.12),transparent 66%),
    linear-gradient(145deg,#fffaf7 0%,#f9e7e9 58%,#f2d3dc 100%);
}
.hero::before{
  content:"";position:absolute;width:52vw;height:52vw;min-width:520px;min-height:520px;
  right:-12vw;top:3%;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,rgba(225,79,131,.07) 0 1px,transparent 1px 23px);
  transform:perspective(900px) rotateX(64deg) rotateZ(-12deg);
  opacity:.55;
}
.hero-copy{
  position:relative;padding:34px 8px 34px 0;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.hero-title .grad{background-image:linear-gradient(100deg,#6f263d,#d83f76 50%,#9a603a);}
.hero-stage{perspective:1700px;filter:drop-shadow(0 40px 46px rgba(63,19,34,.12));}
.stage-inner{transition:transform .22s cubic-bezier(.2,.8,.2,1);will-change:transform;}
.stage-inner::before{
  content:"";position:absolute;inset:6% 1% 8% 5%;border-radius:50%;
  background:radial-gradient(circle at 48% 42%,rgba(255,255,255,.82),rgba(244,164,190,.15) 44%,transparent 69%);
  transform:translateZ(-70px);filter:blur(2px);box-shadow:inset 0 0 80px rgba(255,255,255,.72);
}
.pedestal{
  height:92px;bottom:28px;
  background:radial-gradient(closest-side,#fff 0%,#f8d6df 50%,rgba(79,29,44,.12) 69%,transparent 78%);
  box-shadow:0 34px 50px rgba(60,19,32,.2);
}
.prop-photo{filter:drop-shadow(0 5px 7px rgba(255,255,255,.8)) drop-shadow(0 38px 32px rgba(46,12,24,.48));}

.marble-frame,.flip-face,.tilt-inner,.opportunity-card,.stat{
  border-color:rgba(225,79,131,.13);
  box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.85);
}
.stat,.opportunity-card{
  transition:transform .4s var(--ease-glam),box-shadow .4s ease,border-color .4s ease;
}
.stat:hover,.opportunity-card:hover{
  transform:translateY(-7px) perspective(800px) rotateX(2deg);
  border-color:rgba(225,79,131,.32);
  box-shadow:0 28px 60px -34px rgba(52,16,30,.52),inset 0 1px 0 #fff;
}
.btn-primary{background:linear-gradient(135deg,#ed6d99,#c72964 58%,#6e263e);}
.footer{background:linear-gradient(145deg,#281317,#100709 68%,#260f18);}

@media (max-width:780px){
  .site-nav{padding:9px 0;}
  .site-nav .container{min-height:50px;}
  .brand-mark{width:42px;height:42px;flex-basis:42px;border-radius:13px;}
  .brand-copy strong{font-size:16px;}
  .brand-copy small{font-size:7px;letter-spacing:.17em;}
  .nav-cta{
    top:0;padding:100px 24px 44px;
    background:
      radial-gradient(circle at 50% 12%,rgba(225,79,131,.24),transparent 32%),
      linear-gradient(160deg,#2a1519,#0f0709 72%);
  }
  .nav-cta .nav-links{font-size:23px;font-family:var(--font-display);}
  .nav-cta.open .btn-ghost{display:inline-flex;min-width:190px;}
  .hero{padding-top:102px;}
  .hero-copy{padding-right:0;}
}
@media (max-width:480px){
  .brand-copy small{display:none;}
  .hero-title{font-size:clamp(39px,13vw,56px);}
}
@media (prefers-reduced-motion:reduce){
  .stage-inner{transition:none;}
  .stat:hover,.opportunity-card:hover{transform:none;}
}