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

:root {
  --bg: #fafaf7;
  --bg-2: #f3f1ea;
  --surface: #ffffff;
  --navy: #0a1f44;
  --navy-2: #112752;
  --gold: #c89b3c;
  --gold-2: #d4a94a;
  --accent: #c84e3a;

  /* Neon — all gold, three intensities */
  /* PLATINUM — dim gold */
  --neon-dim:        #d4a94a;
  --neon-dim-2:      #e8c57a;
  --neon-dim-soft:   rgba(212, 169, 74, 0.2);
  --neon-dim-glow:   rgba(212, 169, 74, 0.32);

  /* GOLD — medium gold */
  --neon-gold:       #e8b85c;
  --neon-gold-2:     #f4d37a;
  --neon-gold-soft:  rgba(232, 184, 92, 0.4);
  --neon-gold-glow:  rgba(232, 184, 92, 0.62);

  /* VIP — brightest gold */
  --neon-bright:     #f4d37a;
  --neon-bright-2:   #ffe4a3;
  --neon-bright-soft:rgba(244, 211, 122, 0.6);
  --neon-bright-glow:rgba(244, 211, 122, 0.85);

  --ink: #0a1f44;
  --ink-2: #4a5368;
  --ink-3: #8b92a3;
  --line: #e5e3da;
  --line-2: #d6d3c6;

  --radius: 14px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 2px 10px rgba(10, 31, 68, 0.05);
  --shadow: 0 8px 28px rgba(10, 31, 68, 0.08);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(232, 184, 92, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(10, 31, 68, 0.10), transparent 60%),
    radial-gradient(ellipse 40% 40% at 100% 0%,  rgba(232, 184, 92, 0.07), transparent 60%),
    radial-gradient(ellipse 40% 40% at 0%   0%,  rgba(10, 31, 68, 0.06),  transparent 60%);
  pointer-events: none; z-index: 0;
}

/* Topographic/contour wave pattern */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    /* Bottom-left contour cluster */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%230a1f44' stroke-opacity='0.11' stroke-width='1'%3E%3Cpath d='M-50 380 Q 100 320 260 360 T 600 330'/%3E%3Cpath d='M-50 340 Q 120 290 280 330 T 600 300'/%3E%3Cpath d='M-50 300 Q 140 260 300 300 T 600 270'/%3E%3Cpath d='M-50 260 Q 160 230 320 270 T 600 240'/%3E%3Cpath d='M-50 220 Q 180 200 340 240 T 600 210'/%3E%3Cpath d='M-50 180 Q 200 170 360 210 T 600 180'/%3E%3Cpath d='M-50 140 Q 220 140 380 180 T 600 150'/%3E%3Cpath d='M-50 100 Q 240 110 400 150 T 600 120'/%3E%3C/g%3E%3C/svg%3E"),
    /* Bottom-right contour cluster */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%23c89b3c' stroke-opacity='0.18' stroke-width='1'%3E%3Cpath d='M0 340 Q 180 380 340 330 T 650 360'/%3E%3Cpath d='M0 300 Q 200 350 360 300 T 650 330'/%3E%3Cpath d='M0 260 Q 220 320 380 270 T 650 300'/%3E%3Cpath d='M0 220 Q 240 290 400 240 T 650 270'/%3E%3Cpath d='M0 180 Q 260 260 420 210 T 650 240'/%3E%3Cpath d='M0 140 Q 280 230 440 180 T 650 210'/%3E%3Cpath d='M0 100 Q 300 200 460 150 T 650 180'/%3E%3C/g%3E%3C/svg%3E"),
    /* Small diamond/dot accents */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 18 L22 20 L20 22 L18 20 Z' fill='%23c89b3c' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-position:
    bottom left,
    bottom right,
    0 0;
  background-size:
    640px 440px,
    640px 440px,
    auto;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
  pointer-events: none; z-index: 0;
}

main, .topbar, .foot { position: relative; z-index: 1; }

