/* ═══════════════════════════════════════════════════════════
   Sportzfy WordPress Theme — Main CSS
   Converted from React/Tailwind to vanilla CSS
═══════════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.sportzfy-body {
  background: #0F172A;
  color: #F8FAFC;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --navy:   #0F172A;
  --navy-card: #1E293B;
  --navy-light: #293548;
  --blue:   #2563EB;
  --green:  #10B981;
  --orange: #F97316;
  --gray:   #94A3B8;
  --border: rgba(255,255,255,0.08);
  --radius: 0.75rem;
}

/* ── Utility Classes ───────────────────────────────────────── */
.font-mono { font-family: 'Roboto Mono', monospace; }
.text-white { color: #fff; }
.text-green  { color: var(--green); }
.text-blue   { color: var(--blue); }
.text-orange { color: var(--orange); }
.text-yellow { color: #FACC15; }
.text-purple { color: #A78BFA; }
.text-pink   { color: #F472B6; }
.text-red    { color: #F87171; }
.text-muted  { color: var(--gray); font-size: 0.75rem; }

.text-gradient-blue {
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-green {
  background: linear-gradient(135deg, #10B981, #34D399);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-orange {
  background: linear-gradient(135deg, #F97316, #FB923C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.glass {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius);
}
.glass-hover:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.15);
}

.glow-green  { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.2); }
.glow-blue   { box-shadow: 0 0 20px rgba(37, 99, 235, 0.4), 0 0 40px rgba(37, 99, 235, 0.15); }
.glow-orange { box-shadow: 0 0 20px rgba(249, 115, 22, 0.4), 0 0 40px rgba(249, 115, 22, 0.15); }

.py-section { padding: 5rem 0; }
.overflow-hidden { overflow: hidden; }
.section-gradient { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(37,99,235,0.08) 0%, transparent 60%); }

/* Glow orbs */
.glow-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(100px); }
.glow-orb--blue-tr    { top: 25%; right: 25%; width: 24rem; height: 24rem; background: rgba(37,99,235,0.10); }
.glow-orb--green-bl   { bottom: 25%; left: 16%; width: 16rem; height: 16rem; background: rgba(16,185,129,0.08); }
.glow-orb--orange-ml  { left: 0; top: 50%; transform: translateY(-50%); width: 20rem; height: 20rem; background: rgba(249,115,22,0.05); }
.glow-orb--blue-center{ top: 50%; left: 50%; transform: translate(-50%,-50%); width: 37rem; height: 25rem; background: rgba(37,99,235,0.05); }
.glow-orb--green-top  { top: 0; left: 50%; transform: translateX(-50%); width: 50rem; height: 12rem; background: rgba(16,185,129,0.06); }
.glow-orb--orange-tr  { right: 0; top: 50%; transform: translateY(-50%); width: 20rem; height: 20rem; background: rgba(249,115,22,0.05); }
.glow-orb--blue-top   { left: 50%; top: 0; transform: translateX(-50%); width: 31rem; height: 10rem; background: rgba(37,99,235,0.05); }
.glow-orb--blue-fade  { inset: 0; position: absolute; background: linear-gradient(to bottom, transparent, rgba(37,99,235,0.05), transparent); filter: none; border-radius: 0; }
.glow-orb--green-center{ top: 50%; left: 50%; transform: translate(-50%,-50%); width: 43rem; height: 25rem; background: rgba(16,185,129,0.06); }
.glow-orb--green-top-sm{ top: 0; left: 50%; transform: translateX(-50%); width: 20rem; height: 10rem; background: rgba(16,185,129,0.10); filter: blur(80px); }

/* Animations */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.6} 50%{transform:scale(1.12);opacity:.2} 100%{transform:scale(1.2);opacity:0} }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes count-bar { from{width:0} }
@keyframes fade-in { from{opacity:0;transform:translateY(1.5rem)} to{opacity:1;transform:none} }

.floating { animation: float 3.5s cubic-bezier(.45,0,.55,1) infinite; }
.shimmer-overlay {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg,transparent 25%,rgba(255,255,255,.08) 50%,transparent 75%);
  background-size: 200% auto;
  animation: shimmer 2.5s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none; opacity: .3;
}

/* Reveal on scroll (JS adds .is-visible) */
.reveal-up  { opacity: 0; transform: translateY(2rem); transition: opacity .7s ease, transform .7s ease; }
.reveal-right{ opacity: 0; transform: translateX(2rem); transition: opacity .7s ease, transform .7s ease; }
.reveal-up.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; }

