/* ===================================================================
   ניחוחות ארגמן — Design System v4 FUTURISTIC
   Style: Dark Neon Glass | RTL Hebrew
   =================================================================== */

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

/* ── Design Tokens ──────────────────────────────────────────────── */
:root {
  /* Light palette — white/cream backgrounds */
  --bg-main:    #FDFAF2;
  --bg-deep:    #FFF8E6;
  --bg-section: #FFFFFF;
  --bg-card:    rgba(255,255,255,0.85);
  --bg-card-hover: rgba(255,255,255,1);

  /* Brand Colors */
  --neon-gold:    #C8960A;
  --neon-gold-dk: #A37208;
  --neon-green:   #2E7D1A;
  --neon-green-dk:#1F5E0E;
  --neon-red:     #B01830;
  --neon-red-dk:  #8B0E22;
  --neon-purple:  #7C3AED;

  /* Legacy compatibility */
  --burgundy:       #B01830;
  --burgundy-dark:  #8B0E22;
  --burgundy-light: #D42040;
  --green:          #2E7D1A;
  --green-dark:     #1F5E0E;
  --green-light:    #4CAF35;
  --cream:          #FDFAF2;
  --cream-dark:     #FFF0C8;
  --charcoal:       #1A0F00;
  --gold:           #C8960A;
  --gold-light:     #E8B020;

  /* Card borders — gold-tinted on white */
  --glass-border:       rgba(180,130,10,0.22);
  --glass-border-hover: rgba(180,130,10,0.55);
  --glass-bg:           rgba(255,248,220,0.7);
  --glass-bg-hover:     rgba(255,248,220,1);

  /* Text — dark on light */
  --color-text:       #1A0F00;
  --color-text-muted: rgba(26,15,0,0.58);
  --color-text-faint: rgba(26,15,0,0.32);

  /* Semantic */
  --color-bg:          var(--bg-main);
  --color-surface:     var(--bg-card);
  --color-surface-alt: rgba(200,150,10,0.06);
  --color-border:      var(--glass-border);
  --color-border-soft: rgba(180,130,10,0.12);

  /* Shadows (replace glow with crisp shadow on light bg) */
  --glow-gold:    0 4px 20px rgba(180,130,10,0.3), 0 1px 0 rgba(200,150,10,0.4);
  --glow-gold-sm: 0 2px 12px rgba(180,130,10,0.25), 0 1px 0 rgba(200,150,10,0.3);
  --glow-green:   0 4px 20px rgba(46,125,26,0.25), 0 1px 0 rgba(46,125,26,0.3);
  --glow-red:     0 4px 20px rgba(176,24,48,0.25), 0 1px 0 rgba(176,24,48,0.3);

  /* Spacing — 8pt grid */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:80px; --sp-10:96px; --sp-11:112px; --sp-12:128px;

  /* Typography */
  --font-heading: 'Frank Ruhl Libre', serif;
  --font-body:    'Noto Sans Hebrew', 'Heebo', sans-serif;

  --fs-xs:12px; --fs-sm:14px; --fs-base:16px;
  --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px;
  --fs-3xl:32px; --fs-4xl:40px; --fs-5xl:52px;

  /* Radii */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* Shadows — light-theme appropriate */
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.09);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.11);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.13);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* Transitions */
  --t-fast:  150ms ease-out;
  --t-base:  250ms ease-out;
  --t-slow:  400ms cubic-bezier(0.4,0,0.2,1);
  --t-spring:600ms cubic-bezier(0.16,1,0.3,1);

  --max-w: 1280px;
}

/* ── Base ───────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;       /* prevent horizontal scroll on html root */
  max-width: 100%;
}