/* ===== Topbar ===== */
.topbar {
  display: flex; justify-content: flex-start; align-items: center;
  padding: 22px 52px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { width: 46px; height: 46px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 26px; color: var(--navy); letter-spacing: 0.14em; }
.logo-est { font-size: 9px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.3em; margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 38px; }
.nav a { text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; transition: opacity 0.2s; }
.nav a.accent { color: var(--accent); }
.nav a.nav-cta { color: var(--navy); }
.nav a:hover { opacity: 0.7; }

/* ===== Hero ===== */
main { padding-bottom: 60px; }
.hero { max-width: 1920px; margin: 0 auto; padding: 50px 24px 30px; text-align: center; }
.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: clamp(36px, 5vw, 52px);
  color: var(--navy); letter-spacing: -0.01em; margin-bottom: 14px;
  position: relative; display: inline-block;
}
.hero h1::before, .hero h1::after {
  content: ''; position: absolute; top: 50%;
  width: 34px; height: 1px; background: var(--gold);
}
.hero h1::before { right: calc(100% + 18px); }
.hero h1::after  { left: calc(100% + 18px); }
.lede { font-size: 14px; color: var(--ink-2); max-width: 760px; margin: 0 auto 40px; line-height: 1.7; }

/* ===== Cards row ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 32px;
}
.card {
  position: relative;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230a1f44' stroke-opacity='0.05' stroke-width='0.8'%3E%3Cpath d='M-10 220 Q 60 195 130 215 T 260 200'/%3E%3Cpath d='M-10 245 Q 80 220 150 240 T 260 225'/%3E%3C/g%3E%3C/svg%3E"),
    rgba(255, 255, 255, 0.82);
  background-size: 100% 100%, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, 0 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  text-align: center;
  cursor: pointer;
  font-family: inherit; color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.4s, border-color 0.4s;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(232, 184, 92, 0.3); }
.card:focus-visible { outline: 2px solid var(--neon-gold); outline-offset: 2px; }

.icon-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--navy);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.icon-wrap svg { width: 28px; height: 28px; }

.card .tier {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--ink-2); margin-bottom: 14px;
  transition: color 0.4s;
}
.card .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em; margin-bottom: 10px;
  transition: color 0.4s;
  white-space: nowrap;
}
.card .sub {
  font-size: 13px; color: var(--ink-2);
  margin-bottom: 12px;
  transition: color 0.4s;
  line-height: 1.35;
}
.card .sub.strong { font-weight: 600; color: var(--ink); }
.card .divider {
  width: 30px; height: 2px; background: var(--navy);
  margin: 6px auto 12px; transition: background 0.4s;
}
.card .view-btn {
  display: inline-block; width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--navy); letter-spacing: 0.05em;
  margin-top: 14px;
  transition: all 0.3s;
}
.card:hover .view-btn { background: var(--navy); color: #fff; }

/* ===== Active state — base navy ===== */
.card.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 14px 40px rgba(10, 31, 68, 0.22);
}
.card.active .icon-wrap { background: rgba(232, 184, 92, 0.12); color: var(--neon-gold-2); }
.card.active .tier { color: var(--neon-gold-2); }
.card.active .price { color: #fff; }
.card.active .sub { color: rgba(255, 255, 255, 0.78); }
.card.active .sub.strong { color: #fff; }
.card.active .divider { background: var(--neon-gold-2); }
.card.active .view-btn { background: var(--neon-gold); color: var(--navy); border-color: var(--neon-gold); font-weight: 700; }

/* ===== Progressive gold glow — from €5,000 (dimmest) to €1M (brightest) ===== */
/* Level 1 — STANDARD (€5K) */
.card[data-tier="standard"].active {
  border-color: rgba(212, 169, 74, 0.28);
  box-shadow:
    0 0 0 1px rgba(212, 169, 74, 0.10),
    0 0 10px rgba(212, 169, 74, 0.12),
    0 12px 30px rgba(10, 31, 68, 0.20);
}

/* Level 2 — STANDARD PLUS (€10K) */
.card[data-tier="standard-plus"].active {
  border-color: rgba(212, 169, 74, 0.36);
  box-shadow:
    0 0 0 1px rgba(212, 169, 74, 0.14),
    0 0 14px rgba(212, 169, 74, 0.16),
    0 12px 32px rgba(10, 31, 68, 0.22);
}

/* Level 3 — SILVER (€20K) */
.card[data-tier="silver"].active {
  border-color: rgba(212, 169, 74, 0.45);
  box-shadow:
    0 0 0 1px rgba(212, 169, 74, 0.18),
    0 0 18px rgba(212, 169, 74, 0.20),
    0 0 34px rgba(212, 169, 74, 0.06),
    0 14px 36px rgba(10, 31, 68, 0.24);
}

/* Level 4 — GOLD (€50K) */
.card[data-tier="gold"].active {
  border-color: var(--neon-gold);
  box-shadow:
    0 0 0 1px rgba(232, 184, 92, 0.26),
    0 0 24px rgba(232, 184, 92, 0.30),
    0 0 50px rgba(232, 184, 92, 0.12),
    0 14px 40px rgba(10, 31, 68, 0.25);
  animation: glow-4 3.8s ease-in-out infinite;
}

/* Level 5 — PREMIUM ELITE (€100K) */
.card[data-tier="premium"].active {
  border-color: rgba(232, 184, 92, 0.6);
  box-shadow:
    0 0 0 1px rgba(232, 184, 92, 0.34),
    0 0 28px rgba(232, 184, 92, 0.36),
    0 0 60px rgba(232, 184, 92, 0.16),
    0 14px 40px rgba(10, 31, 68, 0.26);
  animation: glow-5 3.5s ease-in-out infinite;
}

/* Level 6 — PLATINUM (€250K) */
.card[data-tier="platinum"].active {
  border-color: rgba(244, 211, 122, 0.68);
  box-shadow:
    0 0 0 1px rgba(244, 211, 122, 0.42),
    0 0 32px rgba(232, 184, 92, 0.42),
    0 0 68px rgba(232, 184, 92, 0.20),
    0 16px 42px rgba(10, 31, 68, 0.27);
  animation: glow-6 3.2s ease-in-out infinite;
}

/* Level 7 — DIAMOND (€500K) */
.card[data-tier="diamond"].active {
  border-color: rgba(244, 211, 122, 0.82);
  box-shadow:
    0 0 0 1.5px rgba(244, 211, 122, 0.54),
    0 0 38px rgba(244, 211, 122, 0.48),
    0 0 80px rgba(232, 184, 92, 0.26),
    0 16px 46px rgba(10, 31, 68, 0.28);
  animation: glow-7 3.0s ease-in-out infinite;
}

/* Level 8 — VIP (€1M+) */
.card[data-tier="vip"].active {
  border-color: var(--neon-bright);
  box-shadow:
    0 0 0 1.5px var(--neon-bright-glow),
    0 0 44px var(--neon-bright-soft),
    0 0 95px rgba(244, 211, 122, 0.38),
    0 18px 50px rgba(10, 31, 68, 0.3);
  animation: glow-8 2.8s ease-in-out infinite;
}

/* VIP gets brighter price/icon glow */
.card[data-tier="vip"].active .icon-wrap {
  background: rgba(244, 211, 122, 0.2);
  color: var(--neon-bright-2);
  box-shadow: 0 0 24px rgba(255, 228, 163, 0.6), inset 0 0 16px rgba(255, 228, 163, 0.28);
}
.card[data-tier="vip"].active .tier { color: var(--neon-bright-2); }
.card[data-tier="vip"].active .price { text-shadow: 0 0 18px rgba(255, 228, 163, 0.55); }
.card[data-tier="vip"].active .divider { background: var(--neon-bright-2); box-shadow: 0 0 10px var(--neon-bright-glow); }
.card[data-tier="vip"].active .view-btn { background: var(--neon-bright); color: var(--navy); border-color: var(--neon-bright); box-shadow: 0 0 20px rgba(244, 211, 122, 0.5); }

.card[data-tier="diamond"].active .price,
.card[data-tier="platinum"].active .price { text-shadow: 0 0 14px rgba(244, 211, 122, 0.4); }

/* Pulse keyframes per level (higher tier = brighter peak & faster) */
@keyframes glow-4 {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,184,92,0.26), 0 0 24px rgba(232,184,92,0.30), 0 0 50px rgba(232,184,92,0.12), 0 14px 40px rgba(10,31,68,0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(232,184,92,0.36), 0 0 30px rgba(232,184,92,0.38), 0 0 60px rgba(232,184,92,0.18), 0 14px 40px rgba(10,31,68,0.25); }
}
@keyframes glow-5 {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,184,92,0.34), 0 0 28px rgba(232,184,92,0.36), 0 0 60px rgba(232,184,92,0.16), 0 14px 40px rgba(10,31,68,0.26); }
  50%      { box-shadow: 0 0 0 1px rgba(232,184,92,0.46), 0 0 34px rgba(232,184,92,0.44), 0 0 70px rgba(232,184,92,0.22), 0 14px 40px rgba(10,31,68,0.26); }
}
@keyframes glow-6 {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244,211,122,0.42), 0 0 32px rgba(232,184,92,0.42), 0 0 68px rgba(232,184,92,0.20), 0 16px 42px rgba(10,31,68,0.27); }
  50%      { box-shadow: 0 0 0 1px rgba(244,211,122,0.55), 0 0 40px rgba(232,184,92,0.50), 0 0 80px rgba(232,184,92,0.26), 0 16px 42px rgba(10,31,68,0.27); }
}
@keyframes glow-7 {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(244,211,122,0.54), 0 0 38px rgba(244,211,122,0.48), 0 0 80px rgba(232,184,92,0.26), 0 16px 46px rgba(10,31,68,0.28); }
  50%      { box-shadow: 0 0 0 2px   rgba(244,211,122,0.68), 0 0 48px rgba(244,211,122,0.58), 0 0 95px rgba(232,184,92,0.34), 0 16px 46px rgba(10,31,68,0.28); }
}
@keyframes glow-8 {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--neon-bright-glow), 0 0 44px var(--neon-bright-soft), 0 0 95px rgba(244,211,122,0.38), 0 18px 50px rgba(10,31,68,0.3); }
  50%      { box-shadow: 0 0 0 2px   var(--neon-bright-2),   0 0 58px var(--neon-bright-glow), 0 0 115px rgba(244,211,122,0.48), 0 18px 50px rgba(10,31,68,0.3); }
}

