/* ================================================================
   VistaVoyage — Premium v2.0  |  Authority. Trust. Convert.
   Drop this AFTER styles.css and premium.css (overrides both)
   ================================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ================================================================
   DESIGN TOKENS — Complete override
   ================================================================ */
:root {
  /* Palette */
  --navy:          #04111F;
  --navy-mid:      #071929;
  --navy-light:    #0C2640;
  --blue:          #0F4C81;
  --blue-bright:   #1A6FB5;
  --sky:           #38BDF8;
  --sky-glow:      rgba(56,189,248,0.18);
  --gold:          #F5A623;
  --gold-light:    #FFD080;
  --gold-glow:     rgba(245,166,35,0.30);
  --white:         #FFFFFF;
  --off-white:     #F0F5FA;
  --muted:         #6B8099;

  /* Semantic tokens */
  --primary:       var(--navy);
  --primary-rgb:   4,17,31;
  --accent:        var(--gold);
  --accent-rgb:    245,166,35;
  --accent-alt:    var(--sky);
  --bg:            var(--off-white);
  --bg-alt:        #FFFFFF;
  --bg-soft:       #E8EEF5;
  --text:          #0D1B2A;
  --text-light:    #3D5166;
  --border:        rgba(15,76,129,0.12);

  /* Shadows */
  --shadow-xs:  0 1px 4px rgba(4,17,31,0.08);
  --shadow-sm:  0 4px 16px rgba(4,17,31,0.10);
  --shadow-md:  0 12px 36px rgba(4,17,31,0.16);
  --shadow-lg:  0 24px 64px rgba(4,17,31,0.22);
  --shadow-xl:  0 40px 90px rgba(4,17,31,0.30);
  --shadow-glow-gold: 0 0 40px rgba(245,166,35,0.45);
  --shadow-glow-sky:  0 0 40px rgba(56,189,248,0.35);

  /* Gradients */
  --grad-navy:   linear-gradient(135deg, #04111F 0%, #071929 40%, #0C2640 75%, #0F3860 100%);
  --grad-gold:   linear-gradient(135deg, #F5A623 0%, #E8900A 55%, #D4800A 100%);
  --grad-sky:    linear-gradient(135deg, #38BDF8 0%, #0EA5E9 60%, #0284C7 100%);
  --grad-glass:  linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%);

  /* Fonts */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Outfit', system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-display);

  /* Geometry */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    0.18s;
  --dur-base:    0.32s;
  --dur-slow:    0.55s;
}

/* ================================================================
   BASE & TYPOGRAPHY
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
p, li { font-family: var(--font-body); }

/* Premium scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold), var(--sky));
  border-radius: 20px;
}
::selection { background: var(--gold); color: #fff; }

/* ================================================================
   ANIMATED BACKGROUND — ambient mesh on dark sections
   ================================================================ */
.vv-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.vv-ambient::before,
.vv-ambient::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: ambientFloat 12s var(--ease-in-out) infinite alternate;
}
.vv-ambient::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(56,189,248,0.20) 0%, transparent 70%);
  top: -200px; right: -100px;
  animation-delay: 0s;
  opacity: 0.8;
}
.vv-ambient::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,166,35,0.16) 0%, transparent 70%);
  bottom: -150px; left: -80px;
  animation-delay: -6s;
  opacity: 0.7;
}
@keyframes ambientFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.08); }
  66%  { transform: translate(-20px, 20px) scale(0.95); }
  100% { transform: translate(30px, 10px) scale(1.04); }
}

/* ================================================================
   NAVIGATION — premium glass
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(4, 17, 31, 0.85);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(56,189,248,0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04),
              0 4px 24px rgba(0,0,0,0.35),
              0 0 0 1px rgba(56,189,248,0.06) inset;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(4, 17, 31, 0.97);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 80px rgba(56,189,248,0.06);
}

/* Animated gradient line under nav */
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56,189,248,0.5) 30%,
    rgba(245,166,35,0.5) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: navLineShimmer 4s linear infinite;
}
@keyframes navLineShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.brand-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
}