/* ── Grain Texture (Nature Distilled) ──────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='256' height='256' filter='url(%23grain)'/></svg>");
  background-size: 256px 256px;
  background-repeat: repeat;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--bg-main);
  line-height: 1.65;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

*:focus-visible {
  outline: 2px solid var(--neon-gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Custom Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-red), var(--neon-gold));
  border-radius: var(--r-full);
}

/* ── Scroll Reveal ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.visible { opacity:1; transform:translateY(0); }

  .reveal-left  { opacity:0; transform:translateX(50px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                transform 0.7s cubic-bezier(0.16,1,0.3,1); }
  .reveal-right { opacity:0; transform:translateX(-50px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                transform 0.7s cubic-bezier(0.16,1,0.3,1); }
  .reveal-left.visible, .reveal-right.visible { opacity:1; transform:translateX(0); }

  .reveal-scale { opacity:0; transform:scale(0.88);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
  .reveal-scale.visible { opacity:1; transform:scale(1); }

  .reveal-delay-1 { transition-delay:0.08s; }
  .reveal-delay-2 { transition-delay:0.16s; }
  .reveal-delay-3 { transition-delay:0.24s; }
  .reveal-delay-4 { transition-delay:0.32s; }
  .reveal-delay-5 { transition-delay:0.40s; }
}

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes float-orb {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(30px,-40px) scale(1.05); }
  66%       { transform: translate(-20px,20px) scale(0.97); }
}
@keyframes float-orb-2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  40%       { transform: translate(-35px,30px) scale(1.06); }
  70%       { transform: translate(25px,-20px) scale(0.95); }
}
@keyframes rotate-slow {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes wa-pulse {
  0%   { transform:scale(1);   opacity:0.7; }
  100% { transform:scale(1.9); opacity:0; }
}
@keyframes wa-wiggle {
  0%,100% { transform:rotate(0deg) scale(1); }
  15%     { transform:rotate(-18deg) scale(1.1); }
  30%     { transform:rotate(18deg) scale(1.1); }
  45%     { transform:rotate(-12deg) scale(1.05); }
  60%     { transform:rotate(12deg) scale(1.05); }
  75%     { transform:rotate(-6deg); }
  90%     { transform:rotate(6deg); }
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Fade-up hero animations ───────────────────────────────────── */
.fade-up { animation: fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.fade-up-delay-1 { animation-delay:0.15s; }
.fade-up-delay-2 { animation-delay:0.28s; }
.fade-up-delay-3 { animation-delay:0.40s; }

/* ── Layout ─────────────────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-6); }

/* ===================================================================
   ANNOUNCEMENT BAR
   =================================================================== */
.announcement-bar {
  background: var(--burgundy-dark);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1001;
}
.announcement-bar.hidden { display: none; }
.announcement-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: announcement-scroll 28s linear infinite;
}
.announcement-bar:hover .announcement-track { animation-play-state: paused; }
.announcement-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 40px;
}
.announcement-item span { opacity: 0.5; font-size: 10px; }
.announcement-close {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.2s;
  z-index: 2;
}
.announcement-close:hover { color: white; }
@keyframes announcement-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===================================================================
   SCROLL PROGRESS BAR
   =================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-red), var(--neon-gold), var(--neon-green));
  transform: scaleX(0);
  transform-origin: right;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(245,200,66,0.6);
}

/* ===================================================================
   HEADER — Glass Bar
   =================================================================== */
