/* ══════════════════════════════════════════════════════════════
   NAVBAR BALANCE + INTERACTIVE ENHANCEMENTS (v5 overhaul)
   ══════════════════════════════════════════════════════════════ */

/* ── Navbar proper balance with CSS Grid ─────────────── */
.navbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 !important;
}
.navbar-logo {
  display: flex; align-items: center; text-decoration: none;
  flex-shrink: 0; padding-right: 24px;
  border-right: 1px solid rgba(0,0,0,0.07);
}
.navbar.dark .navbar-logo { border-right-color: rgba(255,255,255,0.08); }

.navbar-links {
  display: flex !important; gap: 4px !important;
  align-items: center; justify-content: center;
  padding: 0 16px;
}
.navbar-links a {
  font-size: 0.82rem !important; letter-spacing: 0.07em !important;
  color: var(--black-3); padding: 8px 14px !important; border-radius: 8px;
  transition: color 0.2s, background 0.2s; white-space: nowrap;
  position: relative;
}
.navbar-links a:hover { color: var(--black); background: rgba(0,0,0,0.04); }
.navbar-links a.active { color: var(--black); font-weight: 600; }
.navbar-links a.active::after {
  content: ''; position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%); width: 16px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.navbar.dark .navbar-links a { color: rgba(255,255,255,0.6); }
.navbar.dark .navbar-links a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.navbar.dark .navbar-links a.active { color: var(--gold); }

.navbar-right {
  display: flex !important; align-items: center; gap: 10px !important;
  flex-shrink: 0; padding-left: 20px;
  border-left: 1px solid rgba(0,0,0,0.07);
}
.navbar.dark .navbar-right { border-left-color: rgba(255,255,255,0.08); }

/* BUY NOW in navbar - stylish gold pill */
.navbar .btn-primary {
  background: var(--gold) !important; color: var(--black) !important;
  border-color: var(--gold) !important; border-radius: 100px !important;
  padding: 9px 20px !important; font-size: 0.8rem !important;
  letter-spacing: 0.1em !important; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(245,179,0,0.30);
  transition: transform 0.2s, box-shadow 0.2s !important;
  animation: none !important;
}
.navbar .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(245,179,0,0.45) !important;
  background: #e6a800 !important;
}

/* ── HERO SLIDE for full background images ────────── */
.hero-slide--1[style*="background-image"],
.hero-slide--3[style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
}
.hero-slide--1[style*="background-image"] .slide-text {
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  border: 1px solid rgba(245,179,0,0.22) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4) !important;
}
/* Ensure text is white on dark slide 1 bg image */
.hero-slide--1[style*="background-image"] .slide-headline { color: var(--white) !important; }
.hero-slide--1[style*="background-image"] .slide-headline em { color: var(--gold) !important; }
.hero-slide--1[style*="background-image"] .slide-sub { color: rgba(255,255,255,0.75) !important; }
.hero-slide--1[style*="background-image"] .slide-eyebrow { color: var(--gold) !important; }
.hero-slide--1[style*="background-image"] .slide-price-old { color: rgba(255,255,255,0.5) !important; }
.hero-slide--1[style*="background-image"] .slide-price-now { color: var(--gold) !important; }
.hero-slide--3[style*="background-image"] .slide-text {
  background: rgba(8,6,2,0.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(245,179,0,0.22) !important;
}
.hero-slide { transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1) !important; }

/* ── GOLD BUTTON SHIMMER ──────────────────────────── */
@keyframes btnShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.btn-primary.gold {
  background: linear-gradient(90deg,#F5B300,#e6a800,#ffcc33,#e6a800,#F5B300) !important;
  background-size: 200% !important;
  animation: btnShimmer 3s linear infinite;
}
.btn-primary.gold:hover { animation-duration: 1.5s; }

/* CTA section pulse */
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,179,0,0.4); }
  50%     { box-shadow: 0 0 0 14px rgba(245,179,0,0); }
}
.cta-btn-row .btn-primary.gold { animation: ctaPulse 2.5s ease-out infinite, btnShimmer 3s linear infinite; }

/* ── PRODUCT CARD MICRO-INTERACTIONS ──────────────── */
.product-card { position: relative; overflow: hidden; }
.product-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg,rgba(245,179,0,0.06) 0%,transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.product-card:hover::before { opacity: 1; }
.product-card:hover { transform: translateY(-10px) scale(1.01) !important; box-shadow: 0 32px 80px rgba(0,0,0,0.12) !important; }

/* ── WHY CARDS HOVER ──────────────────────────────── */
.why-card { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, border-color 0.3s !important; }
.why-card:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.08) !important; border-color: var(--gold) !important; }
.why-icon-wrap { transition: transform 0.3s var(--ease-spring), color 0.3s; }
.why-card:hover .why-icon-wrap { transform: scale(1.15) rotate(-5deg); color: var(--gold-dark); }

/* ── VIDEO CARDS ──────────────────────────────────── */
.video-card { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s !important; }
.video-card:hover { transform: translateY(-6px) scale(1.02) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important; }
.video-play-btn { transition: transform 0.3s var(--ease-spring), background 0.2s !important; }
.video-card:hover .video-play-btn { transform: scale(1.2) !important; background: var(--gold) !important; color: var(--black) !important; }

