/* Beautello Salon - Production styles */
:root{
  --bg:#0a0c14;
  --bg-soft:#0e1016;
  --surface:#141925;
  --card:#111522;
  --text:#f0f4ff;
  --muted:#9aa4b2;
  --brandA:#ff66a8;
  --brandB:#7b61ff;
  --accent:linear-gradient(135deg,var(--brandA),var(--brandB));
  --accent-glow:linear-gradient(135deg,rgba(255,102,168,0.2),rgba(123,97,255,0.2));
  --radius:14px;
  --shadow:0 10px 30px rgba(10,10,20,0.3);
  --shadow-lg:0 20px 60px rgba(10,10,20,0.4);
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:radial-gradient(1200px 800px at 80% -10%, rgba(123,97,255,0.12), transparent 50%),
  radial-gradient(1000px 800px at -10% 20%, rgba(255,102,168,0.10), transparent 60%), var(--bg-soft);
  color:var(--text);font:16px/1.6 Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(12px);
  background:rgba(10,12,18,0.5);border-bottom:1px solid rgba(255,255,255,0.06)}
.site-header[data-scrolled="true"]{background:rgba(10,12,18,0.72); box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-text{display:flex;flex-direction:column}
.brand-text strong{font-weight:800;letter-spacing:0.2px}
.brand-text small{color:var(--muted);margin-top:-4px}

.nav{display:flex;gap:16px;align-items:center}
.nav a{padding:8px 10px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.nav .btn{margin-left:6px}

/* Social Icons */
.social-icons-nav{display:flex;gap:8px;align-items:center}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);color:var(--muted);transition:all .3s ease;padding:0 !important}
.social-link:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}

