/* ===== BASE ===== */
    body {
      font-family: 'Poppins', sans-serif;
      background-color: #FDFBF7;
      color: #2B2B2B;
    }
    .text-title { font-family: 'Playfair Display', serif; }

    /* ===== BACKGROUND TEXTURE PATTERN ===== */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -2;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    /* ===== DECORATIVE SPICE ELEMENTS ===== */
    .hero-spice-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes spiceFloat1 {
      0% { transform: translateY(0) rotate(-20deg); }
      50% { transform: translateY(-15px) rotate(-10deg); }
      100% { transform: translateY(0) rotate(-20deg); }
    }
    @keyframes spiceFloat2 {
      0% { transform: translateY(0) rotate(15deg); }
      50% { transform: translateY(-20px) rotate(25deg); }
      100% { transform: translateY(0) rotate(15deg); }
    }
    @keyframes spiceFloat3 {
      0% { transform: translateY(0) rotate(45deg); }
      50% { transform: translateY(-10px) rotate(35deg); }
      100% { transform: translateY(0) rotate(45deg); }
    }
    .spice-item {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      opacity: 0.15;
    }
    .spice-item.blur-sm { filter: blur(1px); }
    .spice-item.blur-md { filter: blur(2px); }
    .spice-item.blur-lg { filter: blur(3px); }

    /* ===== AROMA/STEAM ANIMATION ===== */
    @keyframes steamRise {
      0% { transform: translateY(0) scaleX(1); opacity: 0; }
      20% { opacity: 0.4; }
      50% { transform: translateY(-15px) scaleX(1.2); opacity: 0.2; }
      100% { transform: translateY(-30px) scaleX(1.5); opacity: 0; }
    }
    .steam-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 20;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .group:hover .steam-container {
      opacity: 1;
    }
    .steam-blob {
      position: absolute;
      bottom: -10%;
      background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
      filter: blur(6px);
      border-radius: 50%;
      opacity: 0;
    }
    .steam-1 { left: 20%; width: 30%; height: 50%; animation: steamRise 3s infinite ease-out 0s; }
    .steam-2 { left: 50%; width: 40%; height: 60%; animation: steamRise 4s infinite ease-out 1s; }
    .steam-3 { left: 35%; width: 35%; height: 55%; animation: steamRise 3.5s infinite ease-out 2s; }
    
    /* ===== SHINE EFFECT (BUTTON) ===== */
    @keyframes shine {
      0% { left: -100%; }
      20% { left: 100%; }
      100% { left: 100%; }
    }
    .btn-shine {
      position: relative;
      overflow: hidden;
    }
    .btn-shine::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-25deg);
      animation: shine 4s infinite;
    }
    
    /* ===== SLOW PAN EFFECT ===== */
    @keyframes slowPan {
      0% { transform: scale(1.05) translate(0, 0); }
      50% { transform: scale(1.1) translate(-1%, 1%); }
      100% { transform: scale(1.05) translate(0, 0); }
    }
    .animate-slow-pan {
      animation: slowPan 15s ease-in-out infinite;
    }

    /* ===== GLOBAL ANIMATED BG ===== */
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(40px, -60px) scale(1.1); }
      66% { transform: translate(-30px, 30px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
      animation: blob 15s infinite alternate ease-in-out;
    }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }

    /* ===== HERO ANIMATIONS: fade-in + slide-up ===== */
    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes badgeBounceIn {
      0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
      60%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
      80%  { transform: scale(0.97); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes fadeScaleIn {
      from { opacity: 0; transform: scale(0.92); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes fadeScaleIn {
      from { opacity: 0; transform: scale(0.92); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes floatGentle {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes floatDynamic {
      0% { transform: translateY(0) rotate(0deg) scale(1); }
      33% { transform: translateY(-12px) rotate(1.5deg) scale(1.02); }
      66% { transform: translateY(8px) rotate(-1.5deg) scale(0.98); }
      100% { transform: translateY(0) rotate(0deg) scale(1); }
    }
    @keyframes softMorph {
      0% { border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%; }
      33% { border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; }
      66% { border-radius: 60% 40% 50% 50% / 50% 40% 60% 50%; }
      100% { border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%; }
    }
    .animate-soft-morph {
      animation: softMorph 12s ease-in-out infinite;
    }

    .hero-badge       { animation: badgeBounceIn  0.7s cubic-bezier(.4,0,.2,1) 0.2s both; }
    .hero-headline    { animation: fadeSlideUp     0.7s ease-out 0.45s both; }
    .hero-desc        { animation: fadeSlideUp     0.7s ease-out 0.65s both; }
    .hero-btn-1       { animation: fadeSlideUp     0.6s ease-out 0.85s both; }
    .hero-btn-2       { animation: fadeSlideUp     0.6s ease-out 1.05s both; }
    .hero-trust       { animation: fadeSlideUp     0.6s ease-out 1.2s  both; }
    .hero-img-main    { animation: fadeScaleIn     0.8s ease-out 0.5s  both; }

    /* Trust badge stagger */
    .trust-badge:nth-child(1) { animation: fadeSlideUp 0.5s ease-out 1.25s both; }
    .trust-badge:nth-child(2) { animation: fadeSlideUp 0.5s ease-out 1.40s both; }
    .trust-badge:nth-child(3) { animation: fadeSlideUp 0.5s ease-out 1.55s both; }

    /* ===== HERO IMAGE HOVER (Removed, handled by Tailwind classes in HTML) ===== */

    /* ===== FLOATING WA BUTTON ===== */
    @keyframes floatUpDown {
      0%, 100% { transform: translateY(0) scale(1); }
      50%       { transform: translateY(-7px) scale(1.02); }
    }
    @keyframes waPulseRing {
      0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
      70%  { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
      100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }
    .float-wa {
      animation: floatUpDown 3s ease-in-out infinite, waPulseRing 2.8s ease-out infinite;
    }
    .float-wa:hover {
      animation: none;
      transform: scale(1.08) translateY(-3px);
    }

    /* ===== SCROLL REVEAL ===== */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.65s ease-out, transform 0.65s ease-out;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ===== NAV UNDERLINE SMOOTH ===== */
    .nav-link {
      position: relative;
      transition: color 0.25s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      left: 0; bottom: -2px;
      width: 0; height: 2px;
      background: #2E7D32;
      border-radius: 9999px;
      transition: width 0.3s cubic-bezier(.4,0,.2,1);
    }
    .nav-link:hover::after,
    .nav-link.active-nav::after { width: 100%; }
    .nav-link.active-nav { color: #2E7D32 !important; }

    /* ===== BUTTON HOVER ===== */
    .btn-primary {
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }
    .btn-primary:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 12px 30px -6px rgba(46,125,50,0.35);
    }

    /* ===== PHOTO SHADOW MODERN ===== */
    .photo-modern {
      border-radius: 2.5rem;
      box-shadow: 0 20px 50px -12px rgba(62,39,35,0.18);
      transition: box-shadow 0.4s ease, transform 0.4s ease;
    }
    .photo-modern:hover {
      box-shadow: 0 30px 60px -15px rgba(62,39,35,0.28);
    }

    /* ===== FADE-IN TABS ===== */
    .fade-enter { opacity: 0; transform: translateY(12px); }
    .fade-enter-active {
      opacity: 1; transform: translateY(0);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }

    /* ===== SCROLLBAR ===== */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #F8F4EC; }
    ::-webkit-scrollbar-thumb { background: #A8D5BA; border-radius: 5px; }
    ::-webkit-scrollbar-thumb:hover { background: #2E7D32; }

    /* ===== PULSE GENTLE (legacy keep) ===== */
    @keyframes pulse-gentle {
      0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(34,197,94,0.4); }
      50%       { transform: scale(1.05); box-shadow: 0 4px 28px rgba(34,197,94,0.6); }
    }