.primary-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(220,235,255,0.85);
  transition: color var(--dur-fast);
  position: relative;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--grad-gold);
  border-radius: 2px;
  transition: width var(--dur-base) var(--ease-out);
}
.primary-nav a:hover { color: #fff; }
.primary-nav a:hover::after { width: 100%; }

/* Nav CTA — glowing pill */
.btn.btn--primary,
.primary-nav .nav-cta a,
.primary-nav li:last-child a {
  background: var(--grad-gold) !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  border-radius: var(--radius-full) !important;
  padding: 9px 22px !important;
  font-size: 0.84rem !important;
  opacity: 1 !important;
  box-shadow: 0 4px 20px var(--gold-glow), 0 0 0 1px rgba(255,255,255,0.15) inset !important;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
.btn.btn--primary::after,
.primary-nav .nav-cta a::after,
.primary-nav li:last-child a::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn.btn--primary:hover::after,
.primary-nav .nav-cta a:hover::after,
.primary-nav li:last-child a:hover::after { left: 160%; }
.btn.btn--primary:hover,
.primary-nav .nav-cta a:hover,
.primary-nav li:last-child a:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 36px var(--gold-glow), 0 0 60px rgba(245,166,35,0.25) !important;
}

/* ================================================================
   HERO — maximum drama
   ================================================================ */
.hero,
.hero-search.vv-hero-upgrade {
  position: relative;
  background: var(--grad-navy) !important;
  overflow: hidden;
}

/* Animated mesh grid */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56,189,248,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridShift 20s linear infinite;
  z-index: 0;
}
@keyframes gridShift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(60px); }
}

/* Orbs */
.hero::after {
  content: '';
  position: absolute;
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(56,189,248,0.15) 0%,
    rgba(15,76,129,0.10) 40%,
    transparent 70%
  );
  top: -300px; right: -200px;
  animation: heroOrb 15s var(--ease-in-out) infinite alternate;
  z-index: 0;
  pointer-events: none;
}
@keyframes heroOrb {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-60px, 40px) scale(1.1); }
  100% { transform: translate(30px, -20px) scale(0.95); }
}

.hero .container,
.hero-search.vv-hero-upgrade .container {
  position: relative;
  z-index: 2;
}

/* Hero title — italic gold highlight */
.hero h1,
.hero-title,
.vv-hero-copy h1 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-size: clamp(2.8rem, 6vw, 4.6rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.5px !important;
  text-shadow: 0 4px 40px rgba(0,0,0,0.4) !important;
}

/* Animated word highlight — span.vv-highlight wraps key words */
.vv-highlight {
  position: relative;
  display: inline-block;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
}
.vv-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px; left: -4px; right: -4px;
  height: 8px;
  background: rgba(245,166,35,0.20);
  border-radius: 4px;
  z-index: -1;
}

/* ================================================================
   BUTTONS — full system
   ================================================================ */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  border-radius: var(--radius-full);
  padding: 14px 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Primary — gold */
.btn--primary {
  background: var(--grad-gold) !important;
  color: var(--navy) !important;
  box-shadow: 0 6px 28px var(--gold-glow), 0 0 0 1px rgba(255,255,255,0.18) inset;
}
.btn--primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 48px rgba(245,166,35,0.55), 0 0 80px rgba(245,166,35,0.20);
  color: var(--navy) !important;
}
.btn--primary:active {
  transform: translateY(-1px) scale(0.99);
}

/* Secondary — glass outline */
.btn--ghost,
.btn--secondary {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.btn--ghost:hover,
.btn--secondary:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}

/* Sky accent */
.btn--sky {
  background: var(--grad-sky) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px var(--sky-glow);
}
.btn--sky:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(56,189,248,0.45);
}

/* ================================================================
   TRUST STRIP — authority bar
   ================================================================ */
