/* ============================================
   ASIAN AVENUE v3 — Sticky Scroll Hero
   Logo pinned → fades into 3 panels
   Burgundy #6d0016 | Gold #ffc800 | White base
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --burgundy: #6d0016;
  --burgundy-dark: #4a000f;
  --gold: #ffc800;
  --gold-dark: #d4a600;
  --gold-light: #ffe066;
  --cream: #fffdf8;
  --charcoal: #1a1a1a;
  --white: #ffffff;
  --g200: #e8e8e8;
  --g300: #d1d1d1;
  --g500: #888888;
  --display: 'Playfair Display', Georgia, serif;
  --body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-h: 80px;
  --max-w: 1280px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* — Reset — */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: var(--body); color: var(--charcoal); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { max-width: 100%; height: auto; display: block }
a { text-decoration: none; color: inherit; transition: color .3s var(--ease) }
ul { list-style: none }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem }
.accent { color: var(--burgundy) }

/* ═══════════════════════════════════
   NAVIGATION — White
   ═══════════════════════════════════ */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: var(--white); border-bottom: 1px solid var(--g200); transition: box-shadow .3s var(--ease) }
.navbar.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.07) }
.navbar .container { display: flex; align-items: center; justify-content: space-between; height: 100% }
.nav-logo img { height: 52px; width: auto }
.nav-logo-spacer { width: 160px }
.nav-logo-scroll { display: none !important; visibility: hidden }
.nav-logo-scroll.revealed { display: block !important; visibility: visible }
.nav-links { display: flex; align-items: center; gap: 2rem }
.nav-links a { font-size: .88rem; font-weight: 500; color: var(--charcoal); letter-spacing: .04em; text-transform: uppercase; padding: .5rem 0; position: relative }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--burgundy); transition: width .3s var(--ease) }
.nav-links a:hover, .nav-links a.active { color: var(--burgundy) }
.nav-links a:hover::after, .nav-links a.active::after { width: 100% }
.lang-switcher { display: flex; align-items: center; gap: .25rem; margin-left: 1rem; padding-left: 1.5rem; border-left: 1px solid var(--g200) }
.lang-switcher button { background: none; border: 1px solid transparent; color: var(--g500); font-family: var(--body); font-size: .75rem; font-weight: 600; padding: .25rem .5rem; border-radius: 4px; cursor: pointer; transition: all .3s var(--ease); letter-spacing: .05em }
.lang-switcher button:hover { color: var(--charcoal); border-color: var(--g300) }
.lang-switcher button.active { color: var(--burgundy); border-color: var(--burgundy) }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px }
.nav-toggle span { width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: all .3s var(--ease) }

/* ═══════════════════════════════════
   STICKY SCROLL HERO
   The scroll-track creates scroll room.
   The sticky-frame pins to viewport.
   Two layers crossfade based on scroll.
   ═══════════════════════════════════ */
.scroll-track {
  height: 250vh;
  position: relative;
  margin-top: var(--nav-h);
}
.sticky-frame {
  position: sticky;
  top: var(--nav-h);
  width: 100%;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

/* Logo layer — starts visible */
.hero-logo-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--white);
  z-index: 2;
  transition: none;
  will-change: opacity, transform;
}
.hero-full-logo {
  max-width: 580px;
  width: 90%;
  margin-bottom: 2rem;
}
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--g500);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.scroll-hint svg {
  color: var(--burgundy);
  animation: hintBounce 2s ease-in-out infinite;
}
@keyframes hintBounce {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(6px) }
}

/* Panels layer — starts hidden */
.panels-layer {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
  transition: none; /* JS controls */
}

/* Individual panels */
.panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .6s var(--ease);
}
.panel:hover img {
  transform: scale(1.05);
}
.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.3) 0%, transparent 40%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  transition: background .3s var(--ease);
}
.panel:hover .panel-overlay {
  background: linear-gradient(to top, rgba(109,0,22,.55) 0%, rgba(109,0,22,.08) 50%);
}
.panel-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0;
  transform: translateY(8px);
  transition: all .3s var(--ease);
}
.panel:hover .panel-cta {
  opacity: 1;
  transform: translateY(0);
}
.panel-cta svg {
  transition: transform .3s var(--ease);
}
.panel:hover .panel-cta svg {
  transform: translateX(4px);
}

