/* ============================================================
   PICERI LUNA — Global Design System v3
   Full visual overhaul · Modern CSS · web.dev standards
   Load order: LAST — final cascade layer
   ============================================================ */

/* ── Animatable CSS Custom Properties ────────────────────── */
@property --luna-counter {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand */
  --red:       #c41e3a;
  --red-dark:  #9f182e;
  --red-xd:    #7d1223;
  --gold:      #fbb200;
  --gold-d:    #d49800;

  /* Alpha */
  --red-a06:   rgba(196, 30, 58, 0.06);
  --red-a10:   rgba(196, 30, 58, 0.10);
  --red-a16:   rgba(196, 30, 58, 0.16);
  --red-a28:   rgba(196, 30, 58, 0.28);
  --gold-a10:  rgba(251, 178, 0, 0.10);
  --gold-a18:  rgba(251, 178, 0, 0.18);
  --gold-a28:  rgba(251, 178, 0, 0.28);

  /* Surfaces */
  --bg:        #ffffff;
  --bg-warm:   #faf7f0;
  --bg-warm2:  #f4ede0;
  --bg-dark:   #0f0d0a;

  /* Text */
  --ink:    #1d1d1f;
  --ink-2:  #3f3f46;
  --muted:  #6e6e73;
  --faint:  #a1a1aa;

  /* Borders */
  --line:    rgba(29, 29, 31, 0.08);
  --line-md: rgba(29, 29, 31, 0.13);

  /* Spacing — 8px grid */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px;  --s6: 64px;  --s7: 80px;  --s8: 96px;

  /* Section rhythm */
  --py:    clamp(72px, 9vw, 112px);
  --py-sm: clamp(56px, 6vw, 80px);

  /* Typography */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radius */
  --r-xs:   6px;   --r-sm:  12px;  --r-md: 18px;
  --r-lg:   24px;  --r-xl:  32px;  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 4px  rgba(0,0,0,0.06);
  --sh-sm: 0 4px 16px rgba(0,0,0,0.07);
  --sh-md: 0 10px 36px rgba(0,0,0,0.09);
  --sh-lg: 0 20px 60px rgba(0,0,0,0.11);
  --sh-red: 0 8px 28px rgba(196,30,58,0.28);

  /* Motion */
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --out:     cubic-bezier(0, 0, 0.2, 1);
  --fast:    180ms;
  --base:    320ms;
  --slow:    500ms;

  /* Header */
  --hh: 80px;

  /* ── Navbar token overrides — unify with global palette ── */
  --ln-accent:       var(--red);
  --ln-accent-dark:  var(--red-dark);
  --ln-accent-light: rgba(196, 30, 58, 0.12);
  --ln-font:         var(--font);
  --ln-h:            var(--hh);   /* single source of truth */
  --ln-h-scrolled:   64px;
}

/* ── Global base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--red-a10);
  color: var(--red-dark);
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a { text-decoration: none; color: inherit; }

/* ── Accessibility: skip link ──────────────────────────────── */
.luna-skip-link {
  position: fixed;
  top: -100%;
  left: var(--s2);
  z-index: 10000;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  transition: top 0.2s var(--ease);
}

.luna-skip-link:focus {
  top: var(--s2);
}

/* ── Focus-visible: keyboard navigation ────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Body offset for fixed header ──────────────────────────── */
body.page-home {
  padding-top: var(--hh) !important;
}

/* ── Container system ──────────────────────────────────────── */
.container {
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 4vw, 40px) !important;
}

.container-big {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 56px);
  box-sizing: border-box;
}

/* ── Scroll-margin for sticky nav ──────────────────────────── */
:is(#luna-kryefaqja, #luna-menu, #luna-oret,
    #luna-pikat, #luna-vlersimet, #luna-instagram, #luna-kontakt) {
  scroll-margin-top: calc(var(--hh) + 14px);
}

/* ── Performance: content-visibility — only on non-animated ─ */
/* DO NOT apply to .luna-steps/.luna-strength/.luna-testimonials
   — WOW.js IntersectionObserver fires BEFORE the browser renders
   those sections, so content-visibility would skip the animation. */
:is(.luna-instagram, .luna-footer) {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4 {
  font-family: var(--font) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}

/* Section heads — unified eyebrow pill */
.luna-section-head__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  background: var(--red-a06) !important;
  border: 1px solid var(--red-a10) !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 18px !important;
}

.luna-section-head__eyebrow::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  animation: pulse-dot 2.2s ease infinite !important;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(0.7); opacity: 0.5; }
}

