/* ============================================
   STATKING PRO — MAIN STYLES
   Cyber-sport-lux design system
   ============================================ */

:root {
  --bg-primary: #080a1a;
  --bg-secondary: #0d1028;
  --bg-card: rgba(13, 16, 40, 0.75);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border-glass: rgba(255, 255, 255, 0.08);
  --neon-cyan: #00f0ff;
  --neon-purple: #b000ff;
  --neon-blue: #3b82f6;
  --neon-gold: #ffd700;
  --neon-pink: #ff2d95;
  --neon-green: #22ff88;
  --text-primary: #e8eaff;
  --text-secondary: #8892b0;
  --text-muted: #555a7a;
  --cyan-glow: 0 0 20px rgba(0,240,255,0.3), 0 0 60px rgba(0,240,255,0.1);
  --purple-glow: 0 0 20px rgba(176,0,255,0.3), 0 0 60px rgba(176,0,255,0.1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-display: 'Clash Display', 'Inter', sans-serif;
  --nav-height: 72px;
  --perspective: 1200px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:var(--font-sans); background:var(--bg-primary); color:var(--text-primary); overflow-x:hidden; scroll-behavior:smooth; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,240,255,0.2); border-radius:3px; }

#three-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }

/* NAV */
.top-nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-height);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
  background:rgba(8,10,26,0.85); backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--border-glass); z-index:100;
}
.nav-logo { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:8px; }
.nav-logo .logo-stat { color:var(--text-primary); }
.nav-logo .logo-king { color:var(--neon-cyan); }
.nav-logo .crown { display:inline-block; animation:crownBounce 3s ease-in-out infinite; }
@keyframes crownBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Hamburger wrapper — keeps logo + hamburger aligned */
.top-nav-left { display:flex; align-items:center; gap:8px; }

.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link { color:var(--text-secondary); text-decoration:none; padding:8px 16px; border-radius:var(--radius-sm); font-size:0.9rem; font-weight:500; transition:all 0.3s; cursor:pointer; position:relative; }
.nav-link:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
.nav-link.active { color:var(--neon-cyan); }
.nav-link.active::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--neon-cyan); border-radius:1px; box-shadow:var(--cyan-glow); }

