/* ==========================================================================
   Shappe — Melatonina em Gotas
   Paleta "romântica" de noite: roxo profundo, blush e dourado de luar,
   sobre a base creme da marca. Tipografia mantida: Fraunces + Poppins.
   ========================================================================== */
:root{
  --night-deep:   #1C1033;
  --night:        #2B1856;
  --night-soft:   #3E2570;
  --night-light:  #6F52AC;
  --lavender:     #F3ECFB;
  --lavender-deep:#E8DAF7;
  --cream:        #FBF3E7;
  --cream-soft:   #F5E9D8;
  --blush:        #E6A6C7;
  --blush-deep:   #C24A72;
  --blush-soft:   #FBE7F0;
  --gold:         #EFBE63;
  --gold-soft:    #FBEBC7;
  --ink:          #241436;
  --ink-soft:     #5C5170;
  --white:        #FFFFFF;
  --shadow:       0 22px 48px -26px rgba(28,16,51,.45);
  --shadow-soft:  0 14px 34px -18px rgba(28,16,51,.3);
  --radius-lg:    28px;
  --radius-md:    18px;
  --radius-sm:    10px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins', sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:'Fraunces', serif; color:var(--night); margin:0; letter-spacing:-0.01em; }
p{ margin:0; line-height:1.7; color:var(--ink-soft); }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

.script{ font-family:'Fraunces', serif; font-style:italic; font-weight:500; color:var(--blush-deep); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blush-deep); margin-bottom:12px;
}
.eyebrow-light{ color:var(--gold); }
.eyebrow::before{ content:"✦"; font-size:.85em; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap; cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--blush-deep); color:var(--white); box-shadow:0 16px 30px -14px var(--blush-deep); }
.btn-primary:hover{ background:#A83A5F; }
.btn-ghost{ border-color:var(--night-soft); color:var(--night); background:transparent; }
.btn-ghost:hover{ background:var(--lavender); }
.btn-ghost-light{ border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(4px); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.16); }
.btn-gold{ background:var(--gold); color:var(--night-deep); box-shadow:0 16px 30px -14px var(--gold); }
.btn-gold:hover{ background:#E3AC48; }
.btn-block{ width:100%; }

.section{ padding:96px 0; }
.section-alt{ background:var(--lavender); }
.section-head{ margin-bottom:48px; }
.section-head.center{ text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }
.section-head h2{ font-size:clamp(1.7rem, 2.6vw, 2.4rem); margin-top:2px; line-height:1.15; }
.section-sub{ max-width:560px; margin:14px auto 0; }

/* ==========================================================================
   Promo bar (marquee)
   ========================================================================== */
.promo-bar{ background:var(--night-deep); color:var(--gold-soft); overflow:hidden; }
.promo-track{
  display:flex; gap:56px; white-space:nowrap; padding:10px 0;
  font-size:.8rem; font-weight:500; letter-spacing:.02em;
  animation:scrollTrack 28s linear infinite;
  width:max-content;
}
@keyframes scrollTrack{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(251,243,231,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid rgba(43,24,86,.08);
}
.header-inner{ display:flex; align-items:center; gap:24px; padding:14px 24px; }
.logo img{ height:32px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:28px; margin:0 auto; font-size:.92rem; font-weight:500; }
.main-nav > a:hover{ color:var(--blush-deep); }
.header-actions{ display:flex; align-items:center; gap:12px; }
.menu-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px; position:relative; z-index:46; }
.menu-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }
.header-cta{ padding:11px 22px; font-size:.85rem; }

/* ==========================================================================
   Vídeo — ritual da noite (banner em vídeo, sem áudio)
   ========================================================================== */