/* ===== Click hint ===== */
.click-hint {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--ink-3);
  margin: 6px 0 40px;
}
.click-hint svg { color: var(--neon-gold); flex-shrink: 0; }

/* ===== Detail panel ===== */
.detail {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: stretch;
}

.detail-side {
  position: relative;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.4s;
  grid-row: span 2;
}
.detail-side::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none; transition: background 0.4s;
}
.back-btn {
  align-self: flex-start;
  background: none; border: none;
  color: rgba(255,255,255,0.85);
  font-size: 11px; font-family: inherit; font-weight: 500;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  transition: color 0.2s, opacity 0.2s;
  opacity: 0.8;
}
.back-btn:hover { color: #fff; opacity: 1; }
.side-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin: 4px 0 14px;
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.side-icon svg { width: 24px; height: 24px; }
.side-tier {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.85); margin-bottom: 8px;
  transition: color 0.4s;
}
.side-price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700; font-size: 30px;
  color: #fff; letter-spacing: -0.01em;
  margin-bottom: 6px;
  transition: text-shadow 0.4s;
  white-space: nowrap;
}
.side-sub {
  font-size: 11.5px; color: rgba(255,255,255,0.8);
}
.side-sub.strong { font-weight: 600; color: #fff; }
.side-divider {
  width: 22px; height: 2px; background: #fff;
  margin: 10px 0;
  transition: background 0.4s, box-shadow 0.4s;
}
.side-cta {
  margin-top: 16px; width: 100%;
  padding: 10px;
  background: #fff; color: var(--navy);
  border: none; border-radius: 6px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; cursor: pointer;
  transition: all 0.3s;
}
.side-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.25); }

