/* ==========================================================================
   home.css — homepage-only rules (2jnew.pk)
   ========================================================================== */

/* --- HERO ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(212, 175, 55, 0.13), transparent 70%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  overflow: hidden;
}
.hero::before {
  /* faint marble veining behind the hero */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%238A6B1F' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M-20 110 C120 60 190 190 330 140 C450 96 500 210 600 160'/%3E%3Cpath d='M-20 300 C130 250 200 380 340 335 C460 293 510 400 600 350'/%3E%3Cpath d='M-20 480 C110 432 195 560 335 512 C455 468 520 580 600 530'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 560px;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 4.5vw, var(--space-12));
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
    grid-template-areas:
      "top    mockup"
      "bottom mockup";
    column-gap: var(--space-12);
    row-gap: var(--space-8);
    align-items: start;
  }
  .hero__copy--top { grid-area: top; align-self: end; }
  .hero__mockup { grid-area: mockup; align-self: center; }
  .hero__copy--bottom { grid-area: bottom; align-self: start; }
}

.hero__copy { text-align: center; }
@media (min-width: 980px) { .hero__copy { text-align: left; } }
@media (min-width: 980px) { .hero__copy .ornament { justify-content: flex-start; } }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold-2);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.hero__badge i {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-accent-foil);
  font-style: normal;
  font-size: 0.6rem;
  color: var(--color-charcoal);
}

.hero__title { margin-bottom: var(--space-5); letter-spacing: -0.022em; }
.hero__title .em {
  display: block;
  background: linear-gradient(100deg, #8A6B1F 0%, #D4AF37 42%, #B8860B 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent);
}
.hero__sub {
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: var(--line-height-loose);
  color: var(--color-charcoal-muted);
}
@media (min-width: 980px) { .hero__sub { margin-inline: 0; } }

.hero__actions { justify-content: center; margin-bottom: var(--space-6); }
@media (min-width: 980px) { .hero__actions { justify-content: flex-start; } }

.hero__tg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 980px) { .hero__tg-row { justify-content: flex-start; } }
.hero__tg-note {
  max-width: 26ch;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-charcoal-muted);
  text-align: left;
}

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.hero__metric { text-align: center; }
@media (min-width: 980px) { .hero__metric { text-align: left; } }
.hero__metric b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-charcoal);
}
.hero__metric span {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.hero__mockup { position: relative; }

/* --- MARQUEE-FREE HIGHLIGHT RAIL ---------------------------------------- */
.rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }
.rail__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal);
}
.rail__item svg { width: 22px; height: 22px; flex: none; color: var(--color-accent); }

/* --- BONUS SPOTLIGHT ----------------------------------------------------- */
.bonus-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
  text-align: left;
}
@media (min-width: 780px) { .bonus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bonus-grid__item {
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
}
.bonus-grid__item h4 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; }
.bonus-grid__item p { margin: 0; font-size: var(--text-sm); color: var(--color-charcoal-muted); }

/* --- SCREENSHOT SECTION -------------------------------------------------- */
.shots-section {
  position: relative;
  overflow: hidden;
}
.shots-section__deco {
  position: absolute;
  left: 50%; top: 0;
  width: min(900px, 120%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top, rgba(212, 175, 55, 0.14), transparent 68%);
  pointer-events: none;
}

/* --- GAME CATEGORY TEASERS ---------------------------------------------- */
.cat-teasers { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .cat-teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .cat-teasers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(160deg, #FFFFFF, var(--color-bg-tint));
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.cat-teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.cat-teaser__count {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}
.cat-teaser h3 { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 800; }
.cat-teaser p { margin: 0; font-size: var(--text-sm); color: var(--color-charcoal-muted); }
.cat-teaser__link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
}

/* --- SPLIT CONTENT BLOCK ------------------------------------------------ */
.split {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: center;
}
@media (min-width: 940px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .split--reverse .split__media { order: 2; } }
.split__media {
  position: relative;
  padding: clamp(8px, 1vw, 14px);
  background: linear-gradient(150deg, #FFFFFF, var(--color-surface-2));
  border: 1px solid var(--color-border-gold-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
}
.split__media img { border-radius: var(--radius-lg); width: 100%; }
.split__media--phone { max-width: 300px; margin-inline: auto; background: none; border: 0; box-shadow: none; padding: 0; }

/* --- COMPARISON / WHY BLOCK -------------------------------------------- */
.why-list { display: grid; gap: var(--space-6); }
@media (min-width: 800px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-10); } }
.why-item { display: flex; gap: var(--space-4); }
.why-item__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-gold);
  color: var(--color-accent-dim);
}
.why-item__ico svg { width: 21px; height: 21px; }
.why-item h4 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; }
.why-item p { margin: 0; font-size: var(--text-sm); color: var(--color-charcoal-muted); }

/* --- SEO PROSE BLOCK ---------------------------------------------------- */
.prose h2 { margin-top: var(--space-10); font-size: clamp(1.5rem, 3vw, 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-charcoal);
}
.prose p { line-height: var(--line-height-loose); color: var(--color-charcoal-soft); }
.prose ul { margin-bottom: var(--space-5); }
.prose li { font-size: var(--text-base); color: var(--color-charcoal-soft); line-height: var(--line-height-loose); }
.prose--cols { columns: 1; }
@media (min-width: 1000px) { .prose--cols { columns: 2; column-gap: var(--space-12); } }