/* ============================================================================
   DENTAL HOUSE — HOME V2.2 "Luxe" (homepage only)
   Linked from index.php after wp_head so it wins the cascade. Everything is
   scoped under .dh-home → the other pages keep their original design.

   Palette:
     Porcelain  #FBF9F3   Champagne #C9B07E   Deep gold #A8863C
     Ink petrol #14304A   Aqua glaze #A9CDD1  Warm blush #F2E3D2

   The page is a colour journey — each section's bottom tone flows into the
   next section's top tone, so scrolling feels like one continuous gradient:
   hero (champagne dawn) → stats (deep petrol) → why (warm blush) →
   smile (aqua porcelain) → services (warm ivory) → packages (champagne) →
   about (pale sky) → gallery (aqua ivory) → reviews (porcelain) → cta (dawn)
   ========================================================================== */

.dh-home {
  --p-porcelain: #FBF9F3;
  --p-champagne: #C9B07E;
  --p-gold-deep: #A8863C;
  --p-ink:       #14304A;
  --p-aqua:      #A9CDD1;
  /* the whole colour journey lives on this one element — the light sections
     are transparent windows onto it, so no boundary can ever show a seam */
  background: linear-gradient(180deg,
    #F7EFDE 0%,      /* hero zone (hero paints its own dawn on top) */
    #F6EDDE 18%,     /* why — warm blush (blends straight out of hero) */
    #F1F1EC 30%,     /* smile — aqua porcelain */
    #F9F5EB 44%,     /* about — warm ivory */
    #F2EDE0 57%,     /* gallery — champagne */
    #EFF2F7 69%,     /* reviews — pale sky */
    #F2F3EE 80%,     /* packages — aqua ivory */
    #FAF8F1 90%,     /* porcelain */
    #F4EEE0 100%);   /* warm dawn */
}

/* ─── Shared luxe ingredients ───────────────────────────────────────────── */
.dh-home .dh2-eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(154,122,46,0.9);
}
.dh-home .dh2-eyebrow::before,
.dh-home .dh2-eyebrow::after {
  content: ''; display: block; width: 2rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,176,126,0.85));
}
.dh-home .dh2-eyebrow::after { transform: scaleX(-1); }