.vv-trust-authority {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  margin: 20px 0;
}
.vv-trust-authority .trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(220,235,255,0.9);
  white-space: nowrap;
}
.vv-trust-authority .trust-item .trust-icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 6px rgba(245,166,35,0.5));
}
.vv-trust-authority .trust-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
}

/* Animated live counter badge */
.vv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: 0.3px;
}
.vv-live-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.25);
  animation: livePulse 1.8s ease infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(56,189,248,0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(56,189,248,0.08); }
}

/* ================================================================
   PARTNER LOGOS STRIP — bigger, better
   ================================================================ */
.partner-logos {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0 !important;
}
.partner-logos img[alt*="Travelstart"],
.partner-logos img[alt*="Skyscanner"],
.partner-logos img[alt*="Google Flights"],
.partner-logos img[alt*="Booking"] {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.75;
  filter: grayscale(30%);
  transition: opacity var(--dur-base), filter var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.partner-logos img:hover {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
  transform: scale(1.08) !important;
}

/* ================================================================
   CARD SYSTEM — elevated materials
   ================================================================ */

/* Base card */
.value-card,
.dest-card,
.blog-card,
.tool-card,
.deal-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(15,76,129,0.10) !important;
  background: linear-gradient(160deg, #fff 0%, #f5f9fd 100%) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) !important;
  position: relative;
  overflow: hidden;
}

/* Glowing top accent bar on hover */
.value-card::before,
.dest-card::before,
.blog-card::before,
.deal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
  border-radius: 3px 3px 0 0;
  z-index: 2;
}
.value-card:hover::before,
.dest-card:hover::before,
.blog-card:hover::before,
.deal-card:hover::before { transform: scaleX(1); }

.value-card:hover,
.blog-card:hover,
.tool-card:hover,
.deal-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(56,189,248,0.20) !important;
}
.dest-card:hover {
  transform: translateY(-12px) scale(1.015) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Dest card image zoom */
.dest-card .dest-media img {
  transition: transform 0.6s var(--ease-out);
}
.dest-card:hover .dest-media img {
  transform: scale(1.06);
}

.dest-title {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}

/* ================================================================
   FLIGHT DEAL CARDS (vv-deal-card)
   ================================================================ */
.vv-deal-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(15,76,129,0.12) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) !important;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
}
.vv-deal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,166,35,0.03) 0%, rgba(56,189,248,0.04) 100%);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.vv-deal-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(245,166,35,0.30) !important;
}
.vv-deal-card:hover::after { opacity: 1; }

/* Price text */
.vv-price {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  color: var(--navy) !important;
  line-height: 1 !important;
}

/* ================================================================
   WHY SECTION — dark panels with glass
   ================================================================ */
.section--why,
#why-vistavoyage {
  background: linear-gradient(160deg, #04111F 0%, #071929 45%, #0C2640 80%, #0F3055 100%) !important;
  position: relative;
  overflow: hidden;
}
.section--why > *, #why-vistavoyage > * { position: relative; z-index: 1; }

.panel {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(20px);
  transition:
    background var(--dur-base),
    border-color var(--dur-base),
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) !important;
}
.panel:hover {
  background: rgba(255,255,255,0.095) !important;
  border-color: rgba(56,189,248,0.30) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.30), 0 0 0 1px rgba(56,189,248,0.15) !important;
}
.panel h3 {
  font-family: var(--font-display) !important;
  color: #fff !important;
}

