/* ==========================================================================
   ALTITUDE ENTERPRISE — SOPHISTICATED 3D DESIGN SYSTEM & ASSURANCE PLATFORM
   ========================================================================== */

:root {
  --header-height: 84px;
  /* Ultra-Sophisticated Dark Luxury Palette */
  --bg-deep: #070A10;
  --bg-void: #05070B;
  --bg-surface: #0C121E;
  --bg-surface-elevated: #111A2D;
  --bg-card: rgba(14, 21, 35, 0.72);
  --bg-card-hover: rgba(20, 31, 52, 0.85);

  /* Metallic Champagne Gold Palette */
  --gold-primary: #F5D77F;
  --gold-light: #FFF2C6;
  --gold-dark: #C99E42;
  --gold-border: rgba(245, 215, 127, 0.32);
  --gold-glow: rgba(245, 215, 127, 0.16);
  --gold-gradient: linear-gradient(135deg, #FFF1C5 0%, #E5BF60 50%, #B88A34 100%);
  --gold-gradient-subtle: linear-gradient(135deg, rgba(255,241,197,0.12) 0%, rgba(229,191,96,0.06) 100%);

  /* Trust & Assurance Palette */
  --sapphire-blue: #38BDF8;
  --sapphire-deep: #2563EB;
  --sapphire-glow: rgba(56, 189, 248, 0.2);
  --emerald-trust: #10B981;
  --emerald-glow: rgba(16, 185, 129, 0.25);

  /* Neutrals & Typography */
  --text-pure: #FFFFFF;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-bright: rgba(255, 255, 255, 0.16);

  /* Typography Fonts */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Motion Timing Curves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   Base & Resets
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  background-color: var(--bg-deep);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font: 400 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button, a, input, select, textarea, summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--gold-primary);
  color: var(--bg-deep);
}

/* SVG icons */
svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Layout Wrappers */
.wrap {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* Allow nested grid and form content to shrink within the viewport. */
:where(.hero, .experience, .merchant-layout, .faq, .contact, .support,
  .journey-grid, .trust-grid, .reviews-grid, .footer-main, .form-row) > *,
.form-group, .form-col-subgroup, .dashboard-content {
  min-width: 0;
}

html.has-open-modal, html.has-open-modal body {
  overflow: hidden;
  overscroll-behavior: none;
}

.section {
  padding-block: 120px;
  position: relative;
}

.skip {
  position: fixed;
  z-index: 1000;
  top: -100px;
  left: 20px;
  padding: 12px 24px;
  background: var(--gold-gradient);
  color: var(--bg-deep);
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: top 0.2s;
}

.skip:focus {
  top: 20px;
}

/* ==========================================================================
   Full Screen Ambient 3D Canvas
   ========================================================================== */
.ambient-canvas3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* ==========================================================================
   Floating Navigation Rail / HUD
   ========================================================================== */
.nav-hud {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 8px;
  background: rgba(12, 18, 30, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: 30px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.hud-progress-fill {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 2px;
  height: 0%;
  background: var(--gold-gradient);
  transform: translateX(-50%);
  transition: height 0.3s var(--ease-spring);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--gold-primary);
}

.hud-node {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.25s var(--ease-spring), background 0.25s, box-shadow 0.25s;
  z-index: 2;
}

.hud-node:hover,
.hud-node.is-active {
  background: var(--gold-primary);
  transform: scale(1.6);
  box-shadow: 0 0 12px var(--gold-primary);
}

.hud-tooltip {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  padding: 5px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  color: var(--text-pure);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

.hud-node:hover .hud-tooltip,
.hud-node:focus-visible .hud-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   LUXURY ALABASTER & CHAMPAGNE LIGHT MODE THEME
   ========================================================================== */
[data-theme="light"] {
  --bg-deep: #f8faf9;
  --bg-void: #edf2f0;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;

  /* Refined Champagne Gold & Warm Honey Bronze */
  --gold-primary: #96641E;
  --gold-light: #B8822A;
  --gold-dark: #7A531A;
  --gold-border: rgba(184, 130, 42, 0.32);
  --gold-glow: rgba(184, 130, 42, 0.18);
  --gold-gradient: linear-gradient(135deg, #fcf7ed 0%, #dfb76c 50%, #96641E 100%);
  --gold-gradient-subtle: linear-gradient(135deg, rgba(252, 247, 237, 0.6) 0%, rgba(223, 183, 108, 0.16) 100%);

  /* Jewel Emerald & Refined Accents */
  --sapphire-blue: #0f3d3e;
  --sapphire-deep: #092627;
  --sapphire-glow: rgba(15, 61, 62, 0.15);
  --emerald-trust: #176b4e;
  --emerald-glow: rgba(27, 128, 95, 0.18);

  /* High-Contrast Obsidian & Deep Slate Typography */
  --text-pure: #0a1311;
  --text-primary: #1a2825;
  --text-secondary: #4a5a56;
  --text-muted: #5e7068;
  --border-glass: rgba(10, 25, 22, 0.08);
  --border-glass-bright: rgba(10, 25, 22, 0.16);
}

html[data-theme="light"] {
  background-color: #f8faf9;
  color-scheme: light;
}

[data-theme="light"] body {
  background:
    radial-gradient(circle 900px at 85% -5%, rgba(245, 215, 127, 0.12) 0%, transparent 60%),
    radial-gradient(circle 800px at 10% 25%, rgba(27, 128, 95, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #fafbfb 0%, #f4f6f5 40%, #eef2f0 100%);
  background-attachment: fixed;
  color: var(--text-primary);
}

[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(10, 25, 22, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 4px 20px rgba(10, 25, 22, 0.03);
}

[data-theme="light"] .brand {
  color: #0a1311;
}

[data-theme="light"] .header nav {
  color: #334155;
}

[data-theme="light"] .header nav > a:hover {
  color: #0a1311;
}

[data-theme="light"] .card,
[data-theme="light"] .journey-card,
[data-theme="light"] .solution-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .feedback-card,
[data-theme="light"] .review-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .contact-card,
[data-theme="light"] .tool-panel,
[data-theme="light"] .support-card {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.08);
  box-shadow: 0 10px 30px -6px rgba(10, 25, 22, 0.05), 0 1px 3px rgba(10, 25, 22, 0.03);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .journey-card:hover,
[data-theme="light"] .review-card:hover,
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .trust-card:hover {
  background: #ffffff;
  border-color: var(--gold-primary);
  box-shadow: 0 16px 40px -8px rgba(10, 25, 22, 0.09), 0 0 20px rgba(197, 160, 89, 0.15);
}

[data-theme="light"] .button-outline {
  border-color: rgba(10, 25, 22, 0.15);
  background: #ffffff;
  color: #0a1311;
}

[data-theme="light"] .button-outline:hover {
  background: #fafbfb;
  border-color: var(--gold-primary);
  color: var(--gold-dark);
}

[data-theme="light"] .button-gold {
  color: #0a1311;
  background: linear-gradient(135deg, #f7ecd5 0%, #dfb76c 50%, #c5a059 100%);
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .gold-shimmer,
[data-theme="light"] .text-gradient-gold {
  background: linear-gradient(135deg, #96641E 0%, #B8822A 50%, #7A531A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .footer {
  background: #ffffff;
  border-top: 1px solid rgba(10, 25, 22, 0.08);
  color: #4a5a56;
}

[data-theme="light"] .footer-title,
[data-theme="light"] .footer-brand strong {
  color: #0a1311;
}

[data-theme="light"] .footer-nav a {
  color: #4a5a56;
}

[data-theme="light"] .footer-nav a:hover {
  color: #0a1311;
}

[data-theme="light"] .hud-node {
  background: #cbd5e1;
}

[data-theme="light"] .hud-node.is-active {
  background: var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-primary);
}

[data-theme="light"] .phone-android {
  box-shadow: 0 25px 50px rgba(10, 25, 22, 0.12), 0 0 25px rgba(27, 128, 95, 0.08);
}

[data-theme="light"] .phone-iphone {
  box-shadow: 0 30px 60px rgba(10, 25, 22, 0.15), 0 0 30px rgba(197, 160, 89, 0.12);
}

/* Light surfaces must keep their text and decorative previews readable.
   These overrides change colors only; dark mode keeps its original palette. */
[data-theme="light"] .audience-strip,
[data-theme="light"] .trust-metrics-banner,
[data-theme="light"] .reviews-stat-banner {
  background: #ffffff;
  border-color: var(--gold-border);
}

[data-theme="light"] .trust-metrics-banner,
[data-theme="light"] .reviews-stat-banner {
  box-shadow: 0 20px 50px rgba(10, 25, 22, 0.07), 0 0 30px rgba(197, 160, 89, 0.06);
}

[data-theme="light"] .stamp-receipt,
[data-theme="light"] .relation-row {
  background: #f4f7f5;
  border-color: rgba(10, 25, 22, 0.14);
}

[data-theme="light"] .stamp-receipt {
  box-shadow: 0 10px 20px rgba(10, 25, 22, 0.06);
}

[data-theme="light"] .relation-row .avatar-one { color: var(--gold-dark); }
[data-theme="light"] .relation-row .avatar-two { color: var(--sapphire-blue); }
[data-theme="light"] .relation-row .avatar-three { color: var(--emerald-trust); }

[data-theme="light"] .reviews-section {
  background: radial-gradient(circle at 50% 10%, rgba(197, 160, 89, 0.07) 0%, var(--bg-deep) 80%);
}

[data-theme="light"] .metric-num,
[data-theme="light"] .stat-num {
  background-image: linear-gradient(135deg, #96641E 0%, #B8822A 50%, #7A531A 100%);
}

[data-theme="light"] .hud-rail {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(10, 25, 22, 0.14);
  box-shadow: 0 10px 30px rgba(10, 25, 22, 0.08);
}

[data-theme="light"] .theme-toggle-btn {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.18);
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: #f0f4f1;
  border-color: var(--gold-primary);
}

[data-theme="light"] .tool-tabs > button[aria-selected="true"] {
  box-shadow: 0 10px 30px rgba(10, 25, 22, 0.08), inset 0 0 15px rgba(197, 160, 89, 0.05);
}

[data-theme="light"] .dashboard-preview-3d {
  box-shadow: 0 30px 80px rgba(10, 25, 22, 0.13), 0 0 40px rgba(56, 189, 248, 0.04);
}

[data-theme="light"] .dashboard-preview-3d:hover {
  box-shadow: 0 40px 100px rgba(10, 25, 22, 0.16), 0 0 50px rgba(197, 160, 89, 0.08);
}

[data-theme="light"] #contact-form {
  box-shadow: 0 25px 70px rgba(10, 25, 22, 0.08), 0 0 40px rgba(197, 160, 89, 0.06);
}

[data-theme="light"] #contact-form :is(input, select, textarea) {
  background-color: #f8faf9;
  border-color: #b7c4bd;
}

[data-theme="light"] #contact-form :is(input, select, textarea):focus {
  background-color: #ffffff;
  border-color: var(--gold-primary);
}

/* Wallet artwork and the preview's chrome intentionally keep dark surfaces. */
[data-theme="light"] .layer-front {
  --text-pure: #ffffff;
  --gold-primary: #f5d77f;
  --gold-light: #fff2c6;
  color: #f1f5f9;
}

[data-theme="light"] .hero-notification,
[data-theme="light"] .dashboard-chrome {
  --emerald-trust: #6ee7b7;
}

[data-theme="light"] .custom-checkbox-container input:checked ~ .checkbox-checkmark::after {
  color: #ffffff;
}

/* ==========================================================================
   THEME TOGGLE BUTTONS (Header & Mobile)
   ========================================================================== */
.theme-toggle-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-glass-bright);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-pure);
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--gold-border);
  transform: translateY(-1px);
}

.theme-switch-track {
  width: 32px;
  height: 18px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.45);
  position: relative;
  display: inline-block;
  transition: background 0.25s ease;
}

[data-theme="light"] .theme-switch-track {
  background: linear-gradient(135deg, #f59e0b, #38bdf8);
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s var(--ease-spring);
}

[data-theme="light"] .theme-switch-thumb {
  transform: translateX(14px);
}

.mobile-theme-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass-bright);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}

[data-theme="light"] .mobile-theme-btn {
  background: rgba(10, 25, 22, 0.04);
  border-color: rgba(10, 25, 22, 0.12);
  color: #0a1311;
}

[data-theme="light"] .mobile-theme-btn strong {
  color: var(--gold-primary);
}

/* ==========================================================================
   Header Navigation
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 16, 0.82);
  border-bottom: 1px solid var(--border-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 0.3s, border-color 0.3s;
}

.header-inner {
  width: min(1600px, calc(100% - 80px));
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 36px/1 var(--font-display);
  letter-spacing: -1.8px;
  color: var(--text-pure);
  flex-shrink: 0;
}

.brand-mark {
  width: 32px;
  height: 32px;
  color: var(--gold-primary);
  filter: drop-shadow(0 0 8px var(--gold-glow));
}

.brand-dot {
  color: var(--gold-primary);
}

.brand-enterprise-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gold-primary);
  padding: 3px 7px;
  border: 1px solid var(--gold-border);
  border-radius: 4px;
  background: rgba(245, 215, 127, 0.08);
  margin-left: 4px;
}

.header nav {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.7vw, 28px);
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.header nav > a {
  padding: 8px 0;
  position: relative;
  transition: color 0.2s;
}

.header nav > a::after { content: none; }

.header nav > a:hover { color: var(--text-pure); }
.header nav > a:focus-visible { border-radius: 999px; }
.nav-highlight {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: var(--nav-highlight-width, 0px);
  height: var(--nav-highlight-height, 0px);
  transform: translate(var(--nav-highlight-x, 0px), var(--nav-highlight-y, 0px));
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  background: var(--gold-glow);
  pointer-events: none;
  opacity: 0;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), width 240ms cubic-bezier(.2,.8,.2,1), height 240ms ease, opacity 140ms ease;
}
.nav-highlight.is-visible { opacity: 1; }

.menu-toggle,
.header nav .mobile-contact,
.header nav .mobile-login-btn,
.header nav .mobile-register-btn,
.header nav .mobile-theme-btn {
  display: none !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.theme-switch-label {
  font-size: 12px;
  font-weight: 550;
  color: var(--text-secondary);
}

/* ==========================================================================
   Buttons & Links
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2px;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, background 0.25s;
  position: relative;
  overflow: hidden;
}

.button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease-spring);
}

.button-gold {
  background: var(--gold-gradient);
  color: #0B0E14;
  box-shadow: 0 4px 20px rgba(229, 191, 96, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 241, 197, 0.4);
}

.button-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(229, 191, 96, 0.45);
}

.button-gold:hover svg {
  transform: translate(2px, -2px);
}

.button-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 24px;
  border: 1px solid var(--border-glass-bright);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 550;
  backdrop-filter: blur(10px);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.button-outline:hover {
  border-color: var(--gold-border);
  background: rgba(245, 215, 127, 0.08);
  color: var(--gold-light);
  transform: translateY(-2px);
}

.button-small {
  min-height: 42px;
  padding: 9px 18px;
  gap: 14px;
  font-size: 12.5px;
}

.button-full {
  width: 100%;
  justify-content: center;
}

.play-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.play-icon svg {
  width: 14px;
  height: 14px;
  color: var(--gold-primary);
}

/* ==========================================================================
   Typography & Accents
   ========================================================================== */
