/* =================================================================
   HOME PAGE STYLES
   ================================================================= */

/* ---------------------------- HERO ---------------------------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 124px;
  padding-bottom: 56px;
  overflow: hidden;
  background: var(--grad-hero);
}

/* Ambient blur blobs */
.hero__glow{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: pulseGlow 7s ease-in-out infinite;
  z-index: 0;
}
.hero__glow--1{ width: 520px; height: 520px; background: rgba(227,164,49,0.22); top: -160px; left: -160px; }
.hero__glow--2{ width: 460px; height: 460px; background: rgba(122,37,84,0.32); bottom: -180px; right: -140px; animation-delay: 2s; }

/* Rotating light-ray burst behind the crest — the "stage light" the
   brief asked for, built from a masked conic-gradient rather than an
   image so it stays crisp at any size */
.hero__rays{
  position: absolute;
  top: -8%;
  left: 50%;
  width: 1300px;
  height: 1300px;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(249,213,126,0.22) 3deg, transparent 7deg,
    transparent 27deg, rgba(249,213,126,0.16) 30deg, transparent 34deg,
    transparent 55deg, rgba(249,213,126,0.20) 58deg, transparent 62deg,
    transparent 85deg, rgba(249,213,126,0.15) 88deg, transparent 92deg,
    transparent 140deg, rgba(178,62,116,0.18) 144deg, transparent 149deg,
    transparent 200deg, rgba(249,213,126,0.13) 204deg, transparent 208deg,
    transparent 260deg, rgba(178,62,116,0.16) 264deg, transparent 269deg,
    transparent 320deg, rgba(249,213,126,0.18) 324deg, transparent 329deg,
    transparent 360deg);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 66%);
  animation: spinSlow 130s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Ember / gold-dust particles (JS-populated; JS only sets left/top/
   delay/duration/opacity inline — every visual choice lives here) */
.hero__particles{ position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hero__particles span{
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px 1px rgba(249,213,126,0.85), 0 0 16px 4px rgba(227,164,49,0.35);
  animation-name: emberRise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Card-fan + chip stacks — now a full-bleed atmospheric layer that
   frames the crest instead of competing with it for attention */
.hero__stage{ position: absolute; inset: 0; z-index: 1; perspective: 1200px; }
.card-fan{
  position: absolute;
  left: 6%;
  bottom: 10%;
  transform: scale(0.78) rotate(-4deg);
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  opacity: 0.9;
}
.card-fan__card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168px;
  height: 240px;
  margin: -120px 0 0 -84px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--jade-surface) 0%, var(--obsidian-2) 100%);
  border: 1.5px solid var(--gold-dim);
  box-shadow: var(--shadow-elevate);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatY 6s ease-in-out infinite;
}
.card-fan__card--left{ margin-left: -176px; margin-top: -102px; transform: rotate(-16deg); --r: -16deg; animation-delay: 0.2s; z-index: 1; }
.card-fan__card--mid{ --r: 0deg; z-index: 3; border-color: var(--gold); box-shadow: var(--shadow-elevate), var(--shadow-gold); }
.card-fan__card--right{ margin-left: 8px; margin-top: -102px; transform: rotate(16deg); --r: 16deg; animation-delay: 0.4s; z-index: 2; }
.card-fan__pip{ font-size: 3rem; color: var(--gold-light); }
.card-fan__pip--red{ color: var(--garnet-glow); }
.card-fan__crest{ display: flex; }
.card-fan__corner{
  position: absolute;
  font-family: var(--font-emblem);
  font-size: 1.1rem;
  color: var(--ivory-dim);
}
.card-fan__corner--tl{ top: 14px; left: 16px; }
.card-fan__corner--br{ bottom: 14px; right: 16px; transform: rotate(180deg); }

.chip-stack{
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--gold) 0deg 11deg, var(--garnet) 11deg 22deg);
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
  animation: floatY 5.5s ease-in-out infinite;
  opacity: 0.92;
}
.chip-stack::after{
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--jade-surface);
  border: 2px solid var(--gold-light);
}
.chip-stack--a{ top: 14%; left: 7%; animation-delay: 0.3s; }
.chip-stack--b{ bottom: 14%; right: 9%; width: 56px; height: 56px; animation-delay: 1.1s; }
.chip-stack--c{ top: 20%; right: 5%; width: 44px; height: 44px; animation-delay: 0.6s; }