.luna-section-head__title {
  font-size: clamp(1.75rem, 3.8vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.luna-section-head__desc {
  font-size: clamp(14px, 1.5vw, 16px) !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
  margin-top: 16px !important;
}

.luna-section-head--center {
  text-align: center !important;
}

/* ── Buttons — unified ─────────────────────────────────────── */
.btn-ct {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-radius: var(--r-pill) !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--base) var(--ease),
    transform var(--fast) var(--spring),
    box-shadow var(--base) var(--ease) !important;
}

.btn-ct.btn-large {
  padding: 14px 28px !important;
  font-size: 15px !important;
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: var(--sh-red) !important;
}

.btn-ct.btn-large img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  filter: brightness(0) invert(1);
}

.btn-ct.btn-large:hover {
  background: var(--red-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px var(--red-a28) !important;
  color: #fff !important;
}

.btn-ct.btn-large:active { transform: scale(0.98) !important; }

.btn-ct.btn-small {
  padding: 10px 22px !important;
  font-size: 13px !important;
  background: var(--red) !important;
  color: #fff !important;
}

.btn-ct.btn-small:hover {
  background: var(--red-dark) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.page-home .luna-hero {
  margin-top: 0 !important;
  padding-top:    clamp(56px, 7vw, 88px) !important;
  padding-bottom: clamp(64px, 8vw, 100px) !important;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, var(--gold-a10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, var(--red-a06), transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(255,249,240,0.9), transparent 70%),
    linear-gradient(160deg, #fff9f2 0%, #fffcf7 40%, #fff7ee 70%, #fdf3e8 100%) !important;
  overflow: hidden;
}

/* Orb improvements */
.luna-hero__orb--1 {
  width: clamp(300px, 40vw, 520px) !important;
  height: clamp(300px, 40vw, 520px) !important;
  background: radial-gradient(circle, rgba(196,30,58,0.20), transparent 70%) !important;
  filter: blur(70px) !important;
}

.luna-hero__orb--2 {
  width: clamp(200px, 30vw, 360px) !important;
  height: clamp(200px, 30vw, 360px) !important;
  background: radial-gradient(circle, rgba(196,30,58,0.14), transparent 70%) !important;
  filter: blur(60px) !important;
}

/* Hero eyebrow */
.luna-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  background: var(--red-a06) !important;
  border: 1px solid var(--red-a10) !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 22px !important;
}

.luna-hero__eyebrow::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  animation: pulse-dot 2.2s ease infinite !important;
  flex-shrink: 0;
}

/* Hero heading */
.luna-hero__title {
  font-family: var(--font) !important;
  font-size: clamp(2rem, 4.8vw, 3.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
  margin-bottom: 22px !important;
}

.luna-hero__title span { color: var(--red) !important; }

.luna-hero__desc {
  font-size: clamp(15px, 1.8vw, 17px) !important;
  line-height: 1.72 !important;
  color: var(--muted) !important;
  margin-bottom: 36px !important;
}

/* CTA row */
.luna-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 28px !important;
}

/* Ghost phone buttons */
.luna-hero__btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 13px 22px !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1.5px solid var(--line-md) !important;
  border-radius: var(--r-pill) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: var(--sh-xs) !important;
  transition:
    border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    transform var(--fast) var(--spring) !important;
}

.luna-hero__btn-ghost:hover {
  border-color: var(--red) !important;
  box-shadow: 0 6px 22px var(--red-a10) !important;
  transform: translateY(-2px) !important;
  color: var(--ink) !important;
}

.luna-hero__btn-ghost .fa {
  color: var(--red) !important;
  font-size: 15px !important;
}

/* Chips */
.luna-hero__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.luna-hero__chip {
  padding: 7px 14px !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: var(--sh-xs) !important;
  transition: transform var(--fast) var(--spring), box-shadow var(--fast) var(--ease) !important;
}

.luna-hero__chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--sh-sm) !important;
}

/* Hero gallery improvements */
.luna-hero__gallery {
  max-width: 480px !important;
  margin: 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
}

/* Decorative ring behind main image
   z-index: -1 keeps it strictly behind all positioned children */
.luna-hero__gallery::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--r-xl) !important;
  background: radial-gradient(circle, var(--gold-a18), transparent 70%) !important;
  transform: scale(1.12) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.luna-hero__img-main {
  box-shadow: 0 24px 64px rgba(0,0,0,0.16) !important;
  border-radius: 28px !important;
  transform: rotate(-2deg) !important;
}

.luna-hero__img-secondary {
  border: 4px solid rgba(255,255,255,0.95) !important;
  box-shadow: var(--sh-lg) !important;
  border-radius: var(--r-lg) !important;
}