h1, h2, h3, h4, p {
  margin: 0;
}

h1 {
  font: 700 clamp(48px, 5.4vw, 76px)/1.08 var(--font-display);
  letter-spacing: -0.045em;
  color: var(--text-pure);
}

h2 {
  font: 700 clamp(32px, 3.6vw, 50px)/1.18 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--text-pure);
}

.gold-shimmer {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.text-gradient-gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--gold-primary);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.eyebrow-icon {
  width: 16px;
  height: 16px;
  color: var(--gold-primary);
}

.live-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-primary);
}

.gold-dot {
  color: var(--gold-primary);
}

/* ==========================================================================
   Smooth Loopable Bidirectional Section Transitions
   ========================================================================== */
.section-flow {
  opacity: 0.18;
  transform: translateY(45px) scale(0.96) rotateX(-2deg);
  transform-origin: center bottom;
  transition:
    opacity 0.85s var(--ease-spring),
    transform 0.85s var(--ease-spring);
  will-change: opacity, transform;
}

/* Active in view (both down and up) */
.section-flow.is-in-view {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* When scrolled past downwards (exit state) */
.section-flow.is-scrolled-past {
  opacity: 0.22;
  transform: translateY(-40px) scale(0.97) rotateX(2deg);
}

/* Children stagger animation */
[data-3d-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring);
}

.section-flow.is-in-view [data-3d-stagger] > * {
  opacity: 1;
  transform: translateY(0);
}

.section-flow.is-in-view [data-3d-stagger] > *:nth-child(1) { transition-delay: 0.05s; }
.section-flow.is-in-view [data-3d-stagger] > *:nth-child(2) { transition-delay: 0.12s; }
.section-flow.is-in-view [data-3d-stagger] > *:nth-child(3) { transition-delay: 0.19s; }
.section-flow.is-in-view [data-3d-stagger] > *:nth-child(4) { transition-delay: 0.26s; }

/* ==========================================================================
   Section 1: Hero
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 60px;
  padding-top: 60px;
  padding-bottom: 70px;
  min-height: calc(85vh - 100px);
}

.hero-copy {
  padding-block: 20px;
}

.hero-lead {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 24px 0 32px;
  max-width: 540px;
}

.hero-lead strong {
  color: var(--text-pure);
  font-weight: 600;
}

.headline-spark {
  display: inline-block;
  width: 34px;
  height: 34px;
  fill: var(--gold-primary);
  stroke: var(--gold-dark);
  stroke-width: 0.6;
  margin-left: 8px;
  vertical-align: middle;
  filter: drop-shadow(0 0 10px var(--gold-glow));
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 38px;
}

.hero-reassurance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
  padding-top: 28px;
  border-top: 1px solid var(--border-glass);
}

.reassurance-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reassurance-card svg {
  width: 22px;
  height: 22px;
  color: var(--gold-primary);
  flex-shrink: 0;
}

.reassurance-card strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-pure);
}

.reassurance-card span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

/* 3D Hero Stage */
.hero-3d-stage {
  position: relative;
  height: 590px;
  perspective: 1200px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-glow-ambient {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(245, 215, 127, 0.08) 45%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

.stage-orbit-ring {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  border: 1px dashed rgba(245, 215, 127, 0.18);
  transform: rotateX(60deg) rotateZ(15deg);
  animation: spin-orbit 40s linear infinite;
  pointer-events: none;
}

/* Floating 3D Badge */
.floating-3d-badge {
  position: absolute;
  top: 30px;
  right: 15px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(14, 21, 35, 0.85);
  border: 1px solid var(--gold-border);
  border-radius: 30px;
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  transform: translateZ(90px);
}

.floating-3d-badge svg {
  width: 14px;
  height: 14px;
  color: var(--gold-primary);
}

/* 3D Hero Dual Phone Stage */
.hero-dual-stage {
  position: relative;
  height: 620px;
  perspective: 1400px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dual-phones-wrapper {
  position: relative;
  width: 520px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* These previews stay dark in both page themes. Flatten each phone's layers
   so its screen paints consistently across mobile compositors. */
.phone, .hero-notification, .floating-3d-badge, .dashboard-chrome, .dashboard-sidebar {
  --text-pure: #fff;
  --text-secondary: #b8c5d7;
  --text-muted: #94a3b8;
  --gold-primary: #f5d77f;
  --gold-light: #fff2c6;
  --gold-dark: #c99e42;
  --gold-gradient: linear-gradient(135deg, #fff1c5, #e5bf60 50%, #b88a34);
}

.phone {
  transform-style: flat;
  isolation: isolate;
  overflow: hidden;
}

.phone-os-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(14, 21, 35, 0.85);
  border: 1px solid var(--border-glass-bright);
  color: var(--text-secondary);
  margin-bottom: 8px;
  width: fit-content;
}

.os-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.android-dot { background: #34A853; box-shadow: 0 0 6px #34A853; }
.apple-dot { background: #E2E8F0; box-shadow: 0 0 6px #FFFFFF; }

/* Android Phone (Google Wallet) */
.phone-android {
  position: absolute;
  left: 0;
  top: 30px;
  width: 258px;
  height: 480px;
  background: #0B101C;
  border: 5px solid #1E293B;
  border-radius: 36px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(56, 189, 248, 0.15);
  padding: 12px 11px;
  transform: rotateY(-10deg) rotateX(4deg) translateZ(40px);
  transform-style: flat;
  transition: transform 0.4s var(--ease-spring);
  z-index: 3;
}

.phone-android:hover {
  transform: rotateY(-3deg) rotateX(2deg) translateZ(65px);
}

.phone-camera-hole {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #05070B;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.nfc-badge {
  display: flex;
  align-items: center;
}
.nfc-badge svg {
  width: 16px;
  height: 16px;
  color: var(--gold-primary);
}

/* iPhone (Apple Wallet) */
.phone-iphone {
  position: absolute;
  right: 0;
  top: 10px;
  width: 264px;
  height: 495px;
  background: #0F1420;
  border: 5px solid #334155;
  border-radius: 42px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.8), 0 0 35px rgba(245, 215, 127, 0.2);
  padding: 14px 12px;
  transform: rotateY(8deg) rotateX(4deg) translateZ(20px);
  transform-style: flat;
  transition: transform 0.4s var(--ease-spring);
  z-index: 4;
}

.phone-iphone:hover {
  transform: rotateY(2deg) rotateX(2deg) translateZ(65px);
}

.dynamic-island {
  width: 72px;
  height: 18px;
  background: #000000;
  border-radius: 12px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ios-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.ios-signal .sig-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--text-pure);
}
.ios-signal .sig-bar:nth-child(1) { height: 3px; }
.ios-signal .sig-bar:nth-child(2) { height: 5px; }
.ios-signal .sig-bar:nth-child(3) { height: 7px; }
.ios-signal .sig-bar:nth-child(4) { height: 10px; }

.apple-wallet-header {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 14px;
}
.apple-back {
  color: #38BDF8;
  font-weight: 500;
}

/* Apple Wallet PKPass Card */
.apple-pass-card {
  position: relative;
  background: linear-gradient(150deg, #1A1F2C 0%, #0E131E 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 16px 14px;
  color: var(--text-pure);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  margin-top: 10px;
}

.apple-pass-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.apple-pass-type {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--gold-primary);
}

.apple-pass-title {
  display: block;
  font: 700 16px/1.2 var(--font-display);
  color: var(--text-pure);
  margin-top: 2px;
}

.apple-pass-logo svg {
  width: 22px;
  height: 22px;
  color: var(--gold-primary);
}

.apple-pass-strip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  margin-block: 10px;
}

.apple-strip-label {
  display: block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.apple-strip-val {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-light);
  margin-top: 2px;
}

.apple-pass-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-top: 10px;
}

.apple-foot-label {
  display: block;
  font-size: 7px;
  color: var(--text-muted);
}

.apple-foot-val {
  font-size: 12px;
  color: var(--gold-primary);
}

.apple-nfc-symbol {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--text-secondary);
}

.apple-nfc-symbol svg {
  width: 14px;
  height: 14px;
  color: var(--text-pure);
}

.apple-pass-code {
  text-align: center;
  margin-top: 14px;
}

.mini-pdf417 {
  width: 120px;
  height: 24px;
  color: rgba(255, 255, 255, 0.7);
}

.apple-pass-code span {
  display: block;
  font-size: 7px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-top: 4px;
}

.apple-home-bar {
  background: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Coffee Cup & Chocolate Bar Dynamic Stamp Matrix
   ========================================================================== */
.stamp-grid-dynamic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-block: 14px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.stamp-dynamic-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  transition: all 0.35s var(--ease-spring);
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.stamp-dynamic-item.filled {
  border-style: solid;
  border-color: var(--gold-border);
  background: rgba(245, 215, 127, 0.12);
  color: var(--gold-primary);
  box-shadow: 0 0 15px var(--gold-glow);
  transform: scale(1.05);
}

.stamp-dynamic-item.filled.full-crema {
  background: var(--gold-gradient);
  color: #080C14;
  border-color: rgba(255, 241, 197, 0.7);
  box-shadow: 0 0 20px rgba(229, 191, 96, 0.45);
}

.stamp-dynamic-item.filled.chocolate-bar {
  background: linear-gradient(135deg, #4A2E1B 0%, #2E1B0F 100%);
  border-color: rgba(245, 215, 127, 0.4);
  color: #F5D77F;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.stamp-dynamic-item.filled.chocolate-cracked {
  background: linear-gradient(135deg, #3D2314 0%, #24130A 100%);
  border-color: rgba(245, 215, 127, 0.3);
  color: #DFC06C;
  transform: scale(1.02) rotate(-2deg);
}

.stamp-dynamic-item svg {
  display: block;
  margin: auto;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring);
}

.stamp-dynamic-item.filled svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.stamp-dynamic-item.new {
  animation: stamp-pop 0.5s var(--ease-spring);
}

/* Apple Card Stamp Scaling */
.apple-stamps .stamp-dynamic-item svg {
  display: block;
  margin: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Phone status & Wallet header bar */
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 10px;
  height: 16px;
  padding-inline: 4px;
}

.wallet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 10px;
  margin: 12px 0 8px;
  padding-inline: 4px;
}

.wallet-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wallet-logo-icon {
  width: 14px;
  height: 14px;
}

.phone-glass-reflection {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
  z-index: 6;
}

/* Loyalty Card (Android Google Wallet) */
.loyalty-card-android {
  position: relative;
  background: linear-gradient(145deg, #162032 0%, #0c121e 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 16px;
  padding: 16px 14px;
  color: var(--text-pure);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 6px;
}

[data-theme="light"] .loyalty-card-android {
  background: linear-gradient(145deg, #0f1c30 0%, #08101d 100%);
  border-color: rgba(10, 25, 22, 0.35);
  box-shadow: 0 15px 35px rgba(14, 76, 146, 0.22);
}

/* Mobile Hero Wallet Switcher */
.hero-wallet-switcher {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 20px;
  padding: 4px;
  background: rgba(14, 21, 35, 0.75);
  border: 1px solid var(--border-glass-bright);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .hero-wallet-switcher {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(10, 25, 22, 0.22);
  box-shadow: 0 8px 24px rgba(14, 76, 146, 0.1);
}

.wallet-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
  font-family: inherit;
}

.wallet-switch-btn:hover {
  color: var(--text-pure);
}

.wallet-switch-btn.active {
  background: rgba(245, 215, 127, 0.14);
  border-color: var(--gold-border);
  color: var(--gold-primary);
  box-shadow: 0 2px 10px rgba(245, 215, 127, 0.15);
}

[data-theme="light"] .wallet-switch-btn.active {
  background: #ffffff;
  border-color: rgba(217, 119, 6, 0.4);
  color: #b45309;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12);
}

.wallet-tab-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.card-shimmer-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(245, 215, 127, 0.12) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: card-sheen 6s infinite;
  pointer-events: none;
}

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card-pretitle {
  display: block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--gold-primary);
  text-transform: uppercase;
}

.card-heading strong {
  display: block;
  margin-top: 4px;
  font: 600 21px/1.2 var(--font-display);
  color: var(--text-pure);
}

.card-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245, 215, 127, 0.12);
  border: 1px solid var(--gold-border);
  display: grid;
  place-items: center;
  color: var(--gold-primary);
}

.card-reward-text {
  font-size: 9px;
  color: var(--text-secondary);
  margin: 10px 0 14px;
}

.hero-stamps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.hero-stamps > span {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s;
  width: 100%;
  margin: 0 auto;
}

.hero-stamps > span.filled {
  background: var(--gold-gradient);
  color: #0B0E14;
  box-shadow: 0 0 10px var(--gold-glow);
}

.hero-stamps > span.empty {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  font-size: 9px;
}

.card-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  font-size: 8px;
  color: var(--text-secondary);
}

.card-progress strong {
  color: var(--gold-primary);
  font-size: 10px;
}

.phone-code {
  text-align: center;
  margin-top: 16px;
  color: var(--text-secondary);
}

.phone-code svg {
  width: 140px;
  height: 30px;
  color: var(--text-secondary);
}

.phone-code span {
  display: block;
  font-size: 6px;
  letter-spacing: 0.8px;
  margin-top: 4px;
  color: var(--text-muted);
}

.phone-brand {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 7px;
  color: var(--text-muted);
}

.phone-brand strong {
  color: var(--gold-primary);
}

.home-bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

/* Floating Notification */
.hero-notification {
  position: absolute;
  top: 90px;
  left: 16px;
  width: 290px;
  background: rgba(14, 21, 35, 0.9);
  border: 1px solid var(--border-glass-bright);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  transform: translateZ(70px) rotate(-4deg);
  z-index: 4;
}

.notification-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--gold-gradient);
  color: #0B0E14;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.notification-icon svg {
  width: 18px;
  height: 18px;
}

.hero-notification strong {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-pure);
}

.hero-notification span {
  display: block;
  font-size: 9px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.notification-badge {
  margin-left: auto;
  font-size: 8px;
  color: var(--emerald-trust) !important;
  font-weight: 700;
  align-self: flex-start;
}

/* Mini Cockpit (Hero Right) */
.mini-dashboard {
  position: absolute;
  right: -25px;
  bottom: 80px;
  width: 245px;
  background: rgba(14, 21, 35, 0.92);
  border: 1px solid var(--border-glass-bright);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px);
  transform: translateZ(50px) rotate(4deg);
  z-index: 3;
}

.mini-dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-glass);
}

.mini-logo {
  font: 800 18px/1 var(--font-display);
  letter-spacing: -1px;
  color: var(--text-pure);
}

.status-pill-green {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 700;
  color: var(--emerald-trust);
}

.status-pill-green i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.mini-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(245, 215, 127, 0.15);
  border: 1px solid var(--gold-border);
  color: var(--gold-primary);
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.mini-dashboard-body {
  padding: 14px;
}

