/* =========================================================
   ALPHA — theme-v7.css · "Royale" layer
   THE visible leap: cinematic black-gold hero · Offer of the
   Month section (injected by aura.js) · warm section rhythm.
   Loads after v6. Scoped, transform/opacity motion, RTL, guarded.
   ========================================================= */

/* ============ 1) HERO — cinematic black & gold stage ============ */
.hero{
  isolation:isolate; /* CRITICAL: keeps -z video/veil/aurora above our dark bg */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,39,.20), transparent 55%),
    radial-gradient(90% 60% at 15% 20%, rgba(216,176,63,.10), transparent 60%),
    radial-gradient(90% 60% at 85% 25%, rgba(150,140,110,.08), transparent 60%),
    linear-gradient(180deg, #0c0a07 0%, #100d09 55%, #14110b 100%);
}

/* header keeps its default dark text — its glass pill renders white/light
   across real browsers, so light text was unreadable there (v7.5 fix) */
/* video path (mobile / no-WebGL): dim it as golden texture through dark veil */
.hero-bg.ready{ opacity:.22; }
/* veil: real darkness, then melt into the light page at the very bottom */
.hero-bg-veil{
  background:
    linear-gradient(180deg, rgba(8,7,5,.82) 0%, rgba(8,7,5,.55) 45%, rgba(10,9,7,.78) 80%, var(--bg) 100%);
}
/* melt band ABOVE the WebGL canvas (canvas z:0) so the dark shader
   dissolves into the light page instead of a hard edge */
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:22%;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--bg) 92%);
}
/* hero content always above canvas + melt band */
.hero .container{ position:relative; z-index:2; }
/* aurora recolored for dark stage */
.hero::before{
  background:
    radial-gradient(closest-side, rgba(216,176,63,.30), transparent 70%),
    radial-gradient(closest-side, rgba(120,110,90,.16), transparent 70%);
  background-size:50% 100%, 45% 100%;
  background-position:20% 0, 80% 0; background-repeat:no-repeat;
  filter:blur(26px);
}
/* watermark glows softly on black */
.hero-wm{ -webkit-text-stroke-color:rgba(232,196,116,.10) !important; opacity:.9; }