.luna-hero__float-card {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-md) !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 14px 18px !important;
}

.luna-hero__float-card strong {
  font-family: var(--font) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--red) !important;
  letter-spacing: -0.04em !important;
}

.luna-hero__float-card span {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   TRUST STATS
   ═══════════════════════════════════════════════════════════ */
.page-home .luna-trust {
  padding-top:    var(--s5) !important;
  padding-bottom: var(--s6) !important;
  margin-top:     0 !important;
  background: linear-gradient(180deg, #fdf9f3 0%, var(--bg) 100%) !important;
  position: relative;
  z-index: 2;
}

.luna-trust__grid {
  max-width: 1060px !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 4vw, 40px) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(12px, 2vw, 20px) !important;
}

.luna-trust__item {
  position: relative !important;
  text-align: center !important;
  padding: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px) !important;
  background: var(--bg) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
  overflow: hidden !important;
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease) !important;
}

/* Accent bar on top of each trust card */
.luna-trust__item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  inset-inline: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--red), var(--gold)) !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
}

.luna-trust__item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--sh-md) !important;
}

.luna-trust__value {
  display: block !important;
  font-family: var(--font) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  background: linear-gradient(135deg, var(--red), var(--gold-d)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}

.luna-trust__label {
  display: block !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION SPACINGS
   ═══════════════════════════════════════════════════════════ */
.page-home .luna-section  { padding-top: var(--py) !important; padding-bottom: var(--py) !important; }
.page-home .luna-steps    { padding-top: var(--py) !important; padding-bottom: var(--py) !important; }
.page-home .luna-strength { padding-top: var(--py) !important; padding-bottom: var(--py) !important; }
.page-home .luna-testimonials { padding-top: var(--py) !important; padding-bottom: var(--py) !important; }
.page-home .luna-menu-section { padding-top: var(--py) !important; padding-bottom: var(--py) !important; }
.page-home .luna-cta      { padding-top: var(--py-sm) !important; padding-bottom: var(--py-sm) !important; }
.page-home .luna-instagram { padding-top: var(--py) !important; padding-bottom: var(--py) !important; }

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS (Steps) — visual enhancements
   ═══════════════════════════════════════════════════════════ */

/* Better step header */
.luna-steps .luna-section-head__title {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  letter-spacing: -0.05em !important;
}

/* Improve connector line */
.luna-steps__line {
  height: 1.5px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--red) 25%,
    var(--gold) 50%,
    var(--red) 75%,
    transparent 100%
  ) !important;
  opacity: 0.35 !important;
}

/* Step number badge */
.luna-step__num {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  box-shadow: 0 8px 22px var(--red-a28) !important;
  font-family: var(--font) !important;
  font-weight: 900 !important;
}

/* Step icon */
.luna-step__icon {
  background: var(--gold-a10) !important;
  border: 1px solid var(--gold-a18) !important;
  color: var(--red) !important;
}

