/* ==========================================================================
   LUCKYCARDSPIN — HOME PAGE STYLES
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * HERO
 * ---------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  /*padding-top: calc(var(--nav-h) + 2.5rem);*/
  padding-top:90px;
  padding-bottom: 4rem;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background: var(--grad-hero);
}
.hero .grain{ z-index:1; }
.hero__glow{
  position:absolute;
  top:8%; right:-6%;
  width:min(60vw,780px); height:min(60vw,780px);
  z-index:1;
  pointer-events:none;
}
.hero__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,0.98fr);
  align-items:center;
  gap: clamp(2rem, 4vw, 4rem);
}
.hero__content{ max-width: 640px; }
.hero__title{
  font-size: var(--fs-hero);
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.hero__sub{
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 20px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.hero__art{ position:relative; }
.hero__art-img{ width:100%; height:auto; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)); }

.hero__scroll{
  position:absolute; left:50%; bottom: 2.2rem; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  color: var(--muted);
}
.hero__scroll-track{
  width:1px; height:44px;
  background: var(--line-soft);
  position:relative; overflow:hidden;
}
.hero__scroll-dot{
  position:absolute; left:-1.5px; top:0;
  width:4px; height:4px; border-radius:50%;
  background: var(--gold);
  animation: scroll-dot 2.1s ease-in-out infinite;
}
@keyframes scroll-dot{ 0%{ top:-6px; opacity:0; } 20%{ opacity:1; } 90%{ opacity:1; } 100%{ top:44px; opacity:0; } }
.hero__scroll em{ font-family: var(--font-mono); font-style:normal; font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; }

/* ---------------------------------------------------------------------- *
 * WIN TICKER
 * ---------------------------------------------------------------------- */
.ticker-strip{
  background: var(--ink-2);
  border-block: 1px solid var(--line-soft);
  padding-block: 1.1rem;
}
.ticker-item{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space:nowrap;
}
.ticker-item svg{ width:15px; height:15px; color: var(--gold); flex-shrink:0; }
.ticker-item strong{ color: var(--gold); font-weight:600; }

/* ---------------------------------------------------------------------- *
 * WHY CHOOSE
 * ---------------------------------------------------------------------- */
.why__grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  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.7em; }
.why__intro p{ margin-bottom: var(--sp-6); font-size: var(--fs-md); }

.why__list{ display:flex; flex-direction:column; }
.why__item{
  display:grid;
  grid-template-columns: 58px 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
}
.why__item:first-child{ padding-top:0; }
.why__item .icon-tile{ margin-bottom:0; }
.why__item h3{ font-size: var(--fs-lg); margin-bottom:0.4em; }
.why__item p{ font-size: var(--fs-base); max-width:52ch; }

/* ---------------------------------------------------------------------- *
 * POPULAR GAMES
 * ---------------------------------------------------------------------- */
.games-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.game-card{
  position:relative;
  overflow:hidden;
  padding: var(--sp-6);
  min-height: 240px;
  display:flex; flex-direction:column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(155deg, var(--gc1) 0%, var(--gc2) 100%);
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base), border-color var(--dur-base);
}
.game-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--line); }
.game-card__suit{
  position:absolute; right: -0.35em; top:-0.28em;
  font-size:7.5rem; line-height:1;
  color: rgba(246,239,227,0.09);
  font-family: var(--font-display);
  pointer-events:none;
}
.game-card .badge{ align-self:flex-start; margin-bottom: auto; }
.game-card h3{ font-size: var(--fs-lg); margin-top: var(--sp-6); margin-bottom:0.35em; }
.game-card p{ font-size: var(--fs-sm); max-width:26ch; margin-bottom: var(--sp-5); }
.game-card__meta{
  display:flex; align-items:center; gap:0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--gold-soft);
  margin-top:auto;
}
.game-card__meta svg{ width:14px; height:14px; }

/* ---------------------------------------------------------------------- *
 * OFFERS SLIDER
 * ---------------------------------------------------------------------- */
