/* ==========================================================================
   LUCKY CARD SPIN — HOME PAGE STYLES
   Rebuilt from scratch. The previous version of this file carried two full,
   unused hero/testimonial implementations left over from earlier design
   passes (confirmed via the audit — none of those classes were referenced
   by any template). Everything below is live and in use.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * HERO
 * ---------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: clamp(3rem, 4vw, 6rem);
  isolation:isolate;
  overflow:clip;
}
.hero__bg{ position:absolute; inset:0; z-index:0; background: var(--grad-hero); }
.hero .grain{ z-index:1; }
.hero__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items:center;
}
.hero__content h1{
  font-size: var(--fs-hero);
  margin-block: 0.45em 0.4em;
}
.hero__content p{
  font-size: var(--fs-md);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}
.hero__actions{ display:flex; gap: 1rem; flex-wrap:wrap; margin-bottom: var(--sp-8); }
.hero__stats{ display:flex; gap: clamp(1.6rem, 3vw, 3.2rem); flex-wrap:wrap; }
.hero__stat strong{
  display:block;
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight:700;
  color: var(--gold);
  line-height:1.1;
}
.hero__stat span{
  font-size: var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:0.12em;
  color: var(--muted-dim);
}

.hero__art{ position:relative; display:flex; align-items:center; justify-content:center; min-height: 420px; }
.hero__crest-wrap{ position:relative; width: min(100%, 480px); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.hero__crest{
  position:absolute; inset:0;
  width:100%; height:100%;
  color: var(--color-brass);
  opacity:0.92;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 26px rgba(198,154,67,0.18));
}
.hero__phone{ position:relative; z-index:2; }

.floating-badge--rating{ top:6%; left:-4%; }
.floating-badge--downloads{ bottom:8%; right:-6%; }

/* ---------------------------------------------------------------------- *
 * TRUST STRIP (marquee)
 * ---------------------------------------------------------------------- */
.trust-strip{
  position:relative;
  border-block: 1px solid var(--line-soft);
  padding-block: 1.1rem;
  background: var(--panel);
}
.trust-strip .marquee-track{ align-items:center; }
.trust-strip__item{
  display:flex; align-items:center; gap:0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--muted);
  white-space:nowrap;
}
.trust-strip__item svg{ width:15px; height:15px; color: var(--gold); flex-shrink:0; }
.trust-strip__dot{ color: var(--gold); opacity:0.5; }

/* ---------------------------------------------------------------------- *
 * WHY US — asymmetric editorial layout
 * ---------------------------------------------------------------------- */
.why__layout{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items:start;
}
.why__intro{ position:sticky; top: calc(var(--nav-h) + 2rem); }
.why__intro h2{ font-size: var(--fs-2xl); margin-top:0.5em; margin-bottom:0.6em; }
.why__intro p{ max-width:42ch; }

.why__list{ display:flex; flex-direction:column; }
.why__item{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line-soft);
}
.why__item:last-child{ border-bottom: 1px solid var(--line-soft); }
.why__index{
  font-family: var(--font-display);
  font-style:italic;
  font-size: var(--fs-2xl);
  color: var(--color-felt-hi);
  -webkit-text-stroke: 1px var(--gold);
  line-height:1;
}
.why__item h3{ font-size: var(--fs-lg); margin-bottom:0.35em; }
.why__item p{ max-width:56ch; }

/* legacy icon-card markup fallback (kept in case older markup is reused) */
.why__icon{ display:none; }

/* ---------------------------------------------------------------------- *
 * OVERVIEW / SPEC PANEL
 * ---------------------------------------------------------------------- */
