/* ─── BUNDLE SPOTLIGHT ─── */
.bundle-section { background: var(--color-ink); color: var(--color-paper); }

.bundle-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.bundle-content { display: flex; flex-direction: column; gap: var(--space-5); }
.bundle-content .section-eyebrow { color: var(--color-gold); }

.bundle-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-paper);
  line-height: 1.2;
}
.bundle-subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: rgba(250,247,242,0.6);
  font-weight: 400;
}
.bundle-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(250,247,242,0.75);
  line-height: 1.8;
}

.bundle-includes, .bundle-bonuses {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bundle-includes li, .bundle-bonuses li {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: rgba(250,247,242,0.85);
}
.bundle-includes li:first-child {
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-1);
}

.bundle-price-block {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.bundle-price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 900;
  color: var(--color-gold);
  line-height: 1;
}
.bundle-original {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: rgba(250,247,242,0.4);
}
.bundle-php {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: rgba(250,247,242,0.5);
  width: 100%;
}
.bundle-note {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: rgba(250,247,242,0.5);
}

/* Bundle Visual */
.bundle-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.bundle-deck {
  position: relative;
  width: 240px;
  height: 300px;
}
.deck-card {
  position: absolute;
  width: 180px;
  height: 240px;
  background: rgba(250,247,242,0.08);
  border: 1px solid rgba(250,247,242,0.15);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  left: calc(var(--i, 0) * 8px);
  top: calc(var(--i, 0) * -8px);
  transition: all var(--transition-slow);
}
.deck-card--top {
  background: rgba(200,150,62,0.15);
  border-color: var(--color-gold);
  z-index: 5;
}
.bundle-deck:hover .deck-card {
  transform: rotate(calc((var(--i, 0) - 2) * 8deg)) translateY(-8px);
}

/* Countdown Timer */
.bundle-countdown { text-align: center; }
.countdown-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: rgba(250,247,242,0.7);
  margin-bottom: var(--space-3);
}
.countdown-timer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.countdown-unit span:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-gold);
  min-width: 72px;
  text-align: center;
  background: rgba(200,150,62,0.1);
  border: 1px solid rgba(200,150,62,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  line-height: 1;
}
.countdown-unit span:last-child {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: rgba(250,247,242,0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.countdown-sep {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

/* Scarcity Bar */
.bundle-scarcity { width: 100%; text-align: center; }
.bundle-scarcity p {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: rgba(250,247,242,0.75);
  margin-bottom: var(--space-2);
}
.scarcity-bar {
  height: 6px;
  background: rgba(250,247,242,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin: var(--space-2) 0;
}
.scarcity-fill {
  height: 100%;
  width: 85%;
  background: linear-gradient(90deg, var(--color-gold), #FF6B6B);
  border-radius: 3px;
  animation: scarcityPulse 2s ease-in-out infinite;
}
@keyframes scarcityPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.scarcity-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(250,247,242,0.5);
}
.bundle-reg-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: rgba(250,247,242,0.4);
  margin-left: var(--space-1);
}
.countdown-extended {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  text-align: center;
  margin-top: var(--space-2);
}

/* Comparison Table */
.comparison-section {
  background: var(--color-paper);
  padding: var(--space-12) 0;
}
.comparison-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-8);
}
.comparison-table-wrap { overflow-x: auto; }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
}
.comparison-table th,
.comparison-table td {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  text-align: center;
}
.comparison-table th {
  background: var(--color-cream);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.comparison-table td:first-child { text-align: left; color: var(--color-ink); }
.comparison-table .col-bundle {
  background: rgba(200,150,62,0.06);
  color: var(--color-gold);
  font-weight: 700;
  border-color: rgba(200,150,62,0.3);
}
.comparison-table th.col-bundle {
  background: var(--color-gold);
  color: var(--color-ink);
  border-color: var(--color-gold);
}
.comparison-table .price-row td { font-weight: 700; }
.comparison-table tr:hover td { background: rgba(200,150,62,0.04); }

@media (max-width: 1024px) {
  .bundle-grid { grid-template-columns: 1fr; }
  .bundle-visual { display: none; }
}