.video-section{ background:var(--night-deep); }
.video-hero{
  position:relative; width:100%; height:clamp(460px, 62vw, 640px); max-height:640px;
  overflow:hidden; background:var(--night-deep); isolation:isolate;
}
.video-hero-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.video-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 90% 70% at 26% 45%, rgba(28,16,51,.35) 0%, rgba(20,10,40,.8) 100%),
    linear-gradient(0deg, rgba(15,7,32,.92) 0%, rgba(15,7,32,.4) 55%, rgba(15,7,32,.18) 100%);
}
.video-hero-content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:center; color:#fff; padding-top:36px; padding-bottom:56px;
}
.video-hero-content h2{
  color:#fff; font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.12; margin:10px 0 18px;
  text-shadow:0 10px 30px rgba(0,0,0,.4); max-width:620px;
}
.video-hero-content > p{ color:#E4DAF4; max-width:460px; margin-bottom:28px; font-size:1.02rem; }
.video-hero-cta{ margin-bottom:30px; }
.video-hero-badges{ display:flex; gap:12px; flex-wrap:wrap; }
.video-hero-badges span{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(6px);
  border-radius:999px; padding:9px 16px; font-size:.8rem; font-weight:600; color:#fff;
}
.scroll-cue{
  position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* ==========================================================================
   Hero — céu noturno romântico
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; padding:70px 0 0;
  background:radial-gradient(ellipse 120% 90% at 18% 0%, var(--night-soft) 0%, var(--night) 45%, var(--night-deep) 100%);
  color:#fff; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%, #fff 0, transparent 60%),
    radial-gradient(2px 2px at 28% 68%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 15%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 40%, #fff 0, transparent 60%),
    radial-gradient(2px 2px at 78% 22%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 65%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 78%, #fff 0, transparent 60%),
    radial-gradient(2px 2px at 55% 82%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 45%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 40%, #fff 0, transparent 60%);
  opacity:.7; animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.35;} to{ opacity:.85;} }
.hero-moon{
  position:absolute; top:-40px; right:8%; width:220px; height:220px; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 38% 35%, var(--gold-soft) 0%, var(--gold) 55%, transparent 78%);
  box-shadow:0 0 120px 40px rgba(239,190,99,.25); opacity:.85;
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-bottom:56px; }
.hero-text h1{ font-size:clamp(2.3rem, 4.2vw, 3.5rem); line-height:1.1; margin:8px 0 20px; color:#fff; }
.hero-text h1 em{ font-style:italic; color:var(--gold); }
.hero-text > p{ max-width:480px; font-size:1.06rem; margin-bottom:30px; color:#E4DAF4; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
.hero-badges{ display:flex; gap:30px; flex-wrap:wrap; }
.hero-badges strong{ display:block; font-family:'Fraunces',serif; font-size:1.4rem; color:var(--gold); }
.hero-badges span{ font-size:.76rem; color:#CBBEE6; }

.hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:440px; }
.hero-blob{
  position:absolute; inset:6% 6%; z-index:0;
  background:radial-gradient(circle at 40% 32%, rgba(230,166,199,.35), transparent 70%);
  border-radius:50% 45% 55% 50% / 55% 50% 55% 45%; filter:blur(2px);
}
.hero-main-img{ position:relative; z-index:2; max-height:420px; width:auto; margin:0 auto; filter:drop-shadow(0 34px 34px rgba(0,0,0,.35)); animation:float 6s ease-in-out infinite; }
.hero-note{
  position:absolute; z-index:3; background:rgba(255,255,255,.94); color:var(--night); border-radius:16px;
  padding:12px 16px; box-shadow:var(--shadow); font-size:.8rem; font-weight:600; max-width:170px;
}
.hero-note-1{ top:8%; left:0%; animation:float 5s ease-in-out infinite; }
.hero-note-2{ bottom:6%; right:0%; animation:float 6.5s ease-in-out infinite reverse; }
.hero-note span{ display:block; font-weight:400; color:var(--ink-soft); font-size:.72rem; margin-top:2px; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.hero-wave{ display:block; width:100%; height:auto; position:relative; z-index:1; margin-top:-2px; }

.img-disclaimer{
  position:relative; z-index:2; display:block; text-align:center; margin-top:12px;
  font-size:.72rem; color:var(--ink-soft); opacity:.75;
}
.img-disclaimer-light{ color:#CBBEE6; opacity:.85; }

/* ==========================================================================
   Quickfacts strip
   ========================================================================== */
.quickfacts{ background:var(--white); border-bottom:1px solid var(--cream-soft); }
.quickfacts-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; padding:22px 0; }
.quickfacts-row span{ font-size:.85rem; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }

/* ==========================================================================
   Benefícios
   ========================================================================== */
.benefits-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:26px; }
.benefit-card{
  background:var(--white); border-radius:var(--radius-md); padding:30px 26px; box-shadow:var(--shadow-soft);
  border-top:4px solid var(--blush); transition:transform .2s ease, box-shadow .2s ease;
}
.benefit-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.benefit-card svg{ width:32px; height:32px; color:var(--blush-deep); margin-bottom:16px; }
.benefit-card h3{ font-size:1.08rem; margin-bottom:8px; }
.benefit-card p{ font-size:.9rem; }

/* ==========================================================================
   Ritual noturno (como usar)
   ========================================================================== */
.ritual-steps{ counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px; }
.ritual-step{ position:relative; background:var(--white); border-radius:var(--radius-md); padding:30px 24px 24px; box-shadow:var(--shadow-soft); }
.ritual-step::before{
  counter-increment:step; content:counter(step); position:absolute; top:-18px; left:24px; width:38px; height:38px;
  border-radius:50%; background:var(--night); color:var(--gold); font-family:'Fraunces',serif; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft);
}
.ritual-step h4{ font-family:'Fraunces',serif; font-size:1.05rem; margin:10px 0 8px; color:var(--night); }
.ritual-step p{ font-size:.88rem; }

/* ==========================================================================
   Ficha técnica
   ========================================================================== */
.info-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.info-table{ background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); overflow:hidden; }
.info-table div{ display:grid; grid-template-columns:1fr 1.3fr; padding:15px 22px; font-size:.92rem; }
.info-table div:not(:last-child){ border-bottom:1px solid var(--cream-soft); }
.info-table dt{ color:var(--ink-soft); font-weight:600; margin:0; }
.info-table dd{ color:var(--ink); margin:0; }
.info-note{ font-size:.82rem; color:var(--ink-soft); margin-top:16px; max-width:60ch; }
.info-visual{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.info-visual img{ max-height:360px; filter:drop-shadow(0 26px 30px rgba(28,16,51,.22)); }
.info-visual .badge-heart{
  position:absolute; top:6%; right:6%; background:var(--blush-deep); color:#fff; font-size:.78rem; font-weight:700;
  padding:9px 16px; border-radius:999px; box-shadow:var(--shadow-soft);
}

/* ==========================================================================
   Nossa história (romântica)
   ========================================================================== */
.story{
  position:relative; padding:100px 0; color:#fff; overflow:hidden;
  background:radial-gradient(ellipse 110% 90% at 82% 100%, var(--night-soft) 0%, var(--night) 45%, var(--night-deep) 100%);
}
.story::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 30%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 75%, #fff 0, transparent 60%),
    radial-gradient(2px 2px at 70% 20%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 60%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 90%, #fff 0, transparent 60%);
}
.story-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.story-text h2{ color:#fff; font-size:clamp(1.7rem,2.8vw,2.3rem); margin-bottom:20px; line-height:1.22; }
.story-text p{ color:#D9CDEF; margin-bottom:16px; font-size:1rem; }
.story-stats{ display:flex; gap:34px; margin-top:28px; flex-wrap:wrap; }
.story-stats strong{ display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--gold); }
.story-stats span{ font-size:.78rem; color:#C2B4DE; }
.story-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.story-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
  border-radius:var(--radius-lg); padding:34px; text-align:center; max-width:340px;
}
.story-card img{ height:44px; margin:0 auto 18px; filter:brightness(0) invert(1); }
.story-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; color:#fff; line-height:1.5; }
.story-quote-by{ display:block; margin-top:14px; font-size:.8rem; color:var(--gold); font-style:normal; }

/* ==========================================================================
   Comparativo
   ========================================================================== */
.compare-table{ background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); overflow:hidden; }
.compare-row{ display:grid; grid-template-columns:1.6fr 1fr 1fr; align-items:center; }
.compare-row:not(:last-child){ border-bottom:1px solid var(--cream-soft); }
.compare-header{ background:var(--lavender); font-weight:700; padding:18px 0; }
.compare-col{ text-align:center; padding:16px 10px; font-size:.88rem; }
.compare-col.shappe{ background:rgba(194,74,114,.06); font-weight:700; color:var(--blush-deep); }
.compare-label{ padding:16px 24px; font-size:.9rem; font-weight:500; }
.check{ color:#3E8A5B; font-weight:700; font-size:1.1rem; }
.cross{ color:#C4695B; font-weight:700; font-size:1.1rem; }

/* ==========================================================================
   Depoimentos
   ========================================================================== */
.testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px; }
.testimonial-card{ background:var(--white); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-soft); }
.stars{ color:var(--gold); margin-bottom:14px; letter-spacing:2px; }
.testimonial-card p{ font-style:italic; margin-bottom:18px; color:var(--ink); }
.testimonial-name{ font-weight:600; color:var(--blush-deep); font-size:.9rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:var(--white); border-radius:var(--radius-sm); box-shadow:var(--shadow-soft); overflow:hidden; }
.faq-q{
  width:100%; background:none; border:none; text-align:left; padding:20px 24px; display:flex;
  align-items:center; justify-content:space-between; gap:14px; font-weight:600; font-size:.98rem; color:var(--ink);
}
.faq-q .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--blush-deep); border-radius:2px; transition:transform .2s ease;
}
.faq-q .plus::before{ top:50%; left:0; width:100%; height:2px; margin-top:-1px; }
.faq-q .plus::after{ left:50%; top:0; width:2px; height:100%; margin-left:-1px; }
.faq-item.open .plus::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 24px 20px; font-size:.9rem; }