/* PAGE TRANSITION */
@keyframes pageIn { from{opacity:0;transform:translateY(40px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.page-transition { animation:pageIn 0.5s cubic-bezier(0.22,1,0.36,1); }

/* HERO ENTRANCE ANIMATION (fade + scale + slide up) */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px) scale(0.97); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes fadeInScale {
  from { opacity:0; transform:scale(0.85); }
  to { opacity:1; transform:scale(1); }
}

.hero-section .hero-label { animation:fadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
.hero-section .hero-title { animation:fadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s both; }
.hero-section .hero-subtitle { animation:fadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s both; }
.hero-section .hero-actions { animation:fadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s both; }
.hero-section .hero-stats { animation:fadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.5s both; }
.hero-section .hero-bg-glow { animation:fadeInScale 1s cubic-bezier(0.22,1,0.36,1) 0.05s both; }

/* Buttons pulse glow for hero CTA */
.pulse-glow {
  animation:pulseGlow 2.5s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 15px rgba(0,240,255,0.15), 0 0 30px rgba(0,240,255,0.05); }
  50% { box-shadow:0 0 25px rgba(0,240,255,0.3), 0 0 60px rgba(0,240,255,0.1); }
}

/* Feature cards entrance with stagger delay */
.feature-card {
  animation:fadeInUp 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.features-grid .feature-card:nth-child(1) { animation-delay:0.1s; }
.features-grid .feature-card:nth-child(2) { animation-delay:0.2s; }
.features-grid .feature-card:nth-child(3) { animation-delay:0.3s; }
.features-grid .feature-card:nth-child(4) { animation-delay:0.4s; }

/* Demo cards entrance with stagger */
.demo-card {
  animation:fadeInUp 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.demo-grid .demo-card:nth-child(1) { animation-delay:0.1s; }
.demo-grid .demo-card:nth-child(2) { animation-delay:0.2s; }
.demo-grid .demo-card:nth-child(3) { animation-delay:0.3s; }

/* Gradient text utility */
.gradient-text {
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.nav-actions { display:flex; align-items:center; gap:12px; }

.lang-switcher { display:flex; align-items:center; gap:4px; padding:4px; background:rgba(255,255,255,0.04); border-radius:var(--radius-sm); }
.lang-btn { padding:4px 8px; border:none; background:transparent; color:var(--text-muted); font-size:0.75rem; font-weight:600; cursor:pointer; border-radius:4px; text-transform:uppercase; transition:all 0.2s; }
.lang-btn:hover { color:var(--text-secondary); }
.lang-btn.active { background:rgba(0,240,255,0.15); color:var(--neon-cyan); }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 24px; border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:0.9rem; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:all 0.3s; white-space:nowrap; }
.btn-sm { padding:6px 16px; font-size:0.8rem; }
.btn-lg { padding:14px 32px; font-size:1rem; }
.btn-ghost { background:transparent; color:var(--text-secondary); border-color:rgba(255,255,255,0.1); }
.btn-ghost:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); border-color:rgba(255,255,255,0.2); }
.btn-cyan { background:linear-gradient(135deg, rgba(0,240,255,0.15), rgba(0,240,255,0.05)); color:var(--neon-cyan); border-color:rgba(0,240,255,0.3); }
.btn-cyan:hover { background:linear-gradient(135deg, rgba(0,240,255,0.25), rgba(0,240,255,0.1)); box-shadow:var(--cyan-glow); transform:translateY(-1px); }

/* MESSAGES */
.messages-container { position:fixed; top:calc(var(--nav-height) + 8px); left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:4px; max-width:600px; width:90%; }
.alert { padding:12px 20px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:0.85rem; animation:slideDown 0.3s cubic-bezier(0.22,1,0.36,1); }
.alert-success { background:rgba(34,255,136,0.15); border:1px solid rgba(34,255,136,0.3); color:#22ff88; }
.alert-error { background:rgba(255,68,68,0.15); border:1px solid rgba(255,68,68,0.3); color:#ff6b6b; }
.alert-warning { background:rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.3); color:#ffd700; }
.alert-info { background:rgba(0,240,255,0.15); border:1px solid rgba(0,240,255,0.3); color:var(--neon-cyan); }
.alert-close { background:none; border:none; color:inherit; cursor:pointer; font-size:1.1rem; opacity:0.7; }
.alert-close:hover { opacity:1; }
@keyframes slideDown {
  from { opacity:0; transform:translateY(-20px) scale(0.95); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* MAIN */
#mainContent { position:relative; z-index:1; padding-top:var(--nav-height); min-height:100vh; }

/* SECTIONS */
.section { padding:80px 24px; max-width:1200px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:48px; }
.section-title { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.5rem); font-weight:800; }
.section-title .highlight { background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-subtitle { color:var(--text-secondary); margin-top:8px; font-size:1.05rem; }

/* HERO */
.hero,
.hero-section {
  min-height:calc(100vh - var(--nav-height));
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; position:relative;
  overflow:hidden;
}
.hero::before,
.hero-section::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(ellipse at 30% 50%, rgba(0,240,255,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 30%, rgba(176,0,255,0.06) 0%, transparent 50%);
  animation:heroGrad 20s ease-in-out infinite; z-index:0;
}
@keyframes heroGrad { 0%,100%{transform:rotate(0deg)scale(1)} 33%{transform:rotate(120deg)scale(1.1)} 66%{transform:rotate(240deg)scale(1.05)} }
.hero-content { position:relative; z-index:1; max-width:800px; padding:0 24px; }

.hero-label {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px; border-radius:100px;
  background:rgba(0,240,255,0.08);
  border:1px solid rgba(0,240,255,0.2);
  font-size:0.85rem; margin-bottom:20px;
  color:var(--neon-cyan);
}
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-radius:100px; background:rgba(0,240,255,0.08); border:1px solid rgba(0,240,255,0.2); font-size:0.85rem; margin-bottom:20px; }
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--neon-cyan); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.hero-title { font-family:var(--font-display); font-size:clamp(2.5rem,7vw,5rem); font-weight:800; line-height:1.05; margin-bottom:20px; }
.hero-title .highlight { background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:clamp(0.95rem,1.8vw,1.2rem); color:var(--text-secondary); max-width:550px; margin:0 auto 32px; line-height:1.7; }
.hero-cta { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }

.hero-stats { display:flex; align-items:center; gap:32px; margin-top:48px; z-index:1; }
.hero-stat { text-align:center; }
.hero-stat-value { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--text-primary); display:block; }
.hero-stat-label { font-size:0.8rem; color:var(--text-muted); margin-top:2px; }
.hero-stat-divider { width:1px; height:40px; background:rgba(255,255,255,0.1); }

/* FEATURES GRID */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px; }
.feature-card {
  padding:32px 24px; border-radius:var(--radius-lg);
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass);
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.feature-card:hover { transform:translateY(-4px); border-color:rgba(0,240,255,0.2); box-shadow:0 20px 60px rgba(0,240,255,0.08); }

/* Feature icon backgrounds */
.feature-icon.cyan { background:rgba(0,240,255,0.1); }
.feature-icon.purple { background:rgba(176,0,255,0.1); }
.feature-icon.gold { background:rgba(255,215,0,0.1); }
.feature-icon.green { background:rgba(34,255,136,0.1); }
.feature-icon { font-size:2rem; margin-bottom:12px; }
.feature-card h3 { font-family:var(--font-display); font-size:1.15rem; margin-bottom:8px; }
.feature-card p { color:var(--text-secondary); font-size:0.88rem; line-height:1.6; }

/* DEMO SECTION */
.demo-preview {
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-xl);
  padding:32px; cursor:pointer; transition:all 0.3s;
  max-width:700px; margin:0 auto;
}
.demo-preview:hover { border-color:rgba(0,240,255,0.2); }
.demo-sports { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.demo-sport { padding:6px 14px; border-radius:100px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); font-size:0.8rem; }
.demo-terminal { background:rgba(0,0,0,0.4); border-radius:var(--radius-sm); overflow:hidden; }
.terminal-header { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.06); }
.term-dot { width:10px; height:10px; border-radius:50%; }
.term-dot.red { background:#ff5f57; }
.term-dot.yellow { background:#ffbd2e; }
.term-dot.green { background:#28c840; }
.term-title { font-size:0.75rem; color:var(--text-muted); margin-left:8px; }
.terminal-body { padding:14px; font-family:monospace; font-size:0.8rem; line-height:1.8; }
.term-line .prompt { color:var(--neon-green); }

/* PRICING GRID */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px; max-width:1000px; margin:0 auto; }
.pricing-card {
  padding:32px 24px; border-radius:var(--radius-lg);
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass);
  position:relative; text-align:center; transition:all 0.3s;
}
.pricing-card.popular { border-color:var(--neon-cyan); }
.pricing-card:hover { transform:translateY(-2px); }
.popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:4px 16px; border-radius:100px; background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); font-size:0.75rem; font-weight:600; white-space:nowrap; }
.plan-name { font-family:var(--font-display); font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.plan-price { margin:12px 0; }
.price { font-family:var(--font-display); font-size:2.5rem; font-weight:800; background:linear-gradient(135deg,var(--text-primary),var(--neon-cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.period { color:var(--text-muted); font-size:0.85rem; }
.plan-features { list-style:none; padding:0; margin:20px 0; text-align:left; }
.plan-features li { padding:6px 0; color:var(--text-secondary); font-size:0.85rem; }
.pricing-cta { width:100%; margin-top:8px; }

/* FOOTER */
.site-footer { position:relative; z-index:1; border-top:1px solid var(--border-glass); padding:48px 32px 24px; background:var(--bg-secondary); }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; }
.footer-brand { max-width:300px; }
.footer-logo { font-family:var(--font-display); font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.footer-desc { font-size:0.82rem; color:var(--text-muted); line-height:1.6; }
.footer-links { display:flex; gap:48px; flex-wrap:wrap; }
.footer-col h4 { font-size:0.8rem; font-weight:600; margin-bottom:12px; color:var(--text-secondary); }
.footer-col a { display:block; font-size:0.82rem; color:var(--text-muted); text-decoration:none; padding:4px 0; }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom { text-align:center; margin-top:32px; padding-top:16px; border-top:1px solid var(--border-glass); font-size:0.78rem; color:var(--text-muted); }

/* AUTH PAGES */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - var(--nav-height) - 200px); padding:40px 24px; }
.auth-card { max-width:420px; width:100%; padding:40px 32px; border-radius:var(--radius-xl); background:var(--bg-card); backdrop-filter:blur(16px); border:1px solid var(--border-glass); }
.auth-header { text-align:center; margin-bottom:24px; }
.auth-header h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.auth-header p { color:var(--text-secondary); font-size:0.85rem; margin-top:4px; }
.auth-form { display:flex; flex-direction:column; gap:16px; }
.auth-form .form-input { width:100%; padding:11px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-sans); font-size:0.85rem; transition:all 0.3s; outline:none; }
.auth-form .form-input:focus { border-color:rgba(0,240,255,0.4); background:rgba(0,240,255,0.04); box-shadow:0 0 0 3px rgba(0,240,255,0.08); }
.auth-form .form-input::placeholder { color:var(--text-muted); }
.auth-submit { width:100%; padding:12px; margin-top:8px; }
.auth-footer { text-align:center; margin-top:16px; color:var(--text-muted); font-size:0.85rem; }
.highlight-link { color:var(--neon-cyan); text-decoration:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* DASHBOARD */
.dashboard-page { display:flex; min-height:calc(100vh - var(--nav-height)); background:var(--bg-primary); }
.dash-sidebar { width:240px; background:var(--bg-secondary); border-right:1px solid var(--border-glass); padding:24px 16px; flex-shrink:0; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.dash-user { display:flex; align-items:center; gap:12px; margin-bottom:24px; padding:12px 16px; border-radius:var(--radius-md); background:rgba(255,255,255,0.03); }
.dash-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; color:#fff; }
.dash-user-info { display:flex; flex-direction:column; gap:2px; }
.dash-username { font-weight:600; font-size:0.9rem; color:var(--text-primary); }
.dash-level { font-size:0.75rem; color:var(--text-muted); }
.user-card { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding:12px; border-radius:var(--radius-md); background:rgba(255,255,255,0.03); }
.user-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; }
.user-name { font-weight:600; font-size:0.9rem; }
.user-level { font-size:0.75rem; color:var(--text-muted); }
.dash-nav { display:flex; flex-direction:column; gap:2px; }
.dash-link { padding:10px 12px; border-radius:var(--radius-sm); color:var(--text-secondary); text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.dash-link:hover { background:rgba(255,255,255,0.04); color:var(--text-primary); }
.dash-link.active { background:rgba(0,240,255,0.08); color:var(--neon-cyan); }
.dash-main { flex:1; padding:24px; overflow-y:auto; }
.dash-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.dash-card { padding:16px; border-radius:var(--radius-md); background:var(--bg-card); border:1px solid var(--border-glass); display:flex; align-items:center; gap:16px; }
.dash-card-icon { font-size:1.8rem; }
.dash-card-value { font-family:var(--font-display); font-size:1.3rem; font-weight:700; }
.dash-card-label { font-size:0.78rem; color:var(--text-muted); }
.dash-greeting { font-family:var(--font-display); font-size:1.6rem; font-weight:700; margin-bottom:24px; }
.dash-greeting strong { background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.dash-section { margin-bottom:32px; }
.dash-section-title { font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:16px; color:var(--text-primary); }
.dash-table-wrapper { overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border-glass); }
.dash-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.dash-table th { background:rgba(255,255,255,0.03); padding:12px 16px; text-align:left; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.dash-table td { padding:12px 16px; border-top:1px solid var(--border-glass); color:var(--text-primary); }
.dash-table tbody tr:hover { background:rgba(255,255,255,0.02); }
.btn-sm { padding:6px 12px; font-size:0.78rem; }
.btn-ghost { background:transparent; border:1px solid var(--border-glass); color:var(--text-secondary); }
.btn-ghost:hover { border-color:var(--neon-cyan); color:var(--neon-cyan); }
.dash-actions-cell { display:flex; gap:4px; align-items:center; flex-wrap:nowrap; }
.dash-empty { text-align:center; padding:60px 20px; }
.dash-empty-icon { font-size:3rem; margin-bottom:16px; }
.dash-messages { }
.dash-messages .alert { padding:10px 16px; border-radius:var(--radius-sm); margin-bottom:8px; font-size:0.9rem; animation:slideDown 0.3s ease; }
.dash-progress-bar { height:4px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; margin-top:8px; }
.dash-progress-fill { height:100%; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple)); border-radius:4px; transition:width 0.5s ease; }
.level-bar { margin-bottom:20px; }
.level-bar-header { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-secondary); margin-bottom:6px; }
.level-bar-track { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.level-bar-fill { height:100%; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple)); border-radius:3px; transition:width 0.5s; }
.premium-banner { padding:12px 16px; border-radius:var(--radius-sm); background:linear-gradient(135deg,rgba(255,215,0,0.1),rgba(255,180,0,0.05)); border:1px solid rgba(255,215,0,0.2); color:var(--neon-gold); font-size:0.85rem; margin-bottom:20px; }
.history-list { display:flex; flex-direction:column; gap:4px; }
.history-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); text-decoration:none; color:var(--text-primary); transition:all 0.2s; }
.history-item:hover { background:rgba(255,255,255,0.04); }
.h-sport { font-size:1.2rem; }
.h-info { flex:1; font-size:0.85rem; }
.h-date { font-size:0.75rem; color:var(--text-muted); }

/* ANALYSIS PAGE */
.analysis-layout {
  display:grid; grid-template-columns:1fr 1.5fr; gap:24px;
  max-width:1400px; margin:0 auto; padding:24px;
  height:calc(100vh - var(--nav-height) - 24px); min-height:500px;
}
.analysis-form-panel {
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-xl);
  padding:28px 24px; overflow-y:auto; position:relative;
  display:flex; flex-direction:column; gap:24px;
}
.analysis-form-panel::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--neon-cyan),var(--neon-purple),transparent); }
.form-title { font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.form-subtitle { color:var(--text-secondary); font-size:0.85rem; }
.form-header { }
.sport-pills { display:flex; gap:6px; flex-wrap:wrap; }
.sport-pill { display:flex; align-items:center; gap:5px; padding:8px 14px; border-radius:100px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); color:var(--text-secondary); font-size:0.8rem; font-weight:500; cursor:pointer; transition:all 0.3s; user-select:none; }
.sport-pill:hover { background:rgba(255,255,255,0.06); color:var(--text-primary); }
.sport-pill.active { background:rgba(0,240,255,0.1); border-color:rgba(0,240,255,0.3); color:var(--neon-cyan); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full-w { grid-column:1/-1; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-label { font-size:0.72rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; }
.form-input, .form-textarea, .form-select { width:100%; padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-sans); font-size:0.85rem; transition:all 0.3s; outline:none; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:rgba(0,240,255,0.4); background:rgba(0,240,255,0.04); box-shadow:0 0 0 3px rgba(0,240,255,0.08); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-muted); }
.form-textarea { resize:vertical; min-height:60px; }
.form-select { cursor:pointer; }
.score-inputs { display:flex; align-items:center; gap:6px; }
.score-sep { color:var(--text-muted); font-size:1rem; }
.score-inputs .form-input { text-align:center; }
.form-options { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.opt-row { display:flex; align-items:center; gap:8px; }
.opt-label { font-size:0.75rem; font-weight:600; color:var(--text-secondary); min-width:70px; }

.toggle-switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-track { width:36px; height:20px; border-radius:10px; background:rgba(255,255,255,0.1); position:relative; transition:background 0.2s; }
.toggle-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-muted); transition:all 0.2s; }
.toggle-switch input:checked + .toggle-track { background:rgba(0,240,255,0.3); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { left:18px; background:var(--neon-cyan); box-shadow:0 0 8px rgba(0,240,255,0.4); }
.toggle-label { font-size:0.8rem; color:var(--text-secondary); }

.btn-analyze {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:22px 120px; width:100%; font-size:1.15rem; letter-spacing:0.02em;
  background:linear-gradient(135deg,rgba(0,240,255,0.2),rgba(176,0,255,0.1));
  border:1px solid rgba(0,240,255,0.3);
  border-radius:var(--radius-md); color:var(--text-primary);
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  cursor:pointer; transition:all 0.4s; overflow:hidden;
}
.btn-analyze::before { content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple),var(--neon-cyan)); border-radius:var(--radius-md); z-index:-2; animation:borderRot 3s linear infinite; opacity:0; transition:opacity 0.4s; }
.btn-analyze::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:var(--bg-card); border-radius:calc(var(--radius-md)-1px); z-index:-1; }
.btn-analyze:hover::before { opacity:1; }
.btn-analyze:hover { transform:translateY(-2px); box-shadow:0 20px 60px rgba(0,240,255,0.15); }
.btn-analyze:disabled { opacity:0.5; cursor:not-allowed; transform:none!important; }
.btn-analyze:disabled::before { opacity:0!important; }
@keyframes borderRot { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }

/* RESPONSE PANEL */
.analysis-response-panel {
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-xl);
  padding:28px 24px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
}
.analysis-response-panel::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--neon-purple),var(--neon-cyan),transparent); }
.response-loading { display:none; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:24px; }
.response-loading.show { display:flex; }

.loading-sphere-container { width:120px; height:120px; perspective:800px; position:relative; }
.loading-sphere { width:100%; height:100%; animation:sphereFloat 4s ease-in-out infinite; }
.loading-ring { position:absolute; width:100%; height:100%; border-radius:50%; border:2px solid transparent; }
.loading-ring:nth-child(1) { border-top-color:var(--neon-cyan); animation:ringSpin 1.8s linear infinite; transform:rotateX(70deg)rotateZ(0deg) }
.loading-ring:nth-child(2) { border-bottom-color:var(--neon-purple); animation:ringSpin 2.2s linear infinite; transform:rotateY(60deg)rotateX(30deg) }
.loading-ring:nth-child(3) { border-left-color:var(--neon-gold); animation:ringSpin 2.6s linear infinite; transform:rotateZ(50deg)rotateY(40deg) }
.loading-ring:nth-child(4) { border-right-color:#22ff88; animation:ringSpin 3s linear infinite; transform:rotateX(40deg)rotateZ(80deg) }
@keyframes ringSpin { to { transform:var(--transform,none) rotate(360deg) } }
@keyframes sphereFloat { 0%,100%{transform:translateY(0)scale(1)} 50%{transform:translateY(-12px)scale(1.02)} }

.loading-text { font-size:0.9rem; color:var(--text-secondary); text-align:center; }
.loading-dots::after { content:''; animation:dots 1.5s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} }

.response-content-wrapper { flex:1; overflow-y:auto; position:relative; perspective:var(--perspective); }
.response-content { display:none; }
.response-content.show { display:block; }
.response-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.response-title { font-family:var(--font-display); font-size:1.1rem; font-weight:700; }
.response-actions { display:flex; gap:8px; }

.history-tabs { display:flex; gap:6px; overflow-x:auto; flex-shrink:0; margin-bottom:8px; padding-bottom:4px; align-items:center; }
.history-tabs .clear-history-btn { margin-left:auto; flex-shrink:0; font-size:0.85rem; padding:4px 8px; opacity:0.5; }
.history-tabs .clear-history-btn:hover { opacity:1; background:rgba(255,255,255,0.08); }
.history-tab { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:100px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); color:var(--text-muted); font-size:0.72rem; cursor:pointer; white-space:nowrap; transition:all 0.2s; }
.history-tab:hover { background:rgba(255,255,255,0.06); color:var(--text-secondary); }
.history-tab.active { background:rgba(0,240,255,0.1); border-color:rgba(0,240,255,0.25); color:var(--neon-cyan); }

.empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); gap:12px; }
.empty-state-icon { font-size:3rem; opacity:0.4; }
.empty-state-text { font-size:0.9rem; text-align:center; max-width:280px; line-height:1.6; }

.response-footer { display:none; align-items:center; justify-content:space-between; padding-top:12px; margin-top:12px; border-top:1px solid var(--border-glass); flex-shrink:0; gap:8px; }
.response-footer.show { display:flex; flex-wrap:wrap; }
.footer-btns { display:flex; gap:6px; }

/* RESPONSE LINES */
.response-line { opacity:0; transform:translateY(8px); transition:all 0.4s cubic-bezier(0.22,1,0.36,1); margin-bottom:4px; line-height:1.7; }
.response-line.visible { opacity:1; transform:translateY(0); }

/* COSMIC PROJECTION (3D fly-in) */
@keyframes cosmicProjection {
  0% { opacity:0; transform:perspective(var(--perspective,1200px)) translateZ(-1200px) translateY(200px) translateX(100px) rotateX(45deg) rotateY(30deg) rotateZ(15deg) scale(0.3); filter:blur(20px) brightness(3); }
  15% { opacity:1; transform:perspective(var(--perspective,1200px)) translateZ(-600px) translateY(100px) translateX(50px) rotateX(25deg) rotateY(15deg) rotateZ(8deg) scale(0.55); filter:blur(8px) brightness(1.8); }
  30% { transform:perspective(var(--perspective,1200px)) translateZ(-200px) translateY(40px) translateX(20px) rotateX(10deg) rotateY(5deg) rotateZ(3deg) scale(0.78); filter:blur(3px) brightness(1.3); }
  50% { transform:perspective(var(--perspective,1200px)) translateZ(-50px) translateY(10px) rotateX(3deg) rotateY(2deg) rotateZ(1deg) scale(0.92); filter:blur(1px) brightness(1.1); }
  70% { transform:perspective(var(--perspective,1200px)) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.02); filter:blur(0px) brightness(1); }
  85% { transform:perspective(var(--perspective,1200px)) translateZ(-5px) scale(0.99); }
  100% { transform:perspective(var(--perspective,1200px)) translateZ(0px) scale(1); }
}
@keyframes lightBeam {
  0% { opacity:0; transform:scaleY(0) translateZ(-800px) rotateX(80deg); filter:blur(40px); }
  20% { opacity:0.7; transform:scaleY(1) translateZ(-400px) rotateX(80deg); filter:blur(20px); }
  50% { opacity:0.3; transform:scaleY(1.5) translateZ(0) rotateX(80deg); filter:blur(10px); }
  100% { opacity:0; transform:scaleY(2) translateZ(200px) rotateX(80deg); filter:blur(30px); }
}
@keyframes particleBurst { 0%{opacity:1;transform:translate(0,0)scale(1)} 100%{opacity:0;transform:translate(var(--tx,100px),var(--ty,-100px))scale(0)} }
.response-content-wrapper.animating { animation:cosmicProjection 1.6s cubic-bezier(0.22,1,0.36,1) forwards; }
.response-content-wrapper::before { content:''; position:absolute; top:0; left:0; right:0; height:100%; background:linear-gradient(180deg,rgba(0,240,255,0.08)0%,rgba(176,0,255,0.04)30%,transparent 60%); pointer-events:none; opacity:0; }
.response-content-wrapper.animating::before { animation:lightBeam 1.6s cubic-bezier(0.4,0,0.2,1) forwards; }
.arrival-particles { position:absolute; top:50%; left:50%; width:0; height:0; pointer-events:none; z-index:10; }
.arrival-particle { position:absolute; width:4px; height:4px; border-radius:50%; animation:particleBurst 0.8s cubic-bezier(0.22,1,0.36,1) forwards; }

.toggle-btn { padding:6px 14px; border-radius:100px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--text-secondary); font-size:0.78rem; cursor:pointer; transition:all 0.2s; font-family:var(--font-sans); }