/* ═══════════════════════════════════
   INTRO
   ═══════════════════════════════════ */
.intro { padding: 6rem 0; background: var(--white) }
.intro-inner { max-width: 720px; margin: 0 auto; text-align: center }
.intro-heading { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.15; color: var(--charcoal); margin-bottom: 1.25rem }
.intro-body { font-size: 1.1rem; color: var(--g500); line-height: 1.8; margin-bottom: 2.5rem }
.intro-buttons { display: flex; justify-content: center; gap: 1rem }

/* ═══════════════════════════════════
   SHARED
   ═══════════════════════════════════ */
.tag { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--burgundy); margin-bottom: .75rem }
.section-head { text-align: center; margin-bottom: 3.5rem }
.section-heading { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--charcoal); line-height: 1.2 }
.section-desc { font-size: 1.05rem; color: var(--g500); margin-top: .75rem; max-width: 540px; margin-left: auto; margin-right: auto }

/* ═══════════════════════════════════
   BUTTONS
   ═══════════════════════════════════ */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 2rem; border-radius: 8px; font-family: var(--body); font-size: .9rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: all .3s var(--ease); border: 2px solid transparent }
.btn-dark { background: var(--burgundy); color: var(--white); border-color: var(--burgundy) }
.btn-dark:hover { background: var(--burgundy-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(109,0,22,.25) }
.btn-ghost { background: transparent; color: var(--burgundy); border-color: var(--burgundy) }
.btn-ghost:hover { background: var(--burgundy); color: var(--white); transform: translateY(-2px) }
.btn-gold { background: var(--gold); color: var(--burgundy); border-color: var(--gold) }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,200,0,.3) }
.btn-outline-gold { background: transparent; color: var(--gold); border-color: rgba(255,200,0,.4) }
.btn-outline-gold:hover { border-color: var(--gold); background: rgba(255,200,0,.08); transform: translateY(-2px) }
.btn-sm { padding: .6rem 1.25rem; font-size: .82rem }

/* ═══════════════════════════════════
   LOCATIONS
   ═══════════════════════════════════ */
.locations { padding: 6rem 0; background: var(--cream) }
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem }
.loc-card { background: var(--white); border: 1px solid var(--g200); border-radius: 16px; padding: 2rem; transition: all .3s var(--ease); position: relative; overflow: hidden }
.loc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--burgundy), var(--gold)); transform: scaleX(0); transition: transform .3s var(--ease); transform-origin: left }
.loc-card:hover { border-color: var(--burgundy); box-shadow: 0 12px 40px rgba(109,0,22,.08); transform: translateY(-4px) }
.loc-card:hover::before { transform: scaleX(1) }
.loc-icon { width: 48px; height: 48px; background: rgba(109,0,22,.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: var(--burgundy) }
.loc-card h3 { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--charcoal); margin-bottom: .5rem }
.loc-card p { font-size: .9rem; color: var(--g500); line-height: 1.6 }
.loc-card .btn { margin-top: 1.25rem }

/* ═══════════════════════════════════
   PARTNERS
   ═══════════════════════════════════ */
.partners { padding: 6rem 0; background: var(--burgundy); color: var(--white) }
.partners .tag { color: var(--gold) }
.partners .section-heading { color: var(--white) }
.partners .section-desc { color: rgba(255,255,255,.55) }
.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem }
.partner-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 2.5rem; transition: all .3s var(--ease) }
.partner-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.3) }
.partner-card h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: .75rem }
.partner-card p { font-size: .95rem; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 1.5rem }

/* ═══════════════════════════════════
   FRANCHISE
   ═══════════════════════════════════ */