/* Step card title */
.luna-step__title {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* ═══════════════════════════════════════════════════════════
   MENU SECTION
   ═══════════════════════════════════════════════════════════ */
.page-home .luna-menu-section {
  background:
    radial-gradient(ellipse 70% 50% at 5% 50%, var(--gold-a10), transparent 55%),
    radial-gradient(ellipse 60% 45% at 95% 20%, var(--red-a06), transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #fdf9f2 100%) !important;
}

/* Hide the distracting tomato PNG */
.page-home .luna-menu-section .our-menu-vacter {
  display: none !important;
}

/* Menu section head: left-aligned, consistent */
.page-home .luna-menu-section .luna-section-head {
  max-width: 680px !important;
  margin-bottom: clamp(32px, 4vw, 48px) !important;
}

.page-home .luna-menu-section .luna-section-head__title {
  font-size: clamp(1.75rem, 4vw, 3.2rem) !important;
  letter-spacing: -0.055em !important;
}

/* Menu carousel wrapper: full-bleed with padding */
.page-home .luna-menu-section .our-menu-content {
  padding-inline: clamp(16px, 4vw, 40px) !important;
}

/* ═══════════════════════════════════════════════════════════
   WHY LUNA (Strength) — enhancements
   ═══════════════════════════════════════════════════════════ */
.luna-strength__title {
  font-size: clamp(1.75rem, 4.5vw, 3.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
}

.luna-strength__eyebrow {
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

/* Strength mini-stat numbers */
.luna-strength__stat strong {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}

/* Strength card icon: gradient */
.luna-strength-card__icon {
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  box-shadow: 0 12px 28px var(--red-a28) !important;
}

.luna-strength-card__title {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* ═══════════════════════════════════════════════════════════
   CTA BAND — complete redesign
   ═══════════════════════════════════════════════════════════ */
.luna-cta {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 70% 80% at 110% 50%, rgba(196,30,58,0.30), transparent 55%),
    radial-gradient(ellipse 50% 60% at -10% 30%, rgba(196,30,58,0.12), transparent 50%),
    linear-gradient(155deg, #1a0a0f 0%, #130d0b 40%, #0f0f0e 70%, #111110 100%) !important;
}

/* Diagonal stripe pattern overlay */
.luna-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 28px
    ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.luna-cta__orb {
  background: radial-gradient(circle, rgba(196,30,58,0.45), transparent 65%) !important;
  width: 500px !important;
  height: 500px !important;
  right: -120px !important;
  filter: blur(90px) !important;
}

.luna-cta .container {
  position: relative !important;
  z-index: 1 !important;
}

.luna-cta__inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--s4) !important;
}

.luna-cta__title,
.page-home .luna-cta .luna-cta__title,
.page-home .luna-cta h2 {
  font-family: var(--font) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}

.luna-cta__text {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.65) !important;
  max-width: 440px !important;
}

.luna-cta__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: min(100%, 320px) !important;
}

.luna-cta__phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 14px 22px !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.16) !important;
  border-radius: var(--r-pill) !important;
  width: 100% !important;
  justify-content: center !important;
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    transform var(--fast) var(--spring) !important;
}

.luna-cta__phone:hover {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.luna-cta__phone .fa {
  color: var(--gold) !important;
  font-size: 15px !important;
}

.luna-cta .btn-ct.btn-large {
  background: var(--red) !important;
  width: 100% !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS — enhancements
   ═══════════════════════════════════════════════════════════ */
.luna-testimonials .luna-section-head__title {
  font-size: clamp(1.75rem, 4vw, 3.2rem) !important;
  letter-spacing: -0.05em !important;
}

/* Score badge */
.luna-testimonials__score {
  border-radius: var(--r-xl) !important;
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: var(--sh-md) !important;
  border: 1px solid var(--line) !important;
}

.luna-testimonials__score-number {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  letter-spacing: -0.07em !important;
  background: linear-gradient(135deg, var(--red), var(--gold-d)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Stats row */
.luna-testimonials__stats {
  gap: 14px !important;
  margin-bottom: 36px !important;
}

.luna-testimonials__stat {
  border-radius: var(--r-lg) !important;
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-xs) !important;
}

.luna-testimonials__stat strong {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  background: linear-gradient(135deg, var(--red), var(--gold-d)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Testimonial card */
.luna-testimonial-card,
.luna-testimonials .testimonial-box {
  border-radius: var(--r-xl) !important;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.luna-testimonial-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--sh-lg) !important;
  border-color: var(--red-a16) !important;
}

.luna-testimonial-card__quote {
  font-size: 84px !important;
  color: var(--gold-a28) !important;
}

/* Client name */
.luna-testimonials .client-name {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Tag */
.luna-testimonial-card__tag {
  background: var(--red-a06) !important;
  color: var(--red) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  border: 1px solid var(--red-a10) !important;
}

/* Owl nav arrows */
.luna-testimonials__slider .owl-nav button.owl-prev,
.luna-testimonials__slider .owl-nav button.owl-next {
  border-radius: var(--r-md) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: var(--sh-sm) !important;
}

.luna-testimonials__slider .owl-nav button.owl-prev:hover,
.luna-testimonials__slider .owl-nav button.owl-next:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

/* ═══════════════════════════════════════════════════════════
   INSTAGRAM SECTION — mosaic grid
   ═══════════════════════════════════════════════════════════ */
.luna-instagram {
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, var(--gold-a10), transparent 55%),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%) !important;
}

.luna-instagram .luna-section-head--center {
  margin-bottom: clamp(28px, 3.5vw, 44px) !important;
}

/* ── Instagram mosaic grid
   Layout: tall | 2-stacked | 2-stacked | tall
   Works with exactly 6 items; item 1 and item 6 are feature images. ── */
.luna-instagram__grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr 1.35fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: clamp(8px, 1.4vw, 14px) !important;
  aspect-ratio: 16 / 8 !important;
}

/* First item: tall left feature — spans both rows */
.luna-instagram__item:first-child {
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
}

/* Last item: tall right feature — spans both rows */
.luna-instagram__item:last-child {
  grid-row: 1 / 3 !important;
  grid-column: 4 !important;
}

/* Items 2-5 auto-fill the middle 2 columns × 2 rows */

.luna-instagram__item {
  position: relative !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--sh-xs) !important;
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease) !important;
}

