/* =================================================================
   TEEN PATTI MASTER — MAIN STYLESHEET
   Shared design tokens, reset, typography, navigation, footer and
   reusable components. Page-specific styles live in their own files.

   Palette sampled directly from the official logo (deep violet-wine
   + saturated gold + warm ivory) — see design notes at bottom of file.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* -----------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------- */
:root{
  /* --- Palette: "Royal Violet & Gold" (sampled from the official logo) --- */
  --obsidian:        #0B0410;   /* primary page background — near-black, violet cast */
  --obsidian-2:       #150A1C;   /* secondary background band */
  --jade-surface:     #241030;   /* card / panel surface — deep plum */
  --jade-surface-2:   #2F1640;   /* hover / raised surface */
  --hairline:         rgba(247,239,228,0.10);

  /* "emerald" slot kept for compatibility with other pages — repointed
     to a warm gold-white pulse for live/positive states (no green, per brief) */
  --emerald:          #C98A2E;
  --emerald-glow:     #F9D57E;
  --emerald-deep:     #5C3A10;

  --gold:             #E3A431;
  --gold-light:       #F9D57E;
  --gold-dim:         #8C6A22;

  /* "garnet" slot kept for compatibility — repointed to Royal Purple/Wine,
     the logo's true second brand colour */
  --garnet:           #7A2554;
  --garnet-glow:      #B23E74;
  --garnet-deep:      #2B0A22;

  --ivory:            #F7EFE4;
  --ivory-dim:        #C7BAC4;
  --ivory-faint:      #8B7F8B;

  /* --- New, additive tokens (do not affect other pages) --- */
  --ember:            #E0703D;   /* warm orange glow, used sparingly */
  --ink-gold:         #2C0F1E;   /* ink colour for text sitting on gold fills */

  /* --- Gradients --- */
  --grad-gold:        linear-gradient(120deg, #F9D57E 0%, #E3A431 45%, #8C6A22 100%);
  --grad-ruby:        linear-gradient(160deg, #93315F 0%, #2B0A22 100%);
  --grad-hero:        radial-gradient(120% 90% at 50% 0%, rgba(227,164,49,0.16) 0%, rgba(11,4,16,0) 46%),
                       radial-gradient(90% 90% at 88% 18%, rgba(122,37,84,0.30) 0%, rgba(11,4,16,0) 55%),
                       linear-gradient(180deg, #0B0410 0%, #0B0410 100%);

  /* --- Type --- */
  --font-emblem: 'Cinzel', serif;
  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;

  --fs-hero:   clamp(2.6rem, 5.6vw, 5.25rem);
  --fs-h1:     clamp(2.1rem, 4vw, 3.4rem);
  --fs-h2:     clamp(1.7rem, 3.1vw, 2.5rem);
  --fs-h3:     clamp(1.3rem, 1.9vw, 1.65rem);
  --fs-h4:     1.15rem;
  --fs-lead:   clamp(1.05rem, 1.3vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.78rem;

  /* --- Spacing --- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 140px;

  /* --- Radii / shadow / motion --- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-full: 999px;

  --shadow-elevate: 0 30px 70px -30px rgba(0,0,0,0.65);
  --shadow-card:    0 18px 45px -22px rgba(0,0,0,0.55);
  --shadow-gold:    0 0 0 1px rgba(227,164,49,0.35), 0 12px 30px -8px rgba(227,164,49,0.28);
  --shadow-emerald: 0 0 40px rgba(249,213,126,0.22);
  --shadow-ruby:    0 0 40px rgba(178,62,116,0.32);

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.22s;
  --t-med:  0.45s;
  --t-slow: 0.9s;

  --container-w: 1280px;
}

/* -----------------------------------------------------------------
   2. RESET
   ----------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
*{ margin: 0; padding: 0; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html, body{ height: 100%; }
body{
  background-color: var(--obsidian);
  background-image:
    radial-gradient(60% 40% at 50% 0%, rgba(227,164,49,0.05), transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23F9D57E' fill-opacity='0.028'%3E%3Ctext x='6' y='46' font-size='40' font-family='Georgia,serif'%3E%E2%99%A0%3C/text%3E%3Ctext x='96' y='46' font-size='40' font-family='Georgia,serif'%3E%E2%99%A6%3C/text%3E%3Ctext x='6' y='136' font-size='40' font-family='Georgia,serif'%3E%E2%99%A3%3C/text%3E%3Ctext x='96' y='136' font-size='40' font-family='Georgia,serif'%3E%E2%99%A5%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-attachment: scroll, fixed;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; }
button, input, textarea, select{ font: inherit; color: inherit; background: none; border: none; }
button{ cursor: pointer; }
address{ font-style: normal; }
h1,h2,h3,h4,h5,h6{ font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

::selection{ background: var(--gold-light); color: var(--ink-gold); }

::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--obsidian); }
::-webkit-scrollbar-thumb{ background: var(--jade-surface-2); border-radius: var(--radius-full); border: 2px solid var(--obsidian); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold-dim); }

:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------------- */
.font-emblem{ font-family: var(--font-emblem); }
.font-display{ font-family: var(--font-display); }

h1, .h1{ font-family: var(--font-display); font-size: var(--fs-h1); }
h2, .h2{ font-family: var(--font-display); font-size: var(--fs-h2); text-shadow: 0 4px 30px rgba(227,164,49,0.16); }
h3, .h3{ font-family: var(--font-display); font-size: var(--fs-h3); }

.lead{ font-size: var(--fs-lead); color: var(--ivory-dim); font-weight: 400; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px 7px 14px;
  border-radius: var(--radius-full);
  background: rgba(227,164,49,0.07);
  border: 1px solid rgba(227,164,49,0.35);
  font-family: var(--font-emblem);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.eyebrow::before{
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px 2px rgba(227,164,49,0.65);
}

.text-gold{
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-emerald{ color: var(--emerald-glow); }
.text-muted{ color: var(--ivory-dim); }
.text-center{ text-align: center; }

/* Generic content-flow spacing: guards any custom block that stacks an
   eyebrow, heading, lead/paragraph, list and button without its own
   bespoke spacing rules. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3{ margin-top: var(--space-sm); }
h1 + .lead, h2 + .lead, h3 + .lead{ margin-top: var(--space-sm); }
h1 + p, h2 + p, h3 + p{ margin-top: 10px; }
.lead + ul, .lead + ol, p + ul, p + ol{ margin-top: var(--space-md); }
.lead + .btn, p + .btn, ul + .btn, ol + .btn{ margin-top: var(--space-md); }
.lead + form{ margin-top: var(--space-md); }

/* -----------------------------------------------------------------
   4. LAYOUT UTILITIES
   ----------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.section{ position: relative; padding-block: var(--space-3xl); }
.section::before{
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 1px;
  background:
    radial-gradient(circle, var(--gold-light) 0%, var(--gold) 55%, transparent 75%) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, var(--gold-dim) 38%, var(--gold-dim) 62%, transparent) center / 100% 1px no-repeat;
  opacity: 0.6;
}
.section--tight{ padding-block: var(--space-2xl); }
.section-head{ max-width: 680px; margin-bottom: var(--space-xl); }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head h2{ margin-top: var(--space-sm); }
.section-head .lead{ margin-top: var(--space-sm); }

.grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reveal-on-scroll base */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-scale{ opacity: 0; transform: scale(0.92); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); }
.reveal-scale.is-visible{ opacity: 1; transform: scale(1); }
.reveal-left{ opacity: 0; transform: translateX(-36px); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); }
.reveal-left.is-visible{ opacity: 1; transform: translateX(0); }
.reveal-right{ opacity: 0; transform: translateX(36px); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); }
.reveal-right.is-visible{ opacity: 1; transform: translateX(0); }
.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* -----------------------------------------------------------------
   5. BUTTONS
   ----------------------------------------------------------------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 16px 32px;
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-premium), box-shadow var(--t-fast) var(--ease-premium), background var(--t-fast) var(--ease-premium), border-color var(--t-fast) var(--ease-premium);
  white-space: nowrap;
}
.btn--sm{ padding: 11px 22px; font-size: 0.85rem; }
.btn--gold{
  background: var(--grad-gold);
  color: var(--ink-gold);
  box-shadow: var(--shadow-gold);
}
.btn--gold::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 66%);
  transform: translateX(-140%);
  transition: transform 0.7s var(--ease-premium);
}
.btn--gold:hover{ transform: translateY(-3px); box-shadow: 0 20px 45px -10px rgba(227,164,49,0.5); }
.btn--gold:hover::after{ transform: translateX(140%); }
.btn--outline{
  background: rgba(247,239,228,0.03);
  border: 1px solid rgba(247,239,228,0.28);
  color: var(--ivory);
  backdrop-filter: blur(6px);
}
.btn--outline:hover{ border-color: var(--gold); color: var(--gold-light); transform: translateY(-3px); }
.btn--ruby{
  background: linear-gradient(120deg, var(--garnet-glow), var(--garnet));
  color: var(--ivory);
}
.btn--ruby:hover{ transform: translateY(-3px); box-shadow: var(--shadow-ruby); }
.btn--ghost{
  color: var(--ivory-dim);
  padding: 10px 6px;
}
.btn--ghost:hover{ color: var(--gold-light); }
.btn--block{ width: 100%; }
.btn svg, .btn i{ font-size: 1em; }