/* Crest zone — the logo itself, exactly as supplied, given a stage to be the focal point */
.hero__inner{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
}
.hero__crest-zone{
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-sm);
  animation: crestIn 1s var(--ease-premium) both;
}
.hero__crest-glow{
  position: absolute;
  inset: -70px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,164,49,0.4) 0%, rgba(122,37,84,0.24) 46%, transparent 72%);
  filter: blur(36px);
  animation: pulseGlow 5s ease-in-out infinite;
}
.hero__crest{
  width: min(300px, 56vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,0.6));
  animation: floatY 7s ease-in-out infinite;
}

.hero__eyebrow{ animation: heroFadeUp 0.8s var(--ease-premium) both; animation-delay: 0.55s; }

.hero__title{ margin-top: var(--space-sm); font-size: var(--fs-hero); }
.hero__title-line{
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: heroLineIn 1s var(--ease-premium) forwards;
  animation-delay: 0.7s;
}
.hero__title-line--gold{
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation-delay: 0.86s;
}
@keyframes heroLineIn{ to{ opacity: 1; transform: translateY(0); } }
@keyframes heroFadeUp{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } }

.hero__lead{ margin-top: var(--space-md); max-width: 46ch; margin-inline: auto; animation: heroFadeUp 0.8s var(--ease-premium) both; animation-delay: 1.02s; }

.hero__ctas{ justify-content: center; animation: heroFadeUp 0.8s var(--ease-premium) both; animation-delay: 1.16s; }
.hero__trust{ justify-content: center; animation: heroFadeUp 0.8s var(--ease-premium) both; animation-delay: 1.3s; }

.hero__scroll{
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  z-index: 3;
}
.hero__scroll i{ animation: bounceDown 1.8s ease-in-out infinite; }
@keyframes bounceDown{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

@media (max-width: 1080px){
  .card-fan{ left: 2%; bottom: 6%; transform: scale(0.6) rotate(-4deg); }
  .why__row, .why__row--reverse{ text-align: center; }
}
@media (max-width: 720px){
  .hero{ padding-top: 130px; }
  .hero__rays{ width: 900px; height: 900px; }
  .card-fan{ opacity: 0.55; transform: scale(0.46) rotate(-4deg); left: -6%; bottom: 2%; }
  .chip-stack--c{ display: none; }
  .card-fan__card--left{ transform: rotate(-14deg) translate(-58px, 14px); }
  .card-fan__card--right{ transform: rotate(14deg) translate(58px, 14px); }
}

/* ---------------------------- WHY CHOOSE (zigzag + spine) ---------------------------- */
.why{
  background:
    radial-gradient(55% 45% at 10% 10%, rgba(227,164,49,0.06), transparent 65%),
    radial-gradient(50% 45% at 92% 90%, rgba(122,37,84,0.10), transparent 65%);
}
.why__spine{ position: relative; max-width: 920px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-2xl); }
.why__spine::before{
  content: '';
  position: absolute;
  top: 10px; bottom: 10px; left: calc(50% - 0.5px);
  width: 1px;
  background: linear-gradient(var(--gold-dim), var(--garnet-glow), var(--gold-dim));
  opacity: 0.5;
}
.why__row{
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  align-items: center;
  column-gap: var(--space-lg);
}
.why__mark{ grid-column: 2; justify-self: center; z-index: 1; }
.why__mark span{
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--obsidian-2);
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
  font-size: 1.7rem;
  box-shadow: var(--shadow-gold);
}
.why__copy{ grid-column: 3; }
.why__row--reverse .why__copy{ grid-column: 1; text-align: right; }
.why__copy h3{ margin-bottom: 8px; }
.why__copy p{ color: var(--ivory-dim); max-width: 42ch; }
.why__row--reverse .why__copy p{ margin-left: auto; }

@media (max-width: 780px){
  .why__spine::before{ left: 38px; }
  .why__row, .why__row--reverse{ grid-template-columns: 76px 1fr; }
  .why__mark{ grid-column: 1; }
  .why__copy, .why__row--reverse .why__copy{ grid-column: 2; text-align: left; }
  .why__row--reverse .why__copy p{ margin-left: 0; }
}

