*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#2d1730;background:#fffaf5;font-family:"DM Sans",sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}

/* ---------- ambient background (pure CSS drift, no JS) ---------- */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.blob-a{width:520px;height:520px;background:radial-gradient(circle at 35% 30%,#f8d6ce,#f8d6ce00 70%);top:-120px;left:-100px;animation:drift-a 22s ease-in-out infinite}
.blob-b{width:460px;height:460px;background:radial-gradient(circle at 40% 40%,#f4a2b8,#f4a2b800 70%);top:900px;right:-140px;animation:drift-b 26s ease-in-out infinite}
.blob-c{width:380px;height:380px;background:radial-gradient(circle at 50% 50%,#e6c7f2,#e6c7f200 70%);top:1900px;left:-80px;animation:drift-a 30s ease-in-out infinite}
@keyframes drift-a{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,40px)}}
@keyframes drift-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,-30px)}}
main,header,footer,.announcement,.ticker{position:relative;z-index:1}

/* ---------- header ---------- */
.announcement{background:#35143c;color:#fff6f0;text-align:center;padding:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.announcement span{color:#f4a2b8;margin:0 12px}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;border-bottom:1px solid #eaded9;background:#fffaf5ee;backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:23px;letter-spacing:-1px}
.brand>span:last-child>span{color:#bd315c}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#d93e68;color:#fff;font-size:18px;box-shadow:0 6px 16px #d93e6855;transition:transform .4s}
.brand:hover .brand-mark{transform:rotate(90deg)}
.nav{display:flex;gap:30px;font-size:13px;color:#725b70}
.nav a{position:relative;padding-bottom:3px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#c72f5a;transition:width .3s}
.nav a:hover{color:#c72f5a}
.nav a:hover::after{width:100%}
.header-actions{display:flex;gap:18px;align-items:center}
.icon-btn{border:0;background:transparent;color:#35143c;font-size:13px;font-weight:600}
.icon-btn:hover{color:#c72f5a}
.menu-btn{display:none;font-size:24px;cursor:pointer}
.menu-toggle-input{position:absolute;opacity:0;pointer-events:none}
.menu-backdrop{display:none}

/* ---------- generic ---------- */
.section{padding:100px 8vw}
.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:700;color:#bd315c;margin:0 0 22px}
.hero h1,h2{font-family:"Playfair Display",serif;font-weight:600;letter-spacing:-2px;line-height:1.02;margin:0}
.hero h1{font-size:clamp(58px,7vw,104px)}
em{color:#c93661;font-style:italic}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:17px 22px;border-radius:2px;font-size:12px;font-weight:700;letter-spacing:.03em;border:1px solid transparent;transition:transform .3s,box-shadow .3s,background .3s}
.btn-primary{background:#d93e68;color:white;box-shadow:0 10px 25px #d93e6828}
.btn-primary:hover{background:#b92b53;transform:translateY(-3px);box-shadow:0 16px 34px #d93e6845}
.btn-outline{border-color:#d9bfc8;color:#a52b51}
.btn-outline:hover{border-color:#c72f5a;transform:translateY(-3px)}
.text-link{font-size:12px;font-weight:700;color:#7c526f}
.text-link span{margin-left:10px;display:inline-block;transition:transform .3s}
.text-link:hover span{transform:translateX(5px)}

/* ---------- entrance animation on load (pure CSS, no scroll dependency) ---------- */
@keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:rise-in .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-art{animation:rise-in 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
  .section-heading{animation:rise-in .9s cubic-bezier(.2,.7,.2,1) both}
}

/* ---------- hero ---------- */
.hero{min-height:690px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;overflow:hidden}
.hero-text{max-width:450px;color:#765f73;line-height:1.8;margin:30px 0}
.hero-buttons{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.hero-meta{display:flex;gap:40px;margin-top:55px}
.hero-meta div{display:flex;flex-direction:column;gap:5px}
.hero-meta strong{font-family:"Playfair Display";font-size:25px}
.hero-meta span{font-size:10px;color:#8e7789}

.hero-art{height:560px;position:relative;perspective:1200px}
.hero-art-inner{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;transition:transform .4s ease}
.hero-art:hover .hero-art-inner{transform:rotateY(8deg) rotateX(-6deg)}
.hero-photo-ring{position:absolute;width:430px;height:430px;border-radius:50%;background:#f8d6ce;transform:translateZ(-60px)}
.hero-photo{position:absolute;width:360px;height:360px;border-radius:50%;object-fit:cover;transform:translateZ(-20px);box-shadow:0 30px 60px #6c173b30;filter:saturate(1.08)}
.bottle{position:relative;width:205px;z-index:3;filter:drop-shadow(15px 25px 18px #6c173b25);transform:translateZ(70px)}
.floaty{animation:float 5.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateZ(70px) translateY(0)}50%{transform:translateZ(70px) translateY(-16px)}}
.bottle-cap{height:28px;width:80px;background:#6e284d;margin:auto;border-radius:6px 6px 2px 2px}
.bottle-neck{height:48px;width:92px;background:#e7a0a5;margin:auto;border-radius:5px 5px 0 0}
.bottle-body{height:335px;border-radius:28px 28px 38px 38px;background:linear-gradient(90deg,#8e1748,#d53b69 45%,#9d174d);padding:22px 13px}
.bottle-label{height:220px;background:#fff1e4;border-radius:6px;color:#4a183b;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 5px;gap:10px}
.mini-brand{font-size:10px;font-weight:700;letter-spacing:-.5px}
.label-line{width:35px;border-top:1px solid #dca1a7}
.bottle-label strong{font-family:"Playfair Display";font-size:31px;line-height:.9}
.bottle-label small{font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.label-seal{border:1px solid #c78a99;border-radius:50%;font-size:8px;padding:8px;margin-top:8px}
.bottle-shadow{position:absolute;bottom:60px;width:270px;height:35px;background:#7e31543b;filter:blur(12px);border-radius:50%}
.floating-note{position:absolute;background:#fffaf5;padding:13px 17px;border:1px solid #ead5d8;font-size:10px;line-height:1.5;box-shadow:0 14px 30px #6e284d1f;z-index:5;transform:translateZ(90px)}
.note-one{top:35px;right:0}
.note-two{bottom:60px;left:-10px}

/* ---------- ticker ---------- */
.ticker{background:#e94c73;color:#fff8f2;overflow:hidden;white-space:nowrap;padding:18px 0;font-size:12px;font-weight:700;letter-spacing:.2em}
.ticker div{display:inline-block;padding-left:100%;word-spacing:22px;animation:scroll-left 22s linear infinite}
.ticker span{color:#ffd2dc}
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ---------- benefits ---------- */
.benefits{background:#fff}
.section-heading{max-width:610px}
.section-heading h2{font-size:clamp(42px,5vw,65px)}
.section-heading>p:last-child{color:#806b7b;line-height:1.8;max-width:500px;margin-top:25px}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px}
.benefit-card{border:1px solid #eadfe1;background:#fffaf8;overflow:hidden;transition:transform .35s ease,box-shadow .35s}
.benefit-card:hover{transform:perspective(800px) rotateX(2deg) translateY(-6px);box-shadow:0 24px 45px #6c173b1f}
.benefit-photo{height:180px;overflow:hidden}
.benefit-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.benefit-card:hover .benefit-photo img{transform:scale(1.08)}
.benefit-body{padding:32px}
.benefit-card h3{font-family:"Playfair Display";font-size:25px;margin:0 0 15px}
.benefit-card p{font-size:13px;line-height:1.8;color:#806b7b}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.story-image{height:480px;background:#f5d6d5;position:relative;overflow:hidden}
.story-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.story-card{position:absolute;bottom:25px;left:25px;background:#fffaf5ee;backdrop-filter:blur(6px);padding:18px 22px;display:flex;flex-direction:column;gap:5px;box-shadow:0 14px 30px #6c173b25}
.story-card strong{font-family:"Playfair Display";font-size:23px}
.story-card span{font-size:10px;color:#8c7184}
.story-copy h2{font-size:clamp(45px,5vw,70px)}
.story-copy>p:not(.eyebrow){color:#806b7b;line-height:1.9;margin:28px 0}

/* ---------- shop ---------- */
.shop{background:#fff}
.centered{text-align:center;margin:auto}
.centered>p:last-child{margin-left:auto;margin-right:auto}
.product-card{max-width:950px;margin:60px auto 0;display:grid;grid-template-columns:1fr 1fr;border:1px solid #eadfe1;background:#fffaf8;box-shadow:0 30px 60px #6c173b12;transition:box-shadow .4s}
.product-card:hover{box-shadow:0 36px 70px #6c173b22}
.product-visual{position:relative;min-height:470px;overflow:hidden}
.product-photo{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s ease}
.product-card:hover .product-photo{transform:scale(1.05)}
.product-sticker{position:absolute;top:25px;right:25px;border:1px solid #d28a9d;background:#fffaf5ee;backdrop-filter:blur(4px);border-radius:50%;width:75px;height:75px;display:grid;place-items:center;text-align:center;font-size:11px;color:#a52b51;transform:rotate(12deg);animation:spin-gentle 8s linear infinite}
@keyframes spin-gentle{0%,92%{transform:rotate(12deg)}96%{transform:rotate(18deg)}100%{transform:rotate(12deg)}}
.product-info{padding:55px 45px}
.product-info h3{font-family:"Playfair Display";font-size:39px;margin:0}
.product-description{font-size:13px;line-height:1.8;color:#806b7b}
.rating{color:#d93e68;font-size:12px;margin:25px 0}
.rating span{color:#806b7b;margin-left:10px}
.purchase-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eadfe1;padding-top:22px;margin-bottom:26px}
.purchase-row strong{font-family:"Playfair Display";font-size:30px}
.purchase-row span{font-size:11px;color:#806b7b}
.add-btn{width:100%;margin-bottom:14px}
.shipping-note{font-size:11px;color:#8c7184}

/* ---------- reviews ---------- */
.reviews{background:#fffaf5}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px}
.review-grid blockquote{margin:0;padding:30px;background:#fff;border:1px solid #eadfe1;transition:transform .35s ease,box-shadow .35s}
.review-grid blockquote:hover{transform:translateY(-6px);box-shadow:0 24px 45px #6c173b1f}
.review-grid blockquote div{color:#d93e68;letter-spacing:3px}
.review-grid blockquote p{font-family:"Playfair Display";font-size:23px;line-height:1.35}
.review-grid cite{font-size:11px;color:#8c7184;font-style:normal}

/* ---------- footer ---------- */
.footer{padding:55px 8vw;background:#35143c;color:#fff2f0;display:flex;justify-content:space-between;gap:30px;align-items:flex-end;flex-wrap:wrap}
.footer .brand{color:#fff}
.footer .brand>span:last-child>span{color:#f3a0b8}
.footer p{font-size:12px;color:#d6b9c9}
.footer-links{display:flex;gap:25px;font-size:12px}

/* ---------- responsive / mobile menu (pure CSS checkbox hack) ---------- */
@media(max-width:800px){
  .site-header{height:70px;padding:0 5vw}
  .nav{position:fixed;top:0;right:0;height:100%;width:min(280px,80vw);background:#fffaf5;padding:100px 30px 30px;flex-direction:column;gap:22px;border-left:1px solid #eadfe1;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:30}
  .menu-toggle-input:checked ~ .site-header .nav{transform:translateX(0)}
  .menu-btn{display:block}
  .menu-toggle-input:checked ~ .menu-backdrop{display:block;position:fixed;inset:0;background:#35143c55;z-index:25}

  /* FIX: backdrop-filter on .site-header creates a new containing block for
     position:fixed children, so .nav (fixed, height:100%) was sizing itself
     against the 70px header instead of the full viewport. Drop the blur
     (and use a solid bg instead) while the menu is open so .nav goes back
     to being fixed relative to the viewport and covers the full screen. */
  .menu-toggle-input:checked ~ .site-header{backdrop-filter:none;background:#fffaf5}

  .hero{grid-template-columns:1fr;padding-top:65px;gap:20px}
  .hero-art{height:480px;order:-1}
  .hero-photo-ring{width:310px;height:310px}
  .hero-photo{width:260px;height:260px}
  .hero h1{font-size:65px}
  .hero-meta{gap:22px}
  .hero-meta strong{font-size:22px}
  .section{padding:70px 6vw}
  .benefit-grid,.review-grid{grid-template-columns:1fr}
  .story{grid-template-columns:1fr;gap:45px}
  .story-image{height:340px}
  .product-card{grid-template-columns:1fr}
  .product-visual{min-height:320px}
  .product-info{padding:35px 25px}
  .footer{align-items:flex-start;flex-direction:column}
  .footer-links{flex-wrap:wrap}
  .floating-note{font-size:9px}
  .note-one{right:0;top:10px}
  .note-two{left:-6px;bottom:30px}
  .blob{filter:blur(40px)}
}
@media(max-width:420px){
  .brand{font-size:20px}
  .hero-art{height:410px}
  .bottle{transform:translateZ(0) scale(.8)}
  .floaty{animation:none}
  .hero h1{font-size:57px}
  .hero-meta{gap:15px}
  .hero-meta span{font-size:9px}
  .hero-buttons{gap:18px}
  .product-info h3{font-size:32px}
  .header-actions{gap:12px}
  .icon-btn{font-size:12px}
}
/* ================== AUTH PAGES (login.html / signup.html) ================== */
.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:70px 6vw}
body.auth-body{min-height:100vh;display:flex;flex-direction:column}
.back-link{font-size:12px;font-weight:700;color:#7c526f;text-decoration:none}
.back-link:hover{color:#c72f5a}

.auth-card{width:100%;max-width:980px;display:grid;grid-template-columns:1fr 1.1fr;background:#fffaf8;border:1px solid #eadfe1;box-shadow:0 30px 70px #6c173b1a;overflow:hidden}

.auth-side{background:linear-gradient(160deg,#35143c,#5c1f4a 60%,#8e1748);color:#fff2f0;padding:60px 46px;display:flex;flex-direction:column;justify-content:center}
.auth-side .eyebrow{color:#f4a2b8;font-size:10px;letter-spacing:.2em;font-weight:700;margin:0 0 20px}
.auth-side h1{font-family:"Playfair Display",serif;font-weight:600;letter-spacing:-1.5px;line-height:1.08;margin:0;font-size:clamp(30px,3.4vw,42px)}
.auth-side em{color:#f7b8c9;font-style:italic}
.auth-side p{color:#e3c7d5;line-height:1.8;margin:22px 0 26px;font-size:14px}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:13px}
.side-list li{padding-left:24px;position:relative;color:#f4e3ec}
.side-list li::before{content:"✳";position:absolute;left:0;top:0;color:#f4a2b8;font-size:12px}

.auth-main{padding:56px 50px}
.auth-main .eyebrow{font-size:10px;letter-spacing:.2em;font-weight:700;color:#bd315c;margin:0 0 14px}
.auth-main h2{font-family:"Playfair Display",serif;font-weight:600;letter-spacing:-1px;margin:0 0 30px;font-size:clamp(24px,2.6vw,30px)}

.auth-form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#5f4a5c;font-weight:600}
.field input{font:inherit;padding:13px 15px;border:1px solid #e3ccd4;background:#fff;color:#2d1730;font-size:14px;border-radius:2px;transition:border-color .25s,box-shadow .25s}
.field input:focus{outline:none;border-color:#d93e68;box-shadow:0 0 0 3px #d93e6822}
.field input::placeholder{color:#b79dae}

.field-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.checkbox{display:flex;align-items:center;gap:9px;font-size:12px;color:#5f4a5c;cursor:pointer}
.checkbox input{width:15px;height:15px;accent-color:#d93e68}
.link-muted{font-size:12px;color:#a5899e;text-decoration:none}
.link-muted:hover{color:#c72f5a}
.link-strong{color:#c72f5a;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.auth-form .btn{width:100%;margin-top:4px}
.switch-line{margin:26px 0 0;font-size:12px;color:#8c7184;text-align:center}

@media(max-width:820px){
  .auth-card{grid-template-columns:1fr}
  .auth-side{padding:44px 34px;order:2}
  .auth-main{padding:44px 30px;order:1}
}
@media(max-width:480px){
  .auth-wrap{padding:36px 5vw}
  .auth-side{padding:34px 24px}
  .auth-main{padding:34px 22px}
}