header {
  background: rgba(253,250,242,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--sp-3) var(--sp-7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 2px solid rgba(200,150,10,0.3);
  gap: var(--sp-5);
  transition: padding var(--t-base), background var(--t-base), border-color var(--t-base);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
header.header-scrolled {
  padding-top: 8px;
  padding-bottom: 8px;
  background: rgba(253,250,242,0.98);
  border-bottom-color: var(--neon-gold);
  box-shadow: 0 4px 24px rgba(180,130,10,0.15);
}
header.header-scrolled .logo-svg { height: 46px; }

.header-logo { display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; flex-shrink:0; overflow:hidden; }

.header-tagline {
  color: rgba(26,15,0,0.45);
  font-size:11px; font-weight:400;
  padding-right:var(--sp-3);
  border-right:1px solid rgba(0,0,0,0.12);
  line-height:1.6; letter-spacing:0.3px;
}

.logo-svg { height:58px; width:auto; max-width:120px; transition:height var(--t-base); }

nav { flex:1; }
nav ul { display:flex; gap:var(--sp-5); list-style:none; justify-content:center; align-items:center; }

nav a {
  color: rgba(26,15,0,0.65);
  text-decoration:none; font-weight:600; font-size:var(--fs-sm);
  padding:var(--sp-1) 2px;
  position:relative;
  transition:color var(--t-fast);
  white-space:nowrap;
}
nav a::after {
  content:'';
  position:absolute; bottom:-3px; right:0;
  width:0; height:2px;
  background:linear-gradient(90deg, var(--neon-red), var(--neon-gold));
  border-radius:var(--r-full);
  transition:width var(--t-base);
}
nav a:hover { color: var(--neon-red); }
nav a:hover::after,
nav a.active::after { width:100%; }
nav a.active { color: var(--neon-red); }

.header-cta {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background: linear-gradient(135deg, #25D366, #1da851);
  color: #fff;
  border: none;
  padding: 9px var(--sp-4);
  border-radius: var(--r-full);
  text-decoration:none;
  font-weight:700; font-size:var(--fs-sm);
  transition: all var(--t-base);
  white-space:nowrap;
  flex-shrink:0;
  box-shadow: 0 2px 10px rgba(37,211,102,0.35);
}
.header-cta svg { width:16px; height:16px; }
.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(37,211,102,0.45);
}

/* Hamburger */
.menu-toggle {
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none;
  cursor:pointer; padding:6px; flex-shrink:0;
}
.menu-toggle span {
  display:block; width:24px; height:2px;
  background:var(--color-text);
  border-radius:var(--r-full);
  transition: transform var(--t-base), opacity var(--t-base);
}
.menu-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav { display:none; }

@media (max-width: 900px) {
  .menu-toggle { display:flex; }
  nav { display:none; }
  .header-cta { display:none; }

  .mobile-nav {
    display:block;
    position:fixed; inset:0; z-index:300;
    pointer-events:none;
  }
  .mobile-nav.open { pointer-events:auto; }

  .mobile-nav-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px);
    opacity:0; transition:opacity var(--t-base);
  }
  .mobile-nav.open .mobile-nav-overlay { opacity:1; }

  .mobile-nav-panel {
    position:absolute; top:0; left:0;
    width:260px; height:100%;
    background: #fff;
    border-left: 2px solid var(--neon-gold);
    padding:var(--sp-8) var(--sp-5);
    transform:translateX(-100%);
    transition:transform var(--t-spring);
    overflow-y:auto;
  }
  .mobile-nav.open .mobile-nav-panel { transform:translateX(0); }

  .mobile-nav-panel ul { list-style:none; }
  .mobile-nav-panel ul li { border-bottom:1px solid var(--glass-border); }
  .mobile-nav-panel ul a {
    display:block; padding:var(--sp-4) 0;
    color:var(--color-text); text-decoration:none;
    font-weight:600; font-size:var(--fs-base);
    transition:color var(--t-fast), padding-right var(--t-fast);
  }
  .mobile-nav-panel ul a:hover,
  .mobile-nav-panel ul a.active { color:var(--neon-red); padding-right:var(--sp-2); }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:12px var(--sp-5);
  min-height:44px;
  border-radius:var(--r-full);
  font-weight:700; font-size:var(--fs-sm);
  text-decoration:none; cursor:pointer; border:none;
  transition: all var(--t-base);
  white-space:nowrap;
  position:relative; overflow:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background var(--t-fast);
}
.btn:hover::after { background:rgba(255,255,255,0.07); }
.btn:active { transform:scale(0.96) !important; transition-duration:80ms; }

.btn svg { width:16px; height:16px; flex-shrink:0; }

.btn-primary {
  background: linear-gradient(135deg, var(--neon-red) 0%, #B01030 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(240,53,88,0.35);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow: var(--glow-red), 0 8px 24px rgba(240,53,88,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 2px solid rgba(26,15,0,0.25);
}
.btn-outline:hover {
  border-color: var(--neon-gold);
  color: var(--neon-gold-dk);
  box-shadow: var(--glow-gold-sm);
  transform: translateY(-2px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--neon-gold) 0%, var(--neon-gold-dk) 100%);
  color: #1a0a00;
  box-shadow: 0 4px 20px rgba(245,200,66,0.35);
}
.btn-gold:hover {
  transform:translateY(-2px);
  box-shadow: var(--glow-gold), 0 8px 24px rgba(245,200,66,0.25);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #1ebe5d);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover {
  transform:translateY(-2px);
  box-shadow: 0 0 24px rgba(37,211,102,0.5), 0 8px 24px rgba(37,211,102,0.25);
}