/* ---------------------------- POPULAR GAMES ---------------------------- */
.games__track-wrap{ position: relative; background: radial-gradient(65% 120% at 50% 50%, rgba(122,37,84,0.14) 0%, transparent 70%); }
.games__track-wrap::before, .games__track-wrap::after{
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.games__track-wrap::before{ left: 0; background: linear-gradient(90deg, var(--obsidian), transparent); }
.games__track-wrap::after{ right: 0; background: linear-gradient(270deg, var(--obsidian), transparent); }
.games__track{
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) clamp(20px, 5vw, 48px) var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  cursor: grab;
  scrollbar-width: thin;
}
.games__track.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.game-card{
  flex: 0 0 270px;
  scroll-snap-align: start;
  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), box-shadow var(--t-med);
}
.game-card::after{
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--gold-dim);
  border-right: 2px solid var(--gold-dim);
  opacity: 0.7;
  transition: border-color var(--t-med), opacity var(--t-med);
}
.game-card:hover::after{ border-color: var(--gold-light); opacity: 1; }
.game-card:hover{ transform: translateY(-8px); border-color: var(--gold-dim); box-shadow: var(--shadow-card), var(--shadow-gold); }
.game-card__suit{
  position: absolute; top: -14px; right: -6px;
  font-size: 6.5rem;
  color: var(--gold);
  opacity: 0.1;
  transform: rotate(-8deg);
}
.game-card h3{ font-size: 1.25rem; margin-bottom: 10px; position: relative; }
.game-card p{ color: var(--ivory-dim); font-size: 0.92rem; margin-bottom: var(--space-md); position: relative; min-height: 62px; }
.game-card__meta{ display: flex; gap: var(--space-md); flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: var(--space-sm); position: relative; }
.game-card__meta span{ font-size: 0.78rem; color: var(--ivory-faint); display: flex; align-items: center; gap: 6px; }
.game-card__meta i{ color: var(--gold-light); }

/* ---------------------------- FEATURES BENTO ---------------------------- */
.bento{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: var(--space-md);
}
.bento__tile{
  --mx: 50%; --my: 50%;
  position: relative;
  grid-column: span 1;
  background: linear-gradient(160deg, var(--jade-surface), var(--obsidian-2));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: border-color var(--t-med), transform var(--t-med) var(--ease-premium);
}
.bento__tile::before{
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(227,164,49,0.18), transparent 70%);
  opacity: 0; transition: opacity var(--t-fast);
  pointer-events: none;
}
.bento__tile::after{
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--gold-dim);
  border-right: 2px solid var(--gold-dim);
  opacity: 0.7;
  transition: border-color var(--t-med), opacity var(--t-med);
}
.bento__tile:hover::before{ opacity: 1; }
.bento__tile:hover::after{ border-color: var(--gold-light); opacity: 1; }
.bento__tile:hover{ transform: translateY(-4px); border-color: var(--gold-dim); }
.bento__tile--lg{ grid-column: span 2; grid-row: span 2; }
.bento__tile--wide{ grid-column: span 2; }
.bento__tile i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--gold-light);
  background: radial-gradient(circle at 35% 30%, var(--jade-surface-2), var(--obsidian-2));
  box-shadow: 0 0 0 1px var(--gold-dim), inset 0 2px 3px rgba(255,255,255,0.12), inset 0 -3px 6px rgba(0,0,0,0.45);
}
.bento__tile--lg i{ width: 66px; height: 66px; font-size: 1.9rem; }
.bento__tile h3{ font-size: 1.1rem; margin-top: var(--space-sm); }
.bento__tile--lg h3{ font-size: 1.4rem; }
.bento__tile p{ color: var(--ivory-dim); font-size: 0.9rem; margin-top: 6px; }