.franchise { padding: 6rem 0; background: var(--cream); text-align: center }
.franchise h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--charcoal); margin-bottom: 1rem }
.franchise p { font-size: 1.1rem; color: var(--g500); max-width: 560px; margin: 0 auto 2.5rem }

/* ═══════════════════════════════════
   FOOTER
   ═══════════════════════════════════ */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,.6); padding: 4rem 0 2rem }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem }
.footer-brand img { height: 44px; filter: brightness(0) invert(1); margin-bottom: 1rem }
.footer-brand p { font-size: .9rem; line-height: 1.7; max-width: 280px }
.site-footer h4 { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 1rem }
.site-footer ul li { margin-bottom: .5rem }
.site-footer ul a { font-size: .88rem; color: rgba(255,255,255,.5); transition: color .3s var(--ease) }
.site-footer ul a:hover { color: var(--gold) }
.footer-bar { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: .82rem }
.footer-bar .lang-switcher { border-left: none; margin-left: 0; padding-left: 0 }
.footer-bar .lang-switcher button { color: rgba(255,255,255,.5) }
.footer-bar .lang-switcher button:hover { color: var(--white); border-color: rgba(255,255,255,.3) }
.footer-bar .lang-switcher button.active { color: var(--gold); border-color: var(--gold) }

/* ═══════════════════════════════════
   PRODUCTS PAGE
   ═══════════════════════════════════ */
.product-nav { background: var(--white); padding: 0 0 2rem; position: sticky; top: var(--nav-h); z-index: 50; border-bottom: 1px solid var(--g200) }
.product-nav-links { display: flex; justify-content: center; gap: 1rem }
.product-nav-link { padding: .65rem 1.75rem; border-radius: 100px; border: 2px solid var(--g200); font-family: var(--body); font-size: .88rem; font-weight: 600; color: var(--g500); transition: all .3s var(--ease) }
.product-nav-link:hover { border-color: var(--burgundy); color: var(--burgundy) }
.product-nav-link--asia:hover, .product-nav-link--asia.active { background: #d4365c; border-color: #d4365c; color: var(--white) }
.product-nav-link--africa:hover, .product-nav-link--africa.active { background: #c8a800; border-color: #c8a800; color: var(--white) }
.product-nav-link--india:hover, .product-nav-link--india.active { background: #5b3d8f; border-color: #5b3d8f; color: var(--white) }

.product-section { padding: 4rem 0 }
.product-section--asia { background: var(--white) }
.product-section--africa { background: var(--cream) }
.product-section--india { background: var(--white) }

.product-section-header { margin-bottom: 2.5rem }
.product-section-label { display: flex; align-items: center; gap: 1.5rem }
.product-section-thumb { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; flex-shrink: 0 }
.product-section-label h2 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--charcoal); margin-bottom: .35rem }
.product-section-label p { font-size: .95rem; color: var(--g500); line-height: 1.6; max-width: 480px }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem }
.product-card { background: var(--white); border: 1px solid var(--g200); border-radius: 16px; overflow: hidden; transition: all .3s var(--ease) }
.product-card:hover { border-color: var(--burgundy); box-shadow: 0 8px 30px rgba(109,0,22,.08); transform: translateY(-4px) }
.product-img { height: 200px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden }
.product-img img { width: 100%; height: 100%; object-fit: cover }
.product-img-placeholder { font-size: .78rem; font-weight: 500; color: var(--g500); letter-spacing: .05em }
.product-info { padding: 1.25rem }
.product-info h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--charcoal); margin-bottom: .4rem }
.product-info p { font-size: .85rem; color: var(--g500); line-height: 1.55 }

/* ═══════════════════════════════════
   PAGE HEADER (shared for inner pages)
   ═══════════════════════════════════ */
.page-header { padding: 8rem 0 3rem; background: var(--white); text-align: center; padding-top: calc(var(--nav-h) + 4rem) }
.page-title { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 900; color: var(--charcoal); line-height: 1.15; margin-bottom: .75rem }
.page-desc { font-size: 1.1rem; color: var(--g500); max-width: 540px; margin: 0 auto; line-height: 1.7 }

