:root{
  --cosmic-night:#080E18;
  --solar-gold:#C9940A;
  --gold-bright:#E8B820;
  --sacred-cream:#FAF3E0;
  --gold-light:#F5D878;
  --ink-on-cream:#211A0C;
  --serif-display:'Playfair Display', serif;
  --serif-italic:'Cormorant Garamond', serif;
  --caps:'Cinzel', serif;
  --body:'Inter', -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cosmic-night);
  color:var(--sacred-cream);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.hidden{display:none !important;}

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

/* ============ STARFIELD ============ */
.stars{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(250,243,224,.6), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(250,243,224,.4), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(250,243,224,.5), transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(250,243,224,.4), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(250,243,224,.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 40%, rgba(250,243,224,.3), transparent);
  background-repeat:repeat;
  background-size:600px 600px;
}

/* ============ MASTHEAD ============ */
.masthead{position:relative; z-index:1; text-align:center; padding:3rem 1.5rem 0;}
.wordmark{display:flex; align-items:baseline; justify-content:center; gap:.5rem; flex-wrap:wrap;}
.word-adityas{font-family:var(--caps); font-weight:700; letter-spacing:.18em; font-size:clamp(1.6rem,5vw,2.6rem); color:var(--sacred-cream);}
.word-mandala{font-family:var(--serif-italic); font-style:italic; font-size:clamp(1.6rem,5vw,2.6rem); color:var(--solar-gold);}
.slogan{font-family:var(--serif-italic); font-style:italic; color:var(--gold-light); margin:.4rem 0 0; font-size:1.05rem; letter-spacing:.02em;}

/* ============ MANDALA STAGE (image + hotspots) ============ */
.mandala-stage{
  position:relative; z-index:1;
  width:min(90vw, 620px);
  aspect-ratio:1/1;
  margin:2.5rem auto 1rem;
}
.mandala-image{
  width:100%; height:100%; display:block;
  border-radius:50%;
  filter:drop-shadow(0 0 40px rgba(201,148,10,.15));
}
.mandala-hotspots{ position:absolute; inset:0; }
.hotspot{
  position:absolute;
  width:15%; height:15%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  cursor:pointer;
  background:radial-gradient(circle, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  transition:background .2s ease, box-shadow .2s ease;
}
.hotspot:hover, .hotspot:focus-visible{
  background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 72%);
  box-shadow:0 0 0 2px rgba(250,243,224,.5);
  outline:none;
}

.splash-hint{position:relative; z-index:1; text-align:center; color:rgba(250,243,224,.55); font-size:.9rem; margin:.5rem 0 2rem;}

/* ============ PROMO CAROUSEL ============ */
.promo-carousel{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto 2.5rem;
  padding:0 3rem;
}
.promo-track{
  position:relative;
  min-height:190px;
  border:1px solid rgba(201,148,10,.3);
  border-radius:8px;
  background:rgba(250,243,224,.03);
  overflow:hidden;
}
.promo-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:1.4rem;
  padding:1.5rem;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.promo-slide.active{ opacity:1; pointer-events:auto; }