/* Neon variants on side panel */
.detail-side.neon-gold { box-shadow: 0 0 0 1px var(--neon-gold-soft), 0 0 30px rgba(232, 184, 92, 0.22), var(--shadow); }
.detail-side.neon-gold::before { background: radial-gradient(circle at 50% 0%, rgba(232, 184, 92, 0.22), transparent 60%); }
.detail-side.neon-gold .side-icon { background: rgba(232,184,92,0.14); color: var(--neon-gold-2); box-shadow: 0 0 20px rgba(244,211,122,0.4), inset 0 0 14px rgba(244,211,122,0.2); }
.detail-side.neon-gold .side-tier { color: var(--neon-gold-2); }
.detail-side.neon-gold .side-price { text-shadow: 0 0 16px rgba(244,211,122,0.3); }
.detail-side.neon-gold .side-divider { background: var(--neon-gold-2); box-shadow: 0 0 6px var(--neon-gold-glow); }
.detail-side.neon-gold .side-cta { background: var(--neon-gold); color: var(--navy); }

.detail-side.neon-dim { box-shadow: 0 0 0 1px var(--neon-dim-soft), 0 0 20px rgba(212,169,74,0.14), var(--shadow); }
.detail-side.neon-dim::before { background: radial-gradient(circle at 50% 0%, rgba(212,169,74,0.14), transparent 60%); }
.detail-side.neon-dim .side-icon { background: rgba(212,169,74,0.1); color: var(--neon-dim-2); box-shadow: 0 0 14px rgba(232,197,122,0.26), inset 0 0 10px rgba(232,197,122,0.12); }
.detail-side.neon-dim .side-tier { color: var(--neon-dim-2); }
.detail-side.neon-dim .side-price { text-shadow: 0 0 12px rgba(232,197,122,0.22); }
.detail-side.neon-dim .side-divider { background: var(--neon-dim-2); box-shadow: 0 0 4px var(--neon-dim-glow); }
.detail-side.neon-dim .side-cta { background: rgba(212,169,74,0.9); color: var(--navy); }

