/* =========================================================
   soulsmystery — PREMIUM LUXURY LAYER
   Loads after style.css and only extends/overrides it.
   Nothing here renames or removes a class that JS depends on.
   Theme: White + Royal Gold + Royal Purple · Glassmorphism
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Cinzel:wght@500;600&display=swap');

:root {
  /* Deepened, richer royal palette layered on top of the base tokens */
  --royal-purple:      #2E1A4D;
  --royal-purple-deep: #1C0F33;
  --royal-purple-2:    #4A2E7A;
  --royal-gold:         #C9962C;
  --royal-gold-bright:  #F0C05A;
  --royal-gold-line:    rgba(201,150,44,0.4);
  --glass-bg:           rgba(255,255,255,0.6);
  --glass-bg-dark:      rgba(46,26,77,0.55);
  --glass-border:       rgba(201,150,44,0.28);
  --glass-shadow:       0 20px 60px -20px rgba(46,26,77,0.28);
  --font-luxury:        'Playfair Display', var(--font-display);
  --font-accent:        'Cinzel', var(--font-mono);
  --ease-lux: cubic-bezier(0.19, 1, 0.22, 1);

  /* Apple-level spacing scale */
  --space-section: clamp(72px, 10vw, 148px);
}

/* ---------- Base polish ---------- */
html { scroll-padding-top: 96px; }

body { letter-spacing: 0.005em; }

section { padding: var(--space-section) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

h1, h2 {
  font-family: var(--font-luxury);
  letter-spacing: -0.01em;
}
h1 {
  background: linear-gradient(100deg, var(--royal-purple) 20%, var(--royal-purple-2) 45%, var(--royal-gold) 62%, var(--royal-purple-2) 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--royal-purple);
  animation: sm-gradient-flow 14s ease-in-out infinite;
}
@supports not (background-clip: text) {
  h1 { -webkit-text-fill-color: unset; background: none; color: var(--royal-purple); }
}
@keyframes sm-gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.eyebrow {
  font-family: var(--font-accent);
  letter-spacing: 0.22em;
}

/* ---------- Reveal-on-scroll baseline (safe default = visible) ---------- */
.sm-reveal { opacity: 1; transform: none; }
.sm-anim-ready .sm-reveal {
  opacity: 0;
  transform: translateY(28px);
}

/* ---------- Header / Nav — glass ---------- */
.site-header {
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--royal-gold-line);
  transition: box-shadow 0.4s var(--ease-lux), background 0.4s var(--ease-lux), padding 0.3s var(--ease-lux);
}
.site-header.sm-scrolled {
  box-shadow: 0 12px 40px -20px rgba(46,26,77,0.35);
  background: rgba(255,255,255,0.86);
}
.logo { position: relative; }
.logo .dot { color: var(--royal-gold); text-shadow: 0 0 14px rgba(201,150,44,0.55); }
.nav-links a { transition: color 0.25s var(--ease-lux); }
.nav-links a::after { background: linear-gradient(90deg, var(--royal-gold), var(--royal-purple-2)); height: 2px; }
.nav-links a:hover { color: var(--royal-purple); }

