/* ═══════════════════════════════════════════════════
   WHITE SECRET BEAUTY CARE — Design System v3
   Teal + Gold | Real Product Photos | English Only
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Jost:wght@300;400;500;600;700&family=Noto+Sans+Tamil:wght@400;600&display=swap');

:root {
  --teal:        #1A7A6E;
  --teal-dark:   #0d5c4a;
  --teal-deep:   #0a4035;
  --teal-light:  #2a9d8f;
  --gold:        #C9A84C;
  --gold-light:  #E8C870;
  --gold-pale:   #F5E6B8;
  --cream:       #FAFAF5;
  --ivory:       #F4F0E6;
  --white:       #ffffff;
  --dark:        #0d1f1c;
  --text:        #1a2e2a;
  --text-muted:  #4a6b63;

  --shadow-sm:  0 2px 8px rgba(13,92,74,0.08);
  --shadow-md:  0 6px 24px rgba(13,92,74,0.12);
  --shadow-lg:  0 16px 48px rgba(13,92,74,0.18);
  --shadow-xl:  0 24px 64px rgba(13,92,74,0.22);
  --shadow-gold: 0 8px 32px rgba(201,168,76,0.35);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --nav-h: 70px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  background:var(--cream);
  color:var(--text);
  font-family:'Jost',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* ── GOLD STRIPE ── */
.temple-stripe{
  height:5px;
  background:linear-gradient(90deg,
    var(--teal-deep) 0%,
    var(--teal) 20%,
    var(--gold) 40%,
    var(--gold-light) 50%,
    var(--gold) 60%,
    var(--teal) 80%,
    var(--teal-deep) 100%);
}

/* ── NAVIGATION ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  background:rgba(10,64,53,0.96);
  backdrop-filter:blur(16px);
  display:flex;align-items:center;
  padding:0 clamp(16px,4vw,48px);
  gap:32px;
  border-bottom:1px solid rgba(201,168,76,0.2);
  transition:var(--transition);
}
.nav.scrolled{
  background:rgba(10,64,53,0.99);
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-logo-img{
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--gold);
  object-fit:cover;
  flex-shrink:0;
}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.1;}
.nav-logo-en{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--white);letter-spacing:1px;
}
.nav-logo-sub{
  font-size:0.6rem;color:var(--gold);
  letter-spacing:2px;text-transform:uppercase;opacity:0.8;
}
.nav-links{
  display:flex;align-items:center;gap:2px;
  margin-left:auto;list-style:none;
}
.nav-links li a{
  color:rgba(255,255,255,0.72);
  font-size:0.88rem;font-weight:500;
  padding:6px 14px;border-radius:6px;
  transition:var(--transition);white-space:nowrap;
}
.nav-links li a:hover,.nav-links li a.active{
  color:var(--gold-light);background:rgba(201,168,76,0.12);
}
.nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold-light)) !important;
  color:var(--teal-deep) !important;
  font-weight:700 !important;
  padding:8px 20px !important;border-radius:8px !important;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-gold);}
.nav-burger{
  display:none;flex-direction:column;gap:5px;
  margin-left:auto;padding:6px;
}
.nav-burger span{display:block;width:24px;height:2px;background:white;border-radius:2px;transition:var(--transition);}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;
  background:var(--teal-deep);z-index:999;
  padding:20px;flex-direction:column;gap:4px;
  border-bottom:3px solid var(--gold);
}
.nav-mobile.open{display:flex;}
.nav-mobile a{
  color:rgba(255,255,255,0.8);font-size:1rem;
  padding:12px 16px;border-radius:8px;font-weight:500;
  transition:var(--transition);
}
.nav-mobile a:hover{background:rgba(201,168,76,0.15);color:var(--gold-light);}
.nav-mobile .nav-cta-mobile{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--teal-deep) !important;font-weight:700;
  text-align:center;margin-top:8px;border-radius:8px;
}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;border-radius:8px;
  font-size:0.95rem;font-weight:600;
  transition:var(--transition);white-space:nowrap;
  cursor:pointer;border:none;font-family:'Jost',sans-serif;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--teal-deep);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);}
.btn-teal{background:var(--teal);color:white;}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-secondary{
  background:transparent;color:white;
  border:1.5px solid rgba(255,255,255,0.35);
}
.btn-secondary:hover{border-color:var(--gold-light);color:var(--gold-light);transform:translateY(-2px);}
.btn-outline{
  background:transparent;
  border:1.5px solid var(--teal);color:var(--teal);
}
.btn-outline:hover{background:var(--teal);color:white;transform:translateY(-2px);}
.btn-lg{padding:15px 32px;font-size:1rem;}
.btn-sm{padding:8px 16px;font-size:0.82rem;}

/* ── PAGE HERO (inner pages) ── */
.page-hero{
  padding-top:var(--nav-h);
  position:relative;overflow:hidden;
  text-align:center;
}
.page-hero-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  background-repeat:no-repeat;
}
.page-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,64,53,0.72) 0%,
    rgba(10,64,53,0.55) 60%,
    rgba(10,64,53,0.8) 100%);
}
.page-hero-inner{
  position:relative;z-index:2;
  padding:clamp(50px,8vh,90px) clamp(16px,5vw,60px) clamp(40px,6vh,70px);
}
.page-hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,5vw,3.5rem);
  font-weight:700;color:var(--white);
  margin-bottom:12px;letter-spacing:1px;
}
.page-hero p{
  color:rgba(255,255,255,0.72);font-size:1.05rem;
  max-width:500px;margin:0 auto;line-height:1.6;
}