/* -----------------------------------------------------------------
   5B. CTA ROW & TRUST LIST (shared)
   ----------------------------------------------------------------- */
.hero__ctas{ display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }

.hero__trust{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}
.hero__trust li{ display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ivory-dim); font-weight: 600; }
.hero__trust i{ color: var(--gold-light); }

/* -----------------------------------------------------------------
   6. SITE HEADER / NAVIGATION
   ----------------------------------------------------------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding-block: 20px;
  transition: padding var(--t-med) var(--ease-premium), background var(--t-med) var(--ease-premium), box-shadow var(--t-med) var(--ease-premium), border-color var(--t-med) var(--ease-premium);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding-block: 12px;
  background: rgba(11,4,16,0.76);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,0.7);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.brand__mark{ height: 38px; width: auto; flex-shrink: 0; object-fit: contain; }
.brand__name{
  font-family: var(--font-emblem);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--ivory);
  text-transform: uppercase;
}
.brand__name em{ font-style: normal; color: var(--gold-light); }

.main-nav__list{ display: flex; align-items: center; gap: var(--space-lg); }
.main-nav__list a{
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ivory-dim);
  position: relative;
  padding-block: 4px;
  transition: color var(--t-fast);
}
.main-nav__list a::after{
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1.5px;
  background: var(--grad-gold);
  transition: width var(--t-med) var(--ease-premium);
}
.main-nav__list a:hover, .main-nav__list a.is-active{ color: var(--ivory); }
.main-nav__list a:hover::after, .main-nav__list a.is-active::after{ width: 100%; }

.site-header__actions{ display: flex; align-items: center; gap: var(--space-md); }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  z-index: 210;
}
.nav-toggle span{
  width: 100%;
  height: 2px;
  background: var(--ivory);
  border-radius: 2px;
  transition: transform var(--t-med) var(--ease-premium), opacity var(--t-med) var(--ease-premium);
}
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .main-nav{
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, #1B0E22 0%, #0B0410 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease-premium);
    z-index: 205;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav__list{ flex-direction: column; gap: var(--space-lg); text-align: center; }
  .main-nav__list a{ font-size: 1.4rem; font-family: var(--font-display); }
  .site-header__actions .btn--gold.btn--sm{ display: none; }
  .nav-toggle{ display: flex; }
}

/* -----------------------------------------------------------------
   7. CARD / GLASS PANEL PRIMITIVES
   ----------------------------------------------------------------- */