/* Icon wrap — glowing */
.icon-wrap {
  background: linear-gradient(135deg, #0F4C81, #1A6FB5) !important;
  box-shadow: 0 6px 24px rgba(15,76,129,0.50), 0 0 0 1px rgba(56,189,248,0.20) inset !important;
  border-radius: 16px !important;
  width: 52px !important; height: 52px !important;
  transition: box-shadow var(--dur-base) !important;
}
.panel:hover .icon-wrap {
  box-shadow: 0 8px 32px rgba(56,189,248,0.45), 0 0 0 1px rgba(56,189,248,0.40) inset !important;
}

/* ================================================================
   AIRLINE CARDS
   ================================================================ */
.dest-card[href*="airlines"],
.vv-logo-card,
.airlines-grid .dest-card {
  border-radius: 20px !important;
  border: 1px solid rgba(15,76,129,0.10) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) !important;
  overflow: hidden;
}
.vv-logo-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Airline logo sizing */
.dest-card .dest-media img[alt="FlySafair"],
.dest-card .dest-media img[alt="Lift"],
.dest-card .dest-media img[alt="CemAir"],
.dest-card .dest-media img[alt="Airlink"],
.dest-card .dest-media img[alt="South African Airways"] {
  object-fit: contain !important;
  max-height: 72px !important;
  width: auto !important;
  padding: 12px;
  transition: transform 0.4s var(--ease-spring) !important;
}
.dest-card:hover .dest-media img { transform: scale(1.08) !important; }

/* ================================================================
   TRUST / REVIEWS SECTION
   ================================================================ */
#vv-reviews {
  background: linear-gradient(180deg, #f5f9fd 0%, #fff 100%) !important;
}

.vv-rev-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(15,76,129,0.10) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #fff !important;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) !important;
}
.vv-rev-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Star ratings */
.vv-rev-card [style*="★"] {
  color: var(--gold) !important;
  font-size: 1rem;
}

/* ================================================================
   NEWSLETTER SECTION
   ================================================================ */
.section--newsletter {
  background: linear-gradient(135deg, #04111F 0%, #071929 40%, #0C2640 70%, #0F3860 100%) !important;
  position: relative;
  overflow: hidden;
}
.section--newsletter::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.16) 0%, transparent 65%);
  bottom: -250px; left: -150px;
  pointer-events: none;
  animation: ambientFloat 10s var(--ease-in-out) infinite alternate;
}
.section--newsletter::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.14) 0%, transparent 65%);
  top: -100px; right: -100px;
  pointer-events: none;
  animation: ambientFloat 8s var(--ease-in-out) infinite alternate-reverse;
}
.section--newsletter > * { position: relative; z-index: 1; }

.nl-form input[type=email] {
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-body) !important;
  color: #fff !important;
  backdrop-filter: blur(12px);
  transition: border-color var(--dur-base), box-shadow var(--dur-base) !important;
}
.nl-form input[type=email]:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-glow) !important;
  outline: none;
}
.nl-form input[type=email]::placeholder { color: rgba(255,255,255,0.40) !important; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background: linear-gradient(180deg, #02090F 0%, #040E18 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.footer-title {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--sky) !important;
}
.footer-nav a {
  font-size: 0.88rem !important;
  color: rgba(180,205,230,0.65) !important;
  transition: color var(--dur-fast) !important;
}
.footer-nav a:hover { color: #fff !important; }
.brand-text { font-family: var(--font-display) !important; }

/* ================================================================
   SECTION TITLES
   ================================================================ */
.section-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  position: relative !important;
}

/* Animated underline on section titles */
.section--destinations .section-title::after,
.section--values .section-title::after,
.section--blog .section-title::after,
.section--airlines .section-title::after {
  content: '' !important;
  display: block !important;
  width: 56px !important;
  height: 4px !important;
  margin-top: 12px !important;
  background: var(--grad-gold) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px var(--gold-glow) !important;
  animation: underlineGrow 0.8s var(--ease-out) both;
}
@keyframes underlineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 56px; opacity: 1; }
}

/* ================================================================
   CRO DEAL ENGINE CARDS
   ================================================================ */
#vv-deals-engine {
  background: linear-gradient(180deg, #fff 0%, #f0f5fa 100%) !important;
}
#vv-deals-engine h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ================================================================
   SCROLL REVEAL — intersection observer hook
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .vv-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 0.65s var(--ease-out),
      transform 0.65s var(--ease-out);
  }
  .vv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .vv-reveal-delay-1 { transition-delay: 0.08s; }
  .vv-reveal-delay-2 { transition-delay: 0.16s; }
  .vv-reveal-delay-3 { transition-delay: 0.24s; }
  .vv-reveal-delay-4 { transition-delay: 0.32s; }
  .vv-reveal-delay-5 { transition-delay: 0.40s; }
  .vv-reveal-delay-6 { transition-delay: 0.48s; }
}