.mini-label {
  display: block;
  font-size: 9px;
  color: var(--text-secondary);
}

.mini-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-pure);
  margin-top: 3px;
}

.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-glass);
}

.mini-chart i {
  flex: 1;
  height: var(--bar);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px 3px 0 0;
  transition: height 0.5s;
}

.mini-chart i.peak {
  background: var(--gold-gradient);
  box-shadow: 0 0 10px var(--gold-glow);
}

.mini-dashboard-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 9px;
  color: var(--text-secondary);
}

.mini-dashboard-bottom span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-dashboard-bottom span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--emerald-trust);
}

.mini-dashboard-bottom svg {
  width: 14px;
  height: 14px;
  color: var(--emerald-trust);
}

/* ==========================================================================
   Trust Strip: Client Types
   ========================================================================== */
.audience-strip {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 24px 30px;
  background: rgba(14, 21, 35, 0.45);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  margin-bottom: 40px;
}

.audience-label span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

.audience-label strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-pure);
}

.audience-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  padding: 0 0 0 32px;
  margin: 0;
  flex: 1;
  border-left: 1px solid var(--border-glass);
}

.audience-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-secondary);
}

.audience-list svg {
  width: 18px;
  height: 18px;
  color: var(--gold-primary);
}

/* ==========================================================================
   Section 2: Solution Journey (3D Tilt Cards)
   ========================================================================== */
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 50px;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
  max-width: 380px;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.journey-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-spring), border-color 0.3s, box-shadow 0.3s;
  transform-style: preserve-3d;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.journey-card:hover {
  border-color: var(--gold-border);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px var(--gold-glow);
}

.card-glow-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(245, 215, 127, 0.08), transparent 70%);
  pointer-events: none;
}

.journey-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold-border);
  background: rgba(245, 215, 127, 0.08);
  color: var(--gold-primary);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.step-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}

.journey-art {
  position: relative;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 15px;
}

.journey-card h3 {
  font: 700 20px/1.3 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-pure);
  margin-bottom: 10px;
}

.journey-card p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.journey-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-primary);
}

.journey-foot svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.journey-card:hover .journey-foot svg {
  transform: translate(2px, -2px);
}

/* Wallet Art 3D Layers */
.wallet-art {
  perspective: 600px;
}

.wallet-layer {
  position: absolute;
  width: 210px;
  height: 105px;
  border-radius: 12px;
  transition: transform 0.4s var(--ease-spring);
}

.layer-back {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  transform: rotate(-10deg) translateY(-8px);
}

.layer-middle {
  background: rgba(245, 215, 127, 0.2);
  border: 1px solid var(--gold-border);
  transform: rotate(-4deg) translateY(-4px);
}

.layer-front {
  position: relative;
  background: linear-gradient(135deg, #1A2744 0%, #0E1729 100%);
  border: 1px solid var(--gold-border);
  padding: 16px;
  color: var(--text-pure);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transform: rotate(3deg);
}

.journey-card:hover .layer-back {
  transform: rotate(-16deg) translateY(-16px) translateZ(20px);
}

.journey-card:hover .layer-front {
  transform: rotate(6deg) translateY(6px) translateZ(35px);
}

.layer-front svg {
  width: 22px;
  height: 22px;
  color: var(--gold-primary);
}

.layer-front span {
  font-size: 10px;
  line-height: 1.6;
}

.layer-front strong {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold-light);
}

.wallet-chip {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--gold-border);
  color: var(--gold-primary);
  font-size: 9px;
  display: grid;
  place-items: center;
}

.wallet-label {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.wallet-label svg {
  width: 14px;
  height: 14px;
}

/* Stamp Art */
.stamp-art {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stamp-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stamp-line > span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(245, 215, 127, 0.12);
  border: 1px solid var(--gold-border);
  color: var(--gold-primary);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  transition: transform 0.3s;
}

.stamp-line .stamp-last {
  background: var(--gold-gradient);
  color: #0B0E14;
  box-shadow: 0 0 12px var(--gold-glow);
}

.stamp-last svg {
  width: 18px;
  height: 18px;
}

.journey-card:hover .stamp-line > span {
  transform: scale(1.1) rotate(5deg);
}

.stamp-receipt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 21, 35, 0.8);
  border: 1px solid var(--border-glass-bright);
  border-radius: 10px;
  padding: 10px 16px;
  margin-top: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.receipt-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-trust);
  display: grid;
  place-items: center;
}

.receipt-icon svg {
  width: 14px;
  height: 14px;
}

.stamp-receipt span {
  display: block;
  font-size: 9px;
  color: var(--text-secondary);
}

.stamp-receipt strong {
  display: block;
  font-size: 12px;
  color: var(--text-pure);
}

/* Relation Art */
.relation-art {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.relation-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 21, 35, 0.8);
  border: 1px solid var(--border-glass-bright);
  border-radius: 10px;
  padding: 10px 14px;
  transition: transform 0.3s;
}

.journey-card:hover .relation-row:first-child {
  transform: translateX(-4px) translateY(-3px);
}

.journey-card:hover .relation-row:last-of-type {
  transform: translateX(4px) translateY(3px);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-one { background: rgba(245, 215, 127, 0.15); color: var(--gold-primary); border: 1px solid var(--gold-border); }
.avatar-two { background: rgba(56, 189, 248, 0.15); color: var(--sapphire-blue); border: 1px solid rgba(56, 189, 248, 0.3); }
.avatar-three { background: rgba(16, 185, 129, 0.15); color: var(--emerald-trust); border: 1px solid var(--emerald-glow); }

.relation-row strong {
  display: block;
  font-size: 11.5px;
  color: var(--text-pure);
}

.relation-row > div > span {
  display: block;
  font-size: 9.5px;
  color: var(--text-secondary);
}

.relation-row svg {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--gold-primary);
}

.illustration-label {
  display: block;
  text-align: center;
  font-size: 7px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-top: 6px;
}

.stamp-3d-cylinder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stamp-inline-icon {
  width: 20px;
  height: 20px;
  color: var(--gold-primary);
}

/* ==========================================================================
   Section 3: Interactive Loyalty Journey
   ========================================================================== */
.experience-section {
  background: linear-gradient(180deg, var(--bg-deep) 0%, #0A0F1B 50%, var(--bg-deep) 100%);
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .experience-section,
[data-theme="light"] .contact-section {
  background: rgba(240, 248, 255, 0.65);
}

[data-theme="light"] .contact-direct-card strong,
[data-theme="light"] .result-box h3 {
  color: var(--text-pure);
}

[data-theme="light"] #contact-result textarea {
  background: #f8fafc;
}

.experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-block: 88px;
}

.experience-copy {
  min-width: 0;
}

.experience-desc {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 20px 0 28px;
}

.mechanism-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--border-glass);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.mechanism-note > svg {
  width: 20px;
  height: 20px;
  color: var(--gold-primary);
  margin-top: 3px;
  flex-shrink: 0;
}

.mechanism-note strong {
  color: var(--text-pure);
}

.experience-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Interactive loyalty journey — local demonstration only. */
.loyalty-demo {
  min-width: 0;
  width: 100%;
  max-width: 680px;
  justify-self: center;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--border-glass-bright);
  border-radius: 28px;
  background: var(--bg-surface);
  box-shadow: 0 24px 65px rgba(0, 0, 0, .25);
}
.demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.demo-heading > span { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: var(--text-secondary); }
.demo-reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px; font-size: 11px; color: var(--text-secondary); border-radius: 10px; flex-shrink: 0; }
.demo-reset svg { width: 14px; height: 14px; }
.demo-reset:hover { color: var(--gold-primary); background: var(--gold-glow); }
.demo-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 18px; padding: 20px 16px 16px; margin-top: 10px; border: 1px solid var(--border-glass); border-radius: 20px; background: radial-gradient(ellipse at 50% 30%, rgba(245, 215, 127, .12), transparent 75%), var(--bg-deep); }
.demo-guide { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.demo-preview-label { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.demo-preview-label > span { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald-trust); }
.demo-phone { width: 216px; justify-self: center; max-width: 100%; padding: 8px; border-radius: 34px; border: 1px solid #4a514b; background: #17211d; box-shadow: 0 18px 32px rgba(0, 0, 0, .23), inset 0 0 0 2px #303b34; }
.demo-phone-screen { overflow: hidden; border-radius: 26px; padding: 10px; background: #f5f6f0; color: #18362c; }
.demo-phone-island { width: 64px; height: 15px; margin: 0 auto 14px; border-radius: 12px; background: #17211d; }
.demo-wallet-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 10px; font-size: 10px; font-weight: 600; }
.demo-wallet-heading svg { width: 18px; height: 18px; color: #8a6525; }
.demo-wallet-card { position: relative; padding: 16px 13px 13px; border-radius: 16px; background: linear-gradient(145deg, #244f40, #102f25); color: #fff; }
.demo-wallet-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; color: #e9cf91; }
.demo-wallet-brand svg { width: 22px; height: 22px; }
.demo-wallet-card h3 { margin: 10px 0 6px; font: 700 21px/1.2 var(--font-display); letter-spacing: -.8px; color: #fff; }
.demo-wallet-subtitle { margin: 0; font-size: 10px; color: #d4e1d9; }
.demo-stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 16px 0 14px; }
.demo-stamp { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed #96b4a4; border-radius: 50%; color: #bad1c2; background: rgba(255, 255, 255, .04); }
.demo-stamp svg { width: 17px; height: 17px; }
.demo-stamp.is-filled { border: 1px solid #eed99e; background: linear-gradient(135deg, #fff0c2, #cfaa50); color: #283329; }
.demo-wallet-balance { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.demo-wallet-balance > strong { font-size: 22px; line-height: 1.2; letter-spacing: -.7px; color: #fff; }
.demo-wallet-balance strong span { font-size: 14px; color: #c3d5c9; letter-spacing: 0; }
.demo-wallet-balance > span { font-size: 8px; color: #d4e1d9; }
.demo-meter { height: 4px; margin: 10px 0 13px; overflow: hidden; border-radius: 4px; background: #ffffff24; }
.demo-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6e5b4, #cca653); transition: width .45s ease; }
.demo-wallet-reward { display: flex; align-items: center; gap: 7px; min-height: 30px; border-top: 1px solid #ffffff24; padding-top: 10px; font-size: 9px; line-height: 1.5; color: #e9d59d; }
.demo-wallet-reward svg { width: 17px; height: 17px; flex-shrink: 0; }
.demo-phone-footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 0 4px; font-size: 9px; color: #4c6356; }
.demo-phone-footer svg { width: 21px; height: 21px; }
.demo-event { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 80px; padding: 12px; border: 1px solid var(--border-glass-bright); border-radius: 14px; background: var(--bg-surface-elevated); }
.demo-event-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: var(--emerald-glow); color: var(--emerald-trust); }
.demo-event-icon svg { width: 18px; height: 18px; }
.demo-event strong { display: block; color: var(--text-pure); font-size: 12px; font-weight: 700; }
.demo-event p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.6; }
.demo-caption { margin: 4px 0 16px; text-align: center; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.demo-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.demo-step { min-width: 0; min-height: 102px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 12px 10px; border: 1px solid var(--border-glass-bright); border-radius: 14px; background: var(--bg-deep); color: var(--text-secondary); text-align: left; transition: background .2s ease, border-color .2s ease; }
.demo-step-number { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border-glass-bright); border-radius: 50%; font-size: 9px; font-weight: 700; }
.demo-step > strong { font-size: 12px; line-height: 1.45; font-weight: 600; color: var(--text-pure); }
.demo-step-hint { margin-top: auto; font-size: 10px; line-height: 1.5; }
.demo-step:hover { border-color: var(--gold-primary); }
.demo-step[aria-pressed="true"] { border-color: var(--gold-primary); background: var(--gold-glow); }
.demo-step[aria-pressed="true"] .demo-step-number { border-color: transparent; background: var(--gold-gradient); color: #17251d; }
.demo-disclaimer, .demo-no-script { margin: 14px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.6; text-align: center; }
.loyalty-demo[data-step="3"] .demo-event-icon { background: var(--gold-glow); color: var(--gold-primary); }
[data-theme="light"] .loyalty-demo { background: #fff; border-color: #d6dfda; box-shadow: 0 18px 45px rgba(24, 55, 43, .09); }
[data-theme="light"] .demo-stage { background: radial-gradient(ellipse at 50% 30%, #f6ecd2, #f2f6f0 78%); border-color: #e2e7df; }
[data-theme="light"] .demo-event { background: #fff; }
[data-theme="light"] .demo-step { background: #f8faf7; }
[data-theme="light"] .demo-step[aria-pressed="true"] { background: #fcf7e9; }
@media (prefers-reduced-motion: no-preference) {
  .demo-stamp.is-new { animation: demo-stamp-in .45s var(--ease-spring) both; animation-delay: var(--stamp-delay, 0ms); }
  .loyalty-demo[data-step="3"] .demo-wallet-reward > svg { animation: demo-gift-in .6s var(--ease-spring) both; }
}
@media (max-width: 600px) {
  .demo-stage { grid-template-columns: minmax(0, 1fr); }
  .demo-guide { display: contents; }
  .demo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo-step { min-height: 118px; }
  .demo-event { min-height: 100px; }
}
@keyframes demo-stamp-in { from { opacity: .35; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes demo-gift-in { from { transform: scale(.6) rotate(-12deg); } to { transform: scale(1) rotate(0); } }

/* ==========================================================================
   Section 4: Merchant Cockpit
   ========================================================================== */
.merchant-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.25fr;
  align-items: center;
  gap: 70px;
}

.merchant-copy > p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.tool-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-tabs > button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--bg-card);
  text-align: left;
  transition: all 0.25s var(--ease-smooth);
}

.tool-tabs > button[aria-selected="true"] {
  border-color: var(--gold-border);
  background: var(--bg-card-hover);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(245, 215, 127, 0.05);
}

.tool-tabs > button:hover:not([aria-selected="true"]) {
  border-color: var(--border-glass-bright);
  background: rgba(255, 255, 255, 0.05);
}

.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: all 0.25s;
}

.tool-tabs > button[aria-selected="true"] .tool-icon {
  background: var(--gold-gradient);
  border-color: rgba(255, 241, 197, 0.5);
  color: #0B0E14;
  box-shadow: 0 0 15px var(--gold-glow);
}

.tool-tabs strong {
  display: block;
  font: 650 15px/1.4 var(--font-display);
  color: var(--text-pure);
}

.tool-tabs small {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.tool-arrow {
  margin-left: auto;
  width: 18px;
  height: 18px;
  opacity: 0;
  color: var(--gold-primary);
  transition: opacity 0.2s, transform 0.2s;
}

.tool-tabs > button[aria-selected="true"] .tool-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* 3D Tilted Dashboard Preview */
.dashboard-preview-3d {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass-bright);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 40px rgba(56, 189, 248, 0.1);
  overflow: hidden;
  perspective: 1400px;
  transform: perspective(1400px) rotateX(4deg) rotateY(-3deg);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}

.dashboard-preview-3d:hover {
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.85), 0 0 50px rgba(245, 215, 127, 0.15);
}


.section-link {
  white-space: nowrap;
}

.dashboard-window-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-title h4 {
  font: 700 15px/1.3 var(--font-display);
  color: var(--text-pure);
  margin: 0;
}

.panel-title p {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.dashboard-chrome {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 18px;
  background: rgba(14, 21, 35, 0.95);
  border-bottom: 1px solid var(--border-glass);
  font-size: 11px;
  color: var(--text-secondary);
}

.window-dots {
  display: flex;
  gap: 6px;
}

.window-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.window-dots i:first-child { background: #EF4444; }
.window-dots i:nth-child(2) { background: #F59E0B; }
.window-dots i:nth-child(3) { background: #10B981; }

.example-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--emerald-trust);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.live-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-trust);
  box-shadow: 0 0 6px var(--emerald-trust);
}

.dashboard-screen {
  display: flex;
  min-height: 440px;
}

.dashboard-sidebar {
  width: 64px;
  background: #090E18;
  border-right: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 14px;
}

.dashboard-sidebar .mini-logo {
  font-size: 18px;
  margin-bottom: 12px;
}

.sidebar-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.sidebar-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-icon.selected {
  background: rgba(245, 215, 127, 0.12);
  color: var(--gold-primary);
  border: 1px solid var(--gold-border);
}

.sidebar-avatar {
  margin-top: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #0B0E14;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.dashboard-content {
  padding: 24px;
  flex: 1;
}

.dashboard-welcome {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.dashboard-store-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-primary);
}

.dashboard-welcome h3 {
  font: 600 18px/1.3 var(--font-display);
  color: var(--text-pure);
  margin-top: 3px;
}

.dashboard-date {
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dashboard-metrics > div {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
}

.dashboard-metrics span {
  font-size: 11px;
  color: var(--text-secondary);
}

.dashboard-metrics strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 700 32px/1.2 var(--font-display);
  color: var(--text-pure);
  margin-top: 6px;
}

.dashboard-metrics small {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
}

.dashboard-chart {
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.chart-heading {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-heading strong {
  font-size: 12px;
  color: var(--text-pure);
}

.chart-heading span {
  font-size: 10px;
  color: var(--text-muted);
}

.chart-bars {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  height: 110px;
  margin-top: 14px;
}

.chart-bars > div {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
}

.chart-bars i {
  width: 100%;
  max-width: 32px;
  height: var(--bar);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px 4px 0 0;
  transition: height 0.4s;
}

.chart-bars > div.peak i {
  background: var(--gold-gradient);
  box-shadow: 0 0 12px var(--gold-glow);
}

[data-theme="light"] .chart-bars i { background: rgba(14, 76, 146, 0.2); }
[data-theme="light"] .chart-bars > div.peak i { background: var(--gold-gradient); }

.chart-bars span {
  position: absolute;
  bottom: -18px;
  font-size: 9px;
  color: var(--text-muted);
}

.dashboard-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-top: 28px;
  background: rgba(245, 215, 127, 0.06);
  border: 1px solid var(--gold-border);
  border-radius: 10px;
}

.insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(245, 215, 127, 0.15);
  display: grid;
  place-items: center;
  color: var(--gold-primary);
  flex-shrink: 0;
}

.insight-icon svg {
  width: 16px;
  height: 16px;
}

.dashboard-insight strong {
  display: block;
  font-size: 12px;
  color: var(--text-pure);
}

.dashboard-insight p {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.dashboard-insight > svg {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--gold-primary);
}

.dashboard-disclaimer {
  font-size: 9px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 12px;
}

/* Panel Rewards */
.preview-customer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-glass);
}

.preview-customer strong {
  display: block;
  font-size: 12px;
  color: var(--text-pure);
}

.preview-customer > div > span {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
}

.reward-ready {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--emerald-trust) !important;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--emerald-glow);
  padding: 4px 8px;
  border-radius: 6px;
}

/* Panel Reminders */
.reminder-preview {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 16px;
}

.reminder-preview-tag {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--gold-primary);
  margin-bottom: 10px;
}

.reminder-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-pure);
}

.reminder-preview-header svg {
  width: 18px;
  height: 18px;
  color: var(--gold-primary);
}

.reminder-preview p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-top: 10px;
}

.reminder-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-muted);
  margin: 12px 0;
}

.reminder-rule svg {
  width: 14px;
  height: 14px;
  color: var(--emerald-trust);
}

/* ==========================================================================
   Section 5: Enterprise Assurance & Security Environment (DEDICATED)
   ========================================================================== */
.trust-environment-section {
  position: relative;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  background: radial-gradient(circle at 50% 20%, rgba(16, 26, 44, 0.7) 0%, var(--bg-deep) 80%);
}

/* Keep the security section's background light and fully opaque. */
html[data-theme="light"] #confiance {
  background: radial-gradient(circle at 50% 20%, #fffaf0 0%, #f8faf9 80%);
}

.text-center {
  text-align: center;
}

.justify-center {
  justify-content: center;
}

.max-w-700 {
  max-width: 680px;
  margin-inline: auto;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.trust-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  padding: 36px;
  transition: transform 0.4s var(--ease-spring), border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.trust-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px var(--gold-glow);
}

.trust-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(245, 215, 127, 0.1);
  border: 1px solid var(--gold-border);
  color: var(--gold-primary);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  box-shadow: 0 0 20px var(--gold-glow);
}

.trust-icon-box svg {
  width: 26px;
  height: 26px;
}

.trust-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--gold-primary);
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(245, 215, 127, 0.08);
  border: 1px solid var(--gold-border);
  margin-bottom: 12px;
}

.trust-card h3 {
  font: 700 22px/1.3 var(--font-display);
  color: var(--text-pure);
  margin-bottom: 14px;
}

.trust-card p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.trust-card p strong {
  color: var(--text-pure);
}

.trust-check-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-glass);
  padding-top: 18px;
}

.trust-check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.trust-check-list svg {
  width: 16px;
  height: 16px;
  color: var(--emerald-trust);
}

/* Trust Metrics Banner */
.trust-metrics-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 32px 40px;
  background: rgba(14, 21, 35, 0.85);
  border: 1px solid var(--gold-border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--gold-glow);
  backdrop-filter: blur(16px);
}

.trust-metric-item {
  text-align: center;
}

.metric-num {
  display: block;
  font: 800 clamp(32px, 3.2vw, 44px)/1 var(--font-display);
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
}

.metric-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  font-weight: 550;
}