.luna-instagram__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform var(--slow) var(--ease) !important;
}

.luna-instagram__item:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--sh-md) !important;
  z-index: 2;
}

.luna-instagram__item:hover img {
  transform: scale(1.07) !important;
}

/* Gradient overlay on hover */
.luna-instagram__item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(10, 6, 4, 0.58) 0%,
    rgba(0,0,0,0.20) 45%,
    transparent 100%
  ) !important;
  opacity: 0 !important;
  transition: opacity var(--base) var(--ease) !important;
}

.luna-instagram__item:hover::after { opacity: 1 !important; }

/* Instagram icon centred over each item */
.luna-instagram__item i {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  font-size: 28px !important;
  color: #fff !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.65) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transition:
    opacity var(--base) var(--ease),
    transform var(--base) var(--spring) !important;
}

.luna-instagram__item:hover i {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Instagram follow CTA below grid */
.luna-instagram__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 36px);
}

.luna-instagram__follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line-md);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  transition:
    border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    transform var(--fast) var(--spring);
}

.luna-instagram__follow-btn .fa {
  color: #e1306c;
  font-size: 18px;
}

.luna-instagram__follow-btn:hover {
  border-color: #e1306c;
  box-shadow: 0 6px 24px rgba(225,48,108,0.18);
  transform: translateY(-2px);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — dark redesign
   ═══════════════════════════════════════════════════════════ */

/* Hide legacy wrapper */
footer#luna-kontakt .footer.ptb-100 { display: none !important; }

.luna-footer {
  background: var(--bg-dark) !important;
  padding: 0 !important;
  overflow: hidden;
  font-family: var(--font);
  position: relative;
}

/* Brand accent line at top */
.luna-footer::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--red) 25%, var(--gold) 50%, var(--red) 75%, transparent);
  z-index: 1;
}

/* Ambient orbs */
.luna-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 10% 80%, rgba(196,30,58,0.07), transparent),
    radial-gradient(ellipse 50% 35% at 92% 15%, rgba(196,30,58,0.05), transparent);
  pointer-events: none;
  z-index: 0;
}

.luna-footer__main {
  position: relative;
  z-index: 1;
  padding-block: clamp(52px, 7vw, 88px) clamp(44px, 5.5vw, 64px);
}

.luna-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(36px, 4.5vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.luna-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.luna-footer__logo-link { display: inline-block; }

.luna-footer__logo {
  display: block;
  height: clamp(40px, 5vw, 54px);
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: brightness(1.15);
}

.luna-footer__tagline {
  font-size: 14px;
  line-height: 1.72;
  color: rgba(255,255,255,0.48);
  margin: 0;
  max-width: 220px;
}

.luna-footer__socials { display: flex; gap: 10px; }

.luna-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.65);
  font-size: 17px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--spring);
}

.luna-footer__social-link:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-3px);
}

.luna-footer__insta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  width: fit-content;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--spring);
}

.luna-footer__insta-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

.luna-footer__col { display: flex; flex-direction: column; }

.luna-footer__col-title {
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.luna-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.luna-footer__list li a {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
  display: inline-block;
}

.luna-footer__list li a:hover {
  color: rgba(255,255,255,0.92);
  padding-left: 5px;
}

.luna-footer__loc {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.30);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-top: 8px;
}

.luna-footer__list li:first-child .luna-footer__loc { margin-top: 0; }

.luna-footer__bottom {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.35) !important;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 18px 0 !important;
}

.luna-footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.luna-footer__bottom p {
  font-family: var(--font);
  font-size: 12.5px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.luna-footer__bottom a {
  color: rgba(255,255,255,0.52);
  transition: color var(--fast) var(--ease);
}

.luna-footer__bottom a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* 1199px — tablet landscape */
@media (max-width: 1199px) {
  /* luna-home.css sets display:none on .ln-cta-group at this breakpoint — override it.
     At 601–1199px the group shows as icon-only pills (label hidden by luna-navbar.css). */
  .ln-cta-group { display: flex !important; }

  .luna-cta__inner { flex-direction: column !important; align-items: flex-start !important; }

  .luna-testimonials__top { grid-template-columns: 1fr !important; }

  .luna-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px 28px;
  }

  .luna-footer__brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 28px;
  }

  .luna-footer__logo-link { grid-row: 1 / 3; }
}