/* Badge */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px var(--sp-3);
  border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase;
}
.badge-white { background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); }
.badge-green { background:rgba(110,232,106,0.1); color:var(--neon-green); border:1px solid rgba(110,232,106,0.25); }
.badge-gold  { background:rgba(245,200,66,0.12); color:var(--neon-gold);  border:1px solid rgba(245,200,66,0.3); }

/* ===================================================================
   SECTION TITLE
   =================================================================== */
.section-title { text-align:center; padding:var(--sp-7) var(--sp-7) var(--sp-5); }

.section-title h2 {
  font-family:var(--font-heading);
  font-size:clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-weight:900;
  color:var(--color-text);
  margin-bottom:var(--sp-3);
}
.section-title .highlight {
  color: var(--neon-red);
}
.section-title p {
  color:var(--color-text-muted);
  font-size:var(--fs-lg);
  max-width:560px;
  margin:0 auto;
  line-height:1.7;
}
.section-divider {
  width:60px; height:3px;
  background:linear-gradient(90deg, var(--neon-red), var(--neon-gold));
  border-radius:var(--r-full);
  margin:var(--sp-3) auto var(--sp-4);
}

/* ===================================================================
   PAGE HERO (catalog / wholesale / about / contact)
   =================================================================== */
.page-hero {
  background: linear-gradient(135deg, var(--neon-red) 0%, #8B0E22 100%);
  padding: var(--sp-12) var(--sp-7) var(--sp-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--neon-gold);
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}
.page-hero > * { position:relative; z-index:1; }

.page-hero h1 {
  font-family:var(--font-heading);
  font-size:clamp(var(--fs-3xl), 5vw, 52px);
  font-weight:900;
  line-height:1.15;
  color: #fff;
  margin-bottom:var(--sp-4);
}
.page-hero h1 .green-text { color: #90F08C; }
.page-hero p {
  font-size:var(--fs-lg);
  color: rgba(255,255,255,0.85);
  max-width:600px; margin:0 auto var(--sp-6);
  line-height:1.75;
}

/* ===================================================================
   STATS SECTION
   =================================================================== */
.stats-section {
  background: linear-gradient(135deg, #1A0F00 0%, #2E1A08 100%);
  padding: var(--sp-7) var(--sp-7);
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-5);
  max-width:var(--max-w);
  margin:0 auto;
  text-align:center;
}
.stat-item {
  padding:var(--sp-6) var(--sp-4);
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(200,150,10,0.35);
  border-radius:var(--r-xl);
  transition: transform var(--t-spring), border-color var(--t-base), box-shadow var(--t-base);
}
.stat-item:hover {
  transform:translateY(-6px);
  border-color:var(--neon-gold);
  box-shadow:0 8px 32px rgba(200,150,10,0.3);
}
.stat-icon {
  width:52px; height:52px;
  background:linear-gradient(135deg, rgba(200,150,10,0.25), rgba(200,150,10,0.08));
  border:1px solid rgba(200,150,10,0.45);
  border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--sp-4);
  color: #F5C842;
}
.stat-icon svg { width:24px; height:24px; }
.stat-num {
  display:block;
  font-size:clamp(32px, 4vw, 48px);
  font-weight:900;
  font-family:var(--font-heading);
  color: #F5C842;
  line-height:1;
  margin-bottom:var(--sp-2);
}
.stat-label {
  display:block;
  font-size:var(--fs-sm);
  color:rgba(255,255,255,0.65);
  font-weight:500;
}

@media (max-width:900px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px) { .stats-grid { grid-template-columns:1fr 1fr; gap:var(--sp-3); } }

/* ===================================================================
   TESTIMONIAL CARD
   =================================================================== */
.testimonial-card {
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  padding:var(--sp-5) var(--sp-6);
  backdrop-filter:blur(12px);
  position:relative;
}
.testimonial-card::before {
  content:'';
  position:absolute; top:0; right:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--neon-gold), transparent);
}
.testimonial-text {
  font-size:var(--fs-base);
  color:var(--color-text-muted);
  line-height:1.7;
  font-style:italic;
  margin-bottom:var(--sp-4);
}
.testimonial-text::before { content:'"'; color:var(--neon-gold); font-size:var(--fs-3xl); line-height:0; vertical-align:-12px; margin-left:4px; }
.testimonial-author { display:flex; align-items:center; gap:var(--sp-3); }
.testimonial-avatar {
  width:40px; height:40px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--neon-red), var(--neon-gold));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:var(--fs-base);
  flex-shrink:0;
}
.testimonial-name { display:block; font-weight:700; font-size:var(--fs-sm); color:var(--color-text); }
.testimonial-role { display:block; font-size:var(--fs-xs); color:var(--color-text-muted); }