.overview__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items:center;
}
.spec-panel{
  background: var(--grad-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2vw, 2.2rem);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.spec-panel table{ width:100%; }
.spec-panel tr{ border-bottom: 1px solid var(--line-soft); }
.spec-panel tr:last-child{ border-bottom:none; }
.spec-panel th, .spec-panel td{ padding: 0.95rem 0.4rem; text-align:left; font-size: var(--fs-sm); }
.spec-panel th{ font-weight:500; color: var(--muted); font-family: var(--font-body); }
.spec-panel td{ font-weight:700; color: var(--ivory); text-align:right; }

/* ---------------------------------------------------------------------- *
 * TIPS
 * ---------------------------------------------------------------------- */
.tips-flow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.tip-card{
  position:relative;
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--grad-card);
}
.tip-card span{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4em; height:2.4em;
  font-family: var(--font-mono); font-weight:700; font-size: var(--fs-md);
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius:50%;
  margin-bottom: var(--sp-4);
}
.tip-card h3{ font-size: var(--fs-md); margin-bottom:0.4em; }
.tip-card p{ font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------- *
 * EXPERIENCE (standouts)
 * ---------------------------------------------------------------------- */
.experience-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.experience-card{ padding: clamp(1.75rem, 2.5vw, 2.3rem); }
.experience-card .card-suit{
  font-size: 2.2rem;
  color: var(--gold);
  opacity:0.7;
  display:block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
}
.experience-card h3{ font-size: var(--fs-md); margin-bottom:0.4em; }
.experience-card p{ font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------- *
 * GAMES — "Dealer's Row" horizontal gallery
 * ---------------------------------------------------------------------- */
.dealer-row{ position:relative; }
.dealer-row__nav{
  display:flex; gap:0.75rem; justify-content:flex-end;
  padding-inline: clamp(1.25rem, 1rem + 3vw, 3rem);
  margin-bottom: var(--sp-5);
}
.dealer-row__arrow{
  width:44px; height:44px; border-radius:50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ivory);
  transition: all var(--dur-fast);
}
.dealer-row__arrow svg{ width:18px; height:18px; }
.dealer-row__arrow:hover{ background: var(--grad-gold); color:#201404; border-color:transparent; }

.dealer-row__viewport{
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor: grab;
}
.dealer-row__viewport::-webkit-scrollbar{ display:none; }
.dealer-row__viewport.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.dealer-row__track{
  display:flex;
  gap: var(--sp-6);
  padding-inline: clamp(1.25rem, 1rem + 3vw, 3rem);
  width: max-content;
}
.game-card{
  scroll-snap-align:start;
  flex: 0 0 auto;
  width: min(72vw, 280px);
}
.game-card__frame{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}
.game-card__frame img{
  width:100%; height:100%; object-fit:cover;
  transition: transform var(--dur-slow) var(--ease-premium);
}
.game-card:hover .game-card__frame img{ transform: scale(1.07); }
.game-card__frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 38%, rgba(8,23,18,0.94) 100%);
}
.game-card__pip{
  position:absolute; top:14px; right:14px; z-index:2;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight:700;
  color: var(--gold);
  background: rgba(8,23,18,0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 0.3em 0.7em;
}
.game-card__frame h3{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  font-size: var(--fs-lg);
  margin:0;
}

/* ---------------------------------------------------------------------- *
 * TESTIMONIALS — "Table Talk"
 * ---------------------------------------------------------------------- */
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.testi-card{
  position:relative;
  padding: clamp(1.75rem, 2.5vw, 2.4rem);
  display:flex; flex-direction:column;
}
.testi-card:nth-child(2){ transform: translateY(-14px); }
.testi-card__quote-mark{
  font-family: var(--font-display);
  font-style:italic;
  font-size: 3.2rem;
  color: var(--gold);
  opacity:0.5;
  line-height:1;
  margin-bottom: -0.4rem;
}
.testi-card__quote{
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--ivory);
  font-weight:500;
  margin-bottom: var(--sp-5);
}
.testi-card__person{ display:flex; align-items:center; gap:0.8rem; margin-top:auto; }
.testi-card__avatar{
  width:2.6em; height:2.6em; flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size: var(--fs-xs);
  background: var(--grad-gold);
  color: #201404;
}
.testi-card__person strong{ display:block; font-size: var(--fs-sm); color: var(--ivory); }
.testi-card__person span{ font-size: var(--fs-xs); color: var(--muted-dim); }

/* ---------------------------------------------------------------------- *
 * APP PROMO / DOWNLOAD
 * ---------------------------------------------------------------------- */
.app-promo{ position:relative; overflow:clip; }
.app-promo__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items:center;
}
.app-promo__art{ display:flex; justify-content:center; }
.app-promo__content .check-list{ display:flex; flex-direction:column; gap:0.7rem; margin-block: var(--sp-6); }
.check-list li{ display:flex; align-items:center; gap:0.7rem; font-size: var(--fs-sm); color: var(--muted); }
.check-list__icon{
  width:1.6em; height:1.6em; flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(78,156,116,0.16);
  color: var(--success);
}
.check-list__icon svg{ width:0.9em; height:0.9em; }

/* ---------------------------------------------------------------------- *
 * FAQ WRAPPER
 * ---------------------------------------------------------------------- */
.faq__layout{ max-width: 820px; margin-inline:auto; }

/* ---------------------------------------------------------------------- *
 * FINAL CTA
 * ---------------------------------------------------------------------- */
.final-cta{
  position:relative;
  padding-block: var(--section-pad);
  background: linear-gradient(180deg, var(--color-baize) 0%, var(--color-baize-deep) 100%);
  overflow:clip;
  isolation:isolate;
}
.final-cta__inner{ position:relative; z-index:2; max-width:640px; margin-inline:auto; text-align:center; }
.final-cta__inner h2{ font-size: var(--fs-2xl); margin-block:0.5em 0.5em; }
.final-cta__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top: var(--sp-6); }

/* ---------------------------------------------------------------------- *
 * RESPONSIVE
 * ---------------------------------------------------------------------- */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__art{ order:-1; min-height:340px; }
  .why__layout{ grid-template-columns: 1fr; }
  .why__intro{ position:static; }
  .overview__grid{ grid-template-columns: 1fr; }
  .tips-flow{ grid-template-columns: repeat(2, 1fr); }
  .experience-grid{ grid-template-columns: repeat(2, 1fr); }
  .testi-grid{ grid-template-columns: repeat(2, 1fr); }
  .testi-card:nth-child(2){ transform:none; }
  .app-promo__grid{ grid-template-columns: 1fr; text-align:center; }
  .app-promo__art{ order:-1; }
  .check-list li{ justify-content:center; }
}

@media (max-width: 620px){
  .tips-flow{ grid-template-columns: 1fr; }
  .experience-grid{ grid-template-columns: 1fr; }
  .testi-grid{ grid-template-columns: 1fr; }
  .hero__stats{ gap: 1.4rem 2rem; }
}