/* ==========================================================================
   Comprar (order box)
   ========================================================================== */
.buy-section{
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse 120% 100% at 50% 0%, var(--night-soft) 0%, var(--night) 55%, var(--night-deep) 100%);
  color:#fff; padding:96px 0;
}
.buy-section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 80%, #fff 0, transparent 60%),
    radial-gradient(2px 2px at 60% 30%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 70%, #fff 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 15%, #fff 0, transparent 60%);
}
.buy-card{
  position:relative; z-index:1; background:var(--white); color:var(--ink); border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5); max-width:900px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; overflow:hidden;
}
.buy-visual{
  background:linear-gradient(160deg, var(--lavender) 0%, var(--cream) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px; position:relative;
}
.buy-visual img{ max-height:340px; width:auto; filter:drop-shadow(0 24px 26px rgba(28,16,51,.22)); }
.buy-visual .badge-float{
  position:absolute; top:20px; left:20px; background:var(--blush-deep); color:#fff; font-weight:700; font-size:.76rem;
  padding:7px 14px; border-radius:999px; box-shadow:var(--shadow-soft);
}
.buy-info{ padding:38px 40px; }
.buy-info .pdp-flavor{ color:var(--ink-soft); font-size:.95rem; margin-bottom:8px; }
.buy-info h3{ font-size:1.5rem; margin-bottom:4px; }
.buy-stars{ color:var(--gold); font-size:.95rem; margin-bottom:16px; }
.buy-stars span{ color:var(--ink-soft); font-size:.82rem; margin-left:6px; }
.buy-price{ display:flex; align-items:baseline; gap:12px; margin-bottom:22px; }
.buy-price .old{ text-decoration:line-through; color:var(--ink-soft); font-size:.95rem; }
.buy-price .now{ font-family:'Fraunces',serif; font-size:2.1rem; font-weight:600; color:var(--night); }
.buy-price .parcel{ font-size:.78rem; color:var(--ink-soft); display:block; margin-top:2px; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.qty-control{ display:flex; align-items:center; gap:0; border:1.5px solid var(--cream-soft); border-radius:999px; overflow:hidden; }
.qty-control button{ width:42px; height:42px; border:none; background:var(--lavender); font-size:1.1rem; color:var(--night); }
.qty-control button:hover{ background:var(--lavender-deep); }
.qty-control span{ width:40px; text-align:center; font-weight:600; }
.buy-total{ font-size:.85rem; color:var(--ink-soft); }
.buy-total strong{ color:var(--night); font-family:'Fraunces',serif; font-size:1.05rem; }
.buy-trust{ display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; font-size:.8rem; color:var(--ink-soft); }
.buy-trust span{ display:flex; align-items:center; gap:6px; }
.buy-note{ font-size:.76rem; color:var(--ink-soft); margin-top:16px; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter{ background:var(--night-deep); color:var(--cream); padding:84px 0; text-align:center; }
.newsletter-inner{ max-width:560px; margin:0 auto; }
.newsletter h2{ color:#fff; font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:14px; }
.newsletter p{ color:#C7BBE0; margin-bottom:30px; }
.newsletter-form{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.newsletter-form input{
  flex:1; min-width:220px; padding:14px 20px; border-radius:999px; border:none; font-size:.95rem; font-family:inherit;
}
.form-note{ display:block; margin-top:14px; font-size:.82rem; color:var(--gold); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--night-deep); color:#C6B9DD; padding:64px 0 30px; border-top:1px solid rgba(255,255,255,.06); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-logo{ height:30px; filter:brightness(0) invert(1); margin-bottom:16px; }
.footer-brand p{ color:#A798C4; font-size:.88rem; max-width:280px; margin-bottom:20px; }
.social-icons{ display:flex; gap:10px; }
.social-icons a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.social-icons a:hover{ background:rgba(255,255,255,.1); }
.footer-col h4{ font-family:'Poppins',sans-serif; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:16px; }
.footer-col a{ display:block; font-size:.88rem; color:#A798C4; margin-bottom:11px; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem; color:#83739F;
}
.footer-disclaimer{ font-size:.72rem; color:#6B5C89; margin-top:14px; max-width:70ch; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .main-nav{ position:fixed; top:0; left:0; height:100vh; width:280px; background:var(--white);
    flex-direction:column; align-items:flex-start; padding:100px 30px; gap:22px;
    transform:translateX(-100%); transition:.25s ease; box-shadow:var(--shadow); z-index:45; }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ color:var(--ink); }
  .menu-toggle{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; min-height:320px; }
  .info-wrap{ grid-template-columns:1fr; }
  .info-visual{ order:-1; }
  .story-inner{ grid-template-columns:1fr; }
  .story-visual{ order:-1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .compare-row{ grid-template-columns:1.1fr 1fr 1fr; }
  .compare-label{ padding:14px 12px; font-size:.8rem; }
  .buy-card{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .section{ padding:64px 0; }
  .footer-grid{ grid-template-columns:1fr; }
  .compare-row{ grid-template-columns:1fr .8fr .8fr; }
  .compare-label{ font-size:.72rem; padding:12px 8px; }
  .newsletter-form{ flex-direction:column; }
  .hero-note{ display:none; }
  .buy-info{ padding:30px 24px; }
  .video-hero{ height:100vh; max-height:720px; }
  .video-hero-content{ padding-top:60px; }
}