.detail-side.neon-bright { box-shadow: 0 0 0 1.5px var(--neon-bright-glow), 0 0 45px var(--neon-bright-soft), 0 0 100px rgba(244,211,122,0.32), var(--shadow); }
.detail-side.neon-bright::before { background: radial-gradient(circle at 50% 0%, rgba(244,211,122,0.36), transparent 60%); }
.detail-side.neon-bright .side-icon { background: rgba(244,211,122,0.2); color: var(--neon-bright-2); box-shadow: 0 0 26px rgba(255,228,163,0.6), inset 0 0 16px rgba(255,228,163,0.28); }
.detail-side.neon-bright .side-tier { color: var(--neon-bright-2); }
.detail-side.neon-bright .side-price { text-shadow: 0 0 20px rgba(255,228,163,0.55); }
.detail-side.neon-bright .side-divider { background: var(--neon-bright-2); box-shadow: 0 0 10px var(--neon-bright-glow); }
.detail-side.neon-bright .side-cta { background: var(--neon-bright); color: var(--navy); box-shadow: 0 0 18px rgba(244,211,122,0.5); }

/* ===== Detail grid — 6 columns ===== */
.detail-grid {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  box-shadow: var(--shadow-sm);
}
.col { padding: 4px 14px; border-right: 1px solid var(--line); }
.col:last-child { border-right: none; }
.col h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--navy); text-transform: uppercase;
  margin-bottom: 14px;
}
.col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.col li {
  position: relative;
  padding-left: 14px;
  font-size: 12px; color: var(--ink-2);
  line-height: 1.5;
}
.col li::before {
  content: ''; position: absolute;
  left: 0; top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.col li.dash { padding-left: 0; color: var(--ink-3); }
.col li.dash::before { display: none; }

/* ===== Common strip ===== */
.common-strip {
  grid-column: 2;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.common-title {
  font-size: 12px; font-weight: 700;
  color: var(--navy); letter-spacing: 0.02em;
  flex-shrink: 0;
}
.common-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  flex: 1;
}
.common-items span {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2);
  white-space: nowrap;
}
.common-items svg { color: var(--gold); flex-shrink: 0; }

/* ===== Footer ===== */
.foot {
  max-width: 1920px; margin: 40px auto 0;
  padding: 20px 24px 28px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-3);
}

/* ===== Flip structure (desktop pass-through) ===== */
.card-inner { display: contents; }
.card-front { display: contents; }
.card-back  { display: none; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .detail-grid { grid-template-columns: repeat(3, 1fr); }
  .col { padding: 10px 14px; border-right: 1px solid var(--line); }
  .col:nth-child(3n) { border-right: none; }
  .col:nth-child(n+4) { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 10px; }
}
@media (max-width: 1050px) {
  .detail { grid-template-columns: 1fr; }
  .detail-side { grid-row: auto; }
  .common-strip { grid-column: 1; }
}