/* ===================================================================
   FOOTER
   =================================================================== */
footer {
  background: #1A0F00;
  border-top: 3px solid var(--neon-gold);
  padding: var(--sp-7) var(--sp-7) var(--sp-5);
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:var(--sp-7);
  max-width:var(--max-w);
  margin:0 auto var(--sp-6);
}
.footer-about p {
  font-size:var(--fs-sm);
  color:rgba(255,255,255,0.55);
  line-height:1.7;
  margin-top:var(--sp-4);
  max-width:260px;
}
.footer-col h4 {
  font-size:var(--fs-sm);
  font-weight:700;
  color: #F5C842;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:var(--sp-4);
}
.footer-col ul { list-style:none; }
.footer-col ul li {
  margin-bottom:var(--sp-2);
  display:flex; align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:rgba(255,255,255,0.55);
}
.footer-col ul li svg { width:14px; height:14px; flex-shrink:0; color:#F5C842; opacity:0.7; }
.footer-col ul a {
  color:rgba(255,255,255,0.55);
  text-decoration:none;
  transition:color var(--t-fast);
}
.footer-col ul a:hover { color: #F5C842; }
.footer-bottom {
  text-align:center;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,0.3);
  max-width:var(--max-w);
  margin:0 auto;
  padding-top:var(--sp-5);
  border-top:1px solid rgba(200,150,10,0.2);
}
.social-icons { display:flex; gap:var(--sp-3); margin-top:var(--sp-4); }
.social-icon {
  width:36px; height:36px;
  border-radius:var(--r-md);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-muted);
  text-decoration:none;
  transition: all var(--t-fast);
}
.social-icon svg { width:16px; height:16px; }
.social-icon:hover {
  color:var(--neon-gold);
  border-color:rgba(245,200,66,0.35);
  box-shadow:var(--glow-gold-sm);
}

@media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .footer-grid { grid-template-columns:1fr; } }

/* ===================================================================
   WHATSAPP FLOAT
   =================================================================== */
.whatsapp-float {
  position:fixed; bottom:28px; left:28px;
  width:58px; height:58px;
  background:linear-gradient(135deg, #25D366, #1da851);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  box-shadow:0 4px 24px rgba(37,211,102,0.4);
  z-index:500;
  transition: transform var(--t-spring), box-shadow var(--t-base);
  animation: wa-wiggle 0.7s ease-in-out 5s infinite;
}
.whatsapp-float svg { width:28px; height:28px; }
.whatsapp-float::before {
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(37,211,102,0.7);
  animation:wa-pulse 2s ease-out infinite;
}
.whatsapp-float:hover {
  animation: none;
  transform:scale(1.12);
  box-shadow:0 6px 32px rgba(37,211,102,0.55);
}

/* ===================================================================
   WAVE SECTION DIVIDERS (Nature Distilled — organic transitions)
   =================================================================== */
.wave-divider {
  display:block;
  width:100%;
  overflow:hidden;
  line-height:0;
  position:relative;
  z-index:1;
}
.wave-divider svg {
  display:block;
  width:100%;
  height:auto;
}
/* Flip horizontally for variety */
.wave-divider.flip { transform:scaleX(-1); }
/* Flip vertically (dark→light) */
.wave-divider.flip-y { transform:scaleY(-1); }
.wave-divider.flip-xy { transform:scale(-1,-1); }

/* ===================================================================
   BADGE — enriched pill (Nature Distilled)
   =================================================================== */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px var(--sp-3);
  border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.6px; text-transform:uppercase;
  backdrop-filter:blur(6px);
}
/* override previous badge block */
.badge-white {
  background:rgba(255,255,255,0.14);
  color:#fff;
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:0 1px 8px rgba(0,0,0,0.08);
}
.badge-green {
  background:rgba(46,125,26,0.1);
  color:var(--neon-green-dk);
  border:1px solid rgba(46,125,26,0.28);
  box-shadow:0 1px 8px rgba(46,125,26,0.1);
}
.badge-gold {
  background:rgba(200,150,10,0.1);
  color:var(--neon-gold-dk);
  border:1px solid rgba(200,150,10,0.32);
  box-shadow:0 1px 8px rgba(200,150,10,0.12);
}
.badge-red {
  background:rgba(176,24,48,0.08);
  color:var(--neon-red-dk);
  border:1px solid rgba(176,24,48,0.25);
}