.promo-sachet-wrap{flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:.5rem;}
.promo-sachet{
  width:84px; height:206px;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.promo-sachet-seal{position:absolute; left:0; right:0; height:12px; background:rgba(0,0,0,.35);}
.promo-seal-top{top:0;}
.promo-seal-bottom{bottom:0;}
.promo-sachet-notch{
  position:absolute; top:16px; right:6px; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:7px solid rgba(255,255,255,.18);
}
.promo-sachet-inner{
  position:absolute; top:20px; left:6px; right:6px; bottom:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
.promo-sachet-brandmark{display:flex; flex-direction:column; align-items:center; gap:2px;}
.promo-sachet-ring{width:38px; height:38px; filter:drop-shadow(0 0 5px rgba(0,0,0,.3));}
.promo-sachet-word{font-family:var(--caps); font-size:.4rem; letter-spacing:.16em; color:rgba(255,255,255,.92); margin-top:2px;}
.promo-sachet-subword{font-family:var(--serif-italic); font-style:italic; font-size:.4rem; color:rgba(255,255,255,.7);}
.promo-sachet-divider{width:55%; height:1px; background:rgba(255,255,255,.25);}
.promo-sachet-formula{font-family:var(--caps); font-size:.5rem; font-weight:700; letter-spacing:.05em; color:#fff; text-align:center; line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,.5);}
.promo-sachet-deity{font-family:var(--serif-italic); font-style:italic; font-size:.42rem; letter-spacing:.08em; color:rgba(255,255,255,.7); text-align:center; text-transform:uppercase; margin-top:2px;}
.promo-sachet-tagline{font-family:var(--serif-italic); font-style:italic; font-size:.36rem; color:rgba(255,255,255,.5); text-align:center; line-height:1.3;}
.promo-sachet-caption{font-size:.7rem; color:rgba(250,243,224,.45); text-align:center; margin:0;}

.promo-info{flex:1; min-width:0;}
.promo-deity{font-family:var(--serif-italic); font-style:italic; color:var(--gold-light); font-size:.85rem; margin:0 0 .1rem;}
.promo-name{font-family:var(--serif-display); font-size:1.3rem; color:var(--sacred-cream); margin:0 0 .5rem;}
.promo-benefits{margin:0 0 .7rem; padding-left:1.1rem; font-size:.82rem; color:rgba(250,243,224,.8);}
.promo-benefits li{margin-bottom:.15rem;}
.promo-link{font-size:.82rem; color:var(--solar-gold); text-decoration:none; border-bottom:1px solid rgba(201,148,10,.4);}
.promo-link:hover{border-color:var(--solar-gold);}

.promo-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--gold-light);
  font-size:2rem; line-height:1; cursor:pointer; padding:.5rem;
  opacity:.6; transition:opacity .2s;
}
.promo-arrow:hover{opacity:1;}
.promo-prev{left:0;}
.promo-next{right:0;}

.promo-dots{display:flex; justify-content:center; gap:.4rem; margin-top:.8rem;}
.promo-dot{width:6px; height:6px; border-radius:50%; background:rgba(250,243,224,.25); border:none; cursor:pointer; padding:0;}
.promo-dot.active{background:var(--solar-gold);}

@media (max-width:520px){
  .promo-carousel{padding:0 2.2rem;}
  .promo-slide{flex-direction:column; text-align:center; gap:.8rem;}
  .promo-benefits{padding-left:0; list-style:none;}
}

.splash-nav{position:relative; z-index:1; display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; padding-bottom:3rem; font-size:.9rem;}
.splash-nav a{text-decoration:none; color:var(--gold-light); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s;}
.splash-nav a:hover{border-color:var(--gold-light);}

/* ============ PRODUCT VIEW ============ */
#product-view, #mandala-story-view, #shop-view, #quiz-view{max-width:820px; margin:0 auto; padding:2rem 1.5rem 4rem; position:relative; z-index:1;}
.back-link{display:inline-block; color:var(--gold-light); text-decoration:none; font-size:.9rem; margin-bottom:2rem;}
.back-link:hover{text-decoration:underline;}

.product-clock-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:1.2rem; margin-bottom:1.5rem;
  border-bottom:1px solid rgba(250,243,224,.12);
}
.clock-nav-arrow{
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; color:rgba(250,243,224,.6); font-size:.82rem;
  transition:color .2s;
  max-width:46%;
}
.clock-nav-arrow:hover{color:var(--gold-light);}
.clock-nav-next{justify-content:flex-end; text-align:right;}
.clock-nav-arrow-icon{font-size:1rem; flex-shrink:0;}
.clock-nav-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.product-hero{display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:2.5rem;}
.product-hero-swatch{width:120px; height:120px; flex-shrink:0; filter:drop-shadow(0 4px 16px rgba(0,0,0,.4)); display:flex; align-items:center; justify-content:center;}
.product-hero-text{flex:1; min-width:260px;}
.product-eyebrow{font-family:var(--caps); font-size:.7rem; letter-spacing:.14em; color:var(--gold-light); margin:0 0 .3rem;}
.product-deity{font-family:var(--serif-italic); font-style:italic; font-size:1.4rem; color:var(--gold-light); margin:0 0 .1rem; font-weight:500;}
.product-name{font-family:var(--serif-display); font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .5rem; color:var(--sacred-cream);}
.product-tagline{color:rgba(250,243,224,.75); margin:0 0 1.3rem; font-size:1rem;}

.buy-row{display:flex; gap:.8rem; flex-wrap:wrap;}
.btn{font-family:var(--body); font-weight:600; font-size:.9rem; padding:.75rem 1.4rem; border-radius:4px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, opacity .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--solar-gold); color:var(--cosmic-night);}
.btn-primary:hover{background:var(--gold-bright);}
.btn-secondary{background:transparent; border-color:rgba(250,243,224,.4); color:var(--sacred-cream);}
.btn-secondary:hover{border-color:var(--sacred-cream);}

.product-section{margin-bottom:2.2rem; border-top:1px solid rgba(250,243,224,.12); padding-top:1.6rem;}
.product-section h3{font-family:var(--serif-display); font-size:1.2rem; color:var(--gold-light); margin:0 0 .8rem; font-weight:500;}
.myth-section p{margin:0 0 .9rem;}
.myth-bridge{color:rgba(250,243,224,.78); font-style:italic; font-family:var(--serif-italic); font-size:1.05rem;}