/* ── Announcement Banner ───────────────────────────────────── */
.announcement-banner {
  background: linear-gradient(to right, rgba(37,99,235,.2), rgba(16,185,129,.15), rgba(249,115,22,.15));
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.announcement-inner {
  max-width: 88rem; margin: 0 auto; padding: .625rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.announcement-content {
  display: flex; align-items: center; gap: .5rem; flex: 1; justify-content: center;
  font-size: .875rem; color: rgba(255,255,255,.8);
}
.announcement-icon { width: .875rem; height: .875rem; color: var(--orange); flex-shrink: 0; }
.announcement-link { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.announcement-link:hover { color: #34D399; }
.announcement-close { color: rgba(255,255,255,.4); display: flex; padding: .25rem; }
.announcement-close:hover { color: rgba(255,255,255,.8); }
.announcement-close svg { width: .875rem; height: .875rem; }
.announcement-banner.hidden { display: none; }

/* ── Navbar ───────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .5s, border-color .5s, box-shadow .5s;
}
.site-header.scrolled {
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.nav-container { max-width: 88rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .nav-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .nav-container { padding: 0 2rem; } }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.nav-logo { display: flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.nav-logo-img-wrap {
  width: 2.25rem; height: 2.25rem; border-radius: .75rem; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(37,99,235,.3);
  transition: box-shadow .3s;
}
.nav-logo:hover .nav-logo-img-wrap { box-shadow: 0 0 0 2px rgba(37,99,235,.7); }
.nav-logo-img { width: 100%; height: 100%; object-fit: cover; }

.nav-links { display: none; align-items: center; gap: .25rem; flex: 1; justify-content: flex-end; margin-right: .75rem; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-link {
  padding: .5rem .875rem; font-size: .875rem; color: var(--gray); border-radius: .5rem;
  transition: color .2s, background .2s; font-weight: 500; white-space: nowrap;
  background: none;
}
.nav-link:hover, .nav-dropdown-btn:hover { color: #fff; background: rgba(255,255,255,.05); }

/* Dropdown */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown-btn { display: flex; align-items: center; gap: .375rem; }
.nav-chevron { width: .875rem; height: .875rem; transition: transform .28s ease; }
.nav-dropdown-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; right: 0; top: 100%; margin-top: .5rem; width: 14rem;
  border-radius: 1rem;
  background: rgba(30,41,59,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.6); overflow: hidden;
}
.nav-dropdown-item {
  display: flex; align-items: center; padding: .625rem 1rem;
  font-size: .875rem; color: var(--gray); transition: color .15s, background .15s;
}
.nav-dropdown-item:hover { color: #fff; background: rgba(255,255,255,.06); }

.nav-cta {
  display: none; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: .75rem;
  background: var(--green); color: #fff; font-size: .875rem; font-weight: 600;
  transition: background .3s, transform .3s; flex-shrink: 0;
}
@media (min-width: 768px) { .nav-cta { display: flex; } }
.nav-cta:hover { background: #34D399; transform: scale(1.05); }
.nav-cta svg { width: 1rem; height: 1rem; }

.mobile-menu-btn { display: flex; align-items: center; padding: .5rem; color: var(--gray); border-radius: .5rem; transition: color .2s, background .2s; }
.mobile-menu-btn:hover { color: #fff; background: rgba(255,255,255,.05); }
.mobile-menu-btn svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }

.mobile-menu {
  position: fixed; top: 4rem; left: 0; right: 0; z-index: 40;
  background: rgba(15,23,42,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-menu-inner {
  padding: 1rem; display: flex; flex-direction: column; gap: .25rem; max-height: 80vh; overflow-y: auto;
}
.mobile-nav-link {
  padding: .75rem 1rem; color: var(--gray); border-radius: .75rem; font-size: .875rem;
  font-weight: 500; transition: color .2s, background .2s;
}
.mobile-nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.mobile-nav-link--sub { font-size: .875rem; font-weight: 400; }
.mobile-divider { height: 1px; background: rgba(255,255,255,.06); margin: .25rem 0; }
.mobile-section-label { padding: 0 1rem; font-size: .625rem; font-weight: 600; color: rgba(148,163,184,.5); text-transform: uppercase; letter-spacing: .1em; }
.mobile-download-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1rem; border-radius: .75rem; background: var(--green);
  color: #fff; font-weight: 600; font-size: .875rem; margin-top: .25rem;
}
.mobile-download-btn svg { width: 1rem; height: 1rem; }

/* ── Section Commons ──────────────────────────────────────── */
.section-container { max-width: 88rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .section-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .section-container { padding: 0 2rem; } }
.section-container--narrow { max-width: 48rem; }
.section-container--medium { max-width: 64rem; }

.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-label {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem;
  font-family: 'Roboto Mono', monospace; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem;
}
.label--blue   { background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.20); color: var(--blue); }
.label--green  { background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.20); color: var(--green); }
.label--orange { background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.20); color: var(--orange); }
.section-label .icon { width: .75rem; height: .75rem; }

.section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: .75rem; }
.section-desc { color: var(--gray); max-width: 40rem; margin: 0 auto; line-height: 1.7; }

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.version-badge {
  display: inline-block; padding: .125rem .625rem; border-radius: .375rem;
  background: rgba(37,99,235,.20); border: 1px solid rgba(37,99,235,.30);
  color: #fff; font-size: .875rem; font-weight: 700;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero-section {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden; padding-top: 4rem;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(37,99,235,.18) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 10% 80%, rgba(16,185,129,.08) 0%, transparent 60%),
              #0F172A;
}
.hero-grid {
  position: absolute; inset: 0; opacity: .04;
  background-image: linear-gradient(rgba(37,99,235,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.8) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.hero-inner {
  display: grid; gap: 3rem; align-items: center;
  padding: 5rem 1rem; width: 100%; position: relative; z-index: 10;
}
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 5rem 2rem; } }

.hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem;
  padding: .375rem .75rem; border-radius: 9999px;
  background: rgba(37,99,235,.15); border: 1px solid rgba(37,99,235,.30);
  color: var(--blue); font-size: .75rem; font-family: 'Roboto Mono', monospace;
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.hero-badge .icon-zap { width: .75rem; height: .75rem; }
.hero-h1 {
  font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.5rem;
}
.hero-sub { color: var(--gray); font-size: 1.125rem; line-height: 1.7; margin-bottom: 2rem; max-width: 32rem; }

.hero-cta-wrap { margin-bottom: 2rem; width: 100%; }
.hero-cta-note { display: flex; align-items: center; gap: .375rem; margin-top: .75rem; font-size: .75rem; color: var(--gray); }
.hero-cta-note .icon-shield { width: .875rem; height: .875rem; color: var(--green); }

.hero-badges { display: flex; flex-wrap: wrap; gap: 1rem; }
.trust-badge {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 500;
  background: rgba(30,41,59,.7); backdrop-filter: blur(16px); border: 1px solid rgba(37,99,235,.2);
  color: rgba(255,255,255,.8);
}
.trust-badge .icon { width: 1rem; height: 1rem; }

.hero-mockup {
  position: relative; display: flex; justify-content: center;
}
@media (min-width: 1024px) { .hero-mockup { justify-content: flex-end; } }
.hero-mockup-glow {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero-mockup-glow::after {
  content: ''; width: 18rem; height: 18rem; border-radius: 50%;
  background: rgba(37,99,235,.2); filter: blur(80px);
}
.hero-phone { position: relative; }
.hero-phone-img {
  position: relative; z-index: 10; width: clamp(16rem, 40vw, 24rem);
  object-fit: contain; filter: drop-shadow(0 20px 60px rgba(37,99,235,.3));
}
.hero-float-badge {
  position: absolute; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 5rem; height: 5rem; border-radius: 1rem;
  background: rgba(30,41,59,.7); backdrop-filter: blur(16px);
  border: 1px solid rgba(16,185,129,.4);
  box-shadow: 0 0 20px rgba(16,185,129,.5), 0 0 40px rgba(16,185,129,.2);
}
.hero-float-badge--tl { top: -1rem; left: -1rem; }
.hero-float-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; object-fit: cover; }
.hero-float-version { font-size: .625rem; font-weight: 700; color: var(--green); margin-top: .25rem; }
.hero-float-live {
  position: absolute; top: 33%; right: -1.5rem; z-index: 20;
  display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
  border-radius: .75rem; background: rgba(30,41,59,.7); backdrop-filter: blur(16px);
  border: 1px solid rgba(239,68,68,.3); font-size: .75rem; font-weight: 600;
}
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #EF4444; animation: pulse-dot 1.5s ease-in-out infinite; }
.hero-float-count {
  position: absolute; bottom: -1rem; right: -1rem; z-index: 20;
  padding: .5rem .75rem; border-radius: .75rem;
  background: rgba(30,41,59,.7); backdrop-filter: blur(16px);
  border: 1px solid rgba(249,115,22,.3); font-size: .75rem; font-weight: 700; color: var(--orange);
}
.hero-scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scroll-label { font-size: .75rem; color: rgba(148,163,184,.6); text-transform: uppercase; letter-spacing: .1em; }
.scroll-mouse {
  width: 1.25rem; height: 2rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15); display: flex; align-items: flex-start;
  justify-content: center; padding-top: .375rem;
}
.scroll-wheel {
  width: .25rem; height: .375rem; border-radius: 9999px; background: var(--blue);
  animation: float 1.5s ease-in-out infinite;
}

/* ── Download Buttons ─────────────────────────────────────── */
.download-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .625rem; font-weight: 700; border-radius: .75rem; border: none;
  cursor: pointer; transition: background .3s, transform .3s, box-shadow .3s;
  width: 100%; text-align: center; overflow: hidden;
}
.download-btn svg { flex-shrink: 0; }
.download-btn--sm  { padding: .625rem 1rem; font-size: .875rem; }
.download-btn--md  { padding: .75rem 1.25rem; font-size: .875rem; }
.download-btn--lg  { padding: 1rem 1.75rem; font-size: 1rem; }
.download-btn--lg svg { width: 1.25rem; height: 1.25rem; }
.download-btn--md svg, .download-btn--sm svg { width: 1rem; height: 1rem; }