@media (max-width: 900px){
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .bento__tile--lg{ grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 540px){
  .bento{ grid-template-columns: 1fr; }
  .bento__tile--lg, .bento__tile--wide{ grid-column: span 1; }
}

/* ---------------------------- WINNING EXPERIENCE ---------------------------- */
.winning__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.winning__list{ display: flex; flex-direction: column; gap: var(--space-md); margin-block: var(--space-lg); }
.winning__list li{ display: flex; gap: 12px; align-items: flex-start; color: var(--ivory-dim); }
.winning__list i{ color: var(--gold-light); margin-top: 4px; }

.winning__stage{ position: relative; padding: var(--space-lg); }
.winning__panel{
  position: relative;
  background: linear-gradient(160deg, var(--jade-surface), var(--obsidian-2));
  border: 1px solid rgba(227,164,49,0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-elevate);
}
.winning__panel::before, .winning__panel::after{
  content: '';
  position: absolute;
  top: 14px; width: 18px; height: 18px;
  border-top: 2px solid var(--gold);
  opacity: 0.85;
}
.winning__panel::before{ left: 14px; border-left: 2px solid var(--gold); border-radius: 6px 0 0 0; }
.winning__panel::after{ right: 14px; border-right: 2px solid var(--gold); border-radius: 0 6px 0 0; }
.winning__panel-head{ display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ivory-dim); margin-bottom: var(--space-md); }
.winning__live{ color: var(--emerald-glow); display: flex; align-items: center; gap: 6px; }
.winning__live i{ font-size: 0.5rem; animation: pulseGlow 1.6s ease-in-out infinite; }
.winning__pot{ display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-lg); }
.winning__pot-label{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ivory-faint); }
.winning__pot-value{ font-family: var(--font-display); font-size: 2.6rem; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.winning__badges{ display: flex; gap: 10px; flex-wrap: wrap; }
.winning__badge{ display: flex; align-items: center; gap: 6px; background: rgba(227,164,49,0.1); border: 1px solid rgba(227,164,49,0.3); color: var(--gold-light); padding: 6px 14px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 700; }
.winning__float{
  position: absolute;
  background: rgba(11,4,16,0.85);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--emerald-glow);
  animation: floatY 5s ease-in-out infinite;
}
.winning__float--1{ top: -8px; right: -10px; }
.winning__float--2{ bottom: 6px; left: -18px; color: var(--gold-light); animation-delay: 1s; }

@media (max-width: 900px){
  .winning__grid{ grid-template-columns: 1fr; }
  .winning__stage{ order: -1; max-width: 420px; margin-inline: auto; }
}

/* ---------------------------- STATS BAND ---------------------------- */
.stats{ background: var(--obsidian-2); border-block: 1px solid var(--hairline); padding-block: var(--space-xl); }
.stats__band{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-lg); text-align: center; }
.stats__item{ flex: 1; min-width: 190px; position: relative; padding-inline: var(--space-md); }
.stats__item:not(:last-child)::after{ content: ''; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: var(--hairline); }
.stats__value{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats__label{ display: block; margin-top: 6px; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory-dim); }
@media (max-width: 640px){ .stats__item:not(:last-child)::after{ display: none; } }

/* ---------------------------- HOW IT WORKS ---------------------------- */
.how{ background: radial-gradient(60% 50% at 50% 0%, rgba(227,164,49,0.06), transparent 65%); }
.how__path{ position: relative; display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); }
.how__line{ position: absolute; top: 38px; left: 6%; right: 6%; height: 1px; background: repeating-linear-gradient(90deg, var(--gold-dim) 0 10px, transparent 10px 22px); z-index: 0; }
.how__step{ position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 230px; margin-inline: auto; }
.how__num{
  font-family: var(--font-emblem);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-gold);
  background: var(--grad-gold);
  padding: 3px 11px;
  border-radius: var(--radius-full);
  font-weight: 700;
}
.how__step i{
  width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--jade-surface-2), var(--obsidian-2) 72%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; color: var(--gold-light);
  box-shadow:
    0 0 0 1.5px var(--gold),
    0 0 0 5px var(--obsidian),
    0 0 0 6px var(--gold-dim),
    var(--shadow-card),
    inset 0 3px 5px rgba(255,255,255,0.14),
    inset 0 -4px 8px rgba(0,0,0,0.5);
}
.how__step p{ color: var(--ivory-dim); font-size: 0.9rem; }
@media (max-width: 860px){
  .how__path{ flex-direction: column; align-items: center; }
  .how__line{ display: none; }
}

/* ---------------------------- APP PROMO ---------------------------- */
.app-promo{ background: var(--obsidian-2); border-block: 1px solid var(--hairline); }
.app-promo__grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: center; }
.app-promo__stage{ display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }

.app-promo__stats{ display: flex; gap: var(--space-xl); margin-block: var(--space-lg); }
.app-promo__stats strong{ display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-light); }
.app-promo__stats span{ font-size: 0.8rem; color: var(--ivory-dim); }

