/* ================================
   DNA Visual Token Baseline
   Ensures visual_profile / spacing / heading / emphasis tokens
   are not only printed in HTML classes, but also consumed by CSS.
================================ */

.homepage {
  --dna-section-gap: 48px;
  --dna-heading-size: clamp(1.8rem, 4vw, 3rem);
  --dna-heading-weight: 800;
  --dna-card-radius: 18px;
  --dna-card-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  --dna-hero-accent: var(--accent-cyan);
  --dna-panel-border: rgba(255, 255, 255, 0.08);
}

.dna-spacing-compact .homepage,
.homepage--spacing-compact {
  --dna-section-gap: 32px;
}

.dna-spacing-spacious .homepage,
.homepage--spacing-spacious {
  --dna-section-gap: 64px;
}

.dna-spacing-airy .homepage,
.homepage--spacing-airy {
  --dna-section-gap: 72px;
}

.dna-heading-strong .homepage,
.homepage--heading-strong {
  --dna-heading-size: clamp(2rem, 4.5vw, 3.3rem);
  --dna-heading-weight: 800;
}

.dna-heading-punchy .homepage,
.homepage--heading-punchy {
  --dna-heading-size: clamp(2.2rem, 5vw, 3.5rem);
  --dna-heading-weight: 900;
}

.dna-heading-editorial .homepage,
.homepage--heading-editorial {
  --dna-heading-size: clamp(1.9rem, 4vw, 3rem);
  --dna-heading-weight: 700;
}

.dna-visual-trust-dense .homepage,
.homepage--visual-trust-dense {
  --dna-card-radius: 16px;
  --dna-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  --dna-panel-border: rgba(0, 240, 255, 0.14);
}

.dna-visual-app-bold .homepage,
.homepage--visual-app-bold {
  --dna-card-radius: 24px;
  --dna-card-shadow: 0 22px 50px rgba(0, 240, 255, 0.18);
  --dna-hero-accent: var(--accent-magenta);
  --dna-panel-border: rgba(255, 0, 85, 0.18);
}

.dna-visual-editorial-clean .homepage,
.homepage--visual-editorial-clean {
  --dna-card-radius: 14px;
  --dna-card-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
  --dna-panel-border: rgba(255, 255, 255, 0.06);
}

.dna-emphasis-trust-badges .vibe-hero-buttons .vibe-btn-primary,
.homepage--emphasis-trust-badges .vibe-hero-buttons .vibe-btn-primary {
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.22), 0 10px 28px rgba(0, 240, 255, 0.18);
}

.dna-emphasis-qr-cta .vibe-hero-sidecard,
.homepage--emphasis-qr-cta .vibe-hero-sidecard {
  border: 1px solid rgba(255, 0, 85, 0.24);
  box-shadow: 0 18px 36px rgba(255, 0, 85, 0.14);
}

.dna-emphasis-content-cards .content-hub-section .vibe-article-card,
.homepage--emphasis-content-cards .content-hub-section .vibe-article-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.homepage .vibe-hero-section,
.homepage .homepage-featured,
.homepage .homepage-faq,
.homepage .trust-module,
.homepage .payment-module,
.homepage .social-proof-module,
.homepage .comparison-module,
.homepage .recommendation-module,
.homepage .content-hub-section,
.homepage .shared-top-strip-module {
  margin-top: var(--dna-section-gap);
}

.homepage .vibe-hero-title,
.homepage .section-header h2,
.homepage .homepage-faq h2 {
  font-size: var(--dna-heading-size);
  font-weight: var(--dna-heading-weight);
}

.homepage .vibe-hero-section,
.homepage .trust-module,
.homepage .payment-module,
.homepage .social-proof-module,
.homepage .comparison-module,
.homepage .recommendation-module,
.homepage .content-hub-section,
.homepage .homepage-faq,
.homepage .homepage-featured {
  border-radius: var(--dna-card-radius);
}

.homepage .vibe-hero-sidecard,
.homepage .vibe-step-card,
.homepage .vibe-article-card,
.homepage .vibe-counter-item,
.homepage .stat-item {
  border-radius: var(--dna-card-radius);
  box-shadow: var(--dna-card-shadow);
  border: 1px solid var(--dna-panel-border);
}

.vibe-hero-section--download-focus .vibe-hero-kicker {
  color: var(--accent-magenta);
}

.vibe-hero-section--guide-focus .vibe-hero-kicker {
  color: var(--warning);
}

.vibe-hero-section--stats-banner .vibe-hero-kicker,
.vibe-hero-section--trust-badges .vibe-hero-kicker {
  color: var(--accent-cyan);
}

.homepage-featured--visual-app-bold .vibe-game-card,
.dna-visual-app-bold .homepage-featured .vibe-game-card {
  transform: translateY(0);
}

.homepage-featured--visual-app-bold .vibe-game-card:hover,
.dna-visual-app-bold .homepage-featured .vibe-game-card:hover {
  transform: translateY(-6px);
}

.homepage-featured--visual-editorial-clean .vibe-game-card,
.dna-visual-editorial-clean .homepage-featured .vibe-game-card {
  background: rgba(255, 255, 255, 0.03);
}

.homepage-featured--visual-trust-dense .vibe-game-card,
.dna-visual-trust-dense .homepage-featured .vibe-game-card {
  border: 1px solid rgba(0, 240, 255, 0.14);
}