.download-btn--primary { background: var(--green); color: #fff; box-shadow: 0 0 20px rgba(16,185,129,.5), 0 0 40px rgba(16,185,129,.2); }
.download-btn--primary:hover { background: #34D399; transform: scale(1.04); }
.download-btn--blue { background: var(--blue); color: #fff; box-shadow: 0 0 20px rgba(37,99,235,.4); }
.download-btn--blue:hover { background: #3B82F6; transform: scale(1.04); }
.download-btn--orange { background: var(--orange); color: #fff; box-shadow: 0 0 20px rgba(249,115,22,.4); }
.download-btn--orange:hover { background: #FB923C; transform: scale(1.04); }
@media (min-width: 640px) { .download-btn { width: auto; } }

/* ── APK Info ─────────────────────────────────────────────── */
.apk-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .apk-grid { grid-template-columns: 1fr 1fr; } }
.apk-stats-col { display: flex; flex-direction: column; gap: 1rem; }
.stat-card {
  padding: 1.5rem; border-radius: 1rem; display: flex; flex-direction: column; gap: .25rem;
}
.stat-card--full { grid-column: 1 / -1; }
.stat-label { font-size: .75rem; font-weight: 500; color: var(--gray); text-transform: uppercase; letter-spacing: .1em; }
.stat-number { font-size: 1.875rem; font-weight: 700; }
.stat-number-row { display: flex; align-items: flex-end; gap: .5rem; }
.stat-number-suffix { font-size: .875rem; font-weight: 500; color: var(--gray); margin-bottom: .25rem; }
.stat-bar-track { margin-top: .5rem; height: .375rem; border-radius: 9999px; background: rgba(255,255,255,.05); overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(to right, var(--green), #34D399); width: 0; transition: width 1.4s ease; }
.apk-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.star-row { font-size: .875rem; }
.star-row .star-half { opacity: .5; }
.stat-sub { font-size: .75rem; color: var(--gray); margin-top: .25rem; }

.app-info-table { border-radius: 1rem; overflow: hidden; }
.app-info-table-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.app-info-table-header h3 { font-size: .875rem; font-weight: 600; color: #fff; }
.app-info-rows { }
.info-row {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.04); transition: background .2s;
}
.info-row:hover { background: rgba(255,255,255,.03); }
.info-row:last-child { border-bottom: none; }
.info-row-icon { padding: .375rem; border-radius: .5rem; background: rgba(255,255,255,.05); flex-shrink: 0; }
.info-row-icon svg { width: .875rem; height: .875rem; color: var(--gray); }
.info-row-label { color: var(--gray); font-size: .875rem; width: 7rem; flex-shrink: 0; }
.info-row-value { font-size: .875rem; font-weight: 500; }

/* ── What's New ───────────────────────────────────────────── */
.whats-new-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .whats-new-grid { grid-template-columns: 1fr 1fr; } }
.whats-new-badges { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.update-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.update-stat { padding: .75rem 1rem; border-radius: .75rem; text-align: center; }
.update-stat-num { font-size: 1.125rem; }
.update-stat-sub { font-size: .75rem; color: var(--gray); margin-top: .125rem; }
.update-list { display: flex; flex-direction: column; gap: .75rem; }
.update-item {
  display: flex; align-items: flex-start; gap: .75rem; padding: .875rem;
  border-radius: .75rem; border: 1px solid transparent; transition: all .3s;
}
.update-item:hover { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.update-item--highlight { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.20); }
.update-item--highlight:hover { border-color: rgba(16,185,129,.40); }
.update-item .icon { flex-shrink: 0; margin-top: .125rem; }
.update-item p { font-size: .875rem; line-height: 1.6; color: var(--gray); }
.update-item--highlight p { color: #fff; font-weight: 500; }

/* ── Categories ───────────────────────────────────────────── */
.categories-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .categories-grid { grid-template-columns: repeat(3,1fr); } }
.category-card { padding: 1.75rem; border-radius: 1rem; position: relative; overflow: hidden; }
.category-card--green { border: 1px solid rgba(16,185,129,.25); }
.category-card--orange{ border: 1px solid rgba(249,115,22,.25); }
.category-card--blue  { border: 1px solid rgba(37,99,235,.25); }
.category-card--green::before { content:''; position:absolute; top:0; left:0; right:0; height:8rem; background: linear-gradient(to bottom, rgba(16,185,129,.20), transparent); }
.category-card--orange::before{ content:''; position:absolute; top:0; left:0; right:0; height:8rem; background: linear-gradient(to bottom, rgba(249,115,22,.20), transparent); }
.category-card--blue::before  { content:''; position:absolute; top:0; left:0; right:0; height:8rem; background: linear-gradient(to bottom, rgba(37,99,235,.20), transparent); }
.category-icon-wrap { display: inline-flex; padding: .875rem; border-radius: .75rem; margin-bottom: 1.25rem; position: relative; transition: transform .3s; }
.category-card:hover .category-icon-wrap { transform: scale(1.1); }
.icon-bg--green  { background: rgba(16,185,129,.15); }
.icon-bg--orange { background: rgba(249,115,22,.15); }
.icon-bg--blue   { background: rgba(37,99,235,.15); }
.icon-bg--purple { background: rgba(167,139,250,.10); }
.icon-bg--yellow { background: rgba(250,204,21,.10); }
.icon-bg--pink   { background: rgba(244,114,182,.10); }
.icon-bg--red    { background: rgba(248,113,113,.10); }
.category-icon-wrap .icon { width: 1.5rem; height: 1.5rem; }
.category-title { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: .75rem; position: relative; }
.category-desc { font-size: .875rem; color: var(--gray); line-height: 1.6; position: relative; }

/* ── Features Grid ────────────────────────────────────────── */
.features-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .features-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-card {
  padding: 1.5rem; border-radius: 1rem; border: 1px solid transparent;
  transition: transform .3s, border-color .3s; cursor: default;
}
.feature-card:hover { transform: translateY(-5px); }
.feature-icon-wrap { display: inline-flex; padding: .75rem; border-radius: .75rem; margin-bottom: 1rem; transition: transform .3s; }
.feature-card:hover .feature-icon-wrap { transform: scale(1.1); }
.feature-icon-dot { font-size: 1.25rem; }
.feature-title { font-size: .9375rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.feature-desc { font-size: .8125rem; color: var(--gray); line-height: 1.6; }

/* ── Download Section ─────────────────────────────────────── */
.download-grid { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .download-grid { grid-template-columns: repeat(3,1fr); } }
.download-card {
  padding: 1.75rem; border-radius: 1rem; display: flex; flex-direction: column; gap: 1.25rem;
  position: relative; overflow: hidden;
}
.border-green  { border-color: rgba(16,185,129,.30); }
.border-orange { border-color: rgba(249,115,22,.20); }
.border-blue   { border-color: rgba(37,99,235,.20); }
.download-card--featured { box-shadow: 0 0 0 1px rgba(16,185,129,.30); }
.download-card-header { display: flex; align-items: flex-start; justify-content: space-between; }
.download-card-title-row { display: flex; align-items: center; gap: .75rem; }
.download-card-icon { padding: .75rem; border-radius: .75rem; }
.download-card-icon .icon { width: 1.5rem; height: 1.5rem; }
.download-card h3 { font-size: .9375rem; font-weight: 700; color: #fff; }
.badge { display: inline-block; padding: .25rem .625rem; border-radius: 9999px; border: 1px solid; font-size: .75rem; font-weight: 600; }
.badge--green  { background: rgba(16,185,129,.15); color: var(--green); border-color: rgba(16,185,129,.25); }
.badge--orange { background: rgba(249,115,22,.15); color: var(--orange); border-color: rgba(249,115,22,.25); }
.badge--blue   { background: rgba(37,99,235,.15); color: var(--blue); border-color: rgba(37,99,235,.25); }
.download-meta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.download-meta-item { background: rgba(255,255,255,.03); border-radius: .75rem; padding: .75rem; text-align: center; }
.meta-label { font-size: .625rem; color: var(--gray); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .25rem; }
.meta-value { font-size: .75rem; font-weight: 600; color: #fff; line-height: 1.3; }
.virus-badge { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .5rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); font-size: .75rem; color: var(--gray); }
.virus-badge .icon { width: .875rem; height: .875rem; }
.mirror-link { text-align: center; font-size: .875rem; color: var(--gray); }
.mirror-link-a { color: var(--blue); display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; transition: color .2s; }
.mirror-link-a:hover { color: #93C5FD; }
.mirror-link-a .icon { width: .75rem; height: .75rem; }

/* ── Compatibility ────────────────────────────────────────── */
.compat-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .compat-grid { grid-template-columns: repeat(4,1fr); } }
.compat-card { padding: 1rem; border-radius: .75rem; }
.compat-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .375rem; flex-wrap: wrap; }
.compat-name { font-size: .875rem; font-weight: 600; color: #fff; }
.compat-status { font-size: .625rem; font-weight: 600; padding: .125rem .5rem; border-radius: 9999px; }
.compat-status--supported   { background: rgba(16,185,129,.15); color: var(--green); }
.compat-status--partial      { background: rgba(250,204,21,.15); color: #FACC15; }
.compat-status--unsupported  { background: rgba(248,113,113,.15); color: #F87171; }
.compat-req { font-size: .75rem; color: var(--blue); margin-bottom: .25rem; }
.compat-note { font-size: .75rem; color: var(--gray); }

/* ── Install Help ─────────────────────────────────────────── */
.install-help-grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .install-help-grid { grid-template-columns: 1fr 1fr; } }
.install-quick-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-top: 2rem; }
.install-stat { padding: .875rem; border-radius: .75rem; text-align: center; }
.install-stat-num { font-size: 1.25rem; font-weight: 700; }
.install-stat-label { font-size: .6875rem; color: var(--gray); margin-top: .125rem; line-height: 1.3; }
.install-quick-tip {
  margin-top: 1.5rem; display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem; border-radius: .75rem; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.20);
}
.install-quick-tip .icon { flex-shrink: 0; margin-top: .125rem; }
.tip-title { font-size: .875rem; font-weight: 600; color: #fff; margin-bottom: .25rem; }
.tip-body { font-size: .75rem; color: var(--gray); line-height: 1.6; }

.install-accordion { display: flex; flex-direction: column; gap: .75rem; }
.accordion-item { border-radius: 1rem; border: 1px solid rgba(255,255,255,.08); background: rgba(30,41,59,.7); backdrop-filter: blur(16px); transition: border-color .3s; }
.accordion-item.open { }
.accordion-btn {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; text-align: left;
}
.accordion-icon { padding: .625rem; border-radius: .75rem; flex-shrink: 0; }
.accordion-icon .icon { width: 1rem; height: 1rem; }
.accordion-title { flex: 1; color: #fff; font-weight: 600; font-size: .875rem; line-height: 1.4; }
.accordion-chevron { width: 1rem; height: 1rem; color: var(--gray); flex-shrink: 0; transition: transform .3s ease; }
.accordion-btn[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
.accordion-body { padding: 0 1.25rem 1.25rem; }
.accordion-divider { height: 1px; background: rgba(255,255,255,.06); margin-bottom: 1rem; }
.accordion-steps { display: flex; flex-direction: column; gap: .625rem; list-style: none; margin-bottom: 1rem; }
.accordion-steps li { display: flex; align-items: flex-start; gap: .75rem; }
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: rgba(37,99,235,.20); color: var(--blue); font-size: .625rem; font-weight: 700; flex-shrink: 0; margin-top: .125rem;
}
.accordion-steps li span:last-child { font-size: .875rem; color: var(--gray); line-height: 1.6; }
.accordion-tip {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem; border-radius: .75rem;
}
.accordion-tip .icon { width: .875rem; height: .875rem; flex-shrink: 0; margin-top: .125rem; }
.accordion-tip p { font-size: .75rem; color: rgba(255,255,255,.7); line-height: 1.6; }
.accordion-tip p strong { color: #fff; }
/* tip backgrounds */
.bg-orange-tip { background: rgba(249,115,22,.10); }
.bg-red-tip    { background: rgba(248,113,113,.10); }
.bg-yellow-tip { background: rgba(250,204,21,.10); }
.bg-blue-tip   { background: rgba(37,99,235,.10); }
.border-orange-border { border: 1px solid rgba(249,115,22,.25); }
.border-red-border    { border: 1px solid rgba(248,113,113,.25); }
.border-yellow-border { border: 1px solid rgba(250,204,21,.25); }
.border-blue-border   { border: 1px solid rgba(37,99,235,.25); }
/* text for accordion icon */
.text-red { color: #F87171; }

.mirror-card { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-radius: 1rem; border: 1px solid rgba(16,185,129,.20); margin-top: .5rem; }
.mirror-title { font-size: .875rem; font-weight: 600; color: #fff; }
.mirror-sub { font-size: .75rem; color: var(--gray); margin-top: .125rem; }
.mirror-btn {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  padding: .625rem 1rem; border-radius: .75rem; border: 1px solid rgba(16,185,129,.30);
  background: rgba(16,185,129,.15); color: var(--green); font-size: .875rem; font-weight: 600;
  transition: background .2s;
}
.mirror-btn:hover { background: rgba(16,185,129,.25); }
.mirror-btn svg { width: .875rem; height: .875rem; }

/* ── Reviews ──────────────────────────────────────────────── */
.reviews-rating-row { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.stars-lg { color: #FACC15; font-size: 1.25rem; }
.rating-num { font-size: 1.25rem; font-weight: 700; }
.rating-out { font-size: .875rem; color: var(--gray); }
.reviews-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .reviews-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3,1fr); } }
.review-card { padding: 1.5rem; border-radius: 1rem; border: 1px solid transparent; display: flex; flex-direction: column; gap: 1rem; transition: transform .3s; }
.review-card:hover { transform: translateY(-4px); }
.review-header { display: flex; align-items: center; gap: .75rem; }
.review-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.bg-blue   { background: var(--blue); }
.bg-orange { background: var(--orange); }
.bg-green  { background: var(--green); }
.bg-purple { background: #8B5CF6; }
.bg-pink   { background: #EC4899; }
.bg-yellow { background: #EAB308; }
.review-meta { flex: 1; min-width: 0; }
.review-meta-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.review-name { font-size: .875rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-date { font-size: .75rem; color: var(--gray); flex-shrink: 0; }
.review-country { font-size: .75rem; color: var(--gray); }
.review-stars { }
.star-on  { color: #FACC15; }
.star-off { color: rgba(255,255,255,.15); }
.review-text { font-size: .875rem; color: var(--gray); line-height: 1.7; }
.review-card:hover .review-text { color: rgba(255,255,255,.8); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { background: rgba(30,41,59,.7); backdrop-filter: blur(16px); border: 1px solid transparent; border-radius: 1rem; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item.open { border-color: rgba(37,99,235,.40); box-shadow: 0 0 20px rgba(37,99,235,.15); }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; text-align: left; }
.faq-q { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.8); transition: color .2s; }
.faq-btn[aria-expanded="true"] .faq-q { color: #fff; }
.faq-chevron-wrap { flex-shrink: 0; padding: .375rem; border-radius: .5rem; background: rgba(255,255,255,.05); transition: background .3s, color .3s; }
.faq-btn[aria-expanded="true"] .faq-chevron-wrap { background: rgba(37,99,235,.20); }
.faq-chevron { width: 1rem; height: 1rem; color: var(--gray); transition: transform .35s ease, color .3s; }
.faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); color: var(--blue); }
.faq-body { padding: 0 1.5rem 1.25rem; }
.faq-divider { height: 1px; background: rgba(255,255,255,.05); margin-bottom: 1rem; }
.faq-a { font-size: .875rem; color: var(--gray); line-height: 1.7; }

/* ── CTA / Install Steps ──────────────────────────────────── */
.install-steps-header { text-align: center; margin-bottom: 2.5rem; }
.install-steps-grid { display: grid; gap: 1rem; margin-bottom: 5rem; }
@media (min-width: 640px) { .install-steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .install-steps-grid { grid-template-columns: repeat(4,1fr); } }
.install-step {
  padding: 1.25rem; border-radius: 1rem; position: relative; overflow: hidden;
  border: 1px solid transparent; transition: border-color .3s;
}
.install-step:hover { border-color: rgba(37,99,235,.30); }
.install-step-bg-num {
  position: absolute; top: -.75rem; right: -.5rem;
  font-size: 3.75rem; font-family: 'Roboto Mono', monospace; font-weight: 900;
  color: rgba(255,255,255,.03); user-select: none; pointer-events: none;
}
.install-step-num { display: inline-block; font-family: 'Roboto Mono', monospace; font-size: .75rem; font-weight: 700; background: rgba(37,99,235,.10); padding: .125rem .5rem; border-radius: .25rem; margin-bottom: .75rem; }
.install-step-title { font-size: .875rem; font-weight: 700; color: #fff; margin-bottom: .375rem; }
.install-step-desc { font-size: .75rem; color: var(--gray); line-height: 1.6; }

.final-cta-wrap { position: relative; border-radius: 1.5rem; overflow: hidden; }
.final-cta-border-gradient {
  position: absolute; inset: 0; border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(16,185,129,.30), rgba(37,99,235,.20), rgba(249,115,22,.20));
  padding: 1px;
}
.final-cta-border-gradient::after {
  content: ''; position: absolute; inset: 1px; border-radius: 1.4rem; background: var(--navy);
}
.final-cta-inner { position: relative; z-index: 10; padding: 4rem 2rem; text-align: center; }
.final-cta-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.final-cta-logo-img { width: 5rem; height: 5rem; border-radius: 1rem; object-fit: cover; box-shadow: 0 0 20px rgba(16,185,129,.5), 0 0 40px rgba(16,185,129,.2); }
.final-cta-h2 { font-size: clamp(2rem, 5vw, 3.125rem); font-weight: 800; color: #fff; margin-bottom: 1rem; line-height: 1.2; }
.final-cta-desc { font-size: 1.125rem; color: var(--gray); max-width: 40rem; margin: 0 auto 2.5rem; line-height: 1.7; }
.final-cta-btns { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
@media (min-width: 640px) { .final-cta-btns { flex-direction: row; } }
.trust-signals { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; }
.trust-sig-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--gray); }
.trust-sig-item .icon { width: 1rem; height: 1rem; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  position: relative; border-top: 1px solid rgba(255,255,255,.05);
  padding: 4rem 1rem 2rem; overflow: hidden; background: var(--navy);
}
.footer-glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 37.5rem; height: 6rem; background: rgba(37,99,235,.04); filter: blur(60px);
  pointer-events: none;
}
.footer-container { max-width: 88rem; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr repeat(4,1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .footer-brand { grid-column: auto; } }
.footer-logo { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.footer-logo-img-wrap { width: 2.25rem; height: 2.25rem; border-radius: .75rem; overflow: hidden; box-shadow: 0 0 0 2px rgba(37,99,235,.30); }
.footer-logo-img { width: 100%; height: 100%; object-fit: cover; }
.footer-logo-text { font-size: 1.125rem; font-weight: 700; color: #fff; }
.footer-tagline { font-size: .875rem; color: var(--gray); line-height: 1.6; margin-bottom: 1.25rem; }
.footer-site-link {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem;
  font-family: 'Roboto Mono', monospace; font-weight: 600; color: var(--green);
  background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.25);
  padding: .5rem .75rem; border-radius: .5rem; transition: background .2s;
}
.footer-site-link:hover { background: rgba(16,185,129,.20); }
.footer-site-link svg { width: .75rem; height: .75rem; }
.footer-links-heading { font-size: .875rem; font-weight: 600; color: #fff; margin-bottom: 1rem; letter-spacing: .025em; }
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.footer-link { font-size: .875rem; color: var(--gray); transition: color .2s, transform .2s; display: inline-block; }
.footer-link:hover { color: #fff; transform: translateX(.125rem); }
.footer-version-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.05);
}
.footer-version-left { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.footer-version-badge {
  font-family: 'Roboto Mono', monospace; font-size: .75rem; font-weight: 700; color: #fff;
  background: rgba(37,99,235,.15); border: 1px solid rgba(37,99,235,.25);
  padding: .25rem .625rem; border-radius: .375rem;
}
.footer-version-meta { font-size: .75rem; color: var(--gray); }
.footer-version-sep { color: rgba(148,163,184,.30); font-size: .75rem; display: none; }
@media (min-width: 640px) { .footer-version-sep { display: inline; } }
.footer-fifa-badge { display: flex; align-items: center; gap: .5rem; }
.footer-live-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--green); animation: pulse-dot 1.5s ease-in-out infinite; }
.footer-fifa-text { font-size: .75rem; font-weight: 500; color: var(--green); }
.footer-bottom {
  display: flex; flex-direction: column; gap: .75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.05); align-items: center;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-copyright { font-size: .75rem; color: var(--gray); text-align: center; }
@media (min-width: 640px) { .footer-copyright { text-align: left; } }
.footer-disclaimer { font-size: .75rem; color: rgba(148,163,184,.50); }

/* ── Sticky Bar ───────────────────────────────────────────── */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  transition: transform .4s ease, opacity .4s ease;
}
.sticky-bar.hidden { display: none; }
@media (min-width: 768px) { .sticky-bar { display: none !important; } }
.sticky-bar-fade { height: 1.5rem; background: linear-gradient(to top, var(--navy), transparent); pointer-events: none; }
.sticky-bar-inner {
  background: rgba(15,23,42,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.08); padding: .75rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.sticky-bar-info { display: flex; align-items: center; gap: .625rem; flex: 1; min-width: 0; }
.sticky-bar-icon-wrap { width: 2.5rem; height: 2.5rem; border-radius: .75rem; overflow: hidden; box-shadow: 0 0 0 1px rgba(16,185,129,.30); flex-shrink: 0; }
.sticky-bar-icon { width: 100%; height: 100%; object-fit: cover; }
.sticky-bar-title { font-size: .875rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.sticky-bar-sub { font-size: .75rem; color: var(--gray); }
.sticky-bar-btn {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  padding: .75rem 1.25rem; border-radius: .75rem; background: var(--green); color: #fff;
  font-weight: 700; font-size: .875rem;
  box-shadow: 0 0 20px rgba(16,185,129,.5), 0 0 40px rgba(16,185,129,.2);
  transition: background .2s;
}
.sticky-bar-btn:hover { background: #34D399; }
.sticky-bar-btn svg { width: 1rem; height: 1rem; }
.sticky-bar-close { padding: .5rem; color: var(--gray); transition: color .2s; flex-shrink: 0; }
.sticky-bar-close:hover { color: #fff; }
.sticky-bar-close svg { width: 1rem; height: 1rem; }

/* ── Back to Top ──────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 6rem; right: 1.25rem; z-index: 40;
  width: 2.75rem; height: 2.75rem; border-radius: .75rem;
  background: rgba(30,41,59,.7); backdrop-filter: blur(16px); border: 1px solid rgba(37,99,235,.30);
  color: var(--blue); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(37,99,235,.4), 0 0 40px rgba(37,99,235,.15);
  transition: transform .2s, border-color .2s, color .2s;
}
@media (min-width: 768px) { .back-to-top { bottom: 2rem; right: 2rem; } }
.back-to-top:hover { transform: translateY(-2px) scale(1.1); border-color: rgba(37,99,235,.60); color: #fff; }
.back-to-top svg { width: 1rem; height: 1rem; }
.back-to-top.hidden { display: none; }

/* ── Adsterra Ad Slot (minimal) ───────────────────────────── */
.ad-slot-wrap { padding: 1.5rem 1rem; }
.ad-slot-label { display: flex; align-items: center; justify-content: center; margin-bottom: .25rem; }
.ad-slot-label span { font-size: .625rem; color: rgba(148,163,184,.40); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; padding: 0 .5rem; }
.ad-slot { display: flex; align-items: center; justify-content: center; min-height: 90px; width: 100%; max-width: 56rem; margin: 0 auto; }