/* ===== Mobile: flip cards ===== */
@media (max-width: 780px) {
  .topbar { padding: 18px 24px; justify-content: center; }
  .hero { padding: 34px 20px 14px; }
  .hero h1::before, .hero h1::after { display: none; }
  .cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .foot { padding: 20px; flex-direction: column; gap: 8px; text-align: center; }

  .detail { display: none; }

  /* Reset active colours on mobile front — cards stay in default colour */
  .card.active {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: inherit !important;
    box-shadow: var(--shadow-sm) !important;
    animation: none !important;
  }
  .card.active .icon-wrap { background: var(--bg-2); color: var(--navy); box-shadow: none; }
  .card.active .tier     { color: var(--ink-2); }
  .card.active .price    { color: var(--navy); text-shadow: none; }
  .card.active .sub      { color: var(--ink-2); }
  .card.active .sub.strong { color: var(--ink); }
  .card.active .divider  { background: var(--navy); box-shadow: none; }
  .card.active .view-btn { background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: none; font-weight: 600; }

  /* Turn each card into a 3D flip container */
  .card {
    perspective: 1400px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 380px;
    overflow: visible;
  }
  .card:hover { transform: none; box-shadow: none; }

  .card-inner {
    display: block;
    position: relative; width: 100%; height: 100%;
    min-height: 380px;
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .card.flipped .card-inner { transform: rotateY(180deg); }

  .card-front, .card-back {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius);
    padding: 24px 16px 18px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; overflow: hidden;
  }
  .card-front {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
  .card-back {
    background: var(--navy); color: #fff;
    transform: rotateY(180deg);
    align-items: stretch;
    text-align: left;
    padding: 20px 18px;
    border: 1px solid var(--navy);
    box-shadow: 0 14px 40px rgba(10, 31, 68, 0.25);
  }

  /* Tiered neon on back */
  .card[data-tier="gold"] .card-back {
    border-color: var(--neon-gold);
    box-shadow: 0 0 0 1px var(--neon-gold-soft), 0 0 30px var(--neon-gold-soft), 0 14px 40px rgba(10,31,68,0.25);
  }
  .card[data-tier="platinum"] .card-back {
    border-color: rgba(212,169,74,0.5);
    box-shadow: 0 0 0 1px var(--neon-dim-soft), 0 0 18px var(--neon-dim-soft), 0 14px 40px rgba(10,31,68,0.25);
  }
  .card[data-tier="vip"] .card-back {
    border-color: var(--neon-bright);
    box-shadow: 0 0 0 1.5px var(--neon-bright-glow), 0 0 40px var(--neon-bright-soft), 0 0 90px rgba(244,211,122,0.32), 0 18px 50px rgba(10,31,68,0.3);
  }

  .card:not(.flipped) .card-back,
  .card.flipped .card-front {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0s linear 0.42s, visibility 0s linear 0.42s;
  }

  .cb-head {
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    display: flex; flex-direction: column; gap: 4px;
  }
  .cb-tier {
    font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
    color: rgba(255,255,255,0.85);
  }
  .card[data-tier="gold"]     .cb-tier { color: var(--neon-gold-2); }
  .card[data-tier="platinum"] .cb-tier { color: var(--neon-dim-2); }
  .card[data-tier="vip"]      .cb-tier { color: var(--neon-bright-2); }
  .cb-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 700; color: #fff;
    letter-spacing: -0.01em;
  }
  .cb-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding-right: 2px;
  }
  .cb-scroll::-webkit-scrollbar { width: 2px; }
  .cb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
  .cb-sec h5 {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55); text-transform: uppercase;
    margin-bottom: 5px;
  }
  .card[data-tier="gold"]     .cb-sec h5 { color: var(--neon-gold-2); }
  .card[data-tier="platinum"] .cb-sec h5 { color: var(--neon-dim-2); }
  .card[data-tier="vip"]      .cb-sec h5 { color: var(--neon-bright-2); }
  .cb-sec ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
  .cb-sec li {
    position: relative; padding-left: 13px;
    font-size: 11.5px; line-height: 1.4;
    color: rgba(255,255,255,0.9);
  }
  .cb-sec li::before {
    content: ''; position: absolute;
    left: 0; top: 6px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }
  .card[data-tier="gold"]     .cb-sec li::before { background: var(--neon-gold); box-shadow: 0 0 4px rgba(232,184,92,0.5); }
  .card[data-tier="platinum"] .cb-sec li::before { background: var(--neon-dim); box-shadow: 0 0 3px rgba(212,169,74,0.38); }
  .card[data-tier="vip"]      .cb-sec li::before { background: var(--neon-bright); box-shadow: 0 0 5px rgba(244,211,122,0.7); }
  .cb-hint {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.15);
    font-size: 10px; color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .cb-arrow { color: var(--gold); font-size: 13px; }
  .card[data-tier="gold"]     .cb-arrow { color: var(--neon-gold-2); }
  .card[data-tier="platinum"] .cb-arrow { color: var(--neon-dim-2); }
  .card[data-tier="vip"]      .cb-arrow { color: var(--neon-bright-2); }
}

@media (max-width: 460px) {
  .cards { grid-template-columns: 1fr; }
  .card, .card-inner { min-height: 400px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}