/**
 * ═══════════════════════════════════════════════════════════════
 * NEXUS CASINO — Shell Page Layout System
 * ═══════════════════════════════════════════════════════════════
 *
 * SCOPE: Layout and component styles for all shell pages
 *        (casino.php, earn.php, bank.php, profile.php, orders.php).
 *
 * RESPONSIBILITIES:
 *   - Bottom navigation bar (fixed, glass-morphism, 5 tabs)
 *   - App header for shell pages
 *   - Main content layout (max-width, padding, scroll-padding)
 *   - Casino lobby: hero banner, game grid, game cards, badges
 *   - Earn page: earnings overview, daily streak, missions,
 *     referral block, task rows
 *   - Panel components (shared panels for shell context)
 *
 * LOAD ORDER: 2nd — loaded on shell pages AFTER tokens.css.
 *             Never loaded alongside game-shared.css.
 *
 * PROVIDES:
 *   .bottom-nav, .nav-item, .nav-icon, .nav-label
 *   .app-header, .header-title, .header-balance
 *   .main-content
 *   .hero-banner
 *   .game-grid, .game-card, .game-card-icon, .game-card-name
 *   .badge-hot, .badge-new, .badge-free
 *   .earnings-overview, .stat-grid, .stat-item
 *   .streak-calendar, .streak-day
 *   .mission-card, .mission-progress
 *   .referral-block, .referral-input
 *   .task-row
 *
 * CONSTRAINTS:
 *   - No !important
 *   - No aspect-ratio
 *   - Every var() includes a fallback value
 *   - 44px minimum touch targets on all interactive elements
 *   - Telegram WebView compatible (375px–480px)
 *
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.main-content {
  position: relative;
  max-width: var(--max-width, 480px);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-lg, 16px);
  padding-top: calc(var(--header-height, 56px) + var(--safe-top, 0px) + var(--space-md, 12px));
  padding-bottom: calc(var(--nav-height, 64px) + var(--safe-bottom, 0px) + var(--space-2xl, 32px));
  scroll-padding-bottom: 96px;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   APP HEADER (SHELL PAGES)
   ═══════════════════════════════════════════════════════════════ */

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad, 16px);
  padding-top: var(--safe-top, 0px);
  background: rgba(5, 5, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  z-index: 100;
}