@keyframes dh2-shimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* Floating gold teeth (decorative layer used in hero / why / smile) */
.dh2-teeth-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.dh2-float-tooth {
  position: absolute;
  color: rgba(168,134,60,0.35);
  filter: drop-shadow(0 6px 14px rgba(201,176,126,0.25));
  animation: dh2-tooth-drift var(--dur, 14s) ease-in-out infinite alternate;
}
.dh2-teeth-quiet .dh2-float-tooth { color: rgba(168,134,60,0.22); }
@keyframes dh2-tooth-drift {
  from { transform: translate(0, 0) rotate(var(--r0, -8deg)); }
  to   { transform: translate(var(--dx, 14px), var(--dy, -26px)) rotate(var(--r1, 8deg)); }
}
.dh2-ft-1 { width: 52px; top: 14%;  left: 46%;  --dur: 16s; --r0: -10deg; --r1: 6deg;  --dx: 18px;  --dy: -30px; }
.dh2-ft-2 { width: 34px; top: 62%;  left: 40%;  --dur: 13s; --r0: 8deg;   --r1: -6deg; --dx: -14px; --dy: -22px; opacity: 0.8; }
.dh2-ft-3 { width: 26px; top: 34%;  left: 58%;  --dur: 18s; --r0: -4deg;  --r1: 12deg; --dx: 10px;  --dy: -18px; opacity: 0.65; }
.dh2-ft-4 { width: 42px; top: 74%;  left: 8%;   --dur: 15s; --r0: 6deg;   --r1: -8deg; --dx: 16px;  --dy: -24px; opacity: 0.7; }
.dh2-ft-5 { width: 28px; top: 18%;  left: 12%;  --dur: 17s; --r0: -12deg; --r1: 4deg;  --dx: -12px; --dy: -20px; opacity: 0.6; }
.dh2-ft-6 { width: 22px; top: 48%;  left: 30%;  --dur: 12s; --r0: 4deg;   --r1: -10deg;--dx: 12px;  --dy: -16px; opacity: 0.55; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.dh-home .btn-primary {
  position: relative;
  background: linear-gradient(135deg, #1B3A57 0%, var(--p-ink) 55%, #0F2438 100%);
  color: #F7F1E1;
  box-shadow: 0 12px 28px -12px rgba(20,48,74,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.dh-home .btn-primary::before {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(240,227,192,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s cubic-bezier(0.22,1,0.36,1);
}
.dh-home .btn-primary:hover::before { left: 130%; }
.dh-home .btn-primary:hover {
  background: linear-gradient(135deg, #234767 0%, #1A3A58 55%, #122B44 100%);
  box-shadow: 0 18px 36px -14px rgba(20,48,74,0.6);
  transform: translateY(-1px);
}
.dh-home .btn-outline {
  border-color: rgba(20,48,74,0.28);
  color: rgba(20,48,74,0.85);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dh-home .btn-outline:hover { background: var(--p-ink); border-color: var(--p-ink); color: #F7F1E1; }

.dh-home .section-label { color: rgba(154,122,46,0.9); letter-spacing: 0.24em; }
.dh-home .section-label::before {
  background: linear-gradient(90deg, transparent, var(--p-champagne));
  width: 2.25rem;
}

/* 3D tilt cards (JS sets --rx/--ry/--gx/--gy) */
.dh-home [data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.18s ease-out, box-shadow 0.4s ease, opacity 0.7s ease-out;
  will-change: transform;
  position: relative;
}
.dh-home [data-tilt]::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.35), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.dh-home [data-tilt]:hover::after { opacity: 1; }

/* ============================================================================
   HERO — champagne dawn, doctor's photo fully melted in (no white anywhere)
   ========================================================================== */
.dh-home .dh-hero {
  background:
    radial-gradient(ellipse 75% 60% at 8% 4%,   rgba(201,176,126,0.3)  0%, transparent 58%),
    /* аква оттенъкът е издърпан нагоре, за да не изстудява дъното */
    radial-gradient(ellipse 60% 45% at 92% 55%, rgba(169,205,209,0.30) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 60% 30%, rgba(242,227,210,0.55) 0%, transparent 65%),
    /* дъното плавно стига до кремавия тон на страницата — без шев и без воал върху снимката */
    linear-gradient(180deg, #F7EFDE 0%, #F5EFE2 45%, #F3EEE2 70%, #F5EEDF 88%, #F6EDDE 100%);
}
/* slow-breathing aurora */
.dh-home .dh-hero::before,
.dh-home .dh-hero::after {
  content: '';
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(70px); opacity: 0.6;
}
.dh-home .dh-hero::before {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  left: -12vw; top: -10vw;
  background: radial-gradient(circle at 35% 35%, rgba(201,176,126,0.42), rgba(201,176,126,0) 70%);
  animation: dh2-drift-a 26s ease-in-out infinite alternate;
}
.dh-home .dh-hero::after {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  right: -8vw; bottom: -12vw;
  background: radial-gradient(circle at 60% 45%, rgba(169,205,209,0.46), rgba(169,205,209,0) 70%);
  animation: dh2-drift-b 32s ease-in-out infinite alternate;
}
@keyframes dh2-drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,4vw) scale(1.12); } }
@keyframes dh2-drift-b { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-5vw,-5vw) scale(0.94); } }

/* the photo: heavy feathered mask on every edge + tinted wash — it exists
   only as light inside the gradient, never as a rectangle on white */
@media (min-width: 1024px) {
  /* multiply melts the photo's white studio background into the champagne
     gradient beneath it — total blend, zero lightening of the doctor:
     white x background = background, subject colours stay full-bodied. */
  .dh-home .dh2-hero-photo {
    mix-blend-mode: multiply;
    filter: saturate(1.03) contrast(1.01);
    /* само ляв feather — никакво долно избледняване; multiply топи бялото само */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%);
  }
  /* no veils on top of her — nothing to wash the colours out */
  .dh-home .dh2-hero-photo-wash { background: none; }
  /* дъното на фото-панела се разтваря надолу в кремавото — цветът прелива,
     никаква линия; това е маска (прозрачност), не воал върху снимката */
}
.dh-home .dh-hero .section-label { position: relative; z-index: 2; }

.dh-home .dh-hero h1 { color: #223247; text-shadow: 0 2px 24px rgba(247,239,222,0.9); }
.dh-home .dh-hero h1 em {
  background: linear-gradient(100deg,
    #A8863C 0%, #C9B07E 22%, #F0E3C0 38%, #C9B07E 52%, #8FB6BC 88%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: dh2-shimmer 6s ease-in-out infinite;
}
.dh-home .dh2-hero-sub {
  font-size: 1.02rem;
  line-height: 1.9;
  color: rgba(45,58,72,0.68);
  max-width: 30rem;
}
.dh-home .dh2-hero-sig {
  margin-top: 1.6rem;
  display: flex; align-items: center; gap: 0.7rem;
  color: rgba(168,134,60,0.75);
}
.dh-home .dh2-sig-line {
  display: block; width: 3.2rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,176,126,0.8));
}
.dh-home .dh2-hero-tag {
  margin-top: 0.9rem;
  font-style: italic;
  font-size: 1.02rem;
  color: rgba(154,122,46,0.85);
}

/* ============================================================================
   STATS — deep petrol glass band (the dramatic beat of the journey)
   ========================================================================== */
.dh-home #stats {
  background:
    radial-gradient(ellipse 70% 120% at 15% 0%, rgba(169,205,209,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 130% at 90% 100%, rgba(201,176,126,0.16) 0%, transparent 55%),
    linear-gradient(135deg, #10283F 0%, var(--p-ink) 50%, #0D2033 100%) !important;
  position: relative;
}
.dh-home #stats .grid { background: rgba(255,255,255,0.07) !important; }
.dh-home #stats .grid > div { background: transparent !important; transition: background 0.4s ease, transform 0.4s ease; }
.dh-home #stats .grid > div:hover { background: rgba(255,255,255,0.05) !important; transform: translateY(-2px); }
.dh-home #stats .font-serif { color: #F6EFDD !important; }
.dh-home #stats .uppercase { color: rgba(196,214,224,0.65) !important; }

/* ============================================================================
   WHY — warm blush, italic serif accent, glowing petals
   ========================================================================== */
.dh-home .dh2-why { position: relative; background: transparent !important; }
.dh-home .dh2-why-title { color: #2A3A4E; }
.dh-home .dh2-why-accent {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(100deg,
    #A8863C 0%, #C9B07E 26%, #F0E3C0 40%, #C9B07E 54%, #8FB6BC 92%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dh2-shimmer 6s ease-in-out infinite;
}
.dh-home .dh2-why-sub {
  font-size: 1.02rem;
  line-height: 1.95;
  color: rgba(72,60,48,0.66);
  max-width: 34rem;
}
.dh-home .dh2-why-stat { position: relative; }
.dh-home .dh2-why-stat-halo {
  position: absolute;
  right: -10%; top: -30%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(201,176,126,0.35) 0%, transparent 65%);
  filter: blur(18px);
  pointer-events: none;
  animation: dh2-halo 5s ease-in-out infinite;
}
@keyframes dh2-halo { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.dh-home .dh2-why-num {
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  background: linear-gradient(160deg, #E8CF9A 0%, var(--p-champagne) 35%, var(--p-gold-deep) 75%, #7FA9AF 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 12px 26px rgba(168,134,60,0.35));
}
.dh-home .dh2-why-stat-label {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(72,60,48,0.62);
}

/* the four petals — floating warm glass, breathing light */
.dh-home .dh2-petal {
  position: relative;
  display: flex;
  gap: 1.35rem;
  align-items: flex-start;
  padding: 1.9rem 2rem 1.9rem 1.9rem;
  border-radius: 1.6rem 1.6rem 1.6rem 0.4rem;
  background: linear-gradient(150deg, rgba(255,252,246,0.85), rgba(252,244,231,0.55));
  border: 1px solid rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 24px 48px -32px rgba(120,86,40,0.35),
    0 0 0 1px rgba(201,176,126,0.22) inset,
    0 0 34px -8px rgba(201,176,126,0.22);
  overflow: hidden;
  /* без постоянна float анимация — по-леко зареждане и рендер */
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s ease, opacity 0.7s ease-out;
}
.dh-home .dh2-petal:hover {
  transform: none;
  box-shadow:
    0 34px 62px -34px rgba(120,86,40,0.45),
    0 0 0 1px rgba(201,176,126,0.4) inset,
    0 0 46px -6px rgba(201,176,126,0.42);
}
.dh-home .dh2-petal-tooth {
  position: absolute;
  right: -6px; bottom: -12px;
  color: rgba(168,134,60,0.1);
  transform: rotate(-14deg);
  pointer-events: none;
}
.dh-home .dh2-medallion {
  flex-shrink: 0;
  width: 3.4rem; height: 3.4rem;
  border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--p-gold-deep);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), rgba(246,233,206,0.8)),
    linear-gradient(150deg, #F7EDD6, #EBD9B4);
  border: 1px solid rgba(201,176,126,0.55);
  box-shadow:
    0 12px 26px -14px rgba(168,134,60,0.6),
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 22px -4px rgba(201,176,126,0.5);
  animation: dh2-medallion-glow 3.6s ease-in-out infinite;
  animation-delay: var(--float-del, 0s);
}
@keyframes dh2-medallion-glow {
  0%, 100% { box-shadow: 0 12px 26px -14px rgba(168,134,60,0.6), inset 0 1px 0 rgba(255,255,255,0.95), 0 0 18px -6px rgba(201,176,126,0.4); }
  50%      { box-shadow: 0 12px 26px -14px rgba(168,134,60,0.6), inset 0 1px 0 rgba(255,255,255,0.95), 0 0 30px -2px rgba(201,176,126,0.65); }
}
.dh-home .dh2-petal-title {
  font-size: 1.14rem;
  font-weight: 600;
  color: #33414F;
  line-height: 1.4;
}
.dh-home .dh2-petal-text {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.9;
  color: rgba(72,60,48,0.64);
}

/* ============================================================================
   SMILE (before/after) — aqua porcelain, flows out of the warm blush above
   ========================================================================== */
.dh2-smile {
  position: relative;
  padding: 5.5rem 1rem 5rem;
  overflow: hidden;
  background: transparent;
}
.dh2-smile-head { position: relative; z-index: 2; text-align: center; max-width: 46rem; margin: 0 auto; }
.dh2-smile-head h2,
.dh2-gallery-head h2 {
  margin-top: 0.9rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.75rem);
  color: #1E3448;
  line-height: 1.15;
}
.dh2-smile-head h2 em,
.dh2-gallery-head h2 em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(100deg,
    #A8863C 0%, #C9B07E 22%, #F0E3C0 38%, #C9B07E 52%, #8FB6BC 88%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dh2-shimmer 6s ease-in-out infinite;
}
.dh2-smile-head p,
.dh2-gallery-head p {
  margin-top: 0.9rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1.75;
  color: rgba(45,58,72,0.6);
}

.dh2-ba-wrap { position: relative; width: min(880px, 94vw); margin: 3rem auto 0; z-index: 2; }
.dh2-ba-halo {
  position: absolute; inset: -8% -10%;
  background:
    radial-gradient(ellipse 55% 55% at 30% 30%, rgba(201,176,126,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 72% 75%, rgba(169,205,209,0.24) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}
.dh2-ba-stage {
  position: relative;
  border-radius: 1.9rem;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 50px 100px -50px rgba(20,48,74,0.5), 0 0 0 1px rgba(255,255,255,0.7);
  isolation: isolate;
}
.dh2-ba-stage::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(140deg,
    rgba(201,176,126,0.95), rgba(255,255,255,0.6) 28%,
    rgba(201,176,126,0.35) 58%, rgba(143,182,188,0.7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 6;
}
.dh2-ba-stage svg { display: block; width: 100%; height: auto; }

.dh2-ba-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 0; z-index: 5;
  pointer-events: none;
  transform: translateX(var(--x, 0px));
}
.dh2-ba-line {
  position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.2), rgba(255,255,255,0.95) 20%,
    rgba(240,227,192,0.95) 50%, rgba(255,255,255,0.95) 80%, rgba(255,255,255,0.2));
  box-shadow: 0 0 18px rgba(255,255,255,0.8), 0 0 40px rgba(201,176,126,0.45);
}
.dh2-ba-knob {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 3.1rem; height: 3.1rem;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #14304A;
  background: linear-gradient(150deg, rgba(255,255,255,0.92), rgba(255,255,255,0.55));
  border: 1px solid rgba(255,255,255,0.95);
  outline: 1.5px solid rgba(201,176,126,0.75);
  outline-offset: -4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -12px rgba(20,48,74,0.55), inset 0 1px 0 rgba(255,255,255,0.95);
}
.dh2-ba-stage.is-idle .dh2-ba-knob { animation: dh2-knob-pulse 2.4s ease-in-out infinite; }
@keyframes dh2-knob-pulse {
  0%, 100% { box-shadow: 0 14px 30px -12px rgba(20,48,74,0.55), 0 0 0 0 rgba(201,176,126,0.5); }
  50%      { box-shadow: 0 14px 30px -12px rgba(20,48,74,0.55), 0 0 0 12px rgba(201,176,126,0); }
}
.dh2-ba-tag {
  position: absolute; top: 1.1rem;
  z-index: 5;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em;
  color: rgba(20,48,74,0.85);
  background: linear-gradient(150deg, rgba(255,255,255,0.85), rgba(255,255,255,0.5));
  border: 1px solid rgba(255,255,255,0.9);
  outline: 1px solid rgba(201,176,126,0.45);
  outline-offset: -3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -14px rgba(20,48,74,0.4);
  pointer-events: none;
}
.dh2-ba-tag-after  { left: 1.1rem; }
.dh2-ba-tag-before { right: 1.1rem; }
.dh2-ba-hintbar { text-align: center; margin-top: 1.4rem; }
.dh2-ba-hint {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(45,58,72,0.5);
}
.dh2-spark { opacity: 0; transform-origin: center; transform-box: fill-box; }
.dh2-spark.is-live { animation: dh2-twinkle 1.9s ease-in-out infinite; }
@keyframes dh2-twinkle {
  0%, 100% { opacity: 0.35; scale: 0.8; }
  50%      { opacity: 1;    scale: 1.15; }
}

/* ============================================================================
   SERVICES — warm ivory (flows from smile's #F3F2EA)
   ========================================================================== */
.dh-home #services { background: transparent !important; }
.dh-home #services .dh-svc-blend-img {
  -webkit-mask-image: radial-gradient(ellipse 94% 96% at center, black 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 94% 96% at center, black 52%, transparent 100%);
}

/* ============================================================================
   PACKAGES — champagne hall (flows from services' #FAF6EC)
   ========================================================================== */
.dh-home #packages { background: transparent !important; }
.dh-home #packages .bg-white {
  background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(255,255,255,0.72)) !important;
  border-color: rgba(255,255,255,0.9) !important;
  outline: 1px solid rgba(201,176,126,0.3);
  outline-offset: -3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -32px rgba(20,48,74,0.3), 0 0 30px -10px rgba(201,176,126,0.25);
}
.dh-home #packages .bg-brown-800 {
  background: linear-gradient(150deg, #1B3A57 0%, var(--p-ink) 55%, #0E2338 100%) !important;
}