.offers-slider{ position:relative; }
.offers-track{
  display:flex;
  transition: transform 0.65s var(--ease-premium);
  will-change: transform;
}
.offer-slide{
  position:relative;
  min-width:100%;
  aspect-ratio: 1920 / 551;
  overflow:hidden;
}
.offer-slide img{ width:100%; height:100%; object-fit:cover; }
.offer-slide figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding: clamp(1rem,3vw,2.2rem) clamp(1.25rem,5vw,4rem);
  background: linear-gradient(0deg, rgba(6,3,10,0.82) 0%, transparent 100%);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.6rem);
  color: var(--ivory);
  display:flex; flex-direction:column; gap:0.25rem;
}
.offer-slide figcaption span{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color: var(--gold);
}
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(11,7,16,0.55);
  border: 1px solid rgba(246,239,227,0.25);
  color: var(--ivory);
  backdrop-filter: blur(8px);
  z-index:3;
  transition: all var(--dur-fast);
}
.slider-arrow:hover{ background: var(--grad-gold); color:#1D1206; border-color:transparent; }
.slider-arrow.prev{ left: clamp(0.75rem, 3vw, 2.5rem); }
.slider-arrow.next{ right: clamp(0.75rem, 3vw, 2.5rem); }
.slider-dots{
  position:absolute; bottom: clamp(0.9rem,3vw,1.6rem); right: clamp(1.25rem,5vw,4rem);
  display:flex; gap:0.5rem; z-index:3;
}
.slider-dots .dot{
  width:9px; height:9px; border-radius:50%;
  background: rgba(246,239,227,0.35);
  transition: all var(--dur-fast);
  cursor:pointer;
}
.slider-dots .dot.is-active{ background: var(--gold); width:24px; border-radius:5px; }

/* ---------------------------------------------------------------------- *
 * FEATURES
 * ---------------------------------------------------------------------- */
.features-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.feature-card{ padding: var(--sp-6); }
.feature-card h3{ font-size: var(--fs-lg); margin-bottom:0.5em; }
.feature-card p{ font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------- *
 * APP DOWNLOAD PROMO
 * ---------------------------------------------------------------------- */
.app-promo{ position:relative; background: var(--grad-royal); isolation:isolate; }
.app-promo__grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items:center;
}
.app-promo__art{ position:relative; display:flex; justify-content:center; }

.app-promo__content h2{ font-size: var(--fs-2xl); margin-top:0.5em; margin-bottom:0.6em; }
.app-promo__content > p{ font-size: var(--fs-md); margin-bottom: var(--sp-6); max-width:48ch; }
.check-list{ display:flex; flex-direction:column; gap:0.9rem; margin-bottom: var(--sp-7); }
.check-list li{ display:flex; align-items:center; gap:0.7rem; font-size: var(--fs-base); color: var(--ivory); }
.check-list svg{ width:20px; height:20px; color: var(--gold); flex-shrink:0; }

/* ---------------------------------------------------------------------- *
 * STATS
 * ---------------------------------------------------------------------- */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.stat{ text-align:center; }
.stat__label{
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing:0.01em;
}

/* ---------------------------------------------------------------------- *
 * WINNING EXPERIENCE
 * ---------------------------------------------------------------------- */
.winners__layout{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.winners-list{ display:flex; flex-direction:column; gap: var(--sp-4); }
.winner-card{
  display:flex; align-items:center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-md);
}
.winner-card__avatar{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size: var(--fs-sm);
  background: linear-gradient(140deg, var(--amethyst), var(--amethyst-deep));
  color: var(--ivory);
  flex-shrink:0;
}
.winner-card__info{ flex:1; min-width:0; }
.winner-card__info h3{ font-size: var(--fs-base); font-family: var(--font-body); font-weight:700; }
.winner-card__info span{ font-size: var(--fs-xs); color: var(--muted-dim); }
.winner-card__amount{
  font-family: var(--font-mono); font-weight:700; font-size: var(--fs-lg);
  color: var(--gold); flex-shrink:0;
}

/* ---------------------------------------------------------------------- *
 * PROMO BANNER
 * ---------------------------------------------------------------------- */
.promo-banner{
  position:relative;
  padding-block: clamp(3rem, 5vw, 5rem);
  background: linear-gradient(120deg, var(--amethyst-deep) 0%, #2A123F 45%, #3B1E10 100%);
  overflow:clip;
  isolation:isolate;
}
.promo-banner__inner{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-6);
  flex-wrap:wrap;
}
.promo-banner__copy h2{ font-size: var(--fs-2xl); margin-top:0.4em; max-width:16ch; }
.promo-banner__copy p{ margin-top:0.6em; font-size: var(--fs-md); max-width:44ch; }

/* ---------------------------------------------------------------------- *
 * TRUST & SECURITY
 * ---------------------------------------------------------------------- */
.trust-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-5);
}
.trust-item h3{ font-size: var(--fs-md); margin-bottom:0.4em; }
.trust-item p{ font-size: var(--fs-sm); max-width:34ch; }

