/* ── Hero ────────────────────────────────────────────────────── */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 8rem 1rem 0; justify-content: center; overflow: hidden; }
.hero-inner { max-width: 88rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4rem; }
.hero-content { flex: 1; min-width: 280px; }
.hero-title { font-size: clamp(2.5rem,8vw,5rem); line-height: 1.1; font-weight: 900; margin-bottom: 1.5rem; }
.hero-subtitle { font-size: 1.25rem; color: var(--muted-fg); margin-bottom: 2rem; line-height: 1.7; max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.hero-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; color: var(--muted-fg); font-size: 0.875rem; }
.hero-visual { flex: 1; min-width: 280px; display: flex; align-items: center; justify-content: center; }
.hero-img-wrap { aspect-ratio: 1; border: 2px solid var(--black); overflow: hidden; max-width: 28rem; width: 100%; }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Download dropdown ───────────────────────────────────────── */
.download-wrap { position: relative; display: inline-block; }
.download-dropdown { position: absolute; top: 110%; left: 0; background: white; border: 2px solid black; min-width: 10rem; z-index: 10; }
.download-dropdown.hidden { display: none; }
.download-option { display: block; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; transition: background 0.2s; }
.download-option:hover { background: var(--muted); }

/* ── Interactive demo ────────────────────────────────────────── */
.demo-section { padding: 4rem 1rem; }
.demo-box { background: var(--black); color: var(--white); padding: 3rem; text-align: center; max-width: 36rem; margin: 0 auto; }
.demo-counter { font-size: 5rem; font-weight: 900; color: var(--pink); line-height: 1; margin-bottom: 0.5rem; }
.demo-label { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.demo-sub   { color: rgba(255,255,255,0.7); font-size: 0.875rem; }

/* ── Features ────────────────────────────────────────────────── */
.features-section { padding: 5rem 1rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1.5rem; }
.feature-card { display: flex; flex-direction: column; gap: 0.75rem; }
.feature-icon { font-size: 2.5rem; }
.feature-title { font-size: 1.25rem; font-weight: 700; }
.feature-desc  { color: var(--muted-fg); line-height: 1.7; }

/* ── Skins ───────────────────────────────────────────────────── */
.skins-section { padding: 5rem 1rem; }
.skin-filter-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.skins-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1.5rem; }
.skin-rarity-badge { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(0,0,0,0.7); color: white; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700; }

/* ── Maps ────────────────────────────────────────────────────── */
.maps-section { padding: 5rem 1rem; }
.map-players { color: var(--muted-fg); font-size: 0.875rem; margin-bottom: 1rem; }
.map-tags    { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.map-tag     { background: var(--muted); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; }

/* ── Streamer promo ──────────────────────────────────────────── */
.streamer-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; }
.streamer-promo-visual { flex: 1; min-width: 260px; }
.streamer-promo-img { aspect-ratio: 1; border: 2px solid var(--black); overflow: hidden; }
.streamer-promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.streamer-promo-content { flex: 1; min-width: 260px; }
.streamer-perks { list-style: none; padding: 0; margin: 0 0 2rem; }
.streamer-perks li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-weight: 500; }

/* ── Community ───────────────────────────────────────────────── */
.community-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
@media (max-width: 768px) { .community-grid { grid-template-columns: 1fr 1fr; } }
.community-card { text-align: center; padding: 1.5rem 1rem; }
.community-avatar { width: 4rem; height: 4rem; border-radius: 50%; background: var(--muted); border: 2px solid black; margin: 0 auto 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; }
.community-name  { font-weight: 700; margin-bottom: 0.25rem; }
.community-count { font-size: 0.875rem; color: var(--muted-fg); }

/* ── Testimonials ────────────────────────────────────────────── */
.testimonials-section { padding: 5rem 1rem; overflow: hidden; }
.testimonial-card { min-width: 20rem; padding: 1.5rem; border: 2px solid var(--black); background: white; }
.testimonial-stars  { color: #f59e0b; margin-bottom: 0.75rem; font-size: 1.1rem; }
.testimonial-text   { color: var(--muted-fg); line-height: 1.7; margin-bottom: 1rem; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--muted); border: 2px solid black; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; }

/* ── Plans ───────────────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 2rem; }
.plan-card { position: relative; text-align: center; padding-top: 1.5rem; }
.plan-card.featured { border-color: var(--pink) !important; border-width: 4px !important; }
.plan-coin  { font-size: 3.5rem; margin-bottom: 0.5rem; }
.plan-name  { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.plan-price { font-size: 2rem; font-weight: 900; margin-bottom: 0.5rem; }
.plan-desc  { color: var(--muted-fg); font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.6; }

/* ── Final CTA ───────────────────────────────────────────────── */
.final-cta { padding: 6rem 1rem; text-align: center; }
.final-cta-title { font-size: clamp(2rem,6vw,3.5rem); font-weight: 900; margin-bottom: 1.5rem; }
.final-cta-sub   { color: var(--muted-fg); font-size: 1.25rem; max-width: 40rem; margin: 0 auto 2.5rem; line-height: 1.7; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ── Hero section ────────────────────────────────────────────── */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 8rem 1rem 0; justify-content: center; overflow: hidden; }