.trust-metric-divider {
  width: 1px;
  height: 50px;
  background: var(--border-glass);
}

/* ==========================================================================
   Section 6: Support & Method
   ========================================================================== */
.support-section {
  position: relative;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-glass);
}

.support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-block: 100px;
}

.support-copy p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-top: 24px;
}

.local-signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-glass);
}

.local-mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--gold-border);
  background: rgba(245, 215, 127, 0.08);
  display: grid;
  place-items: center;
  color: var(--gold-primary);
  flex-shrink: 0;
}

.local-mark svg {
  width: 32px;
  height: 26px;
}

.local-signature span:last-child {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text-secondary);
}

.support-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-box {
  display: flex;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 24px;
  transition: transform 0.3s, border-color 0.3s;
}

.step-box:hover {
  transform: translateX(6px);
  border-color: var(--gold-border);
}

.step-number-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #0B0E14;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 15px var(--gold-glow);
}

.step-box h3 {
  font: 700 17px/1.35 var(--font-display);
  color: var(--text-pure);
  margin-bottom: 6px;
}

.step-box p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* ==========================================================================
   Section 7: FAQ Interactive Chatbot
   ========================================================================== */
.faq {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr;
  gap: 60px;
  align-items: flex-start;
}

.faq-intro p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 18px 0 24px;
}

.faq-bot-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.faq-feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-primary);
}

.feat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-glow);
  flex-shrink: 0;
}

.faq-human-touch {
  padding-top: 20px;
  border-top: 1px solid var(--border-glass);
  margin-top: 20px;
}

.human-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px !important;
}

/* Chatbot Window Card */
.faq-chatbot-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.faq-chatbot-card:hover {
  border-color: var(--border-glass-bright);
}

/* Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(14, 21, 35, 0.65);
  border-bottom: 1px solid var(--border-glass);
}

[data-theme="light"] .chat-header {
  background: rgba(255, 255, 255, 0.75);
}

.chat-agent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gold-gradient);
  color: #070A10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px var(--gold-glow);
  flex-shrink: 0;
}

.agent-avatar svg {
  width: 22px;
  height: 22px;
}

.agent-live-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 8px #10B981;
}

.agent-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-name {
  font: 700 14px/1.3 var(--font-display);
  color: var(--text-pure);
}

.agent-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(245, 215, 127, 0.14);
  color: var(--gold-primary);
  border: 1px solid var(--gold-border);
}

.agent-status {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.chat-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.chat-reset-btn svg {
  width: 12px;
  height: 12px;
}

.chat-reset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-pure);
  border-color: var(--gold-border);
}

/* Chat Suggestions Chips */
.chat-suggestions-bar {
  padding: 10px 16px;
  background: rgba(7, 10, 16, 0.4);
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

[data-theme="light"] .chat-suggestions-bar {
  background: rgba(240, 245, 250, 0.6);
}

.suggestions-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.suggestions-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px;
}

.suggestions-scroll::-webkit-scrollbar {
  display: none;
}

.suggest-chip {
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  font-size: 11px;
  font-weight: 550;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s var(--ease-spring);
  flex-shrink: 0;
}

.suggest-chip:hover {
  background: rgba(245, 215, 127, 0.12);
  border-color: var(--gold-border);
  color: var(--gold-primary);
  transform: translateY(-1px);
}

/* Messages Stream */
.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 380px;
  min-height: 300px;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
  width: 5px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-glass-bright);
  border-radius: 10px;
}

.chat-bubble {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.6;
  position: relative;
  word-break: break-word;
  animation: bubbleIn 0.25s var(--ease-spring);
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-bubble.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

[data-theme="light"] .chat-bubble.bot {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(10, 25, 22, 0.14);
  color: #1e293b;
  box-shadow: 0 4px 14px rgba(14, 76, 146, 0.08);
}

.chat-bubble.bot strong {
  color: var(--text-pure);
}

[data-theme="light"] .chat-bubble.bot strong {
  color: #091e42;
}

.chat-bubble.user {
  align-self: flex-end;
  background: var(--gold-gradient);
  color: #070A10;
  border-bottom-right-radius: 4px;
  font-weight: 600;
  box-shadow: 0 4px 16px var(--gold-glow);
}

[data-theme="light"] .chat-bubble.user {
  background: linear-gradient(135deg, #102a43, #1e3a5f);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.25);
}

.chat-bubble-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .chat-bubble-actions {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.chat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(245, 215, 127, 0.15);
  border: 1px solid var(--gold-border);
  color: var(--gold-primary);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-action-btn:hover {
  background: var(--gold-gradient);
  color: #070A10;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Typing Indicator */
.chat-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}

[data-theme="light"] .chat-typing {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.14);
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-primary);
  opacity: 0.4;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Chat Input Bar */
.chat-input-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(14, 21, 35, 0.7);
  border-top: 1px solid var(--border-glass);
}

[data-theme="light"] .chat-input-form {
  background: rgba(255, 255, 255, 0.85);
  border-top-color: rgba(10, 25, 22, 0.14);
}

.chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass-bright);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text-pure);
  outline: none;
  transition: all 0.2s;
}

[data-theme="light"] .chat-input {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.22);
  color: #1e293b;
}

.chat-input:focus {
  border-color: var(--gold-primary);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 14px var(--gold-glow);
}

[data-theme="light"] .chat-input:focus {
  background: #ffffff;
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.18);
}

.chat-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--gold-gradient);
  color: #070A10;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px var(--gold-glow);
}

.chat-send-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 18px var(--gold-glow);
}

.chat-send-btn:active {
  transform: translateY(0) scale(0.96);
}

.chat-send-btn svg {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
}



/* ==========================================================================
   Section 8: Feedback & Reviews Section
   ========================================================================== */
.reviews-section {
  position: relative;
  border-top: 1px solid var(--border-glass);
  background: radial-gradient(circle at 50% 10%, rgba(20, 30, 52, 0.5) 0%, var(--bg-deep) 80%);
}

.reviews-stat-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 30px 40px;
  background: rgba(14, 21, 35, 0.85);
  border: 1px solid var(--gold-border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--gold-glow);
  backdrop-filter: blur(16px);
  margin-bottom: 50px;
}

.review-stat-item {
  text-align: center;
}

.stat-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}

.stat-stars svg {
  width: 16px;
  height: 16px;
  color: var(--gold-primary);
  fill: var(--gold-primary);
}

.stat-num {
  display: block;
  font: 800 clamp(30px, 3vw, 42px)/1 var(--font-display);
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
}

.stat-label {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 550;
}

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

.review-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  transition: transform 0.35s var(--ease-spring), border-color 0.3s, box-shadow 0.3s;
}

.review-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 30px var(--gold-glow);
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.review-stars {
  display: flex;
  gap: 4px;
}

.review-stars svg {
  width: 16px;
  height: 16px;
  color: var(--gold-primary);
  fill: var(--gold-primary);
}

.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--emerald-trust);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--emerald-glow);
  padding: 4px 10px;
  border-radius: 20px;
}

.verified-pill svg {
  width: 12px;
  height: 12px;
}

.review-text {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-primary);
  font-style: italic;
  margin-bottom: 24px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border-glass);
  padding-top: 18px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass-bright);
}

.avatar-pizza { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); }
.avatar-choco { background: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.3); }
.avatar-coffee { background: rgba(245, 215, 127, 0.15); border-color: var(--gold-border); }
.avatar-boutique { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.3); }

.review-author strong {
  display: block;
  font: 700 14px var(--font-display);
  color: var(--text-pure);
}

.review-author span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   Section 9: Contact VIP Onboarding
   ========================================================================== */
.contact-section {
  position: relative;
  background: radial-gradient(circle at 50% 30%, rgba(20, 30, 50, 0.6) 0%, var(--bg-deep) 70%);
  border-top: 1px solid var(--border-glass);
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  padding-block: 100px;
}

.contact-copy p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-top: 24px;
}

.contact-direct-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 32px;
  transition: transform 0.25s, border-color 0.25s;
}

.contact-direct-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-border);
}

.direct-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245, 215, 127, 0.12);
  display: grid;
  place-items: center;
  color: var(--gold-primary);
  flex-shrink: 0;
}

.direct-icon svg {
  width: 20px;
  height: 20px;
}

.contact-direct-card span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

.contact-direct-card strong {
  display: block;
  font-size: 14px;
  color: var(--gold-light);
  margin-top: 2px;
}

.direct-arrow {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--gold-primary);
}

.contact-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
  font-size: 11px;
  color: var(--text-secondary);
}

.contact-trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.contact-trust-badges svg {
  width: 14px;
  height: 14px;
  color: var(--emerald-trust);
}

/* Contact Form VIP */
#contact-form {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  padding: 38px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 40px var(--gold-glow);
  backdrop-filter: blur(20px);
}

.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 18px;
}

.form-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--gold-primary);
}

.form-header h3 {
  font: 700 22px/1.3 var(--font-display);
  color: var(--text-pure);
  margin-top: 4px;
}