/* ================================================================
   GRADIENT BORDER CARDS (booking widget area)
   ================================================================ */
.vv-gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
  background: #fff;
  z-index: 0;
}
.vv-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(135deg, var(--gold), var(--sky), var(--gold));
  background-size: 300% 300%;
  z-index: -1;
  animation: borderRotate 4s linear infinite;
}
@keyframes borderRotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ================================================================
   STICKY HERO CTA BAR (bottom)
   ================================================================ */
#vv-sticky-cta,
.vv-cro-inline {
  background: linear-gradient(90deg, #04111F 0%, #071929 50%, #04111F 100%) !important;
  border-top: 1px solid rgba(56,189,248,0.15) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.40) !important;
}

/* Urgency text */
.vv-urgency {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1px !important;
  animation: urgencyPulse 3s ease infinite;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* Bottom airline logos strip */
.vv-trust-strip img {
  height: 24px !important;
  width: auto !important;
  object-fit: contain !important;
  background: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  filter: none;
  opacity: 1;
  transition: opacity var(--dur-fast);
}
.vv-trust-strip img:hover {
  opacity: 0.85;
  filter: none;
}

/* ================================================================
   PARTNER PANEL (widget trust strip)
   ================================================================ */
.vv-partner-panel {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(12px) !important;
}

/* ================================================================
   MOBILE NAV
   ================================================================ */
.mobile-nav {
  background: linear-gradient(160deg, #04111F 0%, #071929 60%, #0C2640 100%) !important;
  border-right: 1px solid rgba(56,189,248,0.10);
}
.mobile-nav a {
  font-family: var(--font-display) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: rgba(220,235,255,0.9) !important;
  transition: color var(--dur-fast), padding-left var(--dur-fast) !important;
}
.mobile-nav a:hover {
  color: #fff !important;
  padding-left: 8px !important;
}

/* ================================================================
   AUTHORITY BADGE (✅ verified / partner)
   ================================================================ */
.vv-authority-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(220,235,255,0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(56,189,248,0.10);
}
.vv-authority-badge strong { color: #fff; font-weight: 800; }

/* ================================================================
   JAVASCRIPT-POWERED FEATURES (hooks for premium.js)
   ================================================================ */

/* Magnetic button effect — JS adds .is-magnetic class */
.btn.is-magnetic {
  transition: transform 0.15s ease !important;
}

/* Cursor follow highlight */
.vv-spotlight {
  position: fixed;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(245,166,35,0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9998;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

/* ================================================================
   RESPONSIVE POLISH
   ================================================================ */
@media (max-width: 768px) {
  h1 { font-size: clamp(2.2rem, 9vw, 3rem) !important; }
  h2 { font-size: clamp(1.7rem, 6vw, 2.2rem) !important; }

  .value-card, .dest-card, .blog-card, .tool-card, .deal-card {
    border-radius: 20px !important;
  }

  .btn { padding: 13px 26px; font-size: 0.88rem; }

  .partner-logos img[alt*="Travelstart"],
  .partner-logos img[alt*="Skyscanner"] {
    height: 36px !important;
  }

  /* Kill heavy animations on mobile */
  .hero::before { display: none; }
  .vv-ambient::before,
  .vv-ambient::after { filter: blur(50px); }
}

@media (max-width: 480px) {
  .vv-trust-authority { gap: 10px 16px; }
  .vv-trust-authority .trust-divider { display: none; }
}

/* ================================================================
   REDUCE MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero::before, .hero::after { display: none !important; }
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.gradient-text {
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gold  { color: var(--gold) !important; }
.text-sky   { color: var(--sky) !important; }
.text-white { color: #fff !important; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}