/* 991px — tablet portrait */
@media (max-width: 991px) {
  .luna-trust__grid { grid-template-columns: repeat(2, 1fr) !important; }

  .luna-hero__gallery { max-width: 360px !important; margin-top: var(--s4) !important; }

  /* Reset mosaic to 3-col equal grid on tablet */
  .luna-instagram__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    aspect-ratio: 3 / 2 !important;
  }

  /* Both feature items revert to normal cell */
  .luna-instagram__item:first-child,
  .luna-instagram__item:last-child {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}

/* 767px — mobile landscape */
@media (max-width: 767px) {
  .luna-trust__grid { grid-template-columns: 1fr 1fr !important; }

  .luna-cta__actions { width: 100% !important; }

  .luna-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  .luna-footer__brand { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 14px; }
  .luna-footer__logo-link { grid-row: unset; }
}

/* 575px — mobile portrait */
@media (max-width: 575px) {
  .luna-hero__title { font-size: clamp(1.75rem, 9vw, 2.4rem) !important; }

  .luna-hero__actions { flex-direction: column !important; align-items: stretch !important; }
  .luna-hero__actions .btn-ct { justify-content: center !important; }

  .luna-hero__phone-group { flex-direction: column !important; width: 100% !important; }
  .luna-hero__btn-ghost { width: 100% !important; justify-content: center !important; }

  .luna-trust__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .luna-trust__value { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; }

  /* 2-col equal on small phones */
  .luna-instagram__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    aspect-ratio: auto !important;
  }
}

/* 479px — small phones */
@media (max-width: 479px) {
  .luna-footer__grid { grid-template-columns: 1fr; gap: 24px; }

  .luna-testimonials__stats { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   PRELOADER — do NOT override display here
   jQuery fadeOut() sets display:none via inline style.
   Any display:!important in CSS beats inline styles and
   prevents the preloader from ever hiding.
   style.css already handles all preloader layout correctly.
   ═══════════════════════════════════════════════════════════ */
.preloader {
  background: var(--bg-warm) !important;
  /* display and flex properties intentionally omitted */
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE: hide unused legacy elements
   ═══════════════════════════════════════════════════════════ */
.cart-drawer,
.search-popup {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY: forced-colors / high contrast
   ═══════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  .luna-trust__item::before,
  .luna-footer::before,
  .luna-cta::before {
    display: none;
  }

  .luna-trust__value,
  .luna-testimonials__score-number,
  .luna-testimonials__stat strong {
    -webkit-text-fill-color: unset !important;
    background: none !important;
    color: ButtonText !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .luna-hero__eyebrow::before,
  .luna-section-head__eyebrow::before {
    animation: none !important;
  }

  .luna-trust__item,
  .luna-instagram__item,
  .luna-hero__chip,
  .luna-footer__social-link,
  .luna-footer__list li a,
  .btn-ct,
  .luna-cta__phone,
  .luna-hero__btn-ghost {
    transition: none !important;
  }

  .luna-trust__item:hover,
  .luna-instagram__item:hover,
  .luna-hero__chip:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   OPENING HOURS — #luna-oret
   ═══════════════════════════════════════════════════════════ */
.luna-oret {
  background:
    radial-gradient(ellipse 60% 50% at 10% 80%, var(--gold-a10), transparent 55%),
    radial-gradient(ellipse 55% 45% at 90% 15%, var(--red-a06), transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
  position: relative;
  overflow: hidden;
}

.luna-oret__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.luna-oret__orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.luna-oret__orb--one { width: 380px; height: 380px; top: -120px; left: -100px; background: rgba(196,30,58,0.08); }
.luna-oret__orb--two { width: 400px; height: 400px; bottom: -150px; right: -120px; background: rgba(196,30,58,0.06); }

.luna-oret__header { margin-bottom: clamp(36px, 4.5vw, 56px); }

.luna-oret__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.luna-oret__card {
  padding: clamp(28px, 3.5vw, 40px);
  background: var(--bg);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  position: relative;
  overflow: hidden;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}

.luna-oret__card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold-d));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.luna-oret__card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }

.luna-oret__card-head { display: flex; align-items: center; gap: 14px; }

.luna-oret__pin {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-width: 48px;
  border-radius: var(--r-sm);
  background: var(--red-a06); color: var(--red); font-size: 20px;
  border: 1px solid var(--red-a10);
}

.luna-oret__card-title-group { flex: 1; min-width: 0; }

.luna-oret__card-title {
  font-family: var(--font); font-size: 1.25rem; font-weight: 800;
  color: var(--ink); margin: 0 0 3px; letter-spacing: -0.03em;
}

.luna-oret__card-address { font-size: 13px; color: var(--muted); margin: 0; font-weight: 500; }

.luna-oret__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: 12px; font-weight: 700;
  border-radius: var(--r-pill);
  background: rgba(34,197,94,0.12); color: #15803d;
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.luna-oret__badge--closed { background: var(--red-a06) !important; color: var(--red) !important; }

.luna-oret__schedule { width: 100%; border-collapse: collapse; }
.luna-oret__row { border-bottom: 1px solid var(--line); }
.luna-oret__row:last-child { border-bottom: none; }

.luna-oret__day,
.luna-oret__time { padding: 11px 0; font-size: 14px; font-family: var(--font); }

.luna-oret__day { color: var(--ink-2); font-weight: 500; width: 60%; }
.luna-oret__time { color: var(--ink); font-weight: 700; text-align: right; }

.luna-oret__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: auto; padding-top: var(--s2);
}

.luna-oret__phone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; font-family: var(--font); font-size: 13px; font-weight: 700;
  color: var(--ink); background: var(--bg-warm);
  border: 1px solid var(--line-md); border-radius: var(--r-pill);
  transition: all var(--fast) var(--ease); flex: 1; justify-content: center;
}

.luna-oret__phone:hover { background: var(--red); color: #fff; border-color: var(--red); }
.luna-oret__phone .fa { color: var(--red); transition: color var(--fast) var(--ease); }
.luna-oret__phone:hover .fa { color: #fff; }

.luna-oret__wa-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px; font-family: var(--font); font-size: 13px; font-weight: 700;
  color: #fff; background: #25d366; border: 1px solid transparent;
  border-radius: var(--r-pill); transition: all var(--fast) var(--ease); justify-content: center;
}

.luna-oret__wa-btn:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); }