.form-header svg {
  width: 32px;
  height: 32px;
  color: var(--gold-primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.form-group {
  margin-bottom: 18px;
}

#contact-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

#contact-form label span {
  color: var(--gold-primary);
}

#contact-form input,
#contact-form select,
#contact-form textarea {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass-bright);
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 13.5px;
  color: var(--text-pure);
  transition: border-color 0.2s, background 0.2s;
}

#contact-form input::placeholder {
  color: var(--text-muted);
}

#contact-form select {
  height: 48px;
  background-color: var(--bg-surface);
}

#contact-form select option {
  background: var(--bg-surface);
  color: var(--text-pure);
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-color: var(--gold-primary);
  background: rgba(245, 215, 127, 0.04);
  box-shadow: 0 0 12px var(--gold-glow);
}

.form-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.lock-icon {
  width: 14px;
  height: 14px;
  color: var(--gold-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

#contact-result {
  margin-top: 24px;
  border-top: 1px solid var(--border-glass);
  padding-top: 20px;
}

.result-box h3 {
  font: 700 17px/1.3 var(--font-display);
  color: var(--gold-light);
}

.result-box p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 6px 0 12px;
}

.result-box p a {
  color: var(--gold-primary);
  text-decoration: underline;
}

#contact-result textarea {
  font-size: 11.5px;
  line-height: 1.6;
  background: #090E18;
  margin-bottom: 14px;
  resize: vertical;
}

.request-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

#copy-status {
  font-size: 11px;
  color: var(--emerald-trust);
  min-height: 18px;
  margin-top: 8px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: #05070B;
  border-top: 1px solid var(--border-glass);
  color: var(--text-secondary);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 70px;
  align-items: start;
  padding-block: 70px 45px;
}

.footer-main p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-top: 18px;
  max-width: 320px;
}

.footer-security-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(245, 215, 127, 0.08);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  color: var(--gold-primary);
  font-size: 11px;
  font-weight: 600;
  margin-top: 18px;
}

.footer-security-pill svg {
  width: 14px;
  height: 14px;
}

.footer-nav-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text-pure);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-main nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}

.footer-main nav a:hover {
  color: var(--gold-primary);
}

.footer-signoff {
  text-align: right;
}

.footer-signoff span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.footer-signoff strong {
  display: block;
  font-size: 40px;
  margin-top: 6px;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-primary);
}

.back-to-top svg {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  flex-wrap: wrap;
  gap: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-glass);
  padding-block: 22px;
  font-size: 11px;
  color: var(--text-muted);
}

.footer-bottom-badges {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-bottom-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-bottom-badges svg {
  width: 13px;
  height: 13px;
  color: var(--emerald-trust);
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */
@keyframes spin-orbit {
  0% { transform: rotateX(60deg) rotateZ(0deg); }
  100% { transform: rotateX(60deg) rotateZ(360deg); }
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes card-sheen {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes stamp-pop {
  0% { transform: scale(0.6) rotate(-15deg); opacity: 0.2; }
  60% { transform: scale(1.25) rotate(5deg); }
  100% { transform: scale(1.04) rotate(0deg); opacity: 1; }
}

/* ==========================================================================
   Merchant Login Button & Modal System
   ========================================================================== */
.header-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  min-height: 44px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass-bright);
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
  white-space: nowrap;
}

.header-login-btn:hover {
  background: rgba(245, 215, 127, 0.12);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  transform: translateY(-1px);
}

.login-btn-icon {
  width: 14px;
  height: 14px;
  color: var(--gold-primary);
  flex-shrink: 0;
}

.mobile-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-primary);
  background: rgba(245, 215, 127, 0.08);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-login-btn:hover {
  background: rgba(245, 215, 127, 0.15);
  transform: translateY(-1px);
}

[data-theme="light"] .header-login-btn {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.22);
  color: #0c121e;
  box-shadow: 0 2px 8px rgba(14, 76, 146, 0.06);
}

[data-theme="light"] .header-login-btn:hover {
  border-color: var(--gold-primary);
  color: var(--gold-dark);
}

[data-theme="light"] .mobile-login-btn {
  background: #ffffff;
  border-color: rgba(217, 119, 6, 0.35);
  color: var(--gold-dark);
}

/* Modal Window */
.merchant-login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.merchant-login-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.modal-dialog {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.35s var(--ease-spring);
}

.merchant-login-modal.is-open .modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-card {
  position: relative;
  background: var(--bg-surface-elevated, #0e1523);
  border: 1px solid var(--border-glass-bright);
  border-radius: 24px;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 40px var(--gold-glow);
  color: var(--text-pure);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 64px 16px;
}

[data-theme="light"] .modal-card {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.25);
  box-shadow: 0 24px 60px rgba(14, 76, 146, 0.16);
  color: #0c121e;
}

.modal-close-btn {
  position: absolute;
  z-index: 20;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-pure);
  border-color: var(--gold-border);
}

.modal-close-btn svg {
  width: 14px;
  height: 14px;
}

.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--emerald-trust);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.modal-title {
  font: 700 24px/1.25 var(--font-display);
  color: var(--text-pure);
  margin-bottom: 6px;
}

[data-theme="light"] .modal-title {
  color: #0c121e;
}

.modal-subtitle {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-form label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

[data-theme="light"] .modal-form label {
  color: #334155;
}

.password-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-text-link {
  background: none;
  border: none;
  color: var(--gold-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.input-wrapper, .select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper input, .select-wrapper select {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-glass-bright);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-pure);
  padding: 0 16px 0 42px;
  font-size: 13.5px;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.input-wrapper input:focus, .select-wrapper select:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px var(--gold-glow);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .input-wrapper input,
[data-theme="light"] .select-wrapper select {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .input-wrapper input:focus,
[data-theme="light"] .select-wrapper select:focus {
  background: #ffffff;
  border-color: var(--gold-primary);
}

.input-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.select-arrow {
  position: absolute;
  right: 14px;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.select-wrapper select {
  padding-left: 16px;
  cursor: pointer;
}

.login-error-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 12px;
  font-weight: 550;
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.alert-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}

.login-submit-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

#loginSubmitBtn:hover .login-submit-arrow {
  transform: translate(2px, -2px);
}

.modal-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}

.modal-footer-note a {
  color: var(--gold-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   HEADER & MOBILE REGISTER BUTTONS
   ========================================================================== */
.header-register-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 18px var(--gold-glow);
}

.mobile-register-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--gold-border);
  background: linear-gradient(135deg, rgba(245, 215, 127, 0.22) 0%, rgba(212, 175, 55, 0.12) 100%);
  color: var(--gold-primary);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.mobile-register-btn:hover {
  background: var(--gold-gradient);
  color: #0c121e;
  border-color: transparent;
}

[data-theme="light"] .mobile-register-btn {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.14) 0%, rgba(245, 158, 11, 0.08) 100%);
  border-color: rgba(217, 119, 6, 0.4);
  color: #b45309;
}

[data-theme="light"] .mobile-register-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
}

.cockpit-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   MODAL : REGISTRATION & ONBOARDING WIZARD
   ========================================================================== */
.merchant-register-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

.merchant-register-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-dialog-wide {
  max-width: 960px;
}

.merchant-register-modal.is-open .modal-dialog-wide {
  transform: scale(1) translateY(0);
}

.modal-card-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  padding: 32px 30px;
  overflow-y: auto;
  border-radius: 28px;
}

.modal-switch-link,
.inline-link {
  background: none;
  border: none;
  color: var(--gold-primary);
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.modal-switch-link:hover,
.inline-link:hover {
  opacity: 0.85;
}

.footer-note-sep {
  opacity: 0.4;
  margin: 0 4px;
}

/* Steps Indicator */
.register-steps-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: 99px;
}

[data-theme="light"] .register-steps-nav {
  background: rgba(10, 25, 22, 0.06);
  border-color: rgba(10, 25, 22, 0.16);
}

.step-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}

.step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.25s;
}

.step-nav-item.active {
  background: rgba(245, 215, 127, 0.14);
  color: var(--gold-primary);
}

.step-nav-item.active .step-num {
  background: var(--gold-primary);
  color: #0c121e;
}

.step-nav-item.completed {
  color: var(--emerald-trust);
}

.step-nav-item.completed .step-num {
  background: var(--emerald-trust);
  color: #ffffff;
}

[data-theme="light"] .step-nav-item.active {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

[data-theme="light"] .step-nav-item.active .step-num {
  background: #a14c0b;
  color: #ffffff;
}

.step-nav-line {
  flex: 1;
  height: 2px;
  background: var(--border-glass);
  margin: 0 4px;
}

/* Step Panes */
.register-step-pane {
  display: none;
  flex-direction: column;
  gap: 16px;
  animation: modalStepFadeIn 0.3s ease;
}

.register-step-pane.active {
  display: flex;
}

@keyframes modalStepFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.required-star {
  color: var(--gold-primary);
  font-weight: 700;
}

.field-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* Category Chips */
.category-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.category-chip {
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass-bright);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.category-chip:hover {
  border-color: var(--gold-border);
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.08);
}

.category-chip.active {
  background: rgba(245, 215, 127, 0.16);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  font-weight: 650;
  box-shadow: 0 0 12px var(--gold-glow);
}

[data-theme="light"] .category-chip {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .category-chip.active {
  background: rgba(217, 119, 6, 0.12);
  border-color: #d97706;
  color: #86410b;
}

/* Form Row Grid */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-row-2 > * {
  flex: 1;
}

.form-row-address {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr;
  gap: 12px;
  align-items: flex-end;
}

.form-col-street {
  flex: 1.6;
}

.form-col-subgroup {
  flex: 1.4;
  display: flex;
  gap: 10px;
}

.form-col-subgroup .form-group {
  flex: 1;
}

.form-col-subgroup input {
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-glass-bright);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-pure);
  padding: 0 12px;
  font-size: 13px;
  width: 100%;
}

[data-theme="light"] .form-col-subgroup input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Geo Tip Banner */
.geo-tip-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.geo-tip-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--emerald-trust);
  margin-top: 2px;
}

.geo-tip-banner strong {
  color: var(--emerald-trust);
}

/* Stamp Selectors */
.stamp-selector-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stamp-option-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-glass-bright);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.stamp-option-btn:hover {
  border-color: var(--gold-border);
  color: var(--text-pure);
}

.stamp-option-btn.active {
  background: rgba(245, 215, 127, 0.16);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  box-shadow: 0 0 14px var(--gold-glow);
}

[data-theme="light"] .stamp-option-btn {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .stamp-option-btn.active {
  background: rgba(217, 119, 6, 0.12);
  border-color: #d97706;
  color: #86410b;
}

/* Color Palette Swatches */
.pass-color-palette {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.color-swatch-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--swatch-color);
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.color-swatch-btn:hover {
  transform: scale(1.15);
}

.color-swatch-btn.active {
  transform: scale(1.2);
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(245, 215, 127, 0.45);
}

.custom-color-picker-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px dashed var(--border-glass-bright);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.custom-color-picker-label input[type="color"] {
  position: absolute;
  inset: -10px;
  opacity: 0;
  cursor: pointer;
}

.custom-color-icon {
  font-size: 14px;
  pointer-events: none;
}

/* Password Strength Bar */
.password-strength-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.strength-segment {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s;
}

.strength-label {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 90px;
  text-align: right;
}

/* RGPD Consent Checkbox */
.rgpd-checkbox-row {
  margin-top: 4px;
}

.custom-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  user-select: none;
}

.custom-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-checkmark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--border-glass-bright);
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 2px;
  transition: all 0.2s;
}

.custom-checkbox-container input:checked ~ .checkbox-checkmark {
  background: var(--gold-primary);
  border-color: var(--gold-primary);
}

.custom-checkbox-container input:checked ~ .checkbox-checkmark::after {
  content: '✓';
  color: #0c121e;
  font-size: 12px;
  font-weight: 800;
}

/* Step Action Buttons */
.step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-glass);
}

/* ==========================================================================
   LIVE WALLET PASS PREVIEW (RIGHT COLUMN)
   ========================================================================== */
.register-preview-col {
  border-left: 1px solid var(--border-glass);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .register-preview-col {
  border-left-color: rgba(10, 25, 22, 0.16);
}

.preview-sticky-wrap {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preview-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--emerald-trust);
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.preview-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   CARD MODEL SELECTOR (ONLINE TEMPLATES)
   ========================================================================== */
.card-model-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 14px;
}

.card-model-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
}

[data-theme="light"] .card-model-btn {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.1);
}

.card-model-btn:hover {
  border-color: var(--gold-primary);
  transform: translateY(-1px);
}

.card-model-btn.active {
  border-color: var(--gold-primary);
  background: rgba(245, 215, 127, 0.08);
  box-shadow: 0 0 16px rgba(245, 215, 127, 0.18);
}

[data-theme="light"] .card-model-btn.active {
  background: #fffbeb;
  border-color: var(--gold-primary);
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.2);
}

.model-swatch {
  width: 100%;
  height: 28px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.model-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-meta strong {
  font-size: 11px;
  color: var(--text-pure);
  line-height: 1.2;
}

.model-meta small {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.2;
}

/* ==========================================================================
   AUTHENTIC APPLE / GOOGLE WALLET PASS CARD PREVIEW
   ========================================================================== */
.apple-wallet-phone-frame {
  background: #000000;
  border-radius: 32px;
  padding: 14px 12px 18px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.wallet-sheet-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 2px;
}

.sheet-btn-ok {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: default;
}

.sheet-title-center {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.sheet-btn-more {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: default;
}

/* The Pass Card Sheet itself */
.wallet-pass-sheet-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 16px 20px;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Top Header Strip: Brand Avatar + Greeting */
.pass-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pass-brand-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #0e3a5d;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.3s ease;
}

.pass-greeting-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pass-greeting-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #0e3a5d;
  text-transform: uppercase;
}

.pass-customer-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #38bdf8;
  letter-spacing: -0.2px;
  transition: color 0.3s ease;
}

/* Hero Graphic Banner */
.pass-hero-banner {
  background: var(--pass-hero-bg, linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%));
  border-radius: 0;
  min-height: 235px;
  padding: 14px 10px 38px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.6), 0 4px 16px rgba(14, 58, 93, 0.15);
  transition: background 0.35s ease;
}

.hero-pattern-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.hero-shape-1 {
  width: 90px;
  height: 90px;
  top: -20px;
  left: -20px;
}

.hero-shape-2 {
  width: 70px;
  height: 70px;
  bottom: -15px;
  right: -10px;
}

.hero-shape-3 {
  width: 45px;
  height: 45px;
  top: 30px;
  right: 25px;
  opacity: 0.4;
}

.hero-badge-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-club-badge {
  min-width: 140px;
  height: auto;
  border-radius: 14px;
  background: #0e3a5d;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 8px 18px;
  transition: background 0.3s ease;
}

.badge-sub-curve {
  display: none !important;
}

.badge-main-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
}

.badge-brand-sub {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #38bdf8;
  margin-top: 3px;
  text-transform: uppercase;
}