/* ===================================================================
   SECTION ALTERNATING BG (warmer rhythm)
   =================================================================== */
section:nth-of-type(even):not(.reviews-section):not(.hero) {
  background: var(--bg-deep);
}

/* ===================================================================
   CARD DEPTH — richer hover shadow
   =================================================================== */
.feature-card:hover,
.category-card:hover,
.dish-rec-card:hover {
  box-shadow: 0 12px 40px rgba(180,130,10,0.15), 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ===================================================================
   REDUCED MOTION — disable grain + heavy animations
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  body::after { display:none; }
  .reviews-track { animation:none; }
  .hero-orb-1, .hero-orb-2 { animation:none; }
}

/* ===================================================================
   MOBILE — shared components (header, footer, page-hero, btns)
   =================================================================== */
@media (max-width: 900px) {
  header { padding: var(--sp-3) var(--sp-4); }
  .logo-svg { height: 46px; width: auto; max-width: 96px; }
  .header-tagline { display: none; }

  .page-hero { padding: var(--sp-10) var(--sp-4) var(--sp-7); }
  .page-hero h1 { font-size: clamp(var(--fs-2xl), 6vw, var(--fs-4xl)); }
  .page-hero p { font-size: var(--fs-base); margin-bottom: var(--sp-5); }

  .stats-grid { grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
  .stats-section { padding: var(--sp-6) var(--sp-4); }

  .mobile-nav-panel { width: min(280px, 85vw); }
}

@media (max-width: 600px) {
  header { padding: var(--sp-2) var(--sp-3); }
  .logo-svg { height: 40px; width: auto; max-width: 84px; }

  .page-hero { padding: var(--sp-9) var(--sp-4) var(--sp-6); }
  .page-hero h1 { font-size: clamp(var(--fs-xl), 6vw, var(--fs-3xl)); }

  /* Buttons — full width when stacked */
  .btn { font-size: 15px; padding: 11px var(--sp-4); min-height: 48px; }

  /* Footer */
  footer { padding: var(--sp-6) var(--sp-4) var(--sp-4); }
  .footer-col ul li { font-size: 13px; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .stat-item { padding: var(--sp-4) var(--sp-3); }
  .stat-num { font-size: clamp(26px, 7vw, 38px); }

  /* WhatsApp float */
  .whatsapp-float { bottom: 16px; left: 16px; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ===================================================================
   ✦ V5 PREMIUM MOTION — cinematic transitions & micro-interactions
   =================================================================== */

/* ── Cross-page transitions (View Transitions API) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-leave 0.24s cubic-bezier(0.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: vt-enter 0.42s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes vt-leave {
  to { opacity: 0; transform: translateY(-14px) scale(0.995); filter: blur(4px); }
}
@keyframes vt-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.995); filter: blur(6px); }
}

/* ── Text selection — brand gold ── */
::selection { background: rgba(200,150,10,0.32); color: #1A0F00; }

/* ── Easing tokens ── */
:root {
  --e-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --e-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reveal v2 — blur + depth entrance ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transform: translateY(48px) scale(0.985);
    filter: blur(7px);
    transition: opacity 0.85s var(--e-spring),
                transform 0.85s var(--e-spring),
                filter 0.7s ease;
  }
  .reveal.visible { transform: none; filter: blur(0); }

  .reveal-left  {
    transform: translateX(56px) scale(0.99);
    filter: blur(6px);
    transition: opacity 0.85s var(--e-spring),
                transform 0.85s var(--e-spring),
                filter 0.7s ease;
  }
  .reveal-right {
    transform: translateX(-56px) scale(0.99);
    filter: blur(6px);
    transition: opacity 0.85s var(--e-spring),
                transform 0.85s var(--e-spring),
                filter 0.7s ease;
  }
  .reveal-left.visible, .reveal-right.visible { transform: none; filter: blur(0); }

  .reveal-scale { filter: blur(6px); }
  .reveal-scale.visible { filter: blur(0); }
}

/* ── Header — hide on scroll down, glass refinement ── */
header {
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1),
              padding var(--t-base), background var(--t-base),
              border-color var(--t-base), box-shadow var(--t-base);
}
header.header-hidden { transform: translateY(-110%); }

/* nav underline — gradient draw from center */
nav a::after {
  right: 50%;
  transform: translateX(50%);
}

/* ── Buttons — shine sweep on hover ── */
.btn::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 46%;
  left: -70%;
  background: linear-gradient(105deg, transparent 8%, rgba(255,255,255,0.4) 50%, transparent 92%);
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left 0.65s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}
.btn:hover::before { left: 135%; }
.btn > * { position: relative; z-index: 2; }

/* ── Section divider — draws itself when revealed ── */
@media (prefers-reduced-motion: no-preference) {
  .section-divider {
    transform: scaleX(0);
    transition: transform 0.8s 0.25s var(--e-spring);
  }
  .visible .section-divider,
  .section-title.visible .section-divider { transform: scaleX(1); }
}

/* ── Section title highlight — living gradient text ── */
.section-title .highlight {
  background: linear-gradient(90deg, var(--neon-red) 0%, var(--neon-gold) 40%, var(--neon-red) 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hl-flow 5s linear infinite;
}
@keyframes hl-flow {
  from { background-position: 200% 0; }
  to   { background-position: 0% 0; }
}

/* ── Footer — polished hovers ── */
.footer-col ul a {
  position: relative;
  transition: color var(--t-fast), padding-right var(--t-fast);
}
.footer-col ul a:hover { padding-right: 7px; }
.social-icon {
  transition: all var(--t-base);
}
.social-icon:hover {
  transform: translateY(-4px) rotate(-6deg) scale(1.08);
}

/* ── Floating particles (injected by site-fx.js) ── */
.fx-particle {
  position: absolute;
  bottom: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,66,0.9) 0%, rgba(245,200,66,0) 70%);
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: p-rise var(--pd, 12s) linear var(--pdel, 0s) infinite;
}
@keyframes p-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: var(--po, 0.5); }
  85%  { opacity: var(--po, 0.5); }
  100% { transform: translateY(-108vh) translateX(var(--px, 0px)); opacity: 0; }
}