/* ---------------------------------------------------------------------- *
 * TESTIMONIALS
 * ---------------------------------------------------------------------- */
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.testi-card{ padding: var(--sp-6); display:flex; flex-direction:column; }
.testi-stars{ color: var(--gold); letter-spacing:0.15em; margin-bottom: var(--sp-4); }
.testi-card p{ font-size: var(--fs-base); color: var(--ivory); flex:1; margin-bottom: var(--sp-6); font-style:italic; }
.testi-card footer{ display:flex; align-items:center; gap: var(--sp-4); }
.testi-avatar{
  width:44px; height:44px; 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: linear-gradient(140deg, var(--gold), var(--gold-deep));
  color:#1D1206;
  flex-shrink:0;
}
.testi-card cite{ display:block; font-style:normal; font-weight:700; font-size: var(--fs-sm); color: var(--ivory); }
.testi-card footer span{ font-size: var(--fs-xs); color: var(--muted-dim); }

/* ---------------------------------------------------------------------- *
 * FAQ (home layout)
 * ---------------------------------------------------------------------- */
.faq__layout{
  display:grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.faq__layout .section-head{ position:sticky; top: calc(var(--nav-h) + 2rem); }

/* ---------------------------------------------------------------------- *
 * FINAL CTA
 * ---------------------------------------------------------------------- */
.final-cta{
  position:relative;
  padding-block: clamp(5rem, 8vw, 8rem);
  text-align:center;
  background: var(--grad-hero);
  isolation:isolate;
}
.final-cta__inner{ max-width:640px; margin-inline:auto; }
.final-cta h2{ font-size: var(--fs-3xl); margin-top:0.6em; }
.final-cta p{ margin-top: var(--sp-4); font-size: var(--fs-md); margin-bottom: var(--sp-7); }
.final-cta__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap: var(--sp-4); }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1180px){
  .why__grid, .app-promo__grid, .winners__layout, .faq__layout{ grid-template-columns:1fr; }
  .why__intro, .faq__layout .section-head{ position:static; }
  .games-grid, .features-grid, .trust-grid, .testi-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-8); }
  .app-promo__art{ margin-bottom: var(--sp-6); }
}

@media (max-width: 860px){
  .hero__inner{ grid-template-columns:1fr; text-align:left; }
  .hero__art{ order:-1; max-width:340px; margin-inline:auto; margin-bottom: var(--sp-5); }
  .hero__content{ max-width:none; }
  .hero{ padding-top: calc(var(--nav-h) + 1.5rem); }
  .promo-banner__inner{ flex-direction:column; align-items:flex-start; text-align:left; }
}

@media (max-width: 640px){
  .games-grid, .features-grid, .trust-grid, .testi-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
  .why__item{ grid-template-columns: 48px 1fr; gap: var(--sp-4); }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .winner-card{ flex-wrap:wrap; }
}