.hero-stamps-pill {
  position: absolute;
  bottom: 8px;
  z-index: 2;
  background: rgba(14, 58, 93, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 99px;
  padding: 3px 10px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   10-STAMP WALLET GRID (5 STAMPS IN ROW 1, 5 STAMPS IN ROW 2)
   ========================================================================== */
.wallet-stamps-container-10 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: 255px;
  margin: 10px auto 6px;
  position: relative;
  z-index: 2;
}

.stamps-grid-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  justify-items: center;
}

.pass-stamp-slot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
}

.pass-stamp-slot.stamped {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fefce8 65%, #fef08a 100%);
  border: 2px solid var(--pass-accent-color, #c5a059);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.95);
}

.pass-stamp-slot.stamped:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.pass-stamp-slot.stamped .stamp-slot-icon {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.pass-stamp-slot.stamped .stamp-check-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 7.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  border: 1px solid #ffffff;
}

.pass-stamp-slot.pending {
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pass-stamp-slot.pending .stamp-slot-icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.32;
  filter: grayscale(0.8);
}

.pass-stamp-slot.pending .stamp-slot-number {
  position: absolute;
  bottom: 2px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.2px;
}

.pass-stamp-slot.milestone-reward {
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #d97706 100%);
  border: 2px solid #fde047;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.65), 0 4px 10px rgba(0, 0, 0, 0.25);
  animation: rewardPulse 2.4s infinite ease-in-out;
}

@keyframes rewardPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.85), 0 6px 14px rgba(0, 0, 0, 0.3);
    transform: scale(1.06);
  }
}

.pass-stamp-slot.milestone-reward .stamp-slot-icon {
  font-size: 21px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.pass-stamp-slot.milestone-reward .stamp-reward-tag {
  position: absolute;
  bottom: -4px;
  background: #78350f;
  color: #fef08a;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 99px;
  border: 0.8px solid #fde047;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   SECTOR FILTER BAR & STAMP PILLS IN REGISTRATION MODAL
   ========================================================================== */
.model-sector-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  margin-bottom: 10px;
  scrollbar-width: thin;
}
.sector-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: 99px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--ink, #0f172a);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.sector-filter-btn:hover {
  border-color: rgba(197, 160, 89, 0.5);
  background: rgba(245, 215, 127, 0.08);
}
.sector-filter-btn.active {
  background: #0e3a5d;
  color: #ffffff;
  border-color: #0e3a5d;
  box-shadow: 0 2px 8px rgba(14, 58, 93, 0.25);
}

.model-stamp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(245, 215, 127, 0.18);
  color: #92400e;
  margin-top: 3px;
  width: fit-content;
}

/* Secondary Fields Row */
.pass-secondary-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 2px 4px 6px;
  border-bottom: 1px solid #f1f5f9;
}

.pass-field-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pass-field-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  align-items: flex-end;
}

.pass-secondary-fields .field-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0e3a5d;
  text-transform: uppercase;
}

.pass-secondary-fields .field-value {
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
  line-height: 1.3;
  word-break: break-word;
}

/* Barcode & QR Code Section */
.pass-barcode-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.qr-code-wrapper {
  position: relative;
  display: inline-block;
  padding: 4px;
  background: #ffffff;
  border-radius: 8px;
}

.pass-qr-svg {
  display: block;
  width: 140px;
  height: 140px;
}

.qr-brand-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #0e3a5d;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1.5px solid #ffffff;
}

.pass-serial-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #1e293b;
}

/* ==========================================================================
   MODEL SPECIFIC THEMES (Matching CGR / Prestige / Emeraude / Terracotta)
   ========================================================================== */