/* ═══════════════════════════════════
   MAP SECTION
   ═══════════════════════════════════ */
.map-section { background: var(--white); padding-bottom: 2rem }
.map-wrapper { width: 100%; height: 450px; border-radius: 16px; overflow: hidden; margin: 0 auto; max-width: var(--max-w); padding: 0 2rem }
.map-wrapper iframe { width: 100%; height: 100%; border: none; border-radius: 16px }
.map-tabs { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem }
.map-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: 100px; border: 2px solid var(--g200); background: var(--white); color: var(--g500); font-family: var(--body); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .3s var(--ease) }
.map-tab:hover { border-color: var(--burgundy); color: var(--burgundy) }
.map-tab.active { background: var(--burgundy); border-color: var(--burgundy); color: var(--white) }
.map-tab.active svg { color: var(--white) }
.map-tab svg { color: var(--g500); transition: color .3s var(--ease) }
.map-tab:hover svg { color: var(--burgundy) }

/* ═══════════════════════════════════
   STORE CARDS
   ═══════════════════════════════════ */
.store-cards { padding: 4rem 0 6rem; background: var(--cream) }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem }
.store-card { background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid var(--g200); transition: all .3s var(--ease); position: relative }
.store-card:hover, .store-card.highlighted { border-color: var(--burgundy); box-shadow: 0 12px 40px rgba(109,0,22,.1); transform: translateY(-4px) }
.store-card-accent { height: 5px; background: linear-gradient(90deg, var(--burgundy), var(--gold)); opacity: 0; transition: opacity .3s var(--ease) }
.store-card:hover .store-card-accent, .store-card.highlighted .store-card-accent { opacity: 1 }
.store-card-body { padding: 2rem }
.store-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem }
.store-icon { width: 52px; height: 52px; background: rgba(109,0,22,.06); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--burgundy); flex-shrink: 0 }
.store-card-header h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--charcoal) }
.store-details { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem }
.store-detail { display: flex; gap: .75rem; align-items: flex-start }
.store-detail svg { color: var(--burgundy); flex-shrink: 0; margin-top: 2px }
.store-detail strong { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--burgundy); display: block; margin-bottom: .25rem }
.store-detail p { font-size: .9rem; color: var(--g500); line-height: 1.5 }
.store-actions { display: flex; gap: .75rem; flex-wrap: wrap }
.store-actions .btn { flex: 1; justify-content: center; min-width: 140px }

/* ═══════════════════════════════════
   PARTNERS DETAIL PAGE
   ═══════════════════════════════════ */
.partners-detail { padding: 2rem 0 6rem }
.partner-detail-card { display: flex; gap: 2.5rem; background: var(--white); border: 1px solid var(--g200); border-radius: 20px; padding: 3rem; margin-bottom: 2rem; transition: all .3s var(--ease) }
.partner-detail-card:hover { border-color: var(--burgundy); box-shadow: 0 12px 40px rgba(109,0,22,.06) }
.partner-detail-icon { width: 72px; height: 72px; background: rgba(109,0,22,.06); border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--burgundy); flex-shrink: 0 }
.partner-logo-wrap { width: 90px; height: 90px; background: var(--white); border-radius: 18px; overflow: hidden; border: 1px solid var(--g200) }
.partner-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 8px }
.partner-detail-content h2 { font-family: var(--display); font-size: 1.8rem; font-weight: 700; color: var(--charcoal); margin-bottom: .75rem }
.partner-detail-desc { font-size: 1rem; color: var(--g500); line-height: 1.8; margin-bottom: 1.5rem }
.partner-detail-features { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem }
.partner-feature { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 500; color: var(--charcoal) }
.partner-feature svg { color: var(--burgundy); flex-shrink: 0 }

/* ═══════════════════════════════════
   FRANCHISE / CONTACT PAGE
   ═══════════════════════════════════ */
