@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

html {
  scroll-padding-top: 5.5rem;
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 5.75rem;
  }
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', sans-serif;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(239, 177, 5, 0.4);
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .page-loader {
    transition: none !important;
  }
}

    /* Clean solid background with subtle texture */
    .gradient-bg {
      background-color: #000000;
      position: relative;
      overflow: hidden;
    }

    /* Subtle hero pattern */
    .hero-pattern {
      background-image:
        repeating-linear-gradient(0deg,
          transparent,
          transparent 2px,
          rgba(239, 177, 5, 0.03) 2px,
          rgba(239, 177, 5, 0.03) 4px),
        radial-gradient(circle at 20% 50%, rgba(239, 177, 5, 0.08) 0%, transparent 50%);
    }

    /* Ensure sections stack properly */
    section {
      position: relative;
      z-index: 2;
    }

    /* Smooth card animations */
    .price-card {
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .price-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
    }

    /* WhatsApp float button */
    .whatsapp-float {
      position: fixed;
      width: 56px;
      height: 56px;
      bottom: 24px;
      right: 24px;
      background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%);
      color: #FFF;
      border-radius: 50%;
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      animation: subtle-bounce 3s ease-in-out infinite;
    }

    .whatsapp-float:hover {
      transform: scale(1.15);
      box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
      animation: none;
    }

    @keyframes subtle-bounce {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-6px);
    }
    }

    /* Modern nav link with underline effect */
    .nav-link {
      position: relative;
      font-weight: 500;
      transition: color 0.25s ease;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, #efb105, #ffc933);
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-link:hover::after {
      width: 100%;
    }

    /* Service card with modern hover */
    .service-card {
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 44px rgba(239, 177, 5, 0.18);
    }

    /* How to order — row polish */
    .order-method {
      transition: background-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease,
        border-color 0.3s ease;
      border: 1px solid transparent;
    }

    .order-method:hover {
      background: rgba(249, 250, 251, 0.95);
      transform: translateX(6px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.07);
      border-color: rgba(239, 177, 5, 0.28);
    }

    /* Blog / content cards — image depth */
    #blog article {
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    }

    #blog article:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    }

    #blog article img {
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #blog article:hover img {
      transform: scale(1.04);
    }

    /* Hero image subtle lift */
    #home .hidden.md\:block img {
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
    }

    #home .hidden.md\:block:hover img {
      transform: scale(1.02);
    }

    #order-image {
      transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* FAQ rows */
    .faq-question {
      transition: background-color 0.25s ease;
    }

    .faq-question:hover {
      background-color: rgba(249, 250, 251, 0.9);
    }

    /* Page Loader */
    .page-loader {
      position: fixed;
      inset: 0;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .page-loader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .loader-spinner {
      width: 48px;
      height: 48px;
      border: 3px solid rgba(239, 177, 5, 0.2);
      border-top: 3px solid #efb105;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin {
    to {
      transform: rotate(360deg);
    }
    }

    /* Pulse animation for CTA */
    @keyframes pulse-ring {
    0% {
      box-shadow: 0 0 0 0 rgba(239, 177, 5, 0.5);
    }

    70% {
      box-shadow: 0 0 0 12px rgba(239, 177, 5, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(239, 177, 5, 0);
    }
    }

    .pulse-effect {
      animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* Responsive utilities */
    @media (max-width: 768px) {
    .whatsapp-float {
      width: 52px;
      height: 52px;
      bottom: 20px;
      right: 20px;
      font-size: 24px;
    }

    /* Improve text readability on mobile */
    .gradient-bg h1 {
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    }

    /* Improved focus states for accessibility */
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid #efb105;
      outline-offset: 2px;
    }

    /* Smooth transitions for interactive elements */
    button,
    a,
    input,
    textarea {
      transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease,
        transform 0.2s ease, opacity 0.2s ease;
    }

    /* Primary CTAs in hero */
    #home a.bg-primary {
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.2s ease;
    }

    #home a.bg-primary:hover {
      box-shadow: 0 12px 28px rgba(239, 177, 5, 0.35);
    }