/* ── SECTION ── */
.section{
  padding:clamp(60px,8vw,100px) clamp(16px,5vw,60px);
  max-width:1200px;margin:0 auto;position:relative;
}
.section-full{
  padding:clamp(60px,8vw,100px) clamp(16px,5vw,60px);
  position:relative;
}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.72rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.section-eyebrow::before,.section-eyebrow::after{content:'✦';opacity:0.5;}
.section-heading{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;color:var(--teal-deep);
  line-height:1.15;margin-bottom:16px;
}
.section-heading em{font-style:italic;color:var(--teal);}
.section-body{
  font-size:1.02rem;color:var(--text-muted);
  line-height:1.8;max-width:560px;
}
.text-center{text-align:center;}
.text-center .section-eyebrow{justify-content:center;}
.ornament-divider{
  display:flex;align-items:center;gap:16px;margin:20px 0;
}
.ornament-divider::before,.ornament-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.ornament-divider span{color:var(--gold);font-size:1rem;flex-shrink:0;}

/* ── PAYMENT BANNER ── */
.payment-banner{background:var(--teal-deep);border-top:1px solid rgba(201,168,76,0.2);}
.payment-banner-inner{
  display:flex;align-items:center;justify-content:center;
  gap:0;max-width:1000px;margin:0 auto;
  padding:0 clamp(16px,4vw,40px);flex-wrap:wrap;
}
.pb-item{
  display:flex;align-items:center;gap:10px;
  padding:14px 24px;flex:1;min-width:150px;
}
.pb-item.pb-highlight{
  background:rgba(201,168,76,0.1);
  border-left:2px solid var(--gold);
}
.pb-icon{font-size:1.3rem;flex-shrink:0;}
.pb-item strong{display:block;font-size:0.8rem;color:white;font-weight:600;}
.pb-item span,.pb-item a{display:block;font-size:0.7rem;color:rgba(255,255,255,0.45);text-decoration:none;}
.pb-item a:hover{color:var(--gold-light);}
.pb-divider{width:1px;height:40px;background:rgba(255,255,255,0.08);flex-shrink:0;}

/* ── WHATSAPP FLOAT ── */
.wa-float{
  position:fixed;bottom:28px;right:28px;z-index:900;
  width:58px;height:58px;background:#25D366;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,0.45);
  transition:var(--transition);
  animation:wa-pulse 2.5s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.12);box-shadow:0 10px 32px rgba(37,211,102,0.6);}