/* 1. Azur Club (User Reference Image Style) */
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .pass-brand-avatar { background: #0e3a5d; }
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .pass-greeting-label { color: #0e3a5d; }
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .pass-customer-name { color: #38bdf8; }
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .pass-hero-banner { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%); }
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .hero-club-badge { background: #0e3a5d; }
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .pass-secondary-fields .field-label { color: #0e3a5d; }
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .pass-secondary-fields .field-value { color: #38bdf8; }
.wallet-pass-sheet-card[data-card-model="cgr-club-azur"] .qr-brand-badge { background: #0e3a5d; }

/* 2. Prestige Noir & Or */
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .pass-brand-avatar { background: #0a0f0d; border-color: #f5d77f; color: #f5d77f; }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .pass-greeting-label { color: #0a0f0d; }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .pass-customer-name { color: #b45309; }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .pass-hero-banner { background: linear-gradient(135deg, #132621 0%, #07100d 100%); }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .hero-shape { background: rgba(245, 215, 127, 0.12); }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .hero-club-badge { background: #0a0f0d; border-color: #f5d77f; }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .badge-brand-sub { color: #f5d77f; }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .pass-secondary-fields .field-label { color: #0a0f0d; }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .pass-secondary-fields .field-value { color: #b45309; }
.wallet-pass-sheet-card[data-card-model="noir-or-prestige"] .qr-brand-badge { background: #0a0f0d; border-color: #f5d77f; color: #f5d77f; }

/* 3. Émeraude Signature */
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .pass-brand-avatar { background: #132621; color: #4ade80; }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .pass-greeting-label { color: #132621; }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .pass-customer-name { color: #16a34a; }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .pass-hero-banner { background: linear-gradient(135deg, #132621 0%, #1a3c34 100%); }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .hero-shape { background: rgba(74, 222, 128, 0.14); }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .hero-club-badge { background: #132621; border-color: #4ade80; }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .badge-brand-sub { color: #4ade80; }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .pass-secondary-fields .field-label { color: #132621; }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .pass-secondary-fields .field-value { color: #16a34a; }
.wallet-pass-sheet-card[data-card-model="emeraude-signature"] .qr-brand-badge { background: #132621; color: #4ade80; }

/* 4. Terracotta Artisanal */
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .pass-brand-avatar { background: #431407; color: #f97316; }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .pass-greeting-label { color: #431407; }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .pass-customer-name { color: #ea580c; }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .pass-hero-banner { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 50%, #fb923c 100%); }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .hero-shape { background: rgba(255, 255, 255, 0.6); }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .hero-club-badge { background: #431407; border-color: #f97316; }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .badge-brand-sub { color: #fb923c; }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .pass-secondary-fields .field-label { color: #431407; }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .pass-secondary-fields .field-value { color: #ea580c; }
.wallet-pass-sheet-card[data-card-model="terracotta-warm"] .qr-brand-badge { background: #431407; color: #f97316; }

/* 5. Minimaliste Albâtre */
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .pass-brand-avatar { background: #1e293b; color: #ffffff; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .pass-greeting-label { color: #1e293b; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .pass-customer-name { color: #475569; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .pass-hero-banner { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 1px solid #cbd5e1; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .hero-shape { background: rgba(148, 163, 184, 0.25); }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .hero-club-badge { background: #1e293b; border-color: #94a3b8; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .badge-brand-sub { color: #94a3b8; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .pass-secondary-fields .field-label { color: #1e293b; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .pass-secondary-fields .field-value { color: #475569; }
.wallet-pass-sheet-card[data-card-model="minimal-albatre"] .qr-brand-badge { background: #1e293b; color: #ffffff; }

/* 6. Boulangerie & Pâtisserie - Croissant Doré */
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .pass-brand-avatar { background: #78350f; border-color: #f59e0b; color: #f59e0b; }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .pass-greeting-label { color: #78350f; }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .pass-customer-name { color: #d97706; }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .pass-hero-banner { background: linear-gradient(135deg, #451a03 0%, #78350f 50%, #b45309 100%); }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .hero-shape { background: rgba(245, 158, 11, 0.18); }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .hero-club-badge { background: #78350f; border-color: #f59e0b; }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .badge-brand-sub { color: #f59e0b; }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .pass-secondary-fields .field-label { color: #78350f; }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .pass-secondary-fields .field-value { color: #d97706; }
.wallet-pass-sheet-card[data-card-model="boulangerie-croissant"] .qr-brand-badge { background: #78350f; color: #f59e0b; border: 1px solid #f59e0b; }

/* 7. Boulangerie & Pâtisserie - Pâtisserie & Gâteau */
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .pass-brand-avatar { background: #831843; border-color: #f472b6; color: #f472b6; }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .pass-greeting-label { color: #831843; }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .pass-customer-name { color: #db2777; }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .pass-hero-banner { background: linear-gradient(135deg, #500724 0%, #831843 50%, #be185d 100%); }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .hero-shape { background: rgba(244, 114, 182, 0.2); }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .hero-club-badge { background: #831843; border-color: #f472b6; }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .badge-brand-sub { color: #f472b6; }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .pass-secondary-fields .field-label { color: #831843; }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .pass-secondary-fields .field-value { color: #db2777; }
.wallet-pass-sheet-card[data-card-model="patisserie-cake"] .qr-brand-badge { background: #831843; color: #f472b6; }

/* 8. Boulangerie - Baguette & Épi */
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .pass-brand-avatar { background: #854d0e; border-color: #fbbf24; color: #fbbf24; }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .pass-greeting-label { color: #854d0e; }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .pass-customer-name { color: #d97706; }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .pass-hero-banner { background: linear-gradient(135deg, #422006 0%, #713f12 50%, #a16207 100%); }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .hero-shape { background: rgba(251, 191, 36, 0.2); }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .hero-club-badge { background: #713f12; border-color: #fbbf24; }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .badge-brand-sub { color: #fbbf24; }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .pass-secondary-fields .field-label { color: #854d0e; }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .pass-secondary-fields .field-value { color: #d97706; }
.wallet-pass-sheet-card[data-card-model="boulangerie-baguette"] .qr-brand-badge { background: #713f12; color: #fbbf24; }

/* 9. Restauration - Burger Gourmet */
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .pass-brand-avatar { background: #18181b; border-color: #ef4444; color: #ef4444; }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .pass-greeting-label { color: #18181b; }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .pass-customer-name { color: #dc2626; }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .pass-hero-banner { background: linear-gradient(135deg, #09090b 0%, #18181b 50%, #27272a 100%); }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .hero-shape { background: rgba(239, 68, 68, 0.18); }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .hero-club-badge { background: #18181b; border-color: #ef4444; }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .badge-brand-sub { color: #ef4444; }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .pass-secondary-fields .field-label { color: #18181b; }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .pass-secondary-fields .field-value { color: #dc2626; }
.wallet-pass-sheet-card[data-card-model="restaurant-burger"] .qr-brand-badge { background: #18181b; color: #ef4444; }

/* 10. Restauration - Pizza Napolitaine */
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .pass-brand-avatar { background: #14532d; border-color: #e11d48; color: #e11d48; }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .pass-greeting-label { color: #14532d; }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .pass-customer-name { color: #e11d48; }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .pass-hero-banner { background: linear-gradient(135deg, #052e16 0%, #14532d 50%, #166534 100%); }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .hero-shape { background: rgba(225, 29, 72, 0.16); }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .hero-club-badge { background: #14532d; border-color: #e11d48; }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .badge-brand-sub { color: #e11d48; }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .pass-secondary-fields .field-label { color: #14532d; }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .pass-secondary-fields .field-value { color: #e11d48; }
.wallet-pass-sheet-card[data-card-model="restaurant-pizza"] .qr-brand-badge { background: #14532d; color: #e11d48; }

/* 11. Restauration - Bar à Vin & Caviste */
.wallet-pass-sheet-card[data-card-model="bar-wine"] .pass-brand-avatar { background: #4c0519; border-color: #f5d77f; color: #f5d77f; }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .pass-greeting-label { color: #4c0519; }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .pass-customer-name { color: #be123c; }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .pass-hero-banner { background: linear-gradient(135deg, #27020d 0%, #4c0519 50%, #881337 100%); }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .hero-shape { background: rgba(245, 215, 127, 0.16); }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .hero-club-badge { background: #4c0519; border-color: #f5d77f; }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .badge-brand-sub { color: #f5d77f; }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .pass-secondary-fields .field-label { color: #4c0519; }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .pass-secondary-fields .field-value { color: #be123c; }
.wallet-pass-sheet-card[data-card-model="bar-wine"] .qr-brand-badge { background: #4c0519; color: #f5d77f; }

/* 12. Restauration - Cocktail Bar & Lounge */
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .pass-brand-avatar { background: #0f172a; border-color: #38bdf8; color: #38bdf8; }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .pass-greeting-label { color: #0f172a; }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .pass-customer-name { color: #0284c7; }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .pass-hero-banner { background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%); }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .hero-shape { background: rgba(56, 189, 248, 0.2); }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .hero-club-badge { background: #0f172a; border-color: #38bdf8; }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .badge-brand-sub { color: #38bdf8; }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .pass-secondary-fields .field-label { color: #0f172a; }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .pass-secondary-fields .field-value { color: #0284c7; }
.wallet-pass-sheet-card[data-card-model="bar-cocktail"] .qr-brand-badge { background: #0f172a; color: #38bdf8; }

/* 13. Café & Torréfaction - Espresso */
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .pass-brand-avatar { background: #3e2723; border-color: #d7ccc8; color: #d7ccc8; }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .pass-greeting-label { color: #3e2723; }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .pass-customer-name { color: #8d6e63; }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .pass-hero-banner { background: linear-gradient(135deg, #1d1210 0%, #3e2723 50%, #5d4037 100%); }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .hero-shape { background: rgba(215, 204, 200, 0.16); }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .hero-club-badge { background: #3e2723; border-color: #d7ccc8; }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .badge-brand-sub { color: #d7ccc8; }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .pass-secondary-fields .field-label { color: #3e2723; }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .pass-secondary-fields .field-value { color: #8d6e63; }
.wallet-pass-sheet-card[data-card-model="cafe-espresso"] .qr-brand-badge { background: #3e2723; color: #d7ccc8; }

/* Universal fallback mapping with CSS custom properties */
.wallet-pass-sheet-card .pass-brand-avatar { background: var(--pass-bg-color, #0e3a5d); border-color: var(--pass-accent-color, transparent); }
.wallet-pass-sheet-card .pass-greeting-label { color: var(--pass-bg-color, #0e3a5d); }
.wallet-pass-sheet-card .pass-customer-name { color: var(--pass-accent-color, #38bdf8); }
.wallet-pass-sheet-card .hero-club-badge { background: var(--pass-bg-color, #0e3a5d); border-color: var(--pass-accent-color, rgba(255, 255, 255, 0.9)); }
.wallet-pass-sheet-card .badge-brand-sub { color: var(--pass-accent-color, #38bdf8); }
.wallet-pass-sheet-card .pass-secondary-fields .field-label { color: var(--pass-bg-color, #0e3a5d); }
.wallet-pass-sheet-card .pass-secondary-fields .field-value { color: var(--pass-accent-color, #38bdf8); }
.wallet-pass-sheet-card .qr-brand-badge { background: var(--pass-bg-color, #0e3a5d); color: var(--pass-accent-color, #ffffff); }

.pass-wallets-badges {
  display: flex;
  gap: 6px;
}

.wallet-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 9.5px;
  font-weight: 600;
  color: #ffffff;
}

.wallet-badge-pill svg {
  width: 10px;
  height: 10px;
}

.preview-reassurance-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  padding: 10px 12px;
  border-radius: 12px;
}

[data-theme="light"] .preview-reassurance-note {
  background: rgba(10, 25, 22, 0.04);
  border-color: rgba(10, 25, 22, 0.15);
  color: #334155;
}

/* ==========================================================================
   SUCCESS CELEBRATION PANE
   ========================================================================== */
.register-step-success {
  text-align: center;
  padding: 10px 0;
}

.success-celebration-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.success-badge-glow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F5D77F 0%, #D4AF37 100%);
  display: grid;
  place-items: center;
  color: #0c121e;
  box-shadow: 0 0 35px rgba(245, 215, 127, 0.6);
  animation: bounceCelebration 1s ease infinite alternate;
}

@keyframes bounceCelebration {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

.success-sparkle-icon {
  width: 26px;
  height: 26px;
}

.success-title {
  font: 700 28px/1.2 var(--font-display);
  color: var(--text-pure);
  margin: 0;
}

[data-theme="light"] .success-title {
  color: #0c121e;
}

.success-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto;
}

.success-recap-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass-bright);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}

[data-theme="light"] .success-recap-card {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.recap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}

.recap-label {
  color: var(--text-secondary);
}

.recap-value {
  color: var(--text-pure);
  font-weight: 650;
}

[data-theme="light"] .recap-value {
  color: #0f172a;
}

.font-mono {
  font-family: monospace;
}

.text-emerald {
  color: var(--emerald-trust);
}

.success-cta-row {
  margin-top: 8px;
}

/* ==========================================================================
   MOBILE PREVIEW TOGGLE & RESPONSIVE ONBOARDING
   ========================================================================== */
.mobile-preview-toggle-wrap {
  display: none;
  margin: 4px 0 10px;
}

.mobile-preview-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(245, 215, 127, 0.1);
  border: 1px dashed var(--gold-border);
  color: var(--gold-primary);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-preview-toggle-btn:hover {
  background: rgba(245, 215, 127, 0.18);
}

.mobile-preview-icon {
  width: 16px;
  height: 16px;
}

.mobile-preview-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

[data-theme="light"] .mobile-preview-toggle-btn {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.35);
  color: #b45309;
}

/* Tablets and Mobile (< 900px) */

.modal-header {
  margin-bottom: 20px;
  padding-right: 32px;
}

.register-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.checkbox-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.chat-status {
  min-height: 36px;
  margin: 0;
  padding: 0 16px 10px;
  color: var(--emerald-trust);
  font-size: 11px;
  line-height: 1.6;
}

.chat-status:empty {
  visibility: hidden;
}

/* Altitude AI: readable answers and controls that work while typing on a phone. */
.faq-bot-features .faq-feat-item { gap: 10px; }
.faq-feat-item > svg { width: 18px; height: 18px; color: var(--gold-primary); }
.faq-chatbot-card { min-width: 0; height: 700px; min-height: 0; transform: none; box-shadow: 0 18px 45px rgba(0,0,0,.12); }
.faq-chatbot-card > :not(.chat-messages) { flex-shrink: 0; }
.chat-header { gap: 12px; padding: 18px; }
.chat-agent { min-width: 0; gap: 10px; }
.agent-title-row { flex-wrap: wrap; gap: 6px; }
.agent-name { font-size: 15px; }
.agent-status { font-size: 10px; }
.chat-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-reset-btn { min-height: 44px; min-width: 44px; justify-content: center; padding-inline: 10px; }
.chat-reset-btn svg { width: 16px; height: 16px; }
.chat-suggestions-bar { padding: 12px 16px; gap: 12px; }
.suggestions-scroll { min-width: 0; padding: 4px; }
.suggest-chip { min-height: 44px; padding-inline: 14px; }
.chat-messages { flex: 1; height: auto; max-height: none; min-height: 0; padding: 20px 16px; overscroll-behavior: contain; overflow-anchor: none; scroll-behavior: auto; }
.chat-bubble { flex-shrink: 0; max-width: 96%; padding: 16px; font-weight: 400; overflow-wrap: anywhere; }
.chat-bubble.user { max-width: 86%; }
.chat-bubble p { margin: 0; }
.chat-message-author { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.chat-bubble.user .chat-message-author { color: inherit; opacity: .75; }
.chat-answer-title { font: 700 14px/1.45 var(--font-display); color: var(--text-pure); margin: 0 0 8px; }
.chat-answer-section + .chat-answer-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-glass); }
.chat-answer-section p + p { margin-top: 10px; }
.chat-bubble-actions { gap: 8px; border-top-color: var(--border-glass); margin-top: 14px; padding-top: 12px; }
.chat-action-btn { min-height: 44px; justify-content: center; padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.chat-followups { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chat-followup { min-height: 44px; padding: 9px 12px; border-radius: 20px; border: 1px solid var(--border-glass-bright); color: var(--text-secondary); font-size: 11px; text-align: left; }
.chat-followup:hover { color: var(--text-pure); border-color: var(--gold-primary); background: var(--gold-glow); }
.chat-new-messages { align-self: center; min-height: 44px; margin: 4px 12px 8px; padding: 8px 14px; border: 1px solid var(--gold-border); background: var(--bg-surface); border-radius: 22px; color: var(--gold-primary); font-size: 12px; }
.chat-input-form { align-items: flex-end; padding: 14px 16px 10px; }
.chat-input { min-width: 0; width: 100%; min-height: 66px; max-height: 150px; resize: vertical; line-height: 1.5; font-size: 16px; }
.chat-input:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 2px; }
.chat-send-btn { width: 44px; height: 44px; margin-bottom: 2px; box-shadow: none; }
.chat-send-btn:disabled { opacity: .45; }
.chat-send-btn svg { transform: none; }
.chat-footnote { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 14px; font-size: 9px; line-height: 1.6; color: var(--text-muted); }
.chat-no-script { padding: 16px; font-size: 13px; }
.field-optional { color: var(--text-muted); font-weight: 400; }
#contact-question { resize: vertical; min-height: 100px; width: 100%; }
[data-theme="light"] .faq-chatbot-card { background: #fff; border-color: var(--border-glass); box-shadow: 0 18px 45px rgba(23,46,42,.06); }
[data-theme="light"] .chat-bubble.bot { color: var(--text-primary); background: #f6f7f2; border-color: var(--border-glass); box-shadow: none; }
[data-theme="light"] .chat-bubble.user { background: #254c40; box-shadow: none; }
[data-theme="light"] .chat-action-btn:hover { color: var(--text-pure); background: var(--gold-glow); border-color: var(--gold-border); }



/* ==========================================================================
   CONSOLIDATED RESPONSIVE ADAPTATIONS
   ========================================================================== */

@media (max-width: 1800px) {
  .brand-enterprise-tag { display: none; }
}

@media (min-width: 1441px) and (max-width: 1680px) {
  .header nav { gap: 16px; }
  .theme-switch-label { display: none; }
}

/* Compact navigation before desktop links and account controls get crowded.
   Keep this breakpoint in sync with compactNavigation in business.js. */
@media (max-width: 1440px) {
  :root { --header-height: 76px; }
  .header-inner { width: calc(100% - 40px); height: var(--header-height); }
  .nav-hud { display: none !important; }

  /* Mobile Drawer Toggle */
  .menu-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--border-glass-bright);
    border-radius: 10px;
    margin-left: auto;
    color: var(--text-pure);
    font-size: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
  }
  .menu-lines {
    position: relative;
    width: 18px;
    height: 14px;
    display: block;
  }
  .menu-lines::before, .menu-lines::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: top 220ms var(--ease-spring), transform 220ms var(--ease-spring);
  }
  .menu-lines::before { top: 3px; }
  .menu-lines::after { top: 10px; }
  .menu-toggle[aria-expanded="true"] .menu-lines::before { top: 6px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines::after { top: 6px; transform: rotate(-45deg); }

  /* Mobile Dropdown Nav */
  .header nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 24px max(24px, calc((100vw - 800px) / 2));
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-bottom: 1px solid var(--border-glass);
    background: #0b101c;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    font-size: 15px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s 220ms;
  }
  [data-theme="light"] .header nav {
    background: #fff;
    border-color: rgba(10, 25, 22, 0.2);
    box-shadow: 0 15px 35px rgba(14, 76, 146, 0.15);
  }
  .header nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .header nav > * {
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
  }
  .header nav.is-open > * {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 30ms;
  }
  .header nav.is-open > :nth-child(n+3) {
    transition-delay: 50ms;
  }
  .header nav > a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--text-secondary);
  }
  .header nav > a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-pure);
  }
  .header nav.is-open .mobile-contact,
  .header nav.is-open .mobile-login-btn,
  .header nav.is-open .mobile-register-btn,
  .header nav.is-open .mobile-theme-btn {
    display: flex !important;
  }
  .header nav .mobile-contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-glass);
    margin-top: 10px;
    padding: 16px 14px 4px;
    color: var(--gold-primary);
    font-weight: 600;
  }
  .header-register-btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Tier 1: Tablet & Small Laptops (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .wrap { width: calc(100% - 48px); }

  /* Two Column Layouts to 1 Column on Tablet */
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-copy {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
  }
  .hero-copy .eyebrow {
    justify-content: center;
  }
  .hero-lead {
    margin-inline: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-reassurance-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin-inline: auto;
  }
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .experience {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 60px 40px;
  }
  .merchant-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .support {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-signoff { text-align: left; }

  /* Keep the registration form wide enough before showing a side preview. */
  .modal-card-split { grid-template-columns: minmax(0, 1fr); }
  .mobile-preview-toggle-wrap { display: block; }
  .register-preview-col {
    display: none;
    position: static;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-glass);
    padding-top: 16px;
    margin-top: 6px;
  }
  .register-preview-col.mobile-preview-open { display: flex; }
  input, select, textarea { font-size: 16px !important; }
}

/* --------------------------------------------------------------------------
   Tier 2: Mobile Devices (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --header-height: 68px; }
  .wrap { width: calc(100% - 32px); }
  .header-inner { height: var(--header-height); gap: 12px; }
  .header .brand { font-size: 28px; }
  .brand-enterprise-tag { display: none; }

  /* Hero Mobile Typography */
  h1 { font-size: clamp(34px, 8.5vw, 48px); }
  h2 { font-size: clamp(26px, 6.8vw, 36px); }
  .section { padding-block: 64px; }
  .section-flow, [data-3d-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  [data-tilt-3d] { transform: none !important; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .contact { padding-block: 64px; }
  .hero { padding-top: 32px; padding-bottom: 48px; gap: 24px; }
  .hero-copy { width: 100%; }
  .eyebrow { letter-spacing: 1.2px; font-size: 10px; }
  .hero-copy .eyebrow { text-wrap: balance; }
  .hero-lead { font-size: 16px; }
  .theme-switch-label { display: none; }
  .theme-toggle-btn { min-height: 44px; padding: 8px; }
  .header-actions { gap: 8px; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-actions > * {
    width: 100%;
    justify-content: center;
  }
  .hero-reassurance-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Dual Phones to Interactive Mobile Wallet Switcher */
  .hero-wallet-switcher {
    display: flex !important;
  }
  .hero-dual-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-top: 10px;
    flex-direction: column;
    perspective: none;
    transform-style: flat;
  }
  .hero-wallet-switcher {
    order: 0;
    flex-shrink: 0;
    width: min(100%, 320px);
  }
  .wallet-switch-btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
    padding-inline: 10px;
    white-space: nowrap;
    gap: 6px;
  }
  .stage-glow-ambient, .stage-orbit-ring {
    max-width: 100%;
    pointer-events: none;
  }
  .stage-orbit-ring { display: none; }
  .dual-phones-wrapper {
    order: 1;
    flex: none;
  }
  .dual-phones-wrapper {
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    height: 520px !important;
    margin: 0 auto !important;
    position: relative !important;
    transform: none !important;
  }
  .phone-android, .phone-iphone {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
  .phone.mobile-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 5 !important;
    transform: scale(1) !important;
  }
  .phone:not(.mobile-active) {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transform: scale(0.96) translateY(8px) !important;
    visibility: hidden;
  }
  .loyalty-card-android, .apple-pass-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-stamps, .stamp-grid-dynamic {
    width: 100% !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    margin-inline: auto !important;
  }
  .hero-stamps > span, .stamp-dynamic-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .stamp-dynamic-item svg, .apple-stamps .stamp-dynamic-item svg, .demo-stamp svg {
    display: block !important;
    margin: auto !important;
  }
  .demo-stamps {
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
  }
  .demo-stamp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .hero-notification {
    order: 2;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 16px auto 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    transform: none !important;
  }
  .floating-3d-badge {
    display: none !important;
  }

  /* Audience Strip */
  .audience-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }
  .audience-list {
    border-left: none;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* 3D Dashboard Preview Mobile */
  .cockpit-heading-actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  .cockpit-heading-actions > * {
    width: 100%;
    justify-content: center;
  }
  .dashboard-preview-3d {
    transform: none !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
  }
  .dashboard-sidebar {
    display: none !important;
  }
  .dashboard-content {
    padding: 16px !important;
  }

  /* Trust & Reviews Stat Banners */
  .trust-metrics-banner,
  .reviews-stat-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 14px;
    padding: 24px 18px;
  }
  .trust-metric-divider {
    display: none !important;
  }

  /* Forms & Contact */
  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .form-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  #contact-form {
    padding: 24px 18px;
    transform: none !important;
  }
  .contact-direct-card {
    padding: 14px;
  }
  .contact-direct-card strong {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  /* Registration Wizard Modal Mobile */
  .modal-dialog-wide {
    max-width: 100%;
    margin: 0 auto;
  }
  .merchant-login-modal, .merchant-register-modal {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .modal-card {
    padding: 24px 16px 18px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .modal-close-btn { top: 10px; right: 10px; }
  .modal-card-split {
    grid-template-columns: 1fr;
    padding: 22px 16px 18px;
  }
  .mobile-preview-toggle-wrap {
    display: block;
  }
  .register-preview-col {
    display: none;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-glass);
    padding-top: 16px;
    margin-top: 6px;
  }
  .register-preview-col.mobile-preview-open {
    display: flex;
    animation: modalStepFadeIn 0.3s ease;
  }
  .form-row-address {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .form-col-subgroup {
    width: 100%;
    display: flex;
    gap: 10px;
  }
  .form-col-subgroup > * { min-width: 0; }
  .step-nav-item { min-height: 44px; padding-inline: 10px; }
  .category-chip { min-height: 44px; white-space: normal; text-align: left; }
  .color-swatch-btn, .custom-color-picker-label { width: 44px; height: 44px; flex-shrink: 0; }
  .step-nav-item:not(.active) .step-label {
    display: none;
  }
  .step-nav-item.active .step-label {
    display: inline;
    font-size: 11px;
  }
  .stamp-selector-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .step-actions {
    gap: 8px;
  }
  .prev-step-btn {
    flex: 1;
    padding: 11px 8px;
    font-size: 12px;
    justify-content: center;
  }
  .next-step-btn, .button-register-submit {
    flex: 2;
    padding: 11px 12px;
    font-size: 12px;
    justify-content: center;
  }
  .recap-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  /* FAQ Chatbot Mobile */
  .faq-chatbot-card { height: min(700px, calc(100svh - var(--header-height) - 24px)); min-height: 500px; border-radius: 20px; }
  .chat-header { padding: 14px 12px; gap: 6px; }
  .agent-avatar { width: 34px; height: 34px; border-radius: 10px; }
  .agent-name { font-size: 14px; }
  .agent-badge { display: none; }
  .agent-status { max-width: 165px; font-size: 9px; line-height: 1.5; }
  .chat-header-actions { gap: 2px; }
  .chat-header-actions .chat-reset-btn span { display: none; }
  .chat-header-actions .chat-reset-btn { padding: 8px; }
  .chat-suggestions-bar { padding: 8px; gap: 4px; }
  .suggestions-label { display: none; }
  .chat-messages { height: auto; max-height: none; padding: 14px 10px; min-height: 0; }
  .chat-bubble { padding: 13px 12px; max-width: 100%; font-size: 14px; }
  .chat-answer-title { font-size: 13px; }
  .chat-action-btn { font-size: 11px; }
  .chat-input-form { padding: 12px 10px 8px; gap: 8px; }
  .chat-input { padding: 10px; }
  .chat-footnote { padding-inline: 12px; font-size: 8px; }
  .chat-footnote > span:first-child { display: none; }
}

/* --------------------------------------------------------------------------
   Tier 3: Small Mobile Screens (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --header-height: 64px; }
  .wrap { width: calc(100% - 24px); }
  .header-inner { width: calc(100% - 24px); height: var(--header-height); gap: 8px; }
  .header-login-btn span { display: none; }
  .header-login-btn { padding: 8px 10px; }
  .theme-toggle-btn { padding: 8px; min-width: 44px; min-height: 44px; }
  .header-login-btn { min-width: 44px; justify-content: center; }
  .brand { gap: 6px; }
  .header .brand { font-size: 26px; }
  .header .brand-mark { width: 24px; height: 24px; }
  .menu-toggle { gap: 6px; padding-inline: 10px; }
  .loyalty-demo { padding: 14px; border-radius: 22px; }
  .demo-heading { gap: 8px; }
  .demo-heading > span { font-size: 9px; letter-spacing: .7px; }
  .demo-reset > span { display: none; }
  .demo-reset { min-width: 44px; }
  .demo-stage { padding: 18px 12px 12px; }
  .demo-step { padding: 10px 8px; }
  .demo-step > strong { font-size: 11px; }

  /* Input zoom prevention on iOS (forces >= 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }
  .modal-form input, .modal-form select {
    font-size: 16px !important;
    height: 48px;
  }

  .audience-list {
    grid-template-columns: 1fr;
  }
  .dashboard-metrics {
    grid-template-columns: 1fr;
  }
  .chart-bars {
    gap: 6px;
  }
  .chart-bars span {
    font-size: 9px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .pricing-billing-control {
    gap: 6px !important;
    padding: 5px 10px !important;
  }
  .billing-label {
    font-size: 12px !important;
    gap: 4px !important;
  }
  .billing-switch-toggle {
    min-width: 46px !important;
  }
  .billing-switch-toggle .toggle-track {
    width: 46px !important;
    height: 26px !important;
  }
  .billing-switch-toggle .toggle-knob {
    width: 18px !important;
    height: 18px !important;
    top: 3px !important;
    left: 3px !important;
  }
  .pricing-billing-control[data-billing="annual"] .toggle-knob {
    transform: translateX(20px) !important;
  }
  .billing-discount-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }
}

/* --------------------------------------------------------------------------
   Tier 4: Extra-Small Screens (<= 375px)
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
  .header .brand { font-size: 22px; }
  .header .brand-mark { width: 22px; height: 22px; }
  .header-actions { gap: 6px; }
  .theme-toggle-btn { padding-inline: 4px; }
  .menu-toggle { padding-inline: 8px; font-size: 11px; }
  .pricing-billing-control {
    gap: 4px !important;
    padding: 4px 8px !important;
  }
  .billing-label {
    font-size: 11px !important;
  }
  .billing-discount-badge {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
  }
  .trust-metrics-banner, .reviews-stat-banner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-wallet-switcher {
    gap: 4px;
    padding: 3px;
  }
  .wallet-switch-btn {
    padding: 7px 12px;
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility (Reduced Motion)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (pointer: coarse) {
  .ambient-canvas3d { display: none; }
}

@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  [data-theme="light"] body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .section-flow {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Keep footer navigation comfortable to use on a touch screen. */
.header .brand, .footer-main nav a, .back-to-top { min-height: 44px; }
.footer-main nav { gap: 0; }
.footer-main nav a { display: flex; align-items: center; }

/* ==========================================================================
   SECTION : OFFRES & TARIFS D'ABONNEMENT (PRICING SYSTEM)
   ========================================================================== */

.pricing-section {
  position: relative;
  padding-top: 40px;
  padding-bottom: 60px;
}

/* Centered introductions stack above their content rather than sharing a row. */
.section-heading.text-center {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.section-heading.text-center > div:first-child {
  max-width: 960px;
  min-width: 0;
}

.section-heading.text-center .section-desc {
  max-width: 680px;
  margin: 0 auto;
}

/* Billing Toggle Control */
.pricing-billing-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  padding: 8px 16px;
  background: rgba(14, 21, 35, 0.7);
  border: 1px solid var(--border-glass-bright);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.billing-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease-smooth);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  flex-shrink: 0;
}

.pricing-billing-control[data-billing="monthly"] #billingMonthlyLabel {
  color: var(--text-pure);
}

.pricing-billing-control[data-billing="annual"] #billingAnnualLabel {
  color: var(--gold-primary);
}

.billing-switch-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.billing-switch-toggle .toggle-track {
  display: block;
  width: 52px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-glass-bright);
  border-radius: 999px;
  position: relative;
  transition: background 0.3s var(--ease-spring), border-color 0.3s;
}

.billing-switch-toggle .toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease-spring), background 0.3s;
}

.pricing-billing-control[data-billing="annual"] .toggle-track {
  background: var(--gold-dark);
  border-color: var(--gold-primary);
}

.pricing-billing-control[data-billing="annual"] .toggle-knob {
  transform: translateX(24px);
  background: var(--gold-light);
}

.billing-discount-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #070A10;
  background: var(--gold-gradient);
  border-radius: 999px;
  box-shadow: 0 0 12px var(--gold-glow);
  white-space: nowrap;
}

.billing-discount-full {
  display: inline;
}

.billing-discount-short {
  display: none;
}

/* Pricing 3-Column Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
  margin-bottom: 50px;
  align-items: stretch;
}

/* Pricing Card */
.pricing-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.pricing-card:hover {
  transform: none;
  border-color: var(--border-glass-bright);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* Featured / Popular Card (PRO) */
.pricing-card.is-popular {
  background: linear-gradient(180deg, rgba(20, 31, 52, 0.95) 0%, rgba(12, 18, 30, 0.98) 100%);
  border: 1.5px solid var(--gold-border);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 40px var(--gold-glow);
  transform: none;
}

.pricing-card.is-popular:hover {
  transform: none;
  border-color: var(--gold-primary);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.8), 0 0 55px var(--gold-glow);
}

.popular-ribbon {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-gradient);
  color: #070A10;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 6px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px var(--gold-glow);
  white-space: nowrap;
}

.popular-ribbon svg {
  width: 14px;
  height: 14px;
}

/* Pricing Header */
.pricing-header {
  margin-bottom: 24px;
}

.pricing-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.badge-starter {
  color: #94A3B8;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

[data-theme="light"] .badge-starter {
  color: #475569;
  background: rgba(71, 85, 105, 0.08);
  border-color: rgba(71, 85, 105, 0.2);
}

.badge-popular {
  color: var(--gold-primary);
  background: rgba(245, 215, 127, 0.12);
  border: 1px solid var(--gold-border);
}

.badge-prestige {
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.plan-name {
  font: 800 30px/1.2 var(--font-display);
  color: var(--text-pure);
  margin: 0 0 10px;
}

.plan-tagline {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  min-height: 44px;
}

/* Price Box */
.pricing-price-box {
  padding: 20px 0;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: 20px;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-line .currency {
  font-size: 26px;
  font-weight: 700;
  color: var(--gold-primary);
}

.price-line .price-val {
  font: 800 56px/1 var(--font-display);
  color: var(--text-pure);
  letter-spacing: -1px;
}

.price-line .price-period {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 6px;
}

.price-subtext {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  font-weight: 500;
}

/* Limits Chips Banner */
.pricing-limits-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}

.limit-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 11px;
  text-align: center;
  color: var(--text-secondary);
  line-height: 1.3;
}

.limit-chip strong {
  display: block;
  font-size: 12px;
  color: var(--text-pure);
  font-weight: 700;
}

.banner-gold .limit-chip {
  background: rgba(245, 215, 127, 0.06);
  border-color: rgba(245, 215, 127, 0.2);
}

.banner-gold .limit-chip strong {
  color: var(--gold-primary);
}

/* Features List */
.pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex-grow: 1;
}

.pricing-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.pricing-features-list li svg {
  width: 17px;
  height: 17px;
  color: var(--emerald-trust);
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing-features-list li strong {
  color: var(--text-pure);
}

.pricing-features-list li.feature-highlight {
  color: var(--text-pure);
  padding-top: 4px;
}

.pricing-features-list li.sub-feature {
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.pricing-features-list li.sub-feature .dot-icon {
  color: var(--gold-primary);
  font-weight: 800;
  font-size: 14px;
}

.pricing-features-list li.feature-disabled {
  opacity: 0.42;
  text-decoration: line-through;
}

.pricing-features-list li.feature-disabled .cross-icon {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Card CTA Box */
.pricing-cta-box {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.plan-cta-btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.cta-guarantee {
  font-size: 11.5px;
  color: var(--text-muted);
}

.cta-guarantee.text-gold {
  color: var(--gold-primary);
}

/* Guarantee Strip under Cards */
.pricing-guarantee-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.guarantee-item svg {
  width: 32px;
  height: 32px;
  color: var(--gold-primary);
  flex-shrink: 0;
}

.guarantee-item strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-pure);
  margin-bottom: 2px;
}

.guarantee-item span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.guarantee-divider {
  display: none;
}

/* Light Theme Overrides for Pricing */
[data-theme="light"] .pricing-billing-control {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.12);
  box-shadow: 0 6px 20px rgba(10, 25, 22, 0.06);
}

[data-theme="light"] .billing-switch-toggle .toggle-track {
  background: #d9e2df;
  border-color: #84948f;
}

[data-theme="light"] .pricing-billing-control[data-billing="annual"] .toggle-track {
  background: var(--gold-dark);
  border-color: var(--gold-primary);
}

[data-theme="light"] .badge-prestige {
  color: #334155;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .pricing-card {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.08);
  box-shadow: 0 10px 30px rgba(10, 25, 22, 0.06);
}

[data-theme="light"] .pricing-card:hover {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.18);
  box-shadow: 0 20px 45px rgba(10, 25, 22, 0.1);
}

[data-theme="light"] .pricing-card.is-popular {
  background: #ffffff;
  border-color: #D4AF37;
  box-shadow: 0 16px 45px rgba(197, 160, 89, 0.2), 0 0 25px rgba(197, 160, 89, 0.15);
}

[data-theme="light"] .plan-name {
  color: #070A10;
}

[data-theme="light"] .plan-tagline {
  color: #475569;
}

[data-theme="light"] .price-line .price-val {
  color: #070A10;
}

[data-theme="light"] .limit-chip {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #475569;
}

[data-theme="light"] .limit-chip strong {
  color: #070A10;
}

[data-theme="light"] .pricing-features-list li {
  color: #334155;
}

[data-theme="light"] .pricing-features-list li strong {
  color: #070A10;
}

[data-theme="light"] .pricing-guarantee-strip {
  background: #ffffff;
  border-color: rgba(10, 25, 22, 0.08);
  box-shadow: 0 10px 30px rgba(10, 25, 22, 0.05);
}

[data-theme="light"] .guarantee-item strong {
  color: #070A10;
}

[data-theme="light"] .guarantee-item span {
  color: #475569;
}

/* Responsive Pricing */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .pricing-card.is-popular {
    transform: none;
  }
  .pricing-card.is-popular:hover {
    transform: none;
  }
  .pricing-guarantee-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pricing-guarantee-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .pricing-card {
    padding: 32px 20px 24px;
  }
  .price-line .price-val {
    font-size: 46px;
  }
  .pricing-billing-control {
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 6px 12px;
    max-width: 100%;
    justify-content: center;
  }
  .billing-label {
    font-size: 13px;
    gap: 6px;
    white-space: nowrap;
  }
  .billing-discount-badge {
    font-size: 10px;
    padding: 2px 7px;
    white-space: nowrap;
  }
  .billing-discount-full {
    display: none;
  }
  .billing-discount-short {
    display: inline;
  }
}

/* ==========================================================================
   SWITCH BONUS BANNER (REPRISE D'ABONNEMENT CONCURRENT)
   ========================================================================== */

.switch-bonus-card {
  position: relative;
  margin: 40px 0 50px;
  padding: 36px 40px;
  background: linear-gradient(135deg, rgba(20, 31, 52, 0.9) 0%, rgba(12, 18, 30, 0.95) 100%);
  border: 1.5px solid var(--gold-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px var(--gold-glow);
  backdrop-filter: blur(16px);
}

.switch-bonus-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--gold-primary);
  background: rgba(245, 215, 127, 0.12);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  margin-bottom: 16px;
  max-width: 100%;
}

.switch-bonus-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.switch-bonus-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.switch-bonus-text {
  min-width: 0;
}

.switch-bonus-text h3 {
  font: 700 24px/1.3 var(--font-display);
  color: var(--text-pure);
  margin: 0 0 10px;
}

.switch-bonus-text p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  max-width: 680px;
}

.switch-bonus-text p strong {
  color: var(--gold-primary);
}

.switch-contract-btn {
  flex-shrink: 0;
  max-width: 100%;
  gap: 12px;
  white-space: normal;
  text-align: left;
}

.switch-contract-btn > svg {
  flex-shrink: 0;
}

/* Light Theme Overrides */
[data-theme="light"] .switch-bonus-card {
  background: #ffffff;
  border-color: #D4AF37;
  box-shadow: 0 15px 40px rgba(197, 160, 89, 0.2);
}

[data-theme="light"] .switch-bonus-text h3 {
  color: #070A10;
}

[data-theme="light"] .switch-bonus-text p {
  color: #334155;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .switch-bonus-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .switch-bonus-card {
    padding: 24px 20px;
  }
  .switch-bonus-badge {
    font-size: 10px;
    letter-spacing: .7px;
  }
  .switch-contract-btn {
    width: 100%;
  }
}

/* Navigation feedback stays quiet and follows the existing theme. */
@media (max-width: 1440px) {
  .header nav > .nav-highlight { display: none; }
  .header nav > a.is-active { background: var(--gold-glow); color: var(--text-pure); }
  .header nav > a:focus-visible { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .header nav, .header nav > *, .nav-highlight, .menu-lines::before, .menu-lines::after { transition: none !important; }
}