*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html, body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: #1F2937;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Playfair Display', serif;
    }

    /* ---- NAVBAR ---- */
    #navbar {
      transition: all 0.4s ease;
    }

    #navbar.scrolled {
      background: rgba(255, 255, 255, 0.93) !important;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 2px 24px rgba(139, 30, 63, 0.08);
    }

    /* ---- GRADIENT TEXT ---- */
    .gradient-text {
      background: linear-gradient(135deg, #8B1E3F 0%, #D4AF37 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .gradient-gold {
      background: linear-gradient(135deg, #D4AF37, #f0d060, #D4AF37);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 3s linear infinite;
    }

    /* ---- ANIMATIONS ---- */
    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-12px)
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -200% center
      }

      100% {
        background-position: 200% center
      }
    }

    @keyframes pulsegold {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4)
      }

      50% {
        box-shadow: 0 0 0 12px rgba(212, 175, 55, 0)
      }
    }

    .anim-float {
      animation: float 4s ease-in-out infinite;
    }

    .anim-float2 {
      animation: float 4s ease-in-out 1s infinite;
    }

    .anim-pulse-gold {
      animation: pulsegold 2s ease-in-out infinite;
    }

    /* ---- UTILS ---- */
    .dot-pattern {
      background-image: radial-gradient(#8B1E3F18 1px, transparent 1px);
      background-size: 24px 24px;
    }

    .section-divider {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #8B1E3F, #D4AF37);
      border-radius: 99px;
      margin: 0 auto;
    }

    ::-webkit-scrollbar {
      width: 6px
    }

    ::-webkit-scrollbar-track {
      background: #FEF9F8
    }

    ::-webkit-scrollbar-thumb {
      background: #8B1E3F;
      border-radius: 99px
    }

    /* ---- BUTTONS ---- */
    .btn-primary {
      background: linear-gradient(135deg, #8B1E3F, #A52A4A);
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
      transition: left 0.5s;
    }

    .btn-primary:hover::before {
      left: 100%;
    }

    .btn-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 28px rgba(139, 30, 63, 0.4);
    }

    .btn-gold {
      background: linear-gradient(135deg, #D4AF37, #E8C85A);
      transition: all 0.3s;
    }

    .btn-gold:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 28px rgba(212, 175, 55, 0.45);
    }

    .btn-outline {
      border: 2px solid #8B1E3F;
      color: #8B1E3F;
      transition: all 0.3s;
    }

    .btn-outline:hover {
      background: #8B1E3F;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(139, 30, 63, 0.3);
    }

    /* ---- CARDS ---- */
    .feature-card {
      transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 48px rgba(139, 30, 63, 0.14);
    }

    .template-card {
      transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .template-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 56px rgba(139, 30, 63, 0.18);
    }

    .template-card .t-overlay {
      opacity: 0;
      transition: opacity 0.3s;
    }

    .template-card:hover .t-overlay {
      opacity: 1;
    }

    .pricing-card {
      transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .pricing-card:hover {
      transform: translateY(-8px);
    }

    .testi-card {
      transition: all 0.3s ease;
    }

    .testi-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(139, 30, 63, 0.12);
    }

    /* ---- PHONE ---- */
    .phone-shell {
      background: linear-gradient(145deg, #1a1a2e, #16213e, #0f3460);
      border-radius: 36px;
      padding: 10px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .phone-screen {
      background: white;
      border-radius: 28px;
      overflow: hidden;
    }

    /* ---- FAQ ---- */
    .faq-item .faq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    .faq-item.open .faq-body {
      max-height: 300px;
    }

    .faq-item .faq-icon {
      transition: transform 0.3s ease;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

/* ---- CUSTOM INLINE EXTRACTIONS ---- */
.anim-float-delayed-5s { animation: float 5s ease-in-out 1.5s infinite; }
.bg-grad-burgundy-gold { background: linear-gradient(90deg, #8B1E3F, #D4AF37); }
.min-h-220 { min-height: 220px; }
.max-w-90 { max-width: 90%; }
.max-w-80 { max-width: 80%; }
.flip-x { transform: scaleX(-1); }
.bg-grad-burgundy-dark-bottom { background: linear-gradient(to bottom, #8B1E3F, #6B1530, #4a0f22); }
.bg-grad-gold-light { background: linear-gradient(135deg, #D4AF37, #E8C85A); }
.bg-grad-burgundy-light { background: linear-gradient(135deg, #8B1E3F, #A52A4A); }
.bg-grad-burgundy-shadow { background: linear-gradient(135deg, #8B1E3F, #6B1530); box-shadow: 0 8px 32px rgba(139,30,63,0.30); }
.bg-grad-burgundy-dark-135 { background: linear-gradient(135deg, #8B1E3F, #6B1530, #4a0f22); }
.shadow-gold-glow { box-shadow: 0 8px 32px rgba(212,175,55,0.4); }
.text-gold-brand { color: #D4AF37; }

/* ---- HERO SMARTPHONE MOCKUP SLIDER ---- */
@keyframes blinkColor {
  0%, 100% { color: #8B1E3F; }
  50% { color: #e11d48; }
}
.blink-text {
  animation: blinkColor 1.8s infinite;
}

.hero-slider-wrap {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 15px 0;
  user-select: none;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

#splide-hero-banner .splide__track {
  padding-top: 15px;
  padding-bottom: 15px;
}

#splide-hero-banner .splide__slide {
  width: 242px;
  height: 508px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide-card {
  width: 236px;
  height: 502px;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  background: #1e1e2d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, filter 0.45s ease;
  transform: scale(0.85);
  opacity: 0.55;
  filter: grayscale(40%);
}

#splide-hero-banner .splide__slide.is-active .hero-slide-card {
  transform: scale(1);
  opacity: 1;
  filter: none;
}

.hero-slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.hero-phone-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 242px;
  height: 508px;
  pointer-events: none;
  z-index: 25;
}

.hero-phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.28));
}

@media (max-width: 640px) {
  .hero-slider-wrap {
    max-width: 100%;
    padding: 10px 0;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }
  #splide-hero-banner .splide__slide,
  .hero-phone-frame {
    width: 196px;
    height: 411px;
  }
  .hero-slide-card {
    width: 190px;
    height: 405px;
    border-radius: 28px;
  }
}