.nav-toggle{display:none;flex-direction:column;gap:6px;background:transparent;border:0;cursor:pointer}
.nav-toggle span{width:26px;height:2px;background:var(--text);display:block;border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:12px;font-weight:700;border:1px solid rgba(255,255,255,0.08);text-decoration:none;transition:all .3s ease;font-size:15px}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 12px 30px rgba(123,97,255,0.3);transform:scale(1)}
.btn-primary:hover{transform:scale(1.05);box-shadow:0 16px 40px rgba(123,97,255,0.4)}
.btn-secondary{background:rgba(123,97,255,0.12);color:#c7cafd;border-color:rgba(123,97,255,0.3)}
.btn-secondary:hover{background:rgba(123,97,255,0.2);border-color:rgba(123,97,255,0.5)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.w-100{width:100%}

/* Urgency Banner - Diwali Special */
.urgency-banner{background:linear-gradient(135deg, #ff9933, #ff66a8, #7b61ff, #ff9933);background-size:300% 300%;padding:16px 0;animation:gradientShift 5s ease infinite;box-shadow:0 4px 20px rgba(255,153,51,0.3)}
.banner-content{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center}
.banner-icon{font-size:28px;animation:diyaGlow 1.5s infinite;filter:drop-shadow(0 0 8px rgba(255,153,51,0.6))}
.banner-text{display:flex;flex-direction:column;gap:2px}
.banner-text strong{font-size:16px;font-weight:800}
.banner-text span{font-size:14px;opacity:0.95}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes diyaGlow{
  0%, 100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(255,153,51,0.6))}
  50%{transform:scale(1.1);filter:drop-shadow(0 0 16px rgba(255,153,51,1))}
}

/* Hero */
.hero{padding:56px 0 24px;background:
  radial-gradient(1000px 680px at 10% 10%, rgba(255,102,168,0.16), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.eyebrow{font-size:13px;color:#c9cde3;letter-spacing:1.1px;text-transform:uppercase}
.hero h1{font:700 44px/1.1 "Playfair Display", serif;margin:8px 0 10px}
.hero .lead{color:#cbd3e0;max-width:58ch}
.hero-cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.badges{margin:18px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap;list-style:none}
.badges li{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,0.08);font-weight:700;color:#d7def1;font-size:14px;border:1px solid rgba(255,255,255,0.1)}
.hero-media{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* Landscape hero logo container with padding to preserve aspect */
.hero-logo{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));padding:16px}
.hero-logo img{width:min(72vw,640px);max-height:320px;height:auto;object-fit:contain;filter:drop-shadow(0 12px 32px rgba(123,97,255,0.35))}

/* Sections */
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 70%)}
.section-header{margin-bottom:32px;text-align:center}
.section-header h2{font:700 38px/1.2 "Playfair Display", serif;margin:0;background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}
.section-header .sub{margin:10px 0 0;color:var(--muted);font-size:16px}

/* Cards & grids */
.cards{display:grid;gap:16px}
.services-grid{grid-template-columns:repeat(4,1fr)}
.team-grid{grid-template-columns:repeat(3,1fr)}
.pricing-grid{grid-template-columns:repeat(4,1fr)}
.branches-grid{grid-template-columns:repeat(2,1fr)}
.card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:18px;box-shadow:var(--shadow);transition:all .3s ease;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:var(--accent-glow);opacity:0;transition:opacity .3s ease;pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(255,255,255,0.12)}
.card:hover::before{opacity:1}
.card > *{position:relative;z-index:1}
.card .icon{font-size:32px;margin-bottom:8px}
.card .meta{color:#cbd3e0;font-weight:700;margin-top:8px}
.person img{width:100%;height:360px;object-fit:cover;border-radius:10px}
.person-info{margin-top:10px}
.price .amount{font-size:28px;font-weight:800;margin:12px 0;background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.price ul{list-style:none;padding:0;margin:16px 0}
.price ul li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.price ul li:last-child{border-bottom:none}

/* Instagram Showcase */
.instagram-showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.instagram-embed-placeholder{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);transition:all .3s ease}
.instagram-embed-placeholder:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(255,255,255,0.12)}
.embed-container{min-height:400px;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}
.placeholder-content{text-align:center;color:var(--muted)}
.placeholder-content svg{margin:0 auto 16px;opacity:0.6}
.placeholder-content p{margin:8px 0}
.placeholder-content strong{color:var(--text);font-size:16px}
.placeholder-content .small{font-size:13px;color:var(--muted)}
/* When Instagram embed is added, it will replace the placeholder */
.embed-container iframe,.embed-container blockquote{width:100% !important;max-width:100% !important}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review p{margin:0 0 8px}
.review .by{color:#cbd3e0;font-weight:700}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.contact-box .field{display:flex;flex-direction:column;margin-bottom:12px}
.contact-box .field.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-box label{font-size:13px;color:#cbd3e0;margin-bottom:6px}
.contact-box input,.contact-box textarea{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);color:var(--text);padding:12px;border-radius:10px;outline:none}
.contact-box input:focus,.contact-box textarea:focus{border-color:rgba(123,97,255,0.6);box-shadow:0 0 0 3px rgba(123,97,255,0.2)}
.contact-box .actions{display:flex;gap:10px;align-items:center}

.quick-contact{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.quick-contact .pill{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.06);font-weight:700;white-space:nowrap}
.quick-contact .link{text-decoration:none;color:#dbe1ff;word-break:break-word}
.quick-contact .sep{opacity:.4}

/* Footer */
.site-footer{padding:26px 0;border-top:1px solid rgba(255,255,255,0.08)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-links{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.foot-links a{text-decoration:none;color:#cbd3e0}
.social-icons-footer{display:flex;gap:8px;align-items:center}
.small{font-size:13px}
.muted{color:var(--muted)}

/* Email wrapping fix */
.link, .mail{word-break:break-word;overflow-wrap:break-word}

/* Special Offers */
.special-offers{background:linear-gradient(135deg, rgba(255,102,168,0.15), rgba(123,97,255,0.15));border:2px solid rgba(255,102,168,0.3);border-radius:16px;padding:20px;margin-bottom:32px;text-align:center}
.offer-badge{display:inline-block;background:var(--accent);color:#fff;padding:8px 18px;border-radius:999px;font-weight:800;margin-bottom:12px;font-size:14px}
.offers-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.offer-item{background:rgba(255,255,255,0.08);padding:12px 20px;border-radius:12px;font-size:14px;flex:1;min-width:250px;border:1px solid rgba(255,255,255,0.1)}
.offer-item strong{color:#eaeaff;display:block;margin-bottom:4px}

/* Before & After Transformations */
.transformations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.transformation-card{padding:0;overflow:hidden}
.before-after{display:flex;align-items:center;gap:12px;padding:16px;background:rgba(255,255,255,0.02)}
.ba-image{position:relative;flex:1;border-radius:10px;overflow:hidden;aspect-ratio:3/4}
.ba-image img{width:100%;height:100%;object-fit:cover}
.ba-label{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.7);color:#fff;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700}
.ba-label.after{background:rgba(123,97,255,0.9)}
.ba-arrow{font-size:24px;color:var(--brandB);font-weight:bold}
.transformation-info{padding:16px}
.transformation-info h3{margin:0 0 6px;font-size:18px}
.transformation-info .small{color:var(--muted)}

/* FAQ Section */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.faq-item h3{font-size:16px;margin:0 0 8px;color:#eaeaff;font-weight:700}
.faq-item p{margin:0;color:var(--muted);line-height:1.6}

/* WhatsApp Floating Button */
.whatsapp-float{position:fixed;bottom:24px;right:24px;background:#25D366;color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,0.4);z-index:100;text-decoration:none;transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);overflow:hidden;animation:whatsappPulse 2s infinite}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 12px 32px rgba(37,211,102,0.6);width:auto;border-radius:30px;padding:0 20px;gap:10px;animation:none}
.whatsapp-float svg{flex-shrink:0;transition:transform .3s ease}
.whatsapp-float:hover svg{transform:rotate(360deg)}
.whatsapp-float span{display:none;font-weight:700;font-size:15px;white-space:nowrap}
.whatsapp-float:hover span{display:block}

@keyframes whatsappPulse{
  0%, 100%{box-shadow:0 8px 24px rgba(37,211,102,0.4)}
  50%{box-shadow:0 8px 32px rgba(37,211,102,0.6), 0 0 0 8px rgba(37,211,102,0.2)}
}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero h1{font-size:36px}
  .hero .lead{font-size:15px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .branches-grid{grid-template-columns:1fr}
  .instagram-showcase{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .transformations-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .offers-row{flex-direction:column}
  .offer-item{min-width:100%}
}
@media (max-width: 560px){
  .nav{position:fixed;inset:68px 12px auto 12px;background:rgba(17,21,34,0.96);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px;flex-direction:column;gap:8px;transform:scale(.98);opacity:0;pointer-events:none;transition:opacity .2s ease}
  .nav.is-open{opacity:1;pointer-events:auto}
  .nav a{padding:12px;font-size:15px;text-align:center}
  .nav .btn{width:100%;margin-left:0}
  .nav-toggle{display:flex}
  .social-icons-nav{justify-content:center;width:100%}
  .hero{padding-top:38px}
  .hero h1{font-size:28px}
  .hero-logo img{width:100%;max-height:220px}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta .btn{width:100%;justify-content:center}
  .badges{justify-content:center}
  .badges li{font-size:12px;padding:8px 12px}
  .services-grid,.team-grid,.pricing-grid{grid-template-columns:1fr}
  .instagram-showcase{grid-template-columns:1fr}
  .before-after{flex-direction:column;gap:8px}
  .ba-arrow{transform:rotate(90deg);font-size:20px}
  .reviews{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:20px;text-align:center}
  .foot-links{justify-content:center}
  .whatsapp-float{bottom:16px;right:16px;width:56px;height:56px}
  .contact-box .field.two{grid-template-columns:1fr}
  .banner-content{gap:10px;padding:0 12px}
  .banner-text{font-size:11px}
  .banner-text strong{font-size:13px}
  .banner-text span{font-size:11px}
  .banner-icon{font-size:20px}
  .urgency-banner .btn{padding:10px 16px;font-size:13px}
  .quick-contact{font-size:12px}
  .quick-contact .link{font-size:11px;max-width:100%}
  .quick-contact .sep{display:none}
}