/* ============================================================================
   ABOUT — pale sky (gentle cool beat after the champagne)
   ========================================================================== */
.dh-home #about { background: transparent !important; }
.dh-home #about .dh-photo-blend img {
  -webkit-mask-image: radial-gradient(ellipse 96% 98% at center, black 46%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 98% at center, black 46%, transparent 100%);
  filter: saturate(1.05) contrast(1.03);
}

/* ============================================================================
   GALLERY — aqua ivory (flows from about's #EDF1F6)
   ========================================================================== */
.dh2-gallery {
  position: relative;
  padding: 5.5rem 1rem 5rem;
  overflow: hidden;
  background: transparent;
}
.dh2-gallery-head { text-align: center; max-width: 44rem; margin: 0 auto; }

.dh2-ring-wrap { position: relative; }
.dh2-ring-ambient {
  position: absolute;
  left: 50%; top: 42%;
  width: min(720px, 90vw); height: min(420px, 60vw);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(201,176,126,0.26) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(169,205,209,0.2) 0%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}
.dh2-ring-viewport {
  position: relative;
  margin: 2.6rem auto 0;
  width: min(1080px, 100%);
  height: clamp(380px, 54vw, 560px);   /* extra room for the reflection */
  perspective: 1500px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.dh2-ring-viewport.is-dragging { cursor: grabbing; }
.dh2-ring {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.dh2-card {
  position: absolute;
  top: 42%; left: 50%;                 /* ring sits a touch high — mirror fills below */
  width: clamp(210px, 30vw, 330px);
  aspect-ratio: 4 / 3;
  margin: calc(clamp(210px, 30vw, 330px) * -0.375) 0 0 calc(clamp(210px, 30vw, 330px) * -0.5);
  backface-visibility: hidden;
  transition: filter 0.5s ease, opacity 0.5s ease;
}
.dh2-card-face {
  position: absolute; inset: 0;
  display: block;
  border-radius: 1.35rem;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5));
  box-shadow: 0 34px 70px -34px rgba(20,48,74,0.45);
  transition: box-shadow 0.5s ease;
}
.dh2-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
/* the real mirror: a flipped copy fading away below the card (all browsers) */
.dh2-card-mirror {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 12px;
  aspect-ratio: 4 / 3;
  border-radius: 1.35rem;
  overflow: hidden;
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 52%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 52%);
}
.dh2-card-mirror img,
.dh2-card-mirror .dh2-ph-fill { transform: scaleY(-1); filter: blur(1px) saturate(0.85); }
.dh2-card-mirror .dh2-ph-fill { position: absolute; inset: 0; }