/* typography flips to light */
.hero .hero-h1{ color:#f7f3e8; text-shadow:0 2px 30px rgba(0,0,0,.45); }
.hero .hero-sub{ color:rgba(240,234,216,.78); }
.hero .hero-eyebrow{
  color:#f3dca0;
  border:1px solid rgba(216,176,63,.45);
  background:linear-gradient(120deg, rgba(28,24,16,.72), rgba(74,60,20,.35));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(246,228,168,.25);
}
/* soft button becomes dark glass */
.hero .btn-soft{
  background:rgba(255,255,255,.06); color:#f3ecd8;
  border:1px solid rgba(246,228,168,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hero .btn-soft:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(246,228,168,.65); }
/* logo badge floats on light glass so the logo art stays true */
.hero .logo-badge{
  background:rgba(255,255,255,.92);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 8px 28px rgba(201,162,39,.35), inset 0 0 0 1px rgba(246,228,168,.5);
}
/* brand tiles: light glass chips so favicons read on black */
.hero .logo-cloud .tile{
  background:rgba(255,255,255,.92);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(246,228,168,.35);
  padding:9px;
}
/* gold text pops harder on black */
.hero .hero-h1 .gold-text{
  background:linear-gradient(110deg,#d8b03f 0%,#f6e4a8 30%,#fff8dc 50%,#f6e4a8 70%,#c9a227 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* trust strip sits right under dark hero — give it lift */
.trust{ position:relative; z-index:2; }

/* dark-mode: hero already dark — just deepen */
html[data-theme="dark"] .hero{ background:linear-gradient(180deg,#080807,#0c0b09 60%,#0f0e0b); }

/* ============ 2) OFFER OF THE MONTH (injected: .offer-month) ============ */
.offer-month{ padding:26px 0 10px; }
.offer-month .om-panel{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(110% 130% at 85% -20%, rgba(216,176,63,.35), transparent 55%),
    radial-gradient(80% 120% at 10% 120%, rgba(169,133,23,.22), transparent 60%),
    linear-gradient(135deg,#151109 0%,#1d1710 45%,#241c0f 100%);
  border:1px solid rgba(216,176,63,.4);
  box-shadow:0 30px 90px rgba(20,15,5,.45), inset 0 1px 0 rgba(246,228,168,.22);
  padding:clamp(28px,5vw,54px);
  display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:28px;
  color:#f5efdd;
}
.offer-month .om-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:800; letter-spacing:.08em; color:#f3dca0;
  border:1px solid rgba(216,176,63,.5); border-radius:999px; padding:7px 15px;
  background:rgba(0,0,0,.25); margin-bottom:16px;
}
.offer-month .om-kicker::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#f3dca0; box-shadow:0 0 0 0 rgba(243,220,160,.55);
  animation:pulseDot 2.4s ease-out infinite;
}
.offer-month h2{
  color:#fdf8ea; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 10px;
}
.offer-month h2 .gold-text{
  background:linear-gradient(110deg,#d8b03f,#fff8dc 50%,#c9a227);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.offer-month .om-sub{ color:rgba(240,232,210,.75); font-size:1.06rem; margin:0 0 22px; max-width:520px; }
.offer-month .om-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.offer-month .om-price{
  text-align:center; position:relative;
  padding:26px 18px; border-radius:calc(var(--radius-lg) - 8px);
  background:linear-gradient(160deg, rgba(246,228,168,.14), rgba(201,162,39,.08));
  border:1px solid rgba(246,228,168,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.offer-month .om-price .lbl{ color:#e9dfc2; font-weight:700; font-size:.95rem; }
.offer-month .om-price .num{
  display:block; font-weight:900; font-size:clamp(2.6rem,6vw,3.8rem); line-height:1.1; letter-spacing:-.02em;
  background:linear-gradient(110deg,#f6e4a8,#fff8dc 45%,#d8b03f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.12em;
}
.offer-month .om-price .cur{ color:rgba(240,232,210,.7); font-weight:700; }
.offer-month .om-badge{
  position:absolute; top:14px; inset-inline-start:14px;
  font-size:.72rem; font-weight:800; color:#241c0f;
  background:var(--gold-grad); border-radius:999px; padding:5px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
@media (max-width:820px){
  .offer-month .om-panel{ grid-template-columns:1fr; text-align:center; }
  .offer-month .om-sub{ margin-inline:auto; }
  .offer-month .om-cta{ justify-content:center; }
}

/* ============ 3) Section rhythm — warm champagne bands ============ */
#why, #faq{
  position:relative;
  background:linear-gradient(180deg, transparent, rgba(233,214,160,.14) 18%, rgba(233,214,160,.14) 82%, transparent);
}
#why::before, #faq::before, #why::after, #faq::after{
  content:""; position:absolute; inset-inline:0; height:1px;
  background:linear-gradient(90deg,transparent, rgba(201,162,39,.30), transparent);
}
#why::before, #faq::before{ top:0; }
#why::after, #faq::after{ bottom:0; }

/* ============ 4) Product cards — visible upgrade ============ */
.product{ overflow:hidden; }
.product .tile{
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.18), 0 6px 16px rgba(0,0,0,.06);
  transition:transform var(--t) var(--spring), box-shadow var(--t) var(--out);
}
@media (pointer:fine){
  .product:hover .tile{
    transform:scale(1.08) rotate(-2deg);
    box-shadow:inset 0 0 0 1px rgba(201,162,39,.45), 0 10px 26px rgba(154,123,21,.22);
  }
}
html.reduced .product:hover .tile{ transform:none; }

/* ============ 5) Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .offer-month .om-kicker::before{ animation:none !important; }
  .product .tile{ transition:none !important; }
}

/* ============ 6) FOOTER — royal black bookend ============ */
.site-footer{
  position:relative; overflow:hidden;
  border-top:1px solid rgba(216,176,63,.35);
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(201,162,39,.16), transparent 55%),
    linear-gradient(180deg,#12100b 0%,#0c0a07 100%);
  color:rgba(238,231,210,.82);
}
.site-footer h4{ color:#f6efdc; }
.site-footer a{ color:rgba(238,231,210,.62); }
.site-footer a:hover{ color:#f3dca0; }
.footer-about{ color:rgba(238,231,210,.6); }
.site-footer .socials a{
  background:rgba(255,255,255,.05); color:#f2ecd9;
  border:1px solid rgba(246,228,168,.28);
}
.site-footer .socials a:hover{ background:var(--gold-grad); color:#2a2008; border-color:transparent; }
.footer-bottom{ border-top:1px solid rgba(246,228,168,.14); color:rgba(238,231,210,.45); }
.footer-mega{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(232,196,116,.12);
  background:linear-gradient(180deg, rgba(246,228,168,.10), transparent 80%);
  -webkit-background-clip:text; background-clip:text;
}

/* ============ 7) Progress bar — royal beam ============ */
.progress{ height:3px; box-shadow:0 0 12px rgba(216,176,63,.55); }

/* ============ 8) Hero scroll cue — golden invitation ============ */
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; width:30px; height:48px; border-radius:999px;
  border:1.5px solid rgba(246,228,168,.55);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  pointer-events:none;
}
.scroll-cue::before{
  content:""; position:absolute; top:9px; left:50%; margin-left:-2px;
  width:4px; height:9px; border-radius:99px;
  background:linear-gradient(180deg,#f6e4a8,#c9a227);
  animation:cueDrop 2.1s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes cueDrop{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:1; }
  70%{ transform:translateY(16px); opacity:.9; }
  100%{ transform:translateY(20px); opacity:0; }
}
@media (max-width:820px){ .scroll-cue{ display:none; } }
html.reduced .scroll-cue::before{ animation:none; }

/* ============ 9) Logo badge — royal halo ============ */
.hero .logo-badge::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(246,228,168,.45), 0 0 40px rgba(216,176,63,.35);
}

/* ============ 10) Offer panel — living glare + smooth tilt ============ */
.offer-month .om-panel{
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.offer-month .om-panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%), rgba(246,228,168,.14), transparent 45%);
  z-index:0;
}
.offer-month .om-copy, .offer-month .om-price{ position:relative; z-index:1; }
/* periodic glint across the giant price — single element, GPU only */
.offer-month .om-price{ overflow:hidden; }
.offer-month .om-price::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,248,220,.28) 50%, transparent 60%);
  transform:translateX(160%);
  animation:priceGlint 6s ease-in-out infinite;
}
@keyframes priceGlint{
  0%, 78%{ transform:translateX(160%); }
  88%{ transform:translateX(-160%); }
  100%{ transform:translateX(-160%); }
}
html.reduced .om-price::after{ animation:none; display:none; }
@media (max-width:820px){ .offer-month .om-panel{ transform:none !important; } }

/* ============ 11) v7.4 — shader kill-switch + centered hero stack ============ */
.hero-gl{ display:none !important; }
.hero.gl-on .hero-bg{ display:block !important; }
/* insurance: hero stack is a centered column at EVERY width (kills any
   grid/offset that pushed the badge right on wide screens) */
.hero .container{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.hero .logo-badge{ margin-inline:auto; }
.hero .hero-eyebrow{ margin-inline:auto; }