.glass-panel{
  background: linear-gradient(160deg, rgba(47,22,64,0.75), rgba(21,10,28,0.55));
  border: 1px solid var(--hairline);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.gem-card{
  position: relative;
  background: linear-gradient(160deg, var(--jade-surface), var(--obsidian-2));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-premium), border-color var(--t-med) var(--ease-premium), box-shadow var(--t-med) var(--ease-premium);
}
.gem-card::before{
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(249,213,126,0.6), transparent 35%, transparent 65%, rgba(178,62,116,0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.gem-card::after{
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 18px; height: 18px;
  border-top: 2px solid var(--gold-dim);
  border-right: 2px solid var(--gold-dim);
  border-radius: 0 6px 0 0;
  opacity: 0.75;
  transition: border-color var(--t-med), opacity var(--t-med);
  pointer-events: none;
}
.gem-card:hover::after{ border-color: var(--gold-light); opacity: 1; }
.gem-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-elevate); }
.gem-card:hover::before{ opacity: 1; }

.suit-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(227,164,49,0.08);
  border: 1px solid rgba(227,164,49,0.35);
  color: var(--gold-light);
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
}

/* -----------------------------------------------------------------
   7B. SHARED DEVICE MOCKUP (phone + QR)
   ----------------------------------------------------------------- */