.dh2-card-frame {
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(150deg,
    rgba(201,176,126,0.95), rgba(255,255,255,0.55) 30%,
    rgba(201,176,126,0.3) 62%, rgba(143,182,188,0.65));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.dh2-card-sheen {
  position: absolute; top: -20%; bottom: -20%; width: 45%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  pointer-events: none; z-index: 1;
}
.dh2-card[data-depth="front"] .dh2-card-sheen { animation: dh2-sheen 4.5s ease-in-out infinite; }
@keyframes dh2-sheen {
  0%, 55%  { left: -70%; }
  85%, 100% { left: 140%; }
}
.dh2-card[data-depth="mid"]   { filter: blur(1.6px) saturate(0.92) brightness(0.96); opacity: 0.92; }
.dh2-card[data-depth="far"]   { filter: blur(3.6px) saturate(0.8)  brightness(0.9);  opacity: 0.7; }
.dh2-card[data-depth="front"] { filter: none; opacity: 1; }
.dh2-card[data-depth="front"] .dh2-card-face { box-shadow: 0 48px 96px -38px rgba(20,48,74,0.58); }

.dh2-card .dh2-ph-fill {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.7rem;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, rgba(169,205,209,0.3) 0%, transparent 60%),
    linear-gradient(150deg, #EDF2F5 0%, #F3EFE3 100%);
}
.dh2-ph-icon {
  width: 3rem; height: 3rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(201,176,126,0.45);
  color: #A8863C;
  box-shadow: 0 10px 24px -14px rgba(20,48,74,0.35);
}
.dh2-ph-text {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(45,58,72,0.5);
  text-align: center; padding: 0 1rem;
}
.dh2-ring-floor {
  position: absolute;
  left: 50%; bottom: 2%;
  width: 64%; height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(20,48,74,0.14) 0%, transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}
.dh2-ring-bar {
  margin: 1.6rem auto 0;
  width: min(420px, 92vw);
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.55rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
  border: 1px solid rgba(255,255,255,0.9);
  outline: 1px solid rgba(201,176,126,0.35);
  outline-offset: -3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -24px rgba(20,48,74,0.35);
}
.dh2-ring-info {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 0.8rem;
  min-width: 0;
}
.dh2-ring-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem; font-weight: 600;
  color: #1E3448;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.3s ease;
}
.dh2-ring-label.is-switching { opacity: 0; }
.dh2-ring-counter {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(45,58,72,0.5);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.dh2-ring-counter b { color: #A8863C; font-weight: 600; }
.dh2-ring-counter i { font-style: normal; margin: 0 0.2rem; opacity: 0.6; }
.dh2-ring-btn {
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(201,176,126,0.5);
  color: #14304A;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), background 0.25s ease, color 0.25s ease;
}
.dh2-ring-btn:hover { transform: scale(1.07); background: #14304A; color: #F5EDD5; }
.dh2-ring-btn:active { transform: scale(0.94); }
.dh2-ring-hint {
  margin-top: 0.9rem;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(45,58,72,0.4);
}

/* ============================================================================
   REVIEWS + CTA — porcelain closing into a warm dawn
   ========================================================================== */
.dh-home #reviews { background: transparent !important; }
.dh-home #reviews .bg-cream-50 {
  background: linear-gradient(155deg, rgba(255,255,255,0.9), rgba(250,246,238,0.72)) !important;
  border-color: rgba(255,255,255,0.9) !important;
  outline: 1px solid rgba(201,176,126,0.22);
  outline-offset: -3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -28px rgba(20,48,74,0.22), 0 0 26px -12px rgba(201,176,126,0.3);
}
.dh-home #contact-cta { background: transparent !important; }
.dh-home #contact-cta > .relative {
  position: relative;
  margin-top: 3.5rem; margin-bottom: 3.5rem;
  border-radius: 1.75rem;
  background: linear-gradient(155deg, rgba(255,255,255,0.72), rgba(255,255,255,0.38));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -48px rgba(20,48,74,0.35);
}
.dh-home #contact-cta > .relative::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(201,176,126,0.85), rgba(255,255,255,0.4) 30%,
    rgba(201,176,126,0.25) 60%, rgba(143,182,188,0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dh-home .dh-hero::before,
  .dh-home .dh-hero::after,
  .dh2-float-tooth,
  .dh-home .dh2-petal,
  .dh-home .dh2-medallion,
  .dh-home .dh2-why-stat-halo,
  .dh2-card[data-depth="front"] .dh2-card-sheen,
  .dh2-ba-stage.is-idle .dh2-ba-knob,
  .dh2-spark.is-live,
  .dh-home .dh-hero h1 em,
  .dh-home .dh2-why-accent,
  .dh2-smile-head h2 em,
  .dh2-gallery-head h2 em { animation: none !important; }
}

/* ── Mobile fine-tuning ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dh2-ba-tag { top: 0.75rem; font-size: 0.6rem; padding: 0.35rem 0.7rem; }
  .dh2-ba-knob { width: 2.6rem; height: 2.6rem; }
  .dh2-ring-viewport { perspective: 1050px; height: clamp(360px, 92vw, 460px); }
  .dh2-card {
    width: clamp(190px, 58vw, 250px);
    margin-left: calc(clamp(190px, 58vw, 250px) * -0.5);
    margin-top: calc(clamp(190px, 58vw, 250px) * -0.375);
  }
  .dh-home .dh2-petal { padding: 1.5rem 1.4rem; }
  .dh2-ft-1, .dh2-ft-3, .dh2-ft-6 { display: none; }  /* fewer teeth on phones */
}
@media (max-width: 1023px) {
  /* mobile hero: multiply melts the white photo background into the page —
     no lightening veil at all; only the very bottom dissolves into the
     (coloured) section so the crop line never shows */

  /* Златните "aurora" мъгли (::before/::after) на телефон минават ТОЧНО през
     снимката (::after се рисува върху децата на секцията) и я избеляват.
     На телефон ги махаме — жената остава с пълни цветове като на PC. */
  .dh-home .dh-hero::before,
  .dh-home .dh-hero::after { display: none !important; }

  .dh-home .dh-hero-bg-mobile {
    background: transparent;
    /* the compiled stylesheet sets z-index:1 which would isolate the blend —
       neutralise it so the multiplied photo composites against the section's
       gradient + gold aurora: one colour from the very top of the page */
    z-index: auto !important;
    isolation: auto !important;
  }
  .dh-home .dh-hero-bg-mobile img {
    mix-blend-mode: multiply;
    /* same richness as the desktop photo */
    filter: saturate(1.06) contrast(1.04);
    /* the studio white is ~4% grey — ramp the edges over a soft fade so the
       tone difference dissolves instead of drawing a line */
    /* само горният ръб на правоъгълната снимка се стапя под навбара —
       никакво избледняване върху самата нея */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 7%);
  }
  .dh-home .dh-hero-overlay-mobile { background: none !important; }
}

/* мобилно: навбарът в горно положение е изцяло прозрачен — слива се с фона */
@media (max-width: 1023px){
  .dh-home #dh-navbar:not(.dh-navbar-frosted){ background: transparent !important; box-shadow: none !important; border: none !important; }
}


/* ── Performance доводки (визуално идентични, само по-леки за рендериране):
     • will-change → размазването/прозрачността на картите се анимират на
       видеокартата вместо на процесора
     • translateZ(0) → огледалата и ореолът получават собствен слой и не се
       пре-рисуват при всяко завъртане
     • .dh2-offstage → блясъкът (sheen) спира, когато секцията не е на екрана */
.dh2-card { will-change: filter, opacity; }
.dh2-card-mirror { transform: translateZ(0); }
.dh2-ring-ambient { transform: translate(-50%, -50%) translateZ(0); }
.dh2-offstage .dh2-card-sheen { animation-play-state: paused; }