/* RESULT CARD */
.response-actions { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 0; flex-shrink:0; }
.result-vs { font-size:1.4rem; font-weight:700; padding:12px 0; }
.prob-bar { display:flex; height:28px; border-radius:100px; overflow:hidden; margin:12px 0; background:rgba(255,255,255,0.05); }
.prob-fill { display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; color:#fff; transition:width 1s ease; }
.prob-fill.t1 { background:linear-gradient(90deg, var(--neon-cyan), rgba(0,240,255,0.6)); }
.prob-fill.t2 { background:linear-gradient(90deg, var(--neon-purple), rgba(176,0,255,0.6)); }
.result-outcome { text-align:center; font-size:1.1rem; padding:12px; margin:8px 0; border-radius:12px; background:rgba(0,240,255,0.06); border:1px solid rgba(0,240,255,0.12); }
.result-factors { margin:12px 0; padding:12px; border-radius:12px; background:rgba(255,255,255,0.03); }
.result-factors ul { padding-left:20px; margin:4px 0; }
.result-factors li { margin:4px 0; color:var(--text-secondary); }
.result-strategy { margin:12px 0; padding:12px 16px; border-radius:12px; background:rgba(0,240,255,0.04); border:1px solid rgba(0,240,255,0.1); color:var(--neon-cyan); }
.toggle-btn:hover { background:rgba(255,255,255,0.08); color:var(--text-primary); }
.toggle-btn.active { background:rgba(0,240,255,0.1); border-color:rgba(0,240,255,0.3); color:var(--neon-cyan); }
.toggle-btn.btn-sm { padding:4px 10px; font-size:0.72rem; }

/* SUGGESTIONS OVERLAY — AutoComplete */
.suggestions-overlay {
  position:fixed;
  z-index:300;
  display:none;
  min-width:280px;
  max-width:420px;
  max-height:280px;
  overflow-y:auto;
  background:rgba(10,12,32,0.98);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-md);
  box-shadow:0 12px 48px rgba(0,0,0,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.suggestions-overlay.show { display:block; }
.suggestions-box { overflow:hidden; }
.suggestion-item { padding:8px 14px; cursor:pointer; font-size:0.85rem; color:var(--text-secondary); transition:all 0.1s; }
.suggestion-item:hover, .suggestion-item.highlighted { background:rgba(0,240,255,0.08); color:var(--text-primary); }
.suggestion-item .sug-type { font-size:0.7rem; color:var(--text-muted); margin-left:8px; }

/* REFERRALS */
.referrals-page { max-width:800px; margin:0 auto; padding:40px 24px; }
.ref-hero { text-align:center; margin-bottom:32px; }
.ref-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
.ref-stat { padding:20px; border-radius:var(--radius-md); background:var(--bg-card); border:1px solid var(--border-glass); text-align:center; }
.ref-stat-value { font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.ref-stat-label { display:block; font-size:0.8rem; color:var(--text-muted); margin-top:4px; }
.ref-link-card { padding:24px; border-radius:var(--radius-lg); background:var(--bg-card); border:1px solid var(--border-glass); margin-bottom:16px; }
.ref-link-card h3 { margin-bottom:12px; }
.ref-link-box { display:flex; gap:8px; }
.ref-link-box input { flex:1; padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); color:var(--neon-cyan); font-family:monospace; font-size:0.8rem; outline:none; }
.ref-link-hint { font-size:0.78rem; color:var(--text-muted); margin-top:8px; }
.ref-list-card { padding:24px; border-radius:var(--radius-lg); background:var(--bg-card); border:1px solid var(--border-glass); }
.ref-list-card h3 { margin-bottom:12px; }
.ref-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.ref-date { color:var(--text-muted); font-size:0.8rem; }

/* SUPPORT */
.support-page { max-width:1000px; margin:0 auto; padding:40px 24px; }
.support-hero { text-align:center; margin-bottom:32px; }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.support-form-card, .support-tickets-card { padding:24px; border-radius:var(--radius-lg); background:var(--bg-card); border:1px solid var(--border-glass); }
.support-form-card h3, .support-tickets-card h3 { margin-bottom:16px; }
.ticket-item { padding:12px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.02); margin-bottom:8px; border:1px solid rgba(255,255,255,0.04); }
.ticket-item.resolved { opacity:0.7; }
.ticket-header { display:flex; justify-content:space-between; align-items:center; }
.ticket-subject { font-weight:600; }
.ticket-status { font-size:0.75rem; padding:2px 8px; border-radius:4px; background:rgba(255,215,0,0.1); color:var(--neon-gold); }
.ticket-item.resolved .ticket-status { background:rgba(34,255,136,0.1); color:var(--neon-green); }
.ticket-meta { font-size:0.75rem; color:var(--text-muted); margin-top:4px; }
.ticket-reply { margin-top:8px; padding:8px 12px; border-radius:var(--radius-sm); background:rgba(0,240,255,0.04); font-size:0.85rem; }

/* ═══════════════════════════════════════
   THINKING SCENE — анимация ожидания нейросети
   ═══════════════════════════════════════ */
.thinking-scene { display:none; flex-direction:column; align-items:center; justify-content:center; flex:1; position:relative; padding:40px 16px; }
.thinking-scene.show { display:flex; }

.thinking-ring { width:120px; height:120px; border-radius:50%; position:relative; margin:6px auto 12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.thinking-ring::before { content:''; position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(from var(--angle), transparent 0deg, var(--neon-cyan) 60deg, var(--neon-purple) 120deg, transparent 180deg, var(--neon-green) 240deg, transparent 300deg, transparent 360deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation:ringRotate 3s linear infinite; }
@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes ringRotate { to { --angle:360deg; } }

.thinking-ring .ring-inner { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; }
.sport-figure { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:44px; opacity:0; transition:opacity 0.5s; }
.sport-figure.active { opacity:1; }
.sport-figure.soccer.active { animation:soccerKick 0.8s ease-in-out infinite; }
@keyframes soccerKick { 0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(12px,-4px) rotate(-10deg)} 50%{transform:translate(24px,0) rotate(0deg)} 75%{transform:translate(12px,4px) rotate(10deg)} }
.sport-figure.hockey.active { animation:hockeySwing 0.6s ease-in-out infinite; }
@keyframes hockeySwing { 0%,100%{transform:rotate(-30deg) scaleX(1)} 50%{transform:rotate(30deg) scaleX(-1)} }
.sport-figure.basketball.active { animation:basketballThrow 1.2s ease-in-out infinite; }
@keyframes basketballThrow { 0%{transform:translateY(0) rotate(0deg)} 30%{transform:translateY(-16px) rotate(15deg)} 60%{transform:translateY(0) rotate(-15deg)} 100%{transform:translateY(0) rotate(0deg)} }

.ring-percent { position:absolute; z-index:2; font-size:22px; font-weight:800; font-family:var(--font-display); background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.thinking-stage { font-size:0.85rem; color:var(--text-secondary); text-align:center; margin-bottom:4px; min-height:1.4em; }
.thinking-stage .stage-highlight { color:var(--neon-cyan); font-weight:600; }
.thinking-stage .stage-pulse { color:var(--neon-cyan); font-weight:600; animation:pulseText 1.5s ease-in-out infinite; }
@keyframes pulseText { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.thinking-sub { font-size:0.72rem; color:var(--text-muted); text-align:center; margin-bottom:14px; min-height:1.2em; }

.thinking-progress { width:100%; max-width:240px; height:4px; border-radius:2px; background:rgba(255,255,255,0.04); overflow:hidden; margin-bottom:18px; }
.thinking-progress .tp-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple),var(--neon-green)); transition:width 0.5s ease; width:0%; }

/* Live comparison during thinking */
.live-compare { width:100%; max-width:280px; display:none; flex-direction:column; gap:4px; }
.live-compare.show { display:flex; }
.lc-row { display:flex; align-items:center; gap:4px; }
.lc-label { font-size:0.62rem; color:var(--text-muted); width:36px; text-align:right; flex-shrink:0; }
.lc-bar-wrap { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,0.03); display:flex; overflow:hidden; }
.lc-bar-left { height:100%; border-radius:3px 0 0 3px; background:linear-gradient(90deg,var(--neon-cyan),#38bdf8); transition:width 0.6s cubic-bezier(0.22,1,0.36,1); width:50%; }
.lc-bar-right { height:100%; border-radius:0 3px 3px 0; background:linear-gradient(270deg,var(--neon-purple),#c084fc); transition:width 0.6s cubic-bezier(0.22,1,0.36,1); width:50%; }
.lc-pct { font-size:0.6rem; font-weight:700; color:var(--text-secondary); width:28px; text-align:center; flex-shrink:0; }
.lc-teams { display:flex; justify-content:space-between; margin-top:2px; font-size:0.55rem; color:var(--text-muted); }

/* ═══════════════════════════════════════
   RESULT VIEW — карточки после анализа
   ═══════════════════════════════════════ */
.result-view { display:none; flex-direction:column; flex:1; min-height:0; overflow-y:auto; }
.result-view.show { display:flex; }

.result-tabs { display:flex; gap:4px; margin-bottom:10px; overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.result-tabs::-webkit-scrollbar { display:none; }
.result-tab { padding:5px 10px; border-radius:100px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); color:var(--text-secondary); font-size:0.72rem; cursor:pointer; white-space:nowrap; font-family:var(--font-sans); transition:all 0.2s; }
.result-tab.active { background:rgba(0,240,255,0.08); border-color:rgba(0,240,255,0.2); color:var(--neon-cyan); }

.result-content { flex:1; overflow-y:auto; min-height:0; }

/* Card View */
.card-view { display:none; flex-direction:column; }
.card-view.show { display:flex; }

.adv-meter { padding:10px 12px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); margin-bottom:8px; }
.adv-meter .am-label { font-size:0.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; display:flex; justify-content:space-between; }
.adv-meter .am-bar { height:26px; border-radius:100px; background:rgba(255,255,255,0.03); display:flex; overflow:hidden; position:relative; }
.adv-meter .am-left, .adv-meter .am-right { height:100%; display:flex; align-items:center; font-size:0.72rem; font-weight:700; color:#fff; transition:width 1s; }
.adv-meter .am-left { background:linear-gradient(90deg,var(--neon-cyan),#38bdf8); border-radius:100px 0 0 100px; padding-left:8px; }
.adv-meter .am-right { background:linear-gradient(270deg,var(--neon-purple),#c084fc); border-radius:0 100px 100px 0; padding-right:8px; justify-content:flex-end; }
.adv-meter .am-vs { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:0.55rem; font-weight:700; color:var(--text-secondary); background:var(--bg-card); padding:1px 6px; border-radius:100px; border:1px solid rgba(255,255,255,0.06); }

.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:8px; }
.stat-item { padding:8px 4px; text-align:center; border-radius:var(--radius-sm); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05); }
.stat-item .si-num { font-family:var(--font-display); font-size:1rem; font-weight:800; }
.stat-item .si-num.green { color:var(--neon-green); }
.stat-item .si-num.amber { color:var(--neon-gold); }
.stat-item .si-num.blue { color:var(--neon-cyan); }
.stat-item .si-num.purple { color:var(--neon-purple); }
.stat-item .si-label { font-size:0.58rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; margin-top:2px; }

.insight-item { padding:8px 10px; margin-bottom:4px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.015); border-left:2px solid var(--neon-cyan); font-size:0.78rem; line-height:1.55; color:var(--text-secondary); }
.insight-item:nth-child(2) { border-left-color:var(--neon-purple); }
.insight-item:nth-child(3) { border-left-color:var(--neon-green); }
.insight-item:nth-child(4) { border-left-color:var(--neon-gold); }
.insight-item:nth-child(5) { border-left-color:var(--neon-cyan); }
.insight-item .ii-tag { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-primary); display:block; margin-bottom:1px; }

/* Full Text View */
.full-text-view { display:none; flex-direction:column; flex:1; min-height:0; padding:8px 4px; }
.full-text-view.show { display:flex; }
.full-text-content { font-size:0.8rem; line-height:1.7; color:var(--text-secondary); padding:12px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.015); border:1px solid rgba(255,255,255,0.06); white-space:pre-wrap; max-height:360px; overflow-y:auto; flex:1; }

/* Result Actions */
.result-actions { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; flex-shrink:0; }
.ra-btn { padding:5px 10px; border-radius:100px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); color:var(--text-secondary); font-size:0.7rem; cursor:pointer; font-family:var(--font-sans); transition:background 0.2s; white-space:nowrap; display:flex; align-items:center; gap:3px; }
.ra-btn:active { background:rgba(255,255,255,0.06); }
.ra-btn:hover { background:rgba(255,255,255,0.06); color:var(--text-primary); }

/* Rating */
.rating-area { display:flex; gap:2px; align-items:center; margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.04); flex-shrink:0; }
.rating-area .ra-label { font-size:0.62rem; color:var(--text-muted); margin-right:4px; }
.rating-star { font-size:1rem; cursor:pointer; opacity:0.2; transition:opacity 0.2s, transform 0.15s; }
.rating-star:hover { transform:scale(1.2); opacity:0.5; }
.rating-star.active { opacity:1; }

/* ═══════════════════════════════════════
   FIREWORKS
   ═══════════════════════════════════════ */
.fireworks { position:absolute; inset:0; pointer-events:none; z-index:10; display:none; }
.fireworks.show { display:block; animation:fwFlash 0.5s; }
@keyframes fwFlash { 0%{background:rgba(255,255,255,0.04)} 100%{background:transparent} }
.fw-particle { position:absolute; width:5px; height:5px; border-radius:50%; opacity:0; animation:fwBurst 1.2s ease-out forwards; }
@keyframes fwBurst { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)} }
@keyframes fwDonePulse { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }

/* Mobile: form hides when response shows */
.analysis-form-panel.mobile-hide { display:none; }

/* RESPONSIVE */
@media (max-width:900px) {
  .nav-links { display:none; }
  .analysis-layout { grid-template-columns:1fr; height:auto; min-height:auto; gap:16px; }
  .analysis-form-panel { max-height:none; }
  .analysis-response-panel { min-height:400px; }
  .page { padding:24px 16px 90px; }
  .top-nav { padding:0 16px; }
  .support-grid { grid-template-columns:1fr; }
  .dashboard-page { flex-direction:column; }
  .dash-sidebar { width:100%; flex-direction:row; flex-wrap:wrap; gap:4px; padding:12px; }
  .dash-user { display:none; }
  .dash-nav { flex-direction:row; flex-wrap:wrap; gap:4px; }
  .dash-link { font-size:0.78rem; padding:8px 10px; }
  .form-row { grid-template-columns:1fr; }
  .hero-stats { gap:16px; }
  .response-footer { flex-direction:column; align-items:stretch; gap:6px; }
  .response-header { flex-direction:column; gap:8px; align-items:flex-start; }
  .footer-btns { display:flex; flex-wrap:wrap; gap:6px; }
  .footer-btns .toggle-btn { flex:1; text-align:center; min-width:80px; }
  .score-inputs { max-width:120px; }
  .sport-pills { gap:4px; }
  .sport-pill { font-size:0.78rem; padding:6px 10px; }
  /* Mobile thinking scene */
  .thinking-ring { width:100px; height:100px; margin:6px auto 10px; }
  .sport-figure { font-size:36px; }
  .thinking-scene { padding:24px 12px; }
  .ring-percent { font-size:18px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .analysis-response-panel { min-height:300px; }
}
@media (max-width:480px) {
  .top-nav { padding:0 12px; }
  .form-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .dash-cards { grid-template-columns:1fr; }
  .sport-pills { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .sport-pill { flex-shrink:0; }
  .form-input, .form-textarea { font-size:16px; } /* prevent iOS zoom */
  .response-footer .footer-btns { flex-direction:column; }
  .thinking-ring { width:90px; height:90px; }
  .sport-figure { font-size:32px; }
  .ring-percent { font-size:16px; }
  .thinking-stage { font-size:0.78rem; }
  .thinking-scene { padding:16px 8px; justify-content:center; }
  .stat-grid { gap:3px; }
  .stat-item .si-num { font-size:0.85rem; }
  .insight-item { font-size:0.72rem; }
  .full-text-content { font-size:0.75rem; max-height:260px; }
  .adv-meter .am-bar { height:22px; }
  .adv-meter .am-left, .adv-meter .am-right { font-size:0.65rem; }
  .response-footer .footer-btns .toggle-btn { width:100%; }
  .response-title { font-size:0.95rem; }
}

/* ============================================
   BOTTOM NAV (Mobile)
   ============================================ */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  height:var(--bottom-nav-height,68px);
  background:rgba(8,10,26,0.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border-glass, rgba(255,255,255,0.06));
  z-index:100; padding:0 4px;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  transform:translateY(0);
  box-shadow:0 -4px 30px rgba(0,0,0,0.3);
}
.bottom-nav.hidden {
  transform:translateY(100%);
}
.bottom-nav-inner {
  display:flex; align-items:center; justify-content:space-around;
  height:100%; max-width:500px; margin:0 auto;
}
.bottom-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-decoration:none; color:var(--text-muted, #666);
  font-size:0.55rem; padding:2px 8px;
  border-radius:8px; transition:all 0.2s;
  min-width:50px; -webkit-tap-highlight-color:transparent;
}
.bottom-nav-item:active { background:rgba(0,240,255,0.08); }
.bottom-nav-item.active { color:var(--neon-cyan, #0cf); }
.bottom-nav-item .nav-icon {
  font-size:1.2rem; line-height:1; transition:transform 0.2s;
}
.bottom-nav-item.active .nav-icon { transform:scale(1.15); }
.bottom-nav-item .nav-label { margin-top:1px; }

.bottom-nav-fab {
  position:relative; width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg, var(--neon-cyan, #0cf), var(--neon-purple, #b000ff));
  border:2px solid rgba(0,0,0,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; cursor:pointer;
  margin-top:-24px;
  box-shadow:0 4px 24px rgba(0,240,255,0.3);
  transition:all 0.3s; -webkit-tap-highlight-color:transparent;
  outline:none;
}
.bottom-nav-fab:active {
  transform:scale(0.92);
  box-shadow:0 2px 12px rgba(0,240,255,0.2);
}

/* Coin icon with request count badge */
.coin-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.coin-badge {
  position: absolute;
  top: -4px;
  right: -10px;
  background: var(--neon-orange, #f59e0b);
  color: #000;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

/* ============================================
   HAMBURGER MENU
   ============================================ */
.user-btn-avatar {
  display:none;
  width:18px; height:18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  color:#fff;
  font-size:0.65rem; font-weight:700;
  align-items:center; justify-content:center;
  flex-shrink:0;
}

.sidebar-section-label {
  display:flex; align-items:center; gap:6px;
  padding:16px 20px 4px;
  font-size:0.6rem;
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:#444;
}

.hamburger {
  display:none; width:40px; height:40px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px; transition:all 0.3s;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.hamburger:hover { background:rgba(255,255,255,0.08); }
.hamburger span {
  display:block; width:18px; height:2px;
  background:#888; border-radius:2px;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.hamburger.active span:nth-child(1) {
  transform:translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity:0; transform:scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform:translateY(-6px) rotate(-45deg);
}

/* ============================================
   MOBILE SIDEBAR
   ============================================ */
.mobile-sidebar {
  position:fixed; top:0; left:-300px; bottom:0;
  width:290px; max-width:85vw;
  background:rgba(10,12,30,0.98);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border-right:1px solid rgba(255,255,255,0.06);
  z-index:200;
  display:flex; flex-direction:column;
  transition:left 0.35s cubic-bezier(0.22,1,0.36,1);
  box-shadow:4px 0 40px rgba(0,0,0,0.5);
}
.mobile-sidebar.open { left:0; }

.sidebar-header-mobile {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-brand-mobile {
  font-size:1rem; font-weight:800;
  background:linear-gradient(135deg, #0cf, #7b2ff7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sidebar-close-mobile {
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.05); border:none;
  color:#888; font-size:0.85rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.sidebar-close-mobile:hover { background:rgba(255,255,255,0.1); color:#fff; }

.sidebar-user-mobile {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.04);
}
.sidebar-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, #0cf, #7b2ff7);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:0.9rem;
  flex-shrink:0;
}
.sidebar-username { font-weight:600; font-size:0.9rem; color:#eee; }
.sidebar-plan { font-size:0.7rem; color:#888; margin-top:2px; }
.sidebar-login-btn, .sidebar-register-btn {
  flex:1; text-align:center; padding:10px; border-radius:10px;
  font-size:0.85rem; font-weight:600; text-decoration:none;
}
.sidebar-login-btn {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:#ccc;
}
.sidebar-register-btn {
  background:linear-gradient(135deg, #0cf, #7b2ff7); color:#000;
}

.sidebar-nav-mobile {
  flex:1; overflow-y:auto; padding:8px 0;
}
.sidebar-link {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; color:#999; text-decoration:none;
  font-size:0.9rem; font-weight:500; transition:all 0.2s;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-link:hover { background:rgba(255,255,255,0.03); }
.sidebar-link.active {
  color:#0cf; background:rgba(0,240,255,0.06);
  border-right:3px solid #0cf;
}
.sidebar-link.small { font-size:0.8rem; color:#666; padding:10px 20px; }
.sidebar-link.admin-link { color:#ffd700; }
.sidebar-link.logout-link { color:#ff6b6b; }
.sidebar-divider {
  height:1px; margin:6px 16px;
  background:rgba(255,255,255,0.04);
}

.sidebar-lang-mobile {
  padding:12px 20px 16px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.sidebar-lang-mobile form {
  display:flex; gap:6px;
}
.lang-btn-mobile {
  flex:1; padding:10px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03); color:#888;
  font-size:0.8rem; font-weight:700; cursor:pointer;
  transition:all 0.2s;
}
.lang-btn-mobile.active {
  background:rgba(0,240,255,0.1);
  border-color:rgba(0,240,255,0.3); color:#0cf;
}

.sidebar-backdrop-mobile {
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:150; opacity:0; pointer-events:none;
  transition:opacity 0.35s;
}
.sidebar-backdrop-mobile.show { opacity:1; pointer-events:auto; }

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

/* Explicitly hide mobile elements on desktop */
@media (min-width:769px) {
  .hamburger { display:none !important; }
  .bottom-nav { display:none !important; }
  .mobile-sidebar { display:none !important; }
  .sidebar-backdrop-mobile { display:none !important; }
}

@media (max-width:768px) {
  /* Hamburger visible */
  .hamburger { display:flex; }
  .bottom-nav { display:flex; }
  .page { padding-bottom:calc(var(--bottom-nav-height,68px) + 24px); }
  main#mainContent { padding-bottom:0; }

  /* Top nav compact */
  .top-nav { padding:0 12px; gap:8px; }
  .top-nav-left { display:flex; align-items:center; gap:8px; }
  .nav-links { display:none; }
  .nav-logo { font-size:0.95rem; }
  .nav-actions { gap:4px; }
  .nav-actions .btn-sm { padding:6px 10px; font-size:0.75rem; }
  .lang-btn { padding:6px 10px; font-size:0.75rem; min-width:36px; }
  .admin-btn-desktop, .logout-btn-desktop, .login-btn-desktop { display:none; }
  .signup-btn { white-space:nowrap; font-size:0.72rem; padding:6px 10px; }
  .user-btn {
    width:36px; height:36px; min-width:36px; padding:0;
    border-radius:50%; overflow:visible;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(0,240,255,0.15);
    background:linear-gradient(135deg, rgba(0,240,255,0.1), rgba(176,0,255,0.05));
    color:var(--neon-cyan); font-weight:700; font-size:0.9rem;
    text-overflow:clip;
  }
  .user-btn .user-btn-text { display:none; }
  .user-btn .user-btn-avatar { display:flex !important; }
  .nav-actions .btn-ghost:not(.user-btn) { display:none; }

  /* Analysis page */
  .analysis-layout { grid-template-columns:1fr; }
  .analysis-form-panel { max-height:none; }
  .analysis-response-panel { min-height:350px; }

  /* Pricing */
  .pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }

  /* Home */
  .hero-section { padding:40px 16px 32px; }
  .hero-title { font-size:clamp(1.6rem,5.5vw,2.2rem); }
  .hero-stats { gap:12px; flex-wrap:wrap; justify-content:center; }
  .hero-stat { padding:8px 16px; min-width:80px; }
  .features-section { padding:40px 16px; }
  .features-grid { grid-template-columns:1fr; }
  .how-section { padding:40px 16px; }
  .how-cards { grid-template-columns:1fr; gap:16px; }
  .faq-section { padding:40px 16px; }
  .cta-section { padding:40px 16px 80px; }
  .cta-box { padding:32px 20px; }
  .pricing-mini-section { padding:40px 16px; }

  /* Profile */
  .profile-header { flex-direction:column; text-align:center; padding:20px; }
  .profile-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .profile-sidebar { flex-direction:row; overflow-x:auto; padding:8px; gap:4px; }
  .profile-sidebar .profile-link { white-space:nowrap; padding:8px 14px; font-size:0.8rem; }

  /* Support messenger */
  .messenger-page { height:calc(100vh - 80px); border-radius:0; margin:0 -16px; border:none; }
  .msg-history-overlay { width:100%; }

  /* Terms / Privacy */
  .terms-page, .privacy-page { padding:20px 16px 90px; }
  .terms-section, .privacy-section { padding:20px; }

  /* Footer */
  .footer-inner { grid-template-columns:1fr; gap:24px; }
  .footer-links { grid-template-columns:1fr 1fr; }

  /* Messages */
  .messages-container { font-size:0.8rem; }

  /* Buttons */
  .btn { padding:10px 20px; font-size:0.85rem; }
  .btn-lg { padding:12px 28px; }
}

@media (max-width:480px) {
  .top-nav { padding:0 8px; }
  .bottom-nav { height:62px; }
  .bottom-nav-fab { width:46px; height:46px; font-size:1.2rem; margin-top:-20px; }
  .bottom-nav-item { font-size:0.5rem; min-width:44px; }
  .bottom-nav-item .nav-icon { font-size:1.2rem; }
  .user-btn { width:32px; height:32px; min-width:32px; font-size:0.8rem; }
  .hero-title { font-size:1.4rem; }
  .hero-subtitle { font-size:0.85rem; }
  .sport-pills { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px; gap:4px; }
  .sport-pill { flex-shrink:0; font-size:0.75rem; padding:5px 10px; }
  .form-input, .form-textarea { font-size:16px; }
  .pricing-grid { padding:0 8px; }
  .profile-stats { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat-card { padding:14px; }
  .stat-value { font-size:1.3rem; }
  .btn-analyze { padding:16px 24px; font-size:0.95rem; }
  .section-title h1 { font-size:1.3rem; }
  .page-title { font-size:1.4rem; }
  .page-subtitle { font-size:0.8rem; }
  .top-nav-left { gap:6px; }
}

/* ============================================
   MOBILE PROFILE ADAPTIVE
   ============================================ */
@media (max-width:768px) {
  .profile-layout {
    flex-direction: column !important;
    padding: 12px !important;
    padding-bottom: calc(var(--bottom-nav-height,68px) + 24px) !important;
    gap: 16px !important;
  }
  .profile-sidebar {
    width: 100% !important;
    flex-direction: column !important;
  }
  .profile-sidebar .sidebar-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  .profile-sidebar .sidebar-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    padding: 8px 12px !important;
  }
  .profile-sidebar .profile-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }
  .profile-sidebar .profile-card .profile-avatar {
    width: 48px; height: 48px; font-size: 1.3rem; margin: 0;
  }
  .profile-sidebar .profile-card .profile-name {
    font-size: 1rem; text-align: left;
  }
  .profile-sidebar .profile-card .profile-username {
    text-align: left; margin-bottom: 0;
  }
  .profile-sidebar .profile-card .profile-joined {
    display: none;
  }
  .profile-sidebar .profile-card .level-badge,
  .profile-sidebar .profile-card .xp-bar-track,
  .profile-sidebar .profile-card .xp-label {
    display: none;
  }
  .profile-sidebar .profile-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
  .profile-main .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .profile-main .section-card {
    padding: 16px !important;
  }
  .profile-main .achievement-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .profile-main .fav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .profile-main .sub-header {
    flex-direction: column !important;
    text-align: center !important;
  }
  .profile-main .usage-bar {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .profile-main .pred-table {
    font-size: 0.78rem;
  }
  .profile-main .pred-table th,
  .profile-main .pred-table td {
    padding: 6px 8px !important;
  }
  .section-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .low-req-banner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .deposit-input-group,
  .promo-input-group {
    flex-direction: column;
  }
  .deposit-input-group .btn-cyan,
  .promo-input-group .btn-cyan {
    width: 100%;
  }
  .dash-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dash-table {
    min-width: 500px;
  }
  .fav-actions {
    flex-direction: column;
    gap: 4px;
  }
  .fav-actions .fav-btn {
    width: 100%;
    text-align: center;
  }
}
@media (max-width:480px) {
  .profile-main .stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .profile-main .achievement-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .profile-main .fav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .profile-main .stat-card {
    padding: 12px !important;
  }
  .profile-main .stat-value {
    font-size: 1.2rem !important;
  }
  .profile-main .stat-label {
    font-size: 0.65rem !important;
  }
  .profile-main .section-title {
    font-size: 0.95rem !important;
  }
  .fav-card {
    padding: 10px !important;
  }
  .fav-name {
    font-size: 0.72rem !important;
  }
  .ref-link-box {
    flex-direction: column;
    gap: 6px;
  }
  .ref-link-box .copy-btn {
    width: 100%;
  }
  .profile-sidebar .sidebar-tab {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
  }
  .profile-sidebar .sidebar-tab .tab-badge {
    display: none;
  }
}

/* ============================================
   MOBILE DASHBOARD ADAPTIVE
   ============================================ */
@media (max-width:768px) {
  .dashboard-page {
    padding-bottom: calc(var(--bottom-nav-height,68px) + 24px) !important;
  }
  .dash-sidebar {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .dash-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .dash-link {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }
  .dash-user {
    display: none !important;
  }
  .dash-main {
    padding: 0 4px !important;
  }
  .dash-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dash-card {
    padding: 12px !important;
  }
  .dash-card-value {
    font-size: 1.1rem !important;
  }
  .dash-greeting {
    font-size: 1.1rem !important;
  }
}
@media (max-width:480px) {
  .dash-cards {
    grid-template-columns: 1fr !important;
  }
  .dash-sidebar {
    padding: 6px !important;
  }
  .dash-link {
    font-size: 0.7rem !important;
    padding: 5px 8px !important;
  }
}

/* ============================================
   MOBILE SIDEBAR — IMPROVED TOUCH UX
   ============================================ */
@media (max-width:768px) {
  .mobile-sidebar {
    width: 290px;
    max-width: 80vw;
  }
  .sidebar-link {
    padding: 14px 20px;
    min-height: 48px;
    font-size: 0.95rem;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-link.small {
    padding: 12px 20px;
    min-height: 44px;
  }
  .sidebar-close-mobile {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .sidebar-user-mobile {
    padding: 14px 20px;
  }
  .sidebar-nav-mobile {
    padding: 4px 0;
  }
  .sidebar-lang-mobile {
    padding: 12px 20px 20px;
  }
  .lang-btn-mobile {
    padding: 12px;
    min-height: 44px;
  }
  .sidebar-login-btn,
  .sidebar-register-btn {
    padding: 12px;
    min-height: 44px;
  }
}

/* ============================================
   MOBILE SUPPORT ADAPTIVE
   ============================================ */
@media (max-width:768px) {
  .messenger-page {
    height: calc(100vh - 80px) !important;
    border-radius: 0 !important;
    margin: 0 -16px !important;
    border: none !important;
    box-shadow: none !important;
  }
  .msg-sidebar {
    width: 100% !important;
    right: -100% !important;
  }
  .msg-bubble {
    max-width: 92% !important;
  }
  .welcome-message {
    max-width: 100% !important;
  }
  .topic-pill {
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }
  .msg-form {
    padding: 6px 12px 10px !important;
  }
  .msg-header {
    padding: 10px 14px !important;
  }
  .msg-chat {
    padding: 12px !important;
  }
}

/* ============================================
   iOS / SAFARI FIXES
   ============================================ */
@supports (-webkit-touch-callout:none) {
  .bottom-nav {
    padding-bottom:env(safe-area-inset-bottom, 0px);
    height:calc(var(--bottom-nav-height,68px) + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav-inner {
    height:var(--bottom-nav-height,68px);
  }
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-section { padding:80px 24px; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; max-width:1000px; margin:0 auto; }
.testimonial-card { background:var(--bg-card); backdrop-filter:blur(16px); border:1px solid var(--border-glass); border-radius:var(--radius-lg); padding:28px; }
.testimonial-stars { color:var(--neon-gold); margin-bottom:12px; }
.testimonial-text { color:var(--text-secondary); font-size:0.9rem; line-height:1.7; margin-bottom:16px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.testimonial-name { font-weight:600; font-size:0.9rem; }
.testimonial-role { font-size:0.75rem; color:var(--text-muted); }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section { padding:80px 24px 120px; }
.cta-section .btn-cyan {
  font-size:1.15rem;
  padding:16px 44px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(0,240,255,0.2), rgba(0,240,255,0.08));
  border:1px solid rgba(0,240,255,0.35);
  color:var(--neon-cyan);
  font-weight:700;
  letter-spacing:0.3px;
  box-shadow:0 0 24px rgba(0,240,255,0.12);
  transition:all 0.3s;
  position:relative;
  z-index:1;
}
.cta-section .btn-cyan:hover {
  background:linear-gradient(135deg, rgba(0,240,255,0.3), rgba(0,240,255,0.15));
  box-shadow:0 0 36px rgba(0,240,255,0.25);
  transform:translateY(-2px) scale(1.03);
}
.cta-box { max-width:700px; margin:0 auto; background:linear-gradient(135deg,rgba(0,240,255,0.06),rgba(176,0,255,0.04)); border:1px solid rgba(0,240,255,0.15); border-radius:var(--radius-xl); padding:60px 40px; text-align:center; position:relative; overflow:hidden; }
.cta-box::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at 50% 50%,rgba(0,240,255,0.03)0%,transparent 50%); animation:heroGrad 15s ease-in-out infinite; }
.cta-title { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.5rem); font-weight:700; margin-bottom:16px; position:relative; }
.cta-desc { color:var(--text-secondary); margin-bottom:28px; position:relative; }

/* ============================================
   DEMO CARDS (Clickable Analysis Preview)
   ============================================ */
.demo-section { position:relative; padding:0 24px 80px; margin-top:-40px; }
.demo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; max-width:1000px; margin:0 auto; }
.demo-card { position:relative; background:var(--bg-card); backdrop-filter:blur(16px); border:1px solid var(--border-glass); border-radius:var(--radius-lg); padding:28px; cursor:pointer; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); overflow:hidden; }
.demo-card:hover { transform:translateY(-6px); border-color:rgba(0,240,255,0.2); box-shadow:0 20px 60px rgba(0,240,255,0.08); }
.demo-card:active { transform:translateY(-2px) scale(0.98); }
.demo-card-glow {
  --mouse-x:50%;
  --mouse-y:50%; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(0,240,255,0.03)0%,transparent 60%); pointer-events:none; transition:opacity 0.3s; }
.demo-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.demo-sport-icon { width:44px; height:44px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.demo-sport-icon.cyan { background:rgba(0,240,255,0.1); }
.demo-sport-icon.purple { background:rgba(176,0,255,0.1); }
.demo-sport-icon.green { background:rgba(34,255,136,0.1); }
.demo-card-badge { padding:4px 10px; border-radius:100px; font-size:0.7rem; font-weight:600; background:rgba(0,240,255,0.08); color:var(--neon-cyan); border:1px solid rgba(0,240,255,0.15); }
.demo-teams { font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:12px; line-height:1.3; }
.demo-teams .vs { color:var(--text-muted); font-weight:400; margin:0 6px; }
.demo-probability { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.demo-prob-bar { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; display:flex; }
.demo-prob-fill { height:100%; border-radius:4px; transition:width 1.5s cubic-bezier(0.4,0,0.2,1); }
.demo-prob-fill.cyan { background:linear-gradient(90deg,var(--neon-cyan),#0088ff); }
.demo-prob-fill.purple { background:linear-gradient(90deg,var(--neon-purple),#ff2d95); }
.demo-prob-fill.green { background:linear-gradient(90deg,var(--neon-green),#00cc66); }
.demo-prob-fill.gold { background:linear-gradient(90deg,var(--neon-gold),#ff8c00); }
.demo-prob-label { font-size:1.1rem; font-weight:700; min-width:40px; text-align:right; }
.demo-insights { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.demo-chip { padding:4px 10px; border-radius:100px; font-size:0.7rem; background:rgba(255,255,255,0.04); color:var(--text-secondary); border:1px solid rgba(255,255,255,0.06); }
.demo-cta { display:flex; align-items:center; gap:6px; color:var(--neon-cyan); font-size:0.85rem; font-weight:600; transition:gap 0.3s; }
.demo-card:hover .demo-cta { gap:10px; }
.demo-arrow { transition:transform 0.3s; }
.demo-card:hover .demo-arrow { transform:translateX(4px); }

/* ============================================
   SECTION LABEL
   ============================================ */
.section-label { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:100px; font-size:0.75rem; font-weight:600; color:var(--neon-cyan); background:rgba(0,240,255,0.06); border:1px solid rgba(0,240,255,0.12); margin-bottom:16px; text-transform:uppercase; letter-spacing:0.08em; }

/* ============================================

   SECTION-DESC (for features/testimonials subtitles)
   ============================================ */
.section-desc { color:var(--text-secondary); font-size:1.05rem; max-width:600px; margin:8px auto 0; line-height:1.6; }
.section-title-center { text-align:center; }

/* ============================================
   FEATURES SECTION CONTAINER
   ============================================ */
.features-section { padding:60px 24px 80px; max-width:1200px; margin:0 auto; }
.features-section .features-grid { max-width:900px; margin:0 auto; }
.features-section .section-header { margin-bottom:40px; }

/* ============================================
   HOME PAGE — LIVE DEMO WIDGET
   ============================================ */
.home-demo-section {
  padding:40px 24px 60px; max-width:1200px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.home-demo-box {
  width:100%; max-width:680px;
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-xl);
  overflow:hidden; position:relative;
}
.home-demo-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--neon-cyan),var(--neon-purple),transparent);
}
.home-demo-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border-glass);
}
.home-demo-title { font-family:var(--font-display); font-weight:600; font-size:0.9rem; }
.home-demo-status { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--neon-green); }
.home-demo-dot { width:6px; height:6px; border-radius:50%; background:var(--neon-green); animation:pulse-dot 2s ease-in-out infinite; }
.home-demo-pills {
  display:flex; gap:6px; padding:14px 20px;
  border-bottom:1px solid var(--border-glass); overflow-x:auto;
}
.home-demo-pill {
  padding:6px 14px; border-radius:100px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  color:var(--text-secondary); font-size:0.8rem; font-weight:500;
  cursor:pointer; transition:all 0.3s; white-space:nowrap;
}
.home-demo-pill:hover { background:rgba(255,255,255,0.06); color:var(--text-primary); }
.home-demo-pill.active { background:rgba(0,240,255,0.1); border-color:rgba(0,240,255,0.3); color:var(--neon-cyan); }
.home-demo-inputs {
  display:flex; gap:10px; padding:14px 20px;
  border-bottom:1px solid var(--border-glass);
}
.home-demo-input {
  flex:1; padding:10px 14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-sm); color:var(--text-primary);
  font-family:var(--font-sans); font-size:0.85rem; outline:none; transition:all 0.3s;
}
.home-demo-input:focus { border-color:rgba(0,240,255,0.4); box-shadow:0 0 0 3px rgba(0,240,255,0.08); }
.home-demo-input::placeholder { color:var(--text-muted); }
.home-demo-btn {
  display:block; width:calc(100% - 40px); margin:0 auto;
  padding:12px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(0,240,255,0.15),rgba(176,0,255,0.08));
  border:1px solid rgba(0,240,255,0.25); color:var(--text-primary);
  font-family:var(--font-display); font-size:0.95rem; font-weight:600;
  cursor:pointer; transition:all 0.3s;
}
.home-demo-btn:hover { transform:translateY(-1px); box-shadow:var(--cyan-glow); }
.home-demo-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.home-demo-output {
  padding:16px 20px; min-height:60px;
  font-size:0.85rem; line-height:1.7; color:var(--text-secondary);
  border-bottom:1px solid var(--border-glass);
}
.home-demo-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; font-size:0.78rem; color:var(--text-muted);
}
.home-demo-sample { cursor:pointer; transition:color 0.2s; }
.home-demo-sample:hover { color:var(--neon-cyan); }

/* ============================================
   HOME PAGE — HOW IT WORKS (STEPS)
   ============================================ */
.steps-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  max-width:900px; margin:24px auto 0;
}
.step-card {
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-lg);
  padding:32px 24px; text-align:center; position:relative;
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.step-card:hover { transform:translateY(-4px); border-color:rgba(0,240,255,0.15); box-shadow:0 12px 40px rgba(0,240,255,0.06); }
.step-number {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:700; color:#fff;
}
.step-icon { font-size:2.2rem; margin-bottom:12px; margin-top:8px; }
.step-title { font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.step-desc { color:var(--text-secondary); font-size:0.85rem; line-height:1.6; }

/* ============================================
   HOME PAGE — SPORT GRID + ROTATING FEED
   ============================================ */
.sport-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; max-width:900px; margin:0 auto 32px;
}
.sport-card {
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-md);
  padding:20px 16px; text-align:center; cursor:pointer;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1); position:relative;
}
.sport-card:hover { transform:translateY(-3px); border-color:rgba(0,240,255,0.2); box-shadow:0 8px 30px rgba(0,240,255,0.06); }
.sport-card-icon { font-size:1.8rem; display:block; margin-bottom:6px; }
.sport-card-name { display:block; font-weight:600; font-size:0.9rem; margin-bottom:2px; }
.sport-card-stat { display:block; font-size:0.72rem; color:var(--text-muted); }
.sport-card-hover { position:absolute; bottom:8px; left:0; right:0; font-size:0.7rem; color:var(--neon-cyan); opacity:0; transition:opacity 0.3s; }
.sport-card:hover .sport-card-hover { opacity:1; }
.sport-card:hover .sport-card-stat { opacity:0; }

.rotating-feed {
  max-width:650px; margin:8px auto 0; text-align:center;
  min-height:60px;
}
.feed-item {
  display:none; flex-direction:column; gap:8px;
  padding:16px 20px; border-radius:var(--radius-md);
  background:rgba(0,240,255,0.03); border:1px solid rgba(0,240,255,0.08);
}
.feed-item.active { display:flex; animation:fadeInUp 0.5s cubic-bezier(0.22,1,0.36,1); }
.feed-teams { font-family:var(--font-display); font-size:1rem; font-weight:600; }
.feed-teams .vs { color:var(--text-muted); font-weight:400; margin:0 6px; }
.feed-prediction { color:var(--neon-cyan); font-size:0.85rem; }
.feed-meta { font-size:0.75rem; color:var(--text-muted); }
.feed-dots { display:flex; gap:6px; justify-content:center; margin-top:12px; }
.feed-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.08); cursor:pointer; transition:all 0.3s; }
.feed-dot.active { background:var(--neon-cyan); box-shadow:0 0 8px rgba(0,240,255,0.4); width:24px; border-radius:4px; }

/* ============================================
   HOME PAGE — FAQ ACCORDION
   ============================================ */
.faq-list { max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.faq-item {
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-md);
  overflow:hidden; transition:all 0.3s;
}
.faq-item:hover { border-color:rgba(0,240,255,0.1); }
.faq-item.open { border-color:rgba(0,240,255,0.2); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; cursor:pointer;
  font-size:0.9rem; font-weight:500;
  transition:all 0.3s;
}
.faq-question:hover { color:var(--neon-cyan); }
.faq-arrow { font-size:0.7rem; transition:transform 0.3s; color:var(--text-muted); }
.faq-item.open .faq-arrow { transform:rotate(180deg); color:var(--neon-cyan); }
.faq-answer {
  max-height:0; padding:0 20px; overflow:hidden;
  color:var(--text-secondary); font-size:0.85rem; line-height:1.7;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.faq-item.open .faq-answer { max-height:200px; padding:0 20px 16px; }

/* ============================================
   HOME PAGE — MINI PRICING
   ============================================ */
.minipricing-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:800px; margin:0 auto;
}
.miniprice-card {
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:1px solid var(--border-glass); border-radius:var(--radius-lg);
  padding:28px 20px; text-align:center;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.miniprice-card:hover { transform:translateY(-3px); }
.miniprice-card.featured { border-color:rgba(0,240,255,0.3); position:relative; }
.miniprice-card.featured::before {
  content:'MOST POPULAR'; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  padding:3px 14px; border-radius:100px;
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple));
  font-size:0.65rem; font-weight:700; color:#fff; letter-spacing:0.05em;
}
.miniprice-name { font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:4px; }
.miniprice-price { font-family:var(--font-display); font-size:2rem; font-weight:800; margin:8px 0; }
.miniprice-price small { font-size:0.7rem; color:var(--text-muted); font-weight:400; }
.miniprice-desc { font-size:0.8rem; color:var(--text-secondary); margin-bottom:16px; line-height:1.5; }

/* ============================================
   HOME PAGE — ACTIVITY TICKER
   ============================================ */
.ticker-wrap {
  max-width:1200px; margin:0 auto; padding:10px 24px 40px;
  text-align:center; overflow:hidden;
}
.activity-ticker {
  display:flex; flex-direction:column; align-items:center;
  min-height:28px; position:relative;
}
.activity-slide {
  position:absolute; opacity:0; transform:translateY(10px);
  transition:all 0.5s cubic-bezier(0.22,1,0.36,1);
  font-size:0.85rem; color:var(--text-muted);
}
.activity-slide.active { position:relative; opacity:1; transform:translateY(0); }
.activity-slide .highlight { color:var(--neon-cyan); font-weight:600; }

/* ============================================
   HOME PAGE — TRUST BAR
   ============================================ */
.trust-bar {
  display:flex; align-items:center; justify-content:center;
  gap:24px; margin-top:32px; flex-wrap:wrap;
}
.trust-item { font-size:0.8rem; color:var(--text-muted); }

/* ============================================
   HOME PAGE — RESPONSIVE
   ============================================ */
@media (max-width:768px) {
  .steps-grid { grid-template-columns:1fr; gap:16px; }
  .minipricing-grid { grid-template-columns:1fr; gap:12px; max-width:360px; }
  .sport-grid { grid-template-columns:repeat(2,1fr); }
  .home-demo-inputs { flex-direction:column; gap:8px; }
  .trust-bar { gap:12px; }
  .trust-item { font-size:0.75rem; }
}
@media (max-width:480px) {
  .sport-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .sport-card { padding:14px 10px; }
  .faq-question { font-size:0.85rem; padding:14px 16px; }
  .faq-item.open .faq-answer { padding:0 16px 14px; }
  .home-demo-pills { padding:10px 14px; }
  .home-demo-inputs { padding:10px 14px; }
  .features-section { padding:40px 16px 60px; }
  .features-grid { gap:12px; }
  .feature-card { padding:24px 16px; }
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.scroll-reveal {
  opacity:0;
  transform:perspective(1200px) translateZ(-400px) translateY(60px) scale(0.85);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
  will-change:opacity,transform;
}
.scroll-reveal.revealed {
  opacity:1;
  transform:perspective(1200px) translateZ(0) translateY(0) scale(1);
}

/* Stagger delays for children */
.scroll-reveal.revealed.step-card:nth-child(1),
.scroll-reveal.revealed.sport-card:nth-child(1),
.scroll-reveal.revealed.feature-card:nth-child(1),
.scroll-reveal.revealed.testimonial-card:nth-child(1) { transition-delay:0.05s; }
.scroll-reveal.revealed.step-card:nth-child(2),
.scroll-reveal.revealed.sport-card:nth-child(2),
.scroll-reveal.revealed.feature-card:nth-child(2),
.scroll-reveal.revealed.testimonial-card:nth-child(2) { transition-delay:0.15s; }
.scroll-reveal.revealed.step-card:nth-child(3),
.scroll-reveal.revealed.sport-card:nth-child(3),
.scroll-reveal.revealed.feature-card:nth-child(3),
.scroll-reveal.revealed.testimonial-card:nth-child(3) { transition-delay:0.25s; }
.scroll-reveal.revealed.sport-card:nth-child(4),
.scroll-reveal.revealed.feature-card:nth-child(4) { transition-delay:0.35s; }
.scroll-reveal.revealed.sport-card:nth-child(5) { transition-delay:0.45s; }

/* FAQ items stagger */
.faq-item.scroll-reveal.revealed:nth-child(1) { transition-delay:0.05s; }
.faq-item.scroll-reveal.revealed:nth-child(2) { transition-delay:0.12s; }
.faq-item.scroll-reveal.revealed:nth-child(3) { transition-delay:0.19s; }
.faq-item.scroll-reveal.revealed:nth-child(4) { transition-delay:0.26s; }
.faq-item.scroll-reveal.revealed:nth-child(5) { transition-delay:0.33s; }

/* Mini pricing cards stagger */
.miniprice-card.scroll-reveal.revealed:nth-child(1) { transition-delay:0.05s; }
.miniprice-card.scroll-reveal.revealed:nth-child(2) { transition-delay:0.15s; }
.miniprice-card.scroll-reveal.revealed:nth-child(3) { transition-delay:0.25s; }

/* Low-requests banner */
.low-req-banner-analysis {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,136,0,0.04));
  border: 1px solid rgba(255,215,0,0.15);
  font-size: 0.85rem;
  margin-top: 16px; margin-bottom: 16px;
  max-width: 750px;
  margin-left: auto; margin-right: auto;
}
.low-req-banner-analysis .banner-text { flex: 1; color: #ffd700; }
.low-req-banner-analysis .banner-btn {
  padding: 6px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #ffd700, #ff8800);
  border: none; color: #000; font-weight: 700; font-size: 0.75rem;
  cursor: pointer; text-decoration: none; transition: all 0.3s;
  white-space: nowrap;
}
.low-req-banner-analysis .banner-btn:hover { transform: scale(1.05); box-shadow: 0 0 16px rgba(255,215,0,0.3); }

/* Analysis disclaimer */
.analysis-disclaimer {
  text-align: center;
  padding: 12px 16px;
  margin-top: 32px;
  font-size: 0.75rem;
  color: var(--muted-text, #888);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(255,255,255,0.05);
  line-height: 1.5;
}