.luna-oret__map-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px; font-family: var(--font); font-size: 13px; font-weight: 700;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--line-md); border-radius: var(--r-pill);
  transition: all var(--fast) var(--ease); justify-content: center;
}

.luna-oret__map-btn:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

@media (max-width: 767px) {
  .luna-oret__grid { grid-template-columns: 1fr !important; }
  .luna-oret__actions { flex-direction: column; }
  .luna-oret__phone { flex: none; width: 100%; }
  .luna-oret__wa-btn, .luna-oret__map-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   WHATSAPP FAB — two-location picker
   ═══════════════════════════════════════════════════════════ */
.luna-wa-fab {
  position: fixed;
  bottom: 28px; right: 28px; z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Trigger pill */
.luna-wa-fab__trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  background: #25d366; color: #fff;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  border: none; border-radius: var(--r-pill);
  box-shadow: 0 8px 28px rgba(37,211,102,0.38);
  cursor: pointer;
  transition:
    transform var(--fast) var(--spring),
    box-shadow var(--fast) var(--ease),
    background var(--fast) var(--ease);
  animation: luna-wa-bounce 4s ease-in-out 3s infinite;
  -webkit-tap-highlight-color: transparent;
}

.luna-wa-fab__trigger:hover {
  background: #1ebe5d; color: #fff;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 40px rgba(37,211,102,0.48);
  animation: none;
}

.luna-wa-fab__trigger:active { transform: scale(0.97); }

.luna-wa-fab__trigger[aria-expanded="true"] {
  background: #128c7e;
  animation: none;
}

.luna-wa-fab__icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Location menu */
.luna-wa-fab__menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* shown/hidden via JS toggling [hidden] attribute */
}

.luna-wa-fab__menu[hidden] { display: none; }

.luna-wa-fab__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: #fff;
  border: 1.5px solid rgba(37,211,102,0.25);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  text-decoration: none;
  min-width: 180px;
  transition:
    border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    transform var(--fast) var(--spring);
  animation: luna-fab-slide-in 0.25s var(--spring) both;
}

.luna-wa-fab__option:nth-child(2) { animation-delay: 0.06s; }

@keyframes luna-fab-slide-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.luna-wa-fab__option:hover {
  border-color: #25d366;
  box-shadow: 0 6px 22px rgba(37,211,102,0.22);
  transform: translateY(-2px);
}

.luna-wa-fab__option-name {
  font-family: var(--font);
  font-size: 14px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.luna-wa-fab__option-loc {
  font-family: var(--font);
  font-size: 12px; font-weight: 500;
  color: var(--muted);
}

@keyframes luna-wa-bounce {
  0%, 55%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-8px); }
}