/* ── CTA buttons (large) ─────────────────────────────────────── */
.btn-hero { padding: 1rem 2.5rem !important; font-size: 1.1rem !important; }

/* ── Download buttons ────────────────────────────────────────── */
.download-btn { padding: 0.75rem 1.5rem; background: var(--white); border: 2px solid var(--black); display: flex; align-items: center; gap: 0.75rem; }
.download-btn-label { text-align: left; }
.download-btn-sub { font-size: 0.75rem; color: var(--muted-fg); }
.download-btn-name { font-size: 0.875rem; font-weight: 600; }
.download-icon { font-size: 1.5rem; }

/* ── Interactive demo ────────────────────────────────────────── */
.demo-server-icon { width: 6rem; height: 6rem; background: var(--black); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin-bottom: 1rem; }
.demo-fans-grid   { display: grid; grid-template-columns: repeat(4,3rem); gap: 0.75rem; margin-bottom: 1rem; }
.pulse-dot-row    { display: flex; flex-direction: column; gap: 0.5rem; }
.pulse-dot        { width: 0.75rem; height: 0.75rem; background: var(--pink); border-radius: 50%; }

/* ── Feature icon ────────────────────────────────────────────── */
.feature-icon { font-size: 3rem; margin-bottom: 0.5rem; }

/* ── Section label (testimonials/faq) ───────────────────────── */
.section-label { display: inline-block; border: 2px solid black; padding: 0.5rem 1rem; margin-bottom: 1.5rem; }
.section-label-peach  { background: #F8D6B3; }
.section-label-orange { background: rgba(248,214,179,1); }
.section-label-text   { letter-spacing: 0.1em; }

/* ── Testimonials section ────────────────────────────────────── */
.testimonials-section { padding: 7rem 0; }

/* ── Streamer promo visual ───────────────────────────────────── */
.promo-img-wrap { aspect-ratio: 1; border: 2px solid var(--black); overflow: hidden; position: relative; }
.promo-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-badge { position: absolute; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.promo-badge-pink  { background: var(--pink); top: -1rem; right: -1rem; }
.promo-badge-black { background: var(--black); bottom: -1rem; left: -1rem; }

/* ── Community ───────────────────────────────────────────────── */
.community-emoji { font-size: 3.5rem; margin-bottom: 0.75rem; }

/* ── Section padding variants ────────────────────────────────── */
.section-faq { padding: 6rem 1rem; }
.section-cta { padding: 8rem 1rem; text-align: center; }

/* ── JS-generated skin cards ─────────────────────────────────── */
.skin-js      { background: var(--white); border: 2px solid var(--black); overflow: hidden; }
.skin-js-img  { aspect-ratio: 1; overflow: hidden; position: relative; }
.skin-js-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rarity-badge { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: white; }
.rarity-legendary { background: var(--pink); }
.rarity-epic      { background: #a855f7; }
.rarity-rare      { background: #3b82f6; }
.skin-js-body  { padding: 1.5rem; }
.skin-js-name  { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.skin-js-type  { color: var(--muted-fg); margin-bottom: 1rem; }

/* ── JS-generated testimonial cards ─────────────────────────── */
.testimonial-js { flex-shrink: 0; width: 22rem; background: #FDFD96; border: 3px solid black; padding: 1.5rem; transition: all 0.3s; }
.testimonial-stars-js { margin-bottom: 1rem; font-size: 1.1rem; }
.testimonial-text-js  { color: black; margin-bottom: 1.5rem; line-height: 1.6; min-height: 5rem; }
.testimonial-name-js  { font-weight: 700; color: black; }
.star-on  { color: #ca8a04; }
.star-off { color: #d1d5db; }

/* ── JS-generated FAQ items ──────────────────────────────────── */
.faq-js      { background: var(--cream); border: 3px solid black; overflow: hidden; }
.faq-js-btn  { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; text-align: left; background: white; border: none; cursor: pointer; }
.faq-js-q    { font-weight: 700; }
.faq-js-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #FDFD96; border: 2px solid black; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 1rem; font-size: 1.25rem; transition: transform 0.3s; }
.faq-js-ans  { max-height: 0; overflow: hidden; transition: max-height 0.3s; background: var(--white); }
.faq-js-ans-content { padding: 0 1.5rem 1.5rem; color: var(--muted-fg); line-height: 1.7; }