.benefit-list{margin:0; padding-left:1.2rem;}
.benefit-list li{margin-bottom:.4rem;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;}
@media (max-width:640px){ .two-col{grid-template-columns:1fr;} }
.ingredient-list{margin:0; padding-left:1.2rem; font-size:.92rem;}
.ingredient-list li{margin-bottom:.35rem;}
.ingredient-note{font-size:.8rem; color:rgba(250,243,224,.5); margin-top:.8rem; font-style:italic;}
.use-instructions{font-size:.9rem; color:rgba(250,243,224,.75); margin-top:.6rem;}

/* precautions gets its own visual weight — never hidden or shrunk */
.precautions-section{
  background:rgba(250,243,224,.04);
  border:1px solid rgba(201,148,10,.35);
  border-top:1px solid rgba(201,148,10,.35);
  border-radius:6px;
  padding:1.6rem;
}
.precautions-intro{font-size:.95rem; margin-bottom:1rem;}
.precaution-list{margin:1rem 0; padding-left:1.2rem;}
.precaution-list li{margin-bottom:.6rem; font-size:.95rem;}
.precautions-boilerplate{font-size:.82rem; color:rgba(250,243,224,.6); margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid rgba(250,243,224,.1);}

.pairs-row{display:flex; gap:.8rem; flex-wrap:wrap;}
.pair-chip{display:inline-block; padding:.5rem 1rem; border-radius:20px; border:1px solid rgba(250,243,224,.25); text-decoration:none; font-size:.85rem; color:var(--sacred-cream); transition:border-color .2s;}
.pair-chip:hover{border-color:var(--gold-light);}

/* ============ STORY / SHOP ============ */
.story-article h1{font-family:var(--serif-display); font-size:clamp(2rem,5vw,2.8rem); color:var(--sacred-cream); margin-bottom:1.2rem;}
.story-article h2{font-family:var(--serif-display); font-size:1.3rem; color:var(--gold-light); margin-top:2rem; font-weight:500;}
.story-article p{margin-bottom:1rem; color:rgba(250,243,224,.85);}

.shop-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1.2rem; margin-top:1.5rem;}
.shop-card{display:block; text-decoration:none; padding:1.2rem; border-radius:6px; border:1px solid rgba(250,243,224,.15); transition:border-color .2s, transform .2s;}
.shop-card:hover{border-color:var(--gold-light); transform:translateY(-2px);}
.shop-swatch{width:36px; height:36px; margin-bottom:.8rem;}
.shop-card-deity{font-family:var(--serif-italic); font-style:italic; color:var(--gold-light); font-size:.85rem; margin:0 0 .2rem;}
.shop-card-name{font-family:var(--serif-display); font-size:1.15rem; color:var(--sacred-cream); margin:0 0 .4rem;}
.shop-card-tag{font-size:.8rem; color:rgba(250,243,224,.6); margin:0;}

/* ============ FOOTER ============ */
.site-footer{position:relative; z-index:1; text-align:center; padding:2rem 1rem 3rem; font-size:.8rem; color:rgba(250,243,224,.45);}
.site-footer a{color:rgba(250,243,224,.6);}

/* ============ QUIZ ============ */
.quiz-step-label{font-family:var(--serif-italic); font-style:italic; color:var(--gold-light); font-size:1.05rem; margin:1.5rem 0 1.2rem;}
.quiz-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem;}
.quiz-card{
  background:rgba(250,243,224,.04); border:1px solid rgba(250,243,224,.15); border-radius:8px;
  padding:1.3rem; text-align:left; cursor:pointer; color:var(--sacred-cream);
  display:flex; flex-direction:column; gap:.4rem;
  transition:border-color .2s, transform .2s, background .2s;
  font-family:var(--body);
}
.quiz-card:hover, .quiz-card:focus-visible{border-color:var(--gold-light); background:rgba(250,243,224,.08); transform:translateY(-2px); outline:none;}
.quiz-card-label{font-family:var(--serif-display); font-size:1.1rem; color:var(--sacred-cream);}
.quiz-card-desc{font-size:.85rem; color:rgba(250,243,224,.6);}
.quiz-back{background:none; border:none; color:var(--gold-light); font-size:.85rem; cursor:pointer; margin-top:1.5rem; padding:0; text-decoration:underline;}

.quiz-result{text-align:center; padding:2rem 1rem;}
.quiz-result-leaf{display:flex; justify-content:center; margin-bottom:1rem; filter:drop-shadow(0 4px 16px rgba(0,0,0,.4));}
.quiz-result-deity{font-family:var(--serif-italic); font-style:italic; color:var(--gold-light); font-size:1.1rem; margin:0;}
.quiz-result-name{font-family:var(--serif-display); font-size:2rem; color:var(--sacred-cream); margin:.2rem 0 .5rem;}
.quiz-result-tagline{color:rgba(250,243,224,.75); margin-bottom:1.5rem;}

.view{position:relative;}