/* ---------- Luxury buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; letter-spacing: 0.04em; transition: transform 0.35s var(--ease-lux), box-shadow 0.35s var(--ease-lux), background 0.35s var(--ease-lux), color 0.35s var(--ease-lux); }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.0) 66%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-lux);
  z-index: 1;
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn > * { position: relative; z-index: 2; }
.btn-primary {
  background: linear-gradient(135deg, var(--royal-gold-bright), var(--royal-gold) 55%, #9c6f18);
  box-shadow: 0 14px 34px -12px rgba(201,150,44,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 20px 42px -14px rgba(201,150,44,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-outline { border-width: 1.5px; border-color: var(--royal-purple); backdrop-filter: blur(6px); }
.btn-outline:hover { background: linear-gradient(135deg, var(--royal-purple), var(--royal-purple-2)); box-shadow: 0 16px 34px -14px rgba(46,26,77,0.5); }
.btn-whatsapp:hover { transform: translateY(-3px) scale(1.015); }
.btn-ghost { transition: color 0.25s var(--ease-lux), gap 0.25s var(--ease-lux); }
.btn-ghost:hover { gap: 14px; }

/* ---------- Hero: animated aurora + particles host ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 55% at 85% 8%, rgba(201,150,44,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 8% 100%, rgba(74,46,122,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at top right, var(--purple-tint) 0%, var(--white) 55%);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: sm-aurora 22s ease-in-out infinite;
}
@keyframes sm-aurora {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50% { background-position: 30% 20%, 70% 80%, 0 0; }
}
.sm-particles-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sm-particles-layer canvas { width: 100%; height: 100%; display: block; }
.hero .container, .page-hero .container, .section-purple .container { position: relative; z-index: 2; }
.hero-art svg { filter: drop-shadow(0 10px 30px rgba(201,150,44,0.25)); }
.hero-art { position: relative; }

/* ---------- Page hero + purple CTA band: relative for decoration layers ---------- */
.page-hero, .section-purple { position: relative; overflow: hidden; }
.page-hero { background: linear-gradient(180deg, var(--ivory) 0%, var(--white) 100%); }
.section-purple {
  background: linear-gradient(135deg, var(--royal-purple-deep), var(--royal-purple) 45%, var(--royal-purple-2));
}
.sm-sacred-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; }
.sm-sacred-bg svg { width: 100%; height: 100%; }

/* ---------- Cards: glassmorphism + luxury hover ---------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px -18px rgba(46,26,77,0.18);
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--royal-gold-line), transparent 40%, var(--royal-purple-2) 120%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease-lux);
  pointer-events: none;
}
.card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -24px rgba(46,26,77,0.32), 0 0 0 1px var(--royal-gold-line); }
.card:hover::after { opacity: 1; }
.icon-badge {
  background: linear-gradient(135deg, var(--purple-tint), #fff);
  box-shadow: inset 0 0 0 1px var(--royal-gold-line), 0 8px 18px -10px rgba(201,150,44,0.4);
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux);
}
.card:hover .icon-badge { transform: scale(1.08) rotate(-4deg); box-shadow: inset 0 0 0 1px var(--royal-gold), 0 12px 26px -10px rgba(201,150,44,0.55); }

/* ---------- Steps ---------- */
.step { position: relative; padding: 22px 22px 26px; border-radius: var(--radius-md); transition: transform 0.4s var(--ease-lux), background 0.4s var(--ease-lux); }
.step:hover { transform: translateY(-6px); background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -22px rgba(46,26,77,0.25); }
.step .step-num { color: transparent; -webkit-text-stroke: 1.4px var(--royal-gold); font-family: var(--font-luxury); }