.phone-mock{
  width: 240px;
  aspect-ratio: 9/19;
  background: linear-gradient(160deg,#241a2c,#04020a);
  border-radius: 44px;
  padding: 12px;
  border: 3px solid var(--gold-dim);
  box-shadow: var(--shadow-elevate), 0 0 0 8px rgba(227,164,49,0.05);
  animation: floatY 7s ease-in-out infinite;
}
.phone-mock__notch{ width: 84px; height: 20px; background: #000; border-radius: 0 0 14px 14px; margin-inline: auto; }
.phone-mock__screen{ background: linear-gradient(170deg, var(--jade-surface), var(--obsidian)); border-radius: 32px; height: calc(100% - 20px); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); overflow: hidden; }
.phone-mock__topbar{ display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--ivory-dim); }
.phone-mock__chip{ color: var(--gold-light); display: flex; gap: 4px; align-items: center; font-weight: 700; }
.phone-mock__table{ flex: 1; position: relative; border-radius: 20px; background: radial-gradient(circle, var(--garnet-deep), var(--obsidian-2)); }
.phone-mock__seat{ position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--jade-surface-2); border: 1px solid var(--gold-dim); }
.phone-mock__seat--1{ top: 10px; left: 50%; transform: translateX(-50%); }
.phone-mock__seat--2{ bottom: 14px; left: 16px; }
.phone-mock__seat--3{ bottom: 14px; right: 16px; }
.phone-mock__pot{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 0.62rem; color: var(--gold-light); background: rgba(0,0,0,0.45); padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.phone-mock--sm{ width: 168px; }
.phone-mock--tilt-left{ transform: rotate(-9deg) translateY(18px); }
.phone-mock--tilt-right{ transform: rotate(9deg) translateY(18px); }

.qr-tile{ display: flex; align-items: center; gap: var(--space-sm); background: var(--jade-surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.qr-tile span{ font-size: 0.82rem; color: var(--ivory-dim); font-weight: 600; max-width: 12ch; }

/* -----------------------------------------------------------------
   8. BADGES / CHIPS / TAGS
   ----------------------------------------------------------------- */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(247,239,228,0.05);
  border: 1px solid var(--hairline);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ivory-dim);
}
.chip i{ color: var(--gold-light); }
.chip--gold{ border-color: rgba(227,164,49,0.4); color: var(--gold-light); }
.chip--gold i{ color: var(--gold-light); }

.badge-ribbon{
  position: absolute;
  top: 18px; right: -34px;
  background: var(--grad-gold);
  color: var(--ink-gold);
  font-family: var(--font-emblem);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  padding: 5px 40px;
  transform: rotate(40deg);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* -----------------------------------------------------------------
   9. FAQ ACCORDION (shared across pages)
   ----------------------------------------------------------------- */
.faq-item{
  border-bottom: 1px solid var(--hairline);
}
.faq-item__q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--ivory);
}
.faq-item__icon{
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(227,164,49,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-light);
  transition: transform var(--t-med) var(--ease-premium), background var(--t-med);
}
.faq-item.is-open .faq-item__icon{ transform: rotate(135deg); background: var(--gold); color: var(--ink-gold); }
.faq-item__a{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-med) var(--ease-premium);
}
.faq-item__a p{ padding-bottom: var(--space-md); color: var(--ivory-dim); max-width: 60ch; }
.faq-item.is-open .faq-item__a{ max-height: 320px; }

/* -----------------------------------------------------------------
   9B. FAQ LAYOUT (shared across pages)
   ----------------------------------------------------------------- */
.faq__grid{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); align-items: start; }
.faq__side p.lead{ max-width: 42ch; }
.faq-list{ position: relative; background: var(--jade-surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-lg); }
.faq-list::after{
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 18px; height: 18px;
  border-top: 2px solid var(--gold-dim);
  border-right: 2px solid var(--gold-dim);
  opacity: 0.65;
}
@media (max-width: 900px){ .faq__grid{ grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------
   10. FOOTER
   ----------------------------------------------------------------- */
.site-footer{
  position: relative;
  background: var(--obsidian-2);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-2xl);
  overflow: hidden;
}
.site-footer::before{
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  width: 800px; height: 400px;
  background: radial-gradient(circle, rgba(227,164,49,0.16), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}
.footer-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--hairline);
}
.footer-brand .brand{ margin-bottom: var(--space-sm); }
.footer-brand p{ color: var(--ivory-dim); max-width: 32ch; margin-bottom: var(--space-md); }
.footer-social{ display: flex; gap: 10px; }
.footer-social a{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.footer-social a:hover{ border-color: var(--gold); color: var(--gold-light); transform: translateY(-3px); }
.footer-col h4{
  font-family: var(--font-emblem);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: var(--space-md);
}
.footer-col ul{ display: flex; flex-direction: column; gap: 12px; }
.footer-col a{ color: var(--ivory-dim); font-size: 0.92rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.footer-col a:hover{ color: var(--gold-light); padding-left: 4px; }
.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  flex-wrap: wrap;
}
.footer-bottom p{ font-size: 0.82rem; color: var(--ivory-faint); }
.footer-disclaimer{
  text-align: center;
  font-size: 0.78rem;
  color: var(--ivory-faint);
  max-width: 760px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.2);
}
.footer-disclaimer strong{ color: var(--ivory-dim); }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; text-align: center; }
}