.store-badges{ display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.store-badge{ display: flex; align-items: center; gap: 10px; background: var(--jade-surface); border: 1px solid var(--hairline); padding: 11px 22px; border-radius: var(--radius-md); transition: all var(--t-fast); }
.store-badge i{ font-size: 1.7rem; color: var(--gold-light); }
.store-badge span{ display: flex; flex-direction: column; font-weight: 700; font-size: 0.95rem; }
.store-badge small{ font-weight: 500; color: var(--ivory-faint); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; }
.store-badge:hover{ border-color: var(--gold); transform: translateY(-3px); }

@media (max-width: 900px){ .app-promo__grid{ grid-template-columns: 1fr; } }

/* ---------------------------- TESTIMONIALS MARQUEE ---------------------------- */
.marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{ display: flex; gap: var(--space-lg); width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
.quote-card{
  position: relative;
  flex: 0 0 330px;
  background: linear-gradient(160deg, var(--jade-surface), var(--obsidian-2));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.quote-card::after{
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--gold-dim);
  border-right: 2px solid var(--gold-dim);
  opacity: 0.6;
}
.quote-card__stars{ color: var(--gold); font-size: 0.82rem; margin-bottom: var(--space-sm); }
.quote-card p{ font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ivory); margin-bottom: var(--space-md); }
.quote-card footer{ display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--ivory-dim); font-weight: 700; }
.quote-card__avatar{ width: 32px; height: 32px; border-radius: 50%; background: var(--grad-gold); color: var(--ink-gold); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; }

/* ---------------------------- FAQ ---------------------------- */
.faq__chips{ display: flex; flex-direction: column; gap: 10px; margin-block: var(--space-lg); align-items: flex-start; }

/* ---------------------------- SECURITY ORBIT ---------------------------- */
.security{ background: radial-gradient(55% 55% at 50% 40%, rgba(122,37,84,0.12), transparent 70%); }
.shield-orbit{ position: relative; width: min(540px, 92vw); height: min(540px, 92vw); margin-inline: auto; }
.shield-orbit::before{ content: ''; position: absolute; inset: 58px; border: 1px dashed var(--hairline); border-radius: 50%; }
.shield-orbit__core{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle, var(--garnet-deep), var(--obsidian));
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: var(--gold-light);
  box-shadow: var(--shadow-gold), var(--shadow-ruby);
}
.shield-orbit__node{
  position: absolute;
  width: 150px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--ivory-dim);
}
.shield-orbit__node i{
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--jade-surface-2), var(--obsidian-2) 72%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--gold-light);
  box-shadow: 0 0 0 1.5px var(--gold-dim), inset 0 2px 4px rgba(255,255,255,0.12), inset 0 -3px 6px rgba(0,0,0,0.45);
}
.shield-orbit__node--1{ top: -6px; left: 50%; transform: translateX(-50%); }
.shield-orbit__node--2{ top: 50%; right: -14px; transform: translateY(-50%); }
.shield-orbit__node--3{ bottom: -6px; left: 50%; transform: translateX(-50%); }
.shield-orbit__node--4{ top: 50%; left: -14px; transform: translateY(-50%); }

@media (max-width: 620px){
  .shield-orbit{ height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); place-items: center; }
  .shield-orbit::before{ display: none; }
  .shield-orbit__core{ grid-column: span 2; position: static; transform: none; margin-bottom: var(--space-sm); }
  .shield-orbit__node{ position: static; transform: none; width: auto; }
}

/* ---------------------------- NEWSLETTER ---------------------------- */
.newsletter__panel{
  position: relative;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  background: linear-gradient(160deg, var(--jade-surface), var(--obsidian-2));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
}
.newsletter__panel::before, .newsletter__panel::after{
  content: '';
  position: absolute;
  top: 14px; width: 18px; height: 18px;
  border-top: 2px solid var(--gold);
  opacity: 0.7;
}
.newsletter__panel::before{ left: 14px; border-left: 2px solid var(--gold); border-radius: 6px 0 0 0; }
.newsletter__panel::after{ right: 14px; border-right: 2px solid var(--gold); border-radius: 0 6px 0 0; }
.newsletter__icon{
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--grad-gold); color: var(--ink-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-inline: auto; margin-bottom: var(--space-md);
}
.newsletter__form{ display: flex; gap: 10px; margin-block: var(--space-lg); flex-wrap: wrap; justify-content: center; }
.newsletter__form input{
  flex: 1; min-width: 220px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  padding: 15px 22px;
  color: var(--ivory);
  transition: border-color var(--t-fast);
}
.newsletter__form input:focus{ border-color: var(--gold); }
.newsletter__form input::placeholder{ color: var(--ivory-faint); }
.newsletter__fine{ font-size: 0.78rem; color: var(--ivory-faint); }