/* ---------- Testimonials: luxury glass cards ---------- */
.t-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(251,248,241,0.7));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), border-color 0.4s var(--ease-lux);
  overflow: hidden;
}
.t-card::before {
  content: '“';
  position: absolute; top: -6px; right: 18px;
  font-family: var(--font-luxury);
  font-size: 5.5rem;
  color: var(--royal-gold-line);
  line-height: 1;
  pointer-events: none;
}
.t-card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px -24px rgba(46,26,77,0.28); border-color: var(--royal-gold-line); }
.stars { background: linear-gradient(90deg, var(--royal-gold), var(--royal-gold-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-avatar {
  background: linear-gradient(135deg, var(--royal-purple), var(--royal-purple-2));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 4px var(--royal-gold-line), 0 10px 20px -8px rgba(46,26,77,0.4);
}

/* ---------- FAQ: glass accordion ---------- */
.faq-item { border-radius: var(--radius-md); border: 1px solid transparent; padding: 0 18px; transition: background 0.35s var(--ease-lux), border-color 0.35s var(--ease-lux), box-shadow 0.35s var(--ease-lux); margin-bottom: 6px; }
.faq-item:hover { background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); }
.faq-item.open { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(244,239,250,0.7)); border-color: var(--royal-gold-line); box-shadow: 0 16px 40px -26px rgba(46,26,77,0.35); }
.faq-item.open .faq-q { color: var(--royal-purple); }
.faq-q .plus { color: var(--royal-gold); transition: transform 0.4s var(--ease-lux), color 0.3s var(--ease-lux); }
.faq-item.open .faq-q .plus { color: var(--royal-purple-2); }

/* ---------- Pricing "cards" (table rows elevated) ---------- */
.price-table { border-collapse: separate; border-spacing: 0 10px; }
.price-table caption {
  font-family: var(--font-luxury) !important;
  font-size: 1.6rem !important;
  color: var(--royal-purple) !important;
  position: relative;
  padding-bottom: 10px;
}
.price-table caption::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 2px; width: 56px;
  background: linear-gradient(90deg, var(--royal-gold), transparent);
}
.price-table thead th { border-bottom-color: var(--royal-purple-2) !important; }
.price-table tbody tr {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
  transition: transform 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux);
}
.price-table tbody tr:hover td {
  background: transparent !important;
}
.price-table tbody tr:hover {
  box-shadow: 0 16px 34px -20px rgba(46,26,77,0.3), inset 3px 0 0 var(--royal-gold);
  transform: translateX(2px);
}
.price-table td { border-bottom: 1px solid rgba(231,223,203,0.7); }
.price-table td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding-left: 16px; }
.price-table td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-right: 16px; }
.price-table td.amt {
  font-family: var(--font-accent);
  background: linear-gradient(90deg, var(--royal-purple-2), var(--royal-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600;
}

/* ---------- Service rows (services.html) ---------- */
.service-row { border-radius: var(--radius-sm); padding: 22px 16px; transition: background 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux), transform 0.3s var(--ease-lux); border-bottom: 1px solid rgba(231,223,203,0.6); }
.service-row:hover { background: rgba(244,239,250,0.5); box-shadow: inset 3px 0 0 var(--royal-gold); transform: translateX(4px); }
.service-price { background: linear-gradient(90deg, var(--royal-purple-2), var(--royal-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.category-title h2 { position: relative; padding-left: 18px; }
.category-title h2::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(180deg, var(--royal-gold), var(--royal-purple-2)); border-radius: 3px; }

/* ---------- Forms: glass luxury ---------- */
.form-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.68));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 80px -30px rgba(46,26,77,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative;
}
.form-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--royal-gold), transparent 30%, transparent 70%, var(--royal-purple-2));
  opacity: 0.5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
input, select, textarea { background: rgba(251,248,241,0.7); border-color: rgba(231,223,203,0.9); transition: border-color 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux), background 0.3s var(--ease-lux); }
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgba(201,150,44,0.16), 0 4px 18px -6px rgba(201,150,44,0.35); }
.price-preview.show { background: linear-gradient(90deg, rgba(244,239,250,0.9), rgba(240,192,90,0.15)); border: 1px solid var(--royal-gold-line); }

/* ---------- WhatsApp float: glow pulse ---------- */
.wa-float { box-shadow: 0 14px 30px -10px rgba(31,138,84,0.6), 0 0 0 0 rgba(31,138,84,0.5); animation: sm-pulse 2.8s ease-in-out infinite; }
@keyframes sm-pulse {
  0%, 100% { box-shadow: 0 14px 30px -10px rgba(31,138,84,0.6), 0 0 0 0 rgba(31,138,84,0.35); }
  50% { box-shadow: 0 14px 30px -10px rgba(31,138,84,0.6), 0 0 0 10px rgba(31,138,84,0); }
}

/* ---------- Footer: royal glass with sacred watermark ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--royal-purple-deep), var(--royal-purple));
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--royal-gold-line);
}
.site-footer::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--royal-gold), transparent);
}
.footer-col a { position: relative; transition: color 0.3s var(--ease-lux), padding-left 0.3s var(--ease-lux); }
.footer-col a:hover { padding-left: 6px; }

/* ---------- Thank-you / 404 cards ---------- */
.thankyou-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  backdrop-filter: blur(16px);
}
.check-badge { background: linear-gradient(135deg, var(--purple-tint), #fff); box-shadow: inset 0 0 0 1px var(--royal-gold-line); }

/* ---------- Mobile optimisation for decorative layers ---------- */
@media (max-width: 640px) {
  .sm-particles-layer { opacity: 0.6; }
  .sm-sacred-bg { opacity: 0.28; }
  h1 { animation: none; background: none; -webkit-text-fill-color: unset; color: var(--royal-purple); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  .wa-float { animation: none; }
  h1 { animation: none; }
  .sm-anim-ready .sm-reveal { opacity: 1; transform: none; }
}