/* -----------------------------------------------------------------
   11. PAGE HERO BANNER (About / Download / Contact sub-pages)
   ----------------------------------------------------------------- */
.page-banner{
  position: relative;
  padding-top: clamp(160px, 22vw, 220px);
  padding-bottom: var(--space-2xl);
  background: var(--grad-hero);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.page-banner__crumb{
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-small);
  color: var(--ivory-faint);
  margin-bottom: var(--space-md);
}
.page-banner__crumb a:hover{ color: var(--gold-light); }
.page-banner h1{ max-width: 16ch; }
.page-banner .lead{ margin-top: var(--space-md); max-width: 55ch; }

/* -----------------------------------------------------------------
   11B. PROMO CTA BAND (shared across pages)
   ----------------------------------------------------------------- */
.promo-cta{
  position: relative;
  background: linear-gradient(135deg, var(--garnet) 0%, var(--obsidian) 65%);
  padding-block: var(--space-2xl);
  overflow: hidden;
  text-align: center;
}
.promo-cta::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(227,164,49,0.2), transparent 55%);
}
.promo-cta__inner{ position: relative; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.promo-cta__timer{ display: flex; gap: var(--space-md); margin-block: var(--space-md); }
.promo-cta__timer div{ background: rgba(0,0,0,0.28); border: 1px solid rgba(247,239,228,0.15); border-radius: var(--radius-md); padding: 14px 18px; min-width: 68px; }
.promo-cta__timer span{ display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-light); }
.promo-cta__timer small{ font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ivory-dim); }

/* -----------------------------------------------------------------
   12. BACK TO TOP
   ----------------------------------------------------------------- */
.back-to-top{
  position: fixed;
  right: 26px; bottom: 26px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--ink-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-gold);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--t-med) var(--ease-premium);
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ transform: translateY(-4px); }

/* -----------------------------------------------------------------
   13. KEYFRAME ANIMATIONS
   ----------------------------------------------------------------- */
@keyframes floatY{
  0%, 100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(-18px) rotate(var(--r, 0deg)); }
}
@keyframes spinSlow{ to{ transform: rotate(360deg); } }
@keyframes pulseGlow{
  0%, 100%{ opacity: 0.55; }
  50%{ opacity: 1; }
}
@keyframes shimmer{
  0%{ background-position: -400px 0; }
  100%{ background-position: 400px 0; }
}
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes ticker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes emberRise{
  0%{ transform: translateY(8px) translateX(0) scale(0.8); }
  50%{ transform: translateY(-46px) translateX(8px) scale(1.15); }
  100%{ transform: translateY(8px) translateX(0) scale(0.8); }
}
@keyframes crestIn{
  from{ opacity: 0; transform: scale(0.82) translateY(14px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}

/* -----------------------------------------------------------------
   14. TOAST NOTIFICATION
   ----------------------------------------------------------------- */
.tpm-toast{
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 20px);
  background: var(--jade-surface);
  border: 1px solid var(--gold-dim);
  color: var(--ivory);
  padding: 14px 26px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-elevate);
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-med) var(--ease-premium);
  z-index: 999;
  white-space: nowrap;
}
.tpm-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }
.tpm-toast[data-tone="emerald"]{ border-color: var(--gold-light); }

/* -----------------------------------------------------------------
   15. RESPONSIVE BASE
   ----------------------------------------------------------------- */
@media (max-width: 640px){
  :root{ --space-3xl: 90px; --space-2xl: 64px; --space-xl: 44px; }
  .btn{ padding: 14px 24px; }
}

/* -----------------------------------------------------------------
   DESIGN NOTES — token provenance (for future maintainers)
   --gold / --gold-light / --gold-dim   ← sampled from logo gold (~#FAB428 family)
   --garnet / --garnet-glow / --garnet-deep  ← sampled from logo violet-wine
                                                (~#2B0A22 → #B23E74 family);
                                                repurposed as "Royal Purple"
   --obsidian / --jade-surface           ← darkened, desaturated versions of
                                                the same violet family, for
                                                backgrounds/surfaces
   --emerald* variables intentionally hold warm gold tones, not green —
   the name is legacy only, kept so contact.css/home.css don't break.
   ----------------------------------------------------------------- */