.why-section { padding: 2rem 0 4rem }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem }
.why-card { background: var(--cream); border-radius: 16px; padding: 2rem; text-align: center; transition: all .3s var(--ease) }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(109,0,22,.06) }
.why-icon { width: 56px; height: 56px; background: rgba(109,0,22,.08); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--burgundy); margin: 0 auto 1.25rem }
.why-card h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--charcoal); margin-bottom: .5rem }
.why-card p { font-size: .9rem; color: var(--g500); line-height: 1.6 }

.contact-section { padding: 4rem 0 6rem; background: var(--cream) }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start }
.contact-info h2 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; color: var(--charcoal); margin-bottom: 1rem }
.contact-info > p { font-size: 1rem; color: var(--g500); line-height: 1.7; margin-bottom: 2rem }
.contact-details { display: flex; flex-direction: column; gap: 1rem }
.contact-detail-item { display: flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--charcoal) }
.contact-detail-item svg { color: var(--burgundy); flex-shrink: 0 }

.contact-form { background: var(--white); border: 1px solid var(--g200); border-radius: 20px; padding: 2.5rem }
.form-group { margin-bottom: 1.25rem }
.form-group label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--burgundy); margin-bottom: .5rem }
.form-group input,
.form-group textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--g200); border-radius: 10px; font-family: var(--body); font-size: .95rem; color: var(--charcoal); background: var(--white); transition: border-color .3s var(--ease); outline: none }
.form-group input:focus,
.form-group textarea:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(109,0,22,.06) }
.form-group textarea { resize: vertical; min-height: 120px }
.btn-full { width: 100%; justify-content: center; padding: 1rem }
.form-note { font-size: .8rem; color: var(--g500); text-align: center; margin-top: 1rem }

/* ═══════════════════════════════════
   TERMS & CONDITIONS
   ═══════════════════════════════════ */
.terms-content { padding: 2rem 0 6rem }
.terms-body { max-width: 800px; margin: 0 auto }
.terms-body h2 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--charcoal); margin: 2.5rem 0 .75rem }
.terms-body h2:first-child { margin-top: 0 }
.terms-body p { font-size: .95rem; color: var(--g500); line-height: 1.8; margin-bottom: 1rem }
.terms-body a { color: var(--burgundy); text-decoration: underline }

/* ═══════════════════════════════════
   REVEAL
   ═══════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease-out, transform .8s ease-out }
.reveal.visible { opacity: 1; transform: translateY(0) }

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 1024px) { .footer-cols { grid-template-columns: 1fr 1fr } }
@media (max-width: 768px) {
  .nav-links { display: none }
  .nav-toggle { display: flex }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--white); padding: 2rem; gap: 1rem; border-top: 1px solid var(--g200); box-shadow: 0 12px 40px rgba(0,0,0,.1) }
  .nav-links.open .lang-switcher { margin-left: 0; padding-left: 0; border-left: none; padding-top: 1rem; border-top: 1px solid var(--g200) }
  .hero-full-logo { max-width: 300px }
  .panels-layer { flex-direction: row }
  .panel { flex: 1; min-height: auto }
  .panel-cta { opacity: 1; transform: translateY(0) }
  .partner-detail-card { flex-direction: column; padding: 2rem }
  .why-grid { grid-template-columns: 1fr }
  .contact-wrapper { grid-template-columns: 1fr }
  .contact-form { padding: 1.5rem }
  .product-nav-links { gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: .5rem }
  .product-nav-link { padding: .5rem 1rem; font-size: .8rem }
  .product-section-label { flex-direction: column; text-align: center }
  .product-section-label p { max-width: 100% }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem }
  .map-wrapper { height: 300px; padding: 0 1rem }
  .map-tabs { flex-direction: column; gap: .5rem }
  .store-grid { grid-template-columns: 1fr }
  .store-actions { flex-direction: column }
  .store-actions .btn { min-width: auto }
  .intro-buttons { flex-direction: column; align-items: center }
  .loc-grid { grid-template-columns: 1fr }
  .partner-grid { grid-template-columns: 1fr }
  .footer-cols { grid-template-columns: 1fr; gap: 2rem }
  .footer-bar { flex-direction: column; gap: .5rem; text-align: center }
}