@media (max-width: 575px) {
  .luna-wa-fab { bottom: 20px; right: 16px; }
  .luna-wa-fab__trigger { padding: 13px 15px; }
  .luna-wa-fab__label { display: none; }
  .luna-wa-fab__option { min-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════
   TEXT LOGO WORDMARK
   ═══════════════════════════════════════════════════════════ */
.ln-logo__wordmark {
  display: flex; flex-direction: column; line-height: 1; gap: 1px;
}

.ln-logo__sub {
  font-family: var(--font); font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}

.ln-logo__main {
  font-family: var(--font); font-size: 26px; font-weight: 900;
  letter-spacing: -0.05em; color: var(--red); line-height: 1;
}

.luna-footer__logo--text .ln-logo__sub { color: rgba(255,255,255,0.38); }
.luna-footer__logo--text .ln-logo__main { font-size: 22px; }

/* ═══════════════════════════════════════════════════════════
   AVATAR INITIALS — replaces stock-photo testimonials
   ═══════════════════════════════════════════════════════════ */
.luna-av {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--font); font-size: 22px; font-weight: 900;
  letter-spacing: -0.04em; user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@media print {
  .ln-header,
  .luna-cta,
  .luna-instagram,
  .luna-footer__socials,
  .luna-footer__bottom,
  .luna-wa-float { display: none !important; }

  body { padding-top: 0 !important; font-size: 12pt; }

  .luna-hero,
  .luna-trust,
  .luna-oret,
  .luna-strength,
  .luna-testimonials { page-break-inside: avoid; }

  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — SQ | EN pill
   ═══════════════════════════════════════════════════════════ */
.luna-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--red-a06);
  border: 1px solid var(--red-a10);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

.luna-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 13px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  line-height: 1;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.luna-lang-btn.is-active,
.luna-lang-btn[aria-pressed="true"] {
  background: var(--red);
  color: #fff;
}

.luna-lang-btn:hover:not(.is-active):not([aria-pressed="true"]) {
  color: var(--red);
  background: var(--red-a10);
}

/* Mobile sidebar: switcher sits below the nav list */
.luna-lang-switcher--mobile {
  margin: 4px 0 8px;
  align-self: flex-start;
}

/* Hide desktop lang switcher once hamburger takes over at 900px */
@media (max-width: 900px) {
  .ln-header .luna-lang-switcher:not(.luna-lang-switcher--mobile) {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE STICKY BOTTOM BAR
   ═══════════════════════════════════════════════════════════ */
.luna-bottom-bar {
  display: none; /* desktop: hidden */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9997;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.07);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.luna-bottom-bar__inner {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}

.luna-bottom-bar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition:
    background var(--fast) var(--ease),
    transform var(--fast) var(--spring);
  -webkit-tap-highlight-color: transparent;
}

.luna-bottom-bar__btn--call {
  background: var(--red);
  color: #fff;
}

.luna-bottom-bar__btn--call:hover  { background: var(--red-dark); color: #fff; }
.luna-bottom-bar__btn--call:active { transform: scale(0.97); color: #fff; }

.luna-bottom-bar__btn--menu {
  background: var(--red-a06);
  color: var(--red);
  border: 1.5px solid var(--red-a10);
}

.luna-bottom-bar__btn--menu:hover  { background: var(--red-a16); color: var(--red); }
.luna-bottom-bar__btn--menu:active { transform: scale(0.97); color: var(--red); }

@media (max-width: 767px) {
  /* Show the bar on mobile */
  .luna-bottom-bar { display: block; }

  /* Hide navbar CTA group — mobile bottom bar has Call + Menu buttons */
  .ln-cta-group { display: none !important; }

  /* Push page content above the bar (≈ 64px bar height + safe area) */
  body.page-home {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* Lift WA FAB so it doesn't overlap the bottom bar */
  .luna-wa-fab {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   INSTAGRAM MOSAIC — aspect-ratio fix
   luna-home.css sets aspect-ratio:1 on all items. This breaks
   the tall feature columns (items 1 & 6 span 2 grid rows).
   Override to auto so the grid's own row sizing takes control.
   ═══════════════════════════════════════════════════════════ */
.luna-instagram__item {
  aspect-ratio: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS SLIDER — keyboard focus visibility (WCAG 2.4.7)
   luna-home.css removes the browser outline with no substitute.
   Replace with a visible focus ring that matches brand tokens.
   ═══════════════════════════════════════════════════════════ */
.luna-testimonials__slider .owl-nav button:focus-visible,
.luna-testimonials__slider .owl-dots .owl-dot:focus-visible {
  outline: 3px solid var(--red) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}