.header-title {
  font-family: var(--font-display, 'Outfit', 'Space Grotesk', sans-serif);
  font-size: var(--fs-md, 16px);
  font-weight: var(--fw-bold, 700);
  color: var(--text, #f0f0f8);
  letter-spacing: 0.5px;
}

.header-balance {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', monospace);
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-bold, 700);
  color: var(--accent, #00e5ff);
  font-variant-numeric: tabular-nums;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  background: var(--accent-dim, rgba(0, 229, 255, 0.08));
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: var(--radius-full, 9999px);
  min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height, 64px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: var(--safe-bottom, 0px);
  background: rgba(5, 5, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  z-index: 1000;
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  text-decoration: none;
  color: var(--text-muted, #7a7a9e);
  transition: color var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  cursor: pointer;
}

.nav-item.active {
  color: var(--accent, #00e5ff);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--accent, #00e5ff);
  border-radius: 0 0 var(--radius-xs, 8px) var(--radius-xs, 8px);
  box-shadow: 0 0 8px var(--accent-glow, rgba(0, 229, 255, 0.25)),
    0 0 16px var(--accent-dim, rgba(0, 229, 255, 0.08));
}

.nav-icon {
  font-size: 20px;
  line-height: 1;
}

.nav-label {
  font-size: 10px;
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Backdrop-filter fallback */
@supports not (backdrop-filter: blur(1px)) {
  .bottom-nav {
    background: var(--card-solid, #090918);
    border-top: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  }

  .app-header {
    background: var(--card-solid, #090918);
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER (CASINO LOBBY)
   ═══════════════════════════════════════════════════════════════ */

.hero-banner {
  position: relative;
  padding: var(--space-xl, 24px) var(--space-lg, 16px);
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-xl, 24px);
  margin-bottom: var(--space-lg, 16px);
  overflow: hidden;
}

.hero-banner::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl, 24px);
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(124, 58, 237, 0.4),
      transparent 40%,
      transparent 60%,
      rgba(0, 229, 255, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-banner-title {
  font-family: var(--font-display, 'Outfit', 'Space Grotesk', sans-serif);
  font-size: var(--fs-xl, 24px);
  font-weight: var(--fw-black, 900);
  color: var(--text, #f0f0f8);
  margin-bottom: var(--space-xs, 4px);
}

.hero-banner-subtitle {
  font-size: var(--fs-sm, 12px);
  color: var(--text-secondary, #9a9abe);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   GAME GRID (CASINO LOBBY)
   ═══════════════════════════════════════════════════════════════ */

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 420px) {
  .game-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   GAME CARD COMPONENT
   ═══════════════════════════════════════════════════════════════ */

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-lg, 16px) var(--space-sm, 8px);
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-md, 16px);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.game-card:hover {
  border-color: var(--border-hover, rgba(124, 58, 237, 0.25));
}

.game-card:active {
  transform: scale(0.95);
  border-color: var(--border-active, rgba(0, 229, 255, 0.4));
  box-shadow: 0 0 12px var(--border-glow, rgba(0, 229, 255, 0.15));
}

.game-card-icon {
  font-size: 30px;
  line-height: 1;
  transition: transform var(--dur-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.game-card:hover .game-card-icon {
  transform: scale(1.08);
}

.game-card-name {
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-bold, 700);
  color: var(--text, #f0f0f8);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   GAME BADGES
   ═══════════════════════════════════════════════════════════════ */

.game-card-badge {
  position: absolute;
  top: var(--space-sm, 8px);
  right: var(--space-sm, 8px);
  padding: 2px 6px;
  border-radius: var(--radius-xs, 8px);
  font-size: 9px;
  font-weight: var(--fw-black, 900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.badge-hot {
  background: var(--danger-dim, rgba(255, 45, 85, 0.10));
  color: var(--danger, #ff2d55);
  border: 1px solid rgba(255, 45, 85, 0.25);
}

.badge-new {
  background: var(--success-dim, rgba(0, 230, 118, 0.10));
  color: var(--success, #00e676);
  border: 1px solid rgba(0, 230, 118, 0.25);
}

.badge-free {
  background: var(--warning-dim, rgba(255, 179, 0, 0.08));
  color: var(--warning, #ffb300);
  border: 1px solid rgba(255, 179, 0, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   EARN PAGE — EARNINGS OVERVIEW
   ═══════════════════════════════════════════════════════════════ */

.earnings-overview {
  position: relative;
  padding: var(--space-xl, 24px) var(--space-lg, 16px);
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-xl, 24px);
  margin-bottom: var(--space-lg, 16px);
  text-align: center;
}

.earnings-overview::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl, 24px);
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(124, 58, 237, 0.35),
      transparent 40%,
      transparent 60%,
      rgba(0, 229, 255, 0.35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.earnings-total {
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', monospace);
  font-size: var(--fs-2xl, 32px);
  font-weight: var(--fw-black, 900);
  color: var(--text, #f0f0f8);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-sm, 8px);
}

.earnings-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  padding: var(--space-xs, 4px) var(--space-md, 12px);
  background: var(--accent-dim, rgba(0, 229, 255, 0.08));
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--fs-xs, 11px);
  font-weight: var(--fw-bold, 700);
  color: var(--accent, #00e5ff);
  margin-bottom: var(--space-lg, 16px);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm, 8px);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-md, 12px) var(--space-sm, 8px);
  background: rgba(5, 5, 16, 0.4);
  border-radius: var(--radius-sm, 12px);
}

.stat-value {
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', monospace);
  font-size: var(--fs-base, 14px);
  font-weight: var(--fw-bold, 700);
  color: var(--text, #f0f0f8);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #7a7a9e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   EARN PAGE — DAILY STREAK CALENDAR
   ═══════════════════════════════════════════════════════════════ */

.streak-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-sm, 8px);
  padding: var(--space-lg, 16px);
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-lg, 20px);
  margin-bottom: var(--space-lg, 16px);
}

.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-sm, 8px) var(--space-xs, 4px);
  border-radius: var(--radius-xs, 8px);
  min-height: 44px;
}

.streak-day-icon {
  font-size: 18px;
  line-height: 1;
}

.streak-day-label {
  font-size: 9px;
  font-weight: var(--fw-medium, 500);
  color: var(--text-muted, #7a7a9e);
  text-transform: uppercase;
}

.streak-day.done {
  background: var(--success-dim, rgba(0, 230, 118, 0.10));
}

.streak-day.done .streak-day-icon {
  color: var(--success, #00e676);
}

.streak-day.today {
  background: var(--accent-dim, rgba(0, 229, 255, 0.08));
  border: 1px solid rgba(0, 229, 255, 0.25);
}

.streak-day.today .streak-day-icon {
  color: var(--accent, #00e5ff);
}

.streak-day.locked {
  opacity: 0.5;
}

.streak-day.locked .streak-day-icon {
  color: var(--text-ghost, #3a3a5a);
}

/* ═══════════════════════════════════════════════════════════════
   EARN PAGE — MISSIONS
   ═══════════════════════════════════════════════════════════════ */

.missions-section {
  margin-bottom: var(--space-lg, 16px);
}

.section-title {
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-bold, 700);
  color: var(--text-secondary, #9a9abe);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md, 12px);
  padding-left: var(--space-xs, 4px);
}

.mission-card {
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-md, 16px);
  margin-bottom: var(--space-sm, 8px);
  min-height: 44px;
}

.mission-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.mission-info {
  flex: 1;
  min-width: 0;
}

.mission-name {
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-bold, 700);
  color: var(--text, #f0f0f8);
  margin-bottom: var(--space-xs, 4px);
}

.mission-progress {
  position: relative;
  height: 6px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.mission-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #7c3aed), var(--accent, #00e5ff));
  border-radius: var(--radius-full, 9999px);
  transition: width var(--dur-base, 250ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.mission-progress-text {
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', monospace);
  font-size: var(--fs-xs, 11px);
  font-weight: var(--fw-bold, 700);
  color: var(--text-secondary, #9a9abe);
  white-space: nowrap;
}

.mission-claim-btn {
  flex-shrink: 0;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  background: linear-gradient(135deg, var(--primary, #7c3aed), #6d28d9);
  border: none;
  border-radius: var(--radius-xs, 8px);
  color: #fff;
  font-size: var(--fs-xs, 11px);
  font-weight: var(--fw-black, 900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.mission-claim-btn:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════
   EARN PAGE — REFERRAL BLOCK
   ═══════════════════════════════════════════════════════════════ */

.referral-block {
  padding: var(--space-lg, 16px);
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-xl, 24px);
  margin-bottom: var(--space-lg, 16px);
}

.referral-title {
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-bold, 700);
  color: var(--text-secondary, #9a9abe);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md, 12px);
}

.referral-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-md, 12px);
}

.referral-input {
  flex: 1;
  padding: var(--space-md, 12px) var(--space-md, 12px);
  background: rgba(5, 5, 16, 0.7);
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-xs, 8px);
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', monospace);
  font-size: var(--fs-xs, 11px);
  color: var(--text-secondary, #9a9abe);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 44px;
}

.referral-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  background: var(--primary-dim, rgba(124, 58, 237, 0.12));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-xs, 8px);
  color: var(--primary, #7c3aed);
  font-size: var(--fs-xs, 11px);
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  transition: all var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.referral-btn:active {
  background: rgba(124, 58, 237, 0.2);
  border-color: var(--primary, #7c3aed);
  transform: scale(0.95);
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm, 8px);
}

/* ═══════════════════════════════════════════════════════════════
   EARN PAGE — TASKS
   ═══════════════════════════════════════════════════════════════ */

.tasks-section {
  margin-bottom: var(--space-lg, 16px);
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-md, 16px);
  margin-bottom: var(--space-sm, 8px);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.task-row:active {
  border-color: var(--border-hover, rgba(124, 58, 237, 0.25));
}

.task-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-bold, 700);
  color: var(--text, #f0f0f8);
  margin-bottom: 2px;
}

.task-desc {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #7a7a9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-reward {
  flex-shrink: 0;
  font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', monospace);
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-bold, 700);
  color: var(--success, #00e676);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   SHELL PANELS (REUSABLE FOR BANK, PROFILE, ORDERS)
   ═══════════════════════════════════════════════════════════════ */

.shell-panel {
  background: var(--surface, rgba(15, 15, 38, 0.5));
  border: 1px solid var(--border, rgba(124, 58, 237, 0.12));
  border-radius: var(--radius-xl, 24px);
  padding: var(--space-lg, 16px);
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-raised, 0 4px 12px rgba(0, 0, 0, 0.4));
  margin-bottom: var(--space-lg, 16px);
}

.shell-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl, 24px);
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(124, 58, 237, 0.35),
      transparent 40%,
      transparent 60%,
      rgba(0, 229, 255, 0.35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.shell-panel-sm {
  padding: var(--space-md, 12px);
  border-radius: var(--radius-md, 16px);
}

.shell-panel-sm::before {
  border-radius: var(--radius-md, 16px);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 359px) {
  .game-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .game-card {
    padding: var(--space-md, 12px) var(--space-xs, 4px);
  }

  .game-card-icon {
    font-size: 24px;
  }

  .game-card-name {
    font-size: var(--fs-xs, 11px);
  }

  .stat-grid {
    gap: var(--space-xs, 4px);
  }

  .streak-calendar {
    gap: var(--space-xs, 4px);
    padding: var(--space-md, 12px);
  }

  .hero-banner {
    padding: var(--space-lg, 16px) var(--space-md, 12px);
  }

  .hero-banner-title {
    font-size: var(--fs-lg, 20px);
  }

  .main-content {
    padding-left: var(--space-md, 12px);
    padding-right: var(--space-md, 12px);
  }
}