/* ── TICKER ───────────────────────────────────────── */
.ticker-wrap { background: linear-gradient(90deg,#0d0d0d,#1a1500,#0d0d0d) !important; border-top: 1px solid rgba(245,179,0,0.15); border-bottom: 1px solid rgba(245,179,0,0.15); }

/* ── HERO PROGRESS GLOW ───────────────────────────── */
.hero-progress { background: linear-gradient(90deg,var(--gold-dark),var(--gold),#ffdd55) !important; box-shadow: 0 0 12px rgba(245,179,0,0.6) !important; }

/* ── HERO DOTS ────────────────────────────────────── */
.hero-dot.active { width: 28px !important; border-radius: 4px !important; }

/* ── HERO RING PULSE ──────────────────────────────── */
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.05); opacity: 0.9; } }
.slide-product-ring { animation: ringPulse 4s ease-in-out infinite !important; }

/* ── HERO COUNTER ─────────────────────────────────── */
.hero-counter-num { color: rgba(255,255,255,0.5) !important; }
.hero-counter-line { background: linear-gradient(to bottom,rgba(255,255,255,0.4),transparent) !important; }

/* ── MAP COUNTRY CHIPS ────────────────────────────── */
.map-country-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 14px; border-radius: 100px;
  font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.8); transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.map-country-chip:hover { background: rgba(245,179,0,0.2); border-color: rgba(245,179,0,0.4); color: var(--gold); }

/* ── FEATURE CARD HOVER ───────────────────────────── */
.feature-card { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, border-color 0.3s !important; }
.feature-card:hover:not(.active) { transform: translateY(-4px) !important; border-color: rgba(245,179,0,0.3) !important; }
.feature-card.active { box-shadow: 0 16px 48px rgba(245,179,0,0.12) !important; }

/* ── SIDE PANEL ITEM GLOW ─────────────────────────── */
.side-product-item:hover { box-shadow: 0 0 0 1px var(--gold), 0 4px 20px rgba(245,179,0,0.15) !important; }

/* ── COMPARISON TABLE ROW HOVER ───────────────────── */
.compare-table tbody tr { transition: background 0.2s; }
.compare-table tbody tr:hover td { background: rgba(245,179,0,0.04) !important; }
.compare-table tbody tr:hover td.featured { background: rgba(245,179,0,0.12) !important; }

/* ── AXIOM DIFF CALLOUT ───────────────────────────── */
.axiom-diff-callout {
  background: linear-gradient(135deg,rgba(194,178,128,0.12) 0%,rgba(245,179,0,0.06) 100%);
  border: 1px solid rgba(194,178,128,0.3); border-radius: 12px;
  padding: 18px 22px; margin: 18px 0; display: flex; gap: 14px; align-items: flex-start;
}
.axiom-diff-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.axiom-diff-text h4 {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.05em;
  margin-bottom: 5px; color: var(--axiom-tan);
}
.axiom-diff-text p { font-size: 0.86rem; line-height: 1.6; color: rgba(255,255,255,0.65); }
.axiom-diff-text.light p { color: var(--black-3); }
.axiom-diff-text.light h4 { color: var(--gold-dark); }

/* ── RESPONSIVE NAVBAR ────────────────────────────── */
@media (max-width: 900px) {
  .navbar { grid-template-columns: auto auto !important; justify-content: space-between !important; }
  .navbar-links { display: none !important; }
  .navbar-right { border-left: none !important; padding-left: 0 !important; }
  .lang-switcher { display: none !important; }
}
@media (max-width: 600px) {
  .navbar .btn-primary { display: none !important; }
}

/* ── LOADING SKELETON FOR IMAGES ──────────────────── */
.product-gallery-img, .video-card-thumb { background: #f0ece3 !important; }
img { min-height: 4px; }


/* ── Global questionnaire step visibility ── */
.q-step { display: none; flex-direction: column; gap: 12px; }
.q-step.active { display: flex !important; }
.q-option { border: 2px solid #e8e4dc; border-radius: 10px; padding: 12px 16px; background: #fff; font-size: .9rem; color: #333; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; width: 100%; }
.q-option:hover, .q-option.selected { border-color: var(--gold); background: #fffbef; }
.q-option.selected { font-weight: 600; }
.q-label { font-family: var(--font-label, monospace); font-size: .68rem; letter-spacing: .2em; color: #aaa; text-transform: uppercase; }
.q-question { font-family: var(--font-display, Georgia, serif); font-size: 1.25rem; font-weight: 700; color: #111; line-height: 1.3; }
.q-options { display: flex; flex-direction: column; gap: 8px; }
.q-nav { display: flex; gap: 10px; margin-top: 4px; }
.q-next { background: #111; color: #fff; padding: 11px 22px; border: none; border-radius: 8px; font-family: var(--font-label, monospace); font-size: .82rem; letter-spacing: .1em; cursor: pointer; font-weight: 700; margin-left: auto; }
.q-next:hover { background: var(--gold); color: #111; }
.q-back { background: #f4f4f4; color: #555; padding: 11px 22px; border: none; border-radius: 8px; font-family: var(--font-label, monospace); font-size: .82rem; letter-spacing: .1em; cursor: pointer; }
.q-back:hover { background: #e8e4dc; }
.q-input { width: 100%; padding: 13px 16px; border: 2px solid #e8e4dc; border-radius: 10px; font-size: 1rem; box-sizing: border-box; }
.q-input:focus { outline: none; border-color: var(--gold); }