/* ── WhatsApp float — breathing glow ── */
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-float {
    animation: wa-wiggle 0.7s ease-in-out 5s infinite,
               wa-breathe 3s ease-in-out infinite;
  }
  @keyframes wa-breathe {
    0%, 100% { box-shadow: 0 4px 24px rgba(37,211,102,0.4); }
    50%      { box-shadow: 0 6px 38px rgba(37,211,102,0.68); }
  }
}

/* ===================================================================
   ✦ V6 CINEMATIC — spotlight, parallax, stagger, living surfaces
   =================================================================== */

/* ── 3D tilt engine — consumes --rx/--ry set by site-fx.js ──
   Scoped to .visible (or non-reveal) so entrance animations still play.
   !important needed to beat page-level :hover transforms. ── */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .category-card.visible, .category-card:not(.reveal),
  .trust-item.visible,    .trust-item:not(.reveal),
  .stat-item.visible,     .stat-item:not(.reveal),
  .dish-rec-card,
  .recipe-card.visible,   .recipe-card:not(.reveal),
  .audience-card.visible, .audience-card:not(.reveal) {
    transform: perspective(950px)
               rotateX(var(--rx, 0deg))
               rotateY(var(--ry, 0deg))
               translateY(var(--lift, 0px)) !important;
    transition: transform 0.16s ease-out,
                box-shadow var(--t-base),
                border-color var(--t-base),
                background var(--t-base) !important;
    will-change: transform;
  }
  .category-card:hover { --lift: -10px; }
  .trust-item:hover    { --lift: -8px; }
  .stat-item:hover     { --lift: -6px; }
  .dish-rec-card:hover { --lift: -5px; }
  .recipe-card:hover   { --lift: -7px; }
  .audience-card:hover { --lift: -6px; }
}