.wa-float svg{width:30px;height:30px;fill:white;}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 6px 24px rgba(37,211,102,0.45);}
  50%{box-shadow:0 6px 36px rgba(37,211,102,0.7),0 0 0 8px rgba(37,211,102,0.12);}
}
.phone-float{
  position:fixed;bottom:96px;right:28px;z-index:900;
  width:48px;height:48px;
  background:var(--teal-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(13,92,74,0.4);
  transition:var(--transition);
  border:2px solid rgba(201,168,76,0.35);
}
.phone-float:hover{transform:scale(1.1);background:var(--teal);}
.phone-float svg{width:20px;height:20px;color:white;}

/* ── CARDS ── */
.card{
  background:white;border-radius:var(--radius-md);
  border:1px solid rgba(26,122,110,0.1);
  overflow:hidden;transition:var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(201,168,76,0.3);}

/* ── BADGE ── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:20px;
  font-size:0.73rem;font-weight:600;letter-spacing:0.5px;
}
.badge-gold{background:rgba(201,168,76,0.15);color:var(--gold);border:1px solid rgba(201,168,76,0.3);}
.badge-teal{background:rgba(26,122,110,0.12);color:var(--teal);border:1px solid rgba(26,122,110,0.25);}

/* ── STARS ── */
.stars{color:var(--gold);letter-spacing:1px;font-size:0.9rem;}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:none;}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal-left.visible{opacity:1;transform:none;}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal-right.visible{opacity:1;transform:none;}
[data-delay="1"]{transition-delay:0.1s;}
[data-delay="2"]{transition-delay:0.2s;}
[data-delay="3"]{transition-delay:0.3s;}
[data-delay="4"]{transition-delay:0.4s;}
[data-delay="5"]{transition-delay:0.5s;}
[data-delay="6"]{transition-delay:0.6s;}

/* ── FOOTER ── */
footer{background:var(--teal-deep);color:rgba(255,255,255,0.6);font-size:0.88rem;}
.footer-top{
  padding:clamp(48px,6vw,72px) clamp(16px,5vw,60px);
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;
}
.footer-brand p{margin-top:14px;line-height:1.7;}
.footer-col h4{
  color:var(--gold-light);font-weight:600;
  font-size:0.78rem;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:16px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{transition:var(--transition);}
.footer-col ul li a:hover{color:var(--gold-light);padding-left:4px;}
.footer-contact-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;}
.footer-contact-item .icon{color:var(--gold);flex-shrink:0;margin-top:2px;}
.footer-cod-note{
  margin-top:12px;font-size:0.75rem;
  color:rgba(255,255,255,0.45);
  background:rgba(201,168,76,0.08);
  border:1px solid rgba(201,168,76,0.2);
  border-radius:8px;padding:7px 10px;
}
.footer-cod-note strong{color:var(--gold-light);}
.footer-order-methods{margin-top:16px;}
.fom-title{font-size:0.7rem;color:rgba(255,255,255,0.35);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.fom-btns{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.fom-btn{
  padding:8px 16px;border-radius:8px;font-size:0.8rem;font-weight:600;
  text-decoration:none;transition:var(--transition);
  display:inline-flex;align-items:center;gap:6px;
}
.fom-wa{background:#25D366;color:white;}
.fom-wa:hover{background:#20b858;}
.fom-phone{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.12);}
.fom-phone:hover{background:rgba(255,255,255,0.14);color:white;}
.fom-payment-row{display:flex;gap:8px;flex-wrap:wrap;}
.fom-pay-item{font-size:0.68rem;color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);padding:3px 8px;border-radius:10px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:20px clamp(16px,5vw,60px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;max-width:1200px;margin:0 auto;
}
.footer-gold{color:var(--gold);font-size:0.78rem;opacity:0.7;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-cta-desktop{display:none;}
  .nav-burger{display:flex;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .pb-divider{display:none;}
  .pb-item{padding:12px 16px;min-width:130px;}
}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .payment-banner-inner{flex-direction:column;align-items:stretch;}
  .pb-item{border-bottom:1px solid rgba(255,255,255,0.05);}
  .pb-item.pb-highlight{border-left:none;border-top:2px solid var(--gold);}
}