/* ============ home.css ============ */

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--color-gradient-hero); padding-top: var(--space-16); padding-bottom: var(--space-24); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(245,197,24,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,153,221,0.12), transparent 45%);
}
/* neon grid */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.15;
  background-image: linear-gradient(rgba(245,197,24,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(245,197,24,0.25) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%);
}
#particles { position: absolute; inset: 0; z-index: 0; }
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-12); align-items: center; }
/* Solid, always-visible fallback colours */
.hero-copy h1 { font-size: clamp(2.1rem, 7vw, 2.75rem); margin-block: var(--space-4); color: #f4f4fa; }
.hero-copy h1 .hl { color: var(--color-accent-gold); }
/* Upgrade to gradient text only where the browser genuinely supports clipping */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-copy h1 { background: linear-gradient(180deg,#fff,#cfcfe0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .hero-copy h1 .hl { background: var(--color-gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.hero-copy .lead { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
.hero-stat .num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); color: var(--color-accent-gold); }
.hero-stat .lbl { font-size: var(--text-sm); color: var(--color-text-secondary); }
.hero-art { position: relative; display: none; }
.hero-art img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-glow); }
.hero-art .float-chip { position: absolute; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-card); animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (min-width: 900px) {
  .hero-copy h1 { font-size: clamp(2.75rem, 4vw, 3.75rem); }
  .hero .container { grid-template-columns: 1.1fr 0.9fr; }
  .hero-art { display: block; }
}

/* Features */
.features-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.feature-card { padding: var(--space-8); text-align: left; }
.feature-card .fc-icon { font-size: 2.4rem; line-height: 1; margin-bottom: var(--space-4); filter: drop-shadow(0 0 12px rgba(245,197,24,0.4)); }
.feature-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.feature-card p { font-size: var(--text-sm); }
@media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2,1fr); } }

/* Featured games strip */
.games-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-4); scrollbar-width: thin; }
.games-strip > * { scroll-snap-align: start; }
@media (min-width: 640px) { .games-strip { grid-auto-columns: 42%; } }
@media (min-width: 1024px){ .games-strip { grid-auto-columns: 23%; } }

/* Download teaser */
.download-teaser { position: relative; overflow: hidden; border: 1px solid var(--color-warning-border); border-radius: var(--radius-xl); background: linear-gradient(135deg, #12121a, #1a1230); box-shadow: var(--shadow-glow); padding: var(--space-12); display: grid; gap: var(--space-8); align-items: center; }
.download-teaser h2 { font-size: var(--text-3xl); }
.download-teaser .badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.download-teaser .dt-art img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
@media (min-width: 900px) { .download-teaser { grid-template-columns: 1.4fr 1fr; } }

/* Blog preview */
.blog-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3,1fr); } }
.post-card { overflow: hidden; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-6px); border-color: rgba(245,197,24,0.4); box-shadow: var(--shadow-gold); }
.post-card .pc-media { aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-tertiary); }
.post-card .pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.post-card:hover .pc-media img { transform: scale(1.05); }
.post-card .pc-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-card .pc-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-text-primary); }
.post-card .pc-excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); }
.post-card .pc-meta { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.post-card .read-more { margin-top: auto; color: var(--color-accent-gold); font-family: var(--font-display); font-weight: 600; }

/* Screenshots auto-slider (pure-CSS marquee) */
.screenshots-section { overflow: hidden; }
.ss-marquee { position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ss-track { display: flex; gap: var(--space-6); width: max-content; animation: ss-scroll 70s linear infinite; }
.ss-marquee:hover .ss-track { animation-play-state: paused; }
.ss-phone { flex: 0 0 auto; width: 210px; aspect-ratio: 9 / 19.5; border-radius: 26px;
  overflow: hidden; background: var(--color-bg-tertiary);
  border: 3px solid #23233a; box-shadow: 0 10px 40px rgba(0,0,0,0.55), var(--shadow-glow);
  position: relative; }
.ss-phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 6px; border-radius: 99px; background: #000; z-index: 2; opacity: 0.85; }
.ss-phone img { width: 100%; height: 100%; object-fit: cover; }
@keyframes ss-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ss-track { animation: none; } .ss-marquee { overflow-x: auto; } }
@media (max-width: 560px) { .ss-phone { width: 168px; } }

/* Telegram CTA */
.tg-banner { text-align: center; border-radius: var(--radius-xl); padding: var(--space-16) var(--space-8); background: radial-gradient(circle at 50% 0%, rgba(0,153,221,0.18), transparent 60%), var(--color-bg-secondary); border: 1px solid var(--color-border); }
.tg-banner .tg-logo { width: 64px; height: 64px; margin: 0 auto var(--space-4); color: #0099dd; }
.tg-banner h2 { margin-bottom: var(--space-3); }
.tg-banner p { max-width: 48ch; margin: 0 auto var(--space-6); }