/* ── Cursor spotlight overlay (bound by site-fx.js on desktop) ── */
.fx-spot { position: relative; }
.fx-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(200,150,10,0.13) 0%,
    rgba(200,150,10,0.05) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.fx-spot:hover::after { opacity: 1; }

/* ── Hero bg: parallax perf hint (Ken Burns lives in index.html) ── */
.hero-bg-img { will-change: transform; }

/* ── Catalog cards: staggered pop-in (animation keeps hover snappy) ── */
@media (prefers-reduced-motion: no-preference) {
  .product-card.pc-pre { opacity: 0; }
  .product-card.pc-in {
    animation: pc-enter 0.6s var(--e-spring) both;
  }
  @keyframes pc-enter {
    from { opacity: 0; transform: translateY(34px) scale(0.96); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
}

/* ── Product card: gold ring hover upgrade ── */
.product-card:hover {
  box-shadow:
    0 0 0 1.5px rgba(200,150,10,0.55),
    0 14px 34px rgba(180,130,10,0.16),
    0 6px 14px rgba(0,0,0,0.08);
}

/* ── Stat number: pop flash when count completes ── */
.stat-num.stat-pop {
  animation: stat-pop 0.55s var(--e-bounce);
}
@keyframes stat-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); text-shadow: 0 0 26px rgba(245,200,66,0.75); }
  100% { transform: scale(1); }
}

/* ── Wave dividers: smooth transform ── */
.wave-divider svg { transition: transform 0.2s linear; will-change: transform; }
.wave-divider.flip-y svg { }

/* ── Category card image: shine sweep on hover ── */
.category-img { position: relative; }
.category-img::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(105deg, transparent 5%, rgba(255,255,255,0.28) 50%, transparent 95%);
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  z-index: 2;
}
.category-card:hover .category-img::before { left: 130%; }

/* ── Page-hero (subpages): floating light orbs ── */
.page-hero::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 65%);
  top: -160px; left: -120px;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::after { animation: float-orb 11s ease-in-out infinite; }
  .page-hero h1 { animation: fade-up 0.7s var(--e-spring) both; }
  .page-hero p  { animation: fade-up 0.7s 0.12s var(--e-spring) both; }
}

/* ── Anchor scroll offset for sticky header ── */
[id] { scroll-margin-top: 90px; }

/* ── Images: soft fade-in when loaded ── */
@media (prefers-reduced-motion: no-preference) {
  .card-img { view-timeline: none; }
}

/* ── Footer: staggered column rise on first view ── */
@media (prefers-reduced-motion: no-preference) {
  footer .footer-col { transition: none; }
}

/* ── Mini-FAQ: icon spin & answer slide refinement ── */
.mini-faq-q .faq-icon { transition: transform 0.45s var(--e-bounce), box-shadow 0.3s ease; }
.mini-faq-item.open .faq-icon {
  transform: rotate(225deg);
  box-shadow: 0 0 14px rgba(200,150,10,0.5);
}
.mini-faq-a { transition: max-height 0.5s var(--e-spring), padding 0.3s; }

/* ── Reduced motion safety net ── */
@media (prefers-reduced-motion: reduce) {
  .fx-particle { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .section-title .highlight { animation: none; background-position: 0 0; }
  .fx-spot::after { display: none; }
  .product-card.pc-pre { opacity: 1; transform: none; filter: none; }
  .hero-bg-img { animation: none; }
  .page-hero h1, .page-hero p { animation: none; }
}