/* ══════════════════════════════════════════════════════════════════════════════
   One'Bot Dashboard — home.css (Version améliorée)
══════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────────
   ANIMATIONS GLOBALES
────────────────────────────────────────────────────────────────────────────── */
@keyframes heroPulse    { 0%,100% { transform:scale(1); opacity:.8; } 50% { transform:scale(1.2); opacity:1; } }
@keyframes orbFloat1    { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-52%,-48%) scale(1.08); } }
@keyframes orbFloat2    { 0%,100% { transform:translate(-50%,-50%) scale(1); } 60% { transform:translate(-48%,-52%) scale(1.06); } }
@keyframes orbFloat3    { 0%,100% { transform:translate(-50%,-50%) scale(1); } 40% { transform:translate(-53%,-50%) scale(1.04); } }
@keyframes fadeSlideUp  { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer      { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes badgeBlink   { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes countPop     { 0% { transform:scale(.9); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes stepSlide    { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes spinSlow     { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes voteGlow     { 0%,100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.4), 0 0 40px rgba(220, 38, 38, 0.2); } 50% { box-shadow: 0 0 30px rgba(220, 38, 38, 0.6), 0 0 60px rgba(220, 38, 38, 0.3); } }
@keyframes float        { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }

/* animate-in : état initial invisible, visible dès IntersectionObserver le voit */
.animate-in { opacity:0; transform:translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.animate-in.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 90px 0 60px;
  overflow: hidden;
  text-align: center;
}

/* Orbes de fond */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}
.hero-orb-1 {
  width: 600px; height: 600px;
  top: 0; left: 50%;
  background: radial-gradient(circle, rgba(124,92,255,.26) 0%, transparent 70%);
  animation: orbFloat1 12s ease-in-out infinite;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  top: 30%; left: 20%;
  background: radial-gradient(circle, rgba(255,92,168,.14) 0%, transparent 70%);
  animation: orbFloat2 16s ease-in-out infinite;
}
.hero-orb-3 {
  width: 300px; height: 300px;
  top: 20%; right: 15%;
  background: radial-gradient(circle, rgba(53,231,255,.14) 0%, transparent 70%);
  animation: orbFloat3 14s ease-in-out infinite;
}

/* Grille de fond subtile */
.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero-content {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeSlideUp .7s ease both;
}

/* Bannière visuelle du hero (nouveau logo/bannière) */
.hero-banner-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 4px auto 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 60px rgba(124,92,255,.28), var(--shadow);
  animation: fadeSlideUp .7s ease both, float 6s ease-in-out 0.7s infinite;
}
.hero-banner-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner-frame { animation: none; }
  /* Les animations CSS pures (badge, icône, dégradé de titre, orbes de fond)
     ne sont pas couvertes par le check JS reduceMotion : on les coupe ici. */
  .hero-badge-dot,
  .pulse-icon,
  .hero-gradient,
  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3 {
    animation: none;
  }
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(124,92,255,.32);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.hero-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #57f287;
  animation: badgeBlink 2s ease-in-out infinite;
  flex-shrink: 0;
}

.pulse-icon { color: #f1c40f; animation: heroPulse 2s infinite ease-in-out; }

/* Titre */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.hero-gradient {
  background: linear-gradient(135deg, var(--violet) 0%, var(--pink) 50%, var(--cyan) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
  display: block;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 640px;
}

/* Boutons */
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-btn { transition: all .25s ease; }
.hero-btn:hover { transform: translateY(-2px); }

.btn-discord {
  background: #5865F2;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .92rem;
  transition: all var(--transition);
  box-shadow: 0 4px 18px rgba(88,101,242,.3);
}
.btn-discord:hover { background: #4752c4; box-shadow: 0 8px 24px rgba(88,101,242,.45); color:#fff; }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .92rem;
  transition: all var(--transition);
}
.btn-ghost:hover { border-color: var(--border); color: var(--text-primary); background: var(--bg-hover); }

.btn-arrow { font-size: .78rem; transition: transform var(--transition); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Social proof */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-avatars {
  display: flex;
}

.hero-avatar-placeholder {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-elevated);
  margin-left: -8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff;
}
.hero-avatars .hero-avatar-placeholder:first-child { margin-left: 0; }

.hero-social-text {
  font-size: .82rem;
  color: var(--text-muted);
}
.hero-social-text strong { color: var(--text-primary); font-weight: 700; }

/* Section widget de vote */
.hero-vote-section {
  margin-top: 44px;
  animation: fadeSlideUp .8s ease .4s both;
}

/* ══════════════════════════════════════════════════════════════════════════════
   STATS
══════════════════════════════════════════════════════════════════════════════ */
.stats-section { padding: 20px 0 48px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}

.stat-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.1); }

.stat-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(79,111,216,.06) 0%, transparent 60%);
  pointer-events: none;
}

.stat-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.stat-icon.icon-blue   { background: rgba(124,92,255,.15); color: var(--violet); }
.stat-icon.icon-purple { background: rgba(155,89,182,.15); color: #9b59b6; }
.stat-icon.icon-green  { background: rgba(87,242,135,.15); color: #57f287; }
.stat-icon.icon-yellow { background: rgba(241,196,15,.15); color: #f1c40f; }

.stat-info { display: flex; flex-direction: column; min-width: 0; }

.stat-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.5px;
  line-height: 1;
  animation: countPop .4s ease both;
}

.stat-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION HEADER (réutilisable)
══════════════════════════════════════════════════════════════════════════════ */
.section-header {
  text-align: center;
  margin-bottom: 52px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-subtle);
  border: 1px solid var(--border);
  padding: 5px 16px;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.section-eyebrow i { font-size: .72rem; }

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.5px;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: .95rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RÉCOMPENSES DE VOTE
══════════════════════════════════════════════════════════════════════════════ */
/* Section récompenses de vote */
.vote-rewards-section {
  padding: 50px 0 70px;
}

.vote-cta {
  text-align: center;
  margin-top: 40px;
}
.vote-motivation {
  font-size: 1rem;
  color: var(--text-secondary);
}
.vote-motivation strong { color: var(--text-primary); }
.vote-cta .btn { margin-top: 16px; }

.vote-inline-btn { margin-top: 12px; display: inline-flex; }

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════════════════════════════ */
.features-section { padding: 40px 0 70px; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Couleurs de survol dynamiques */
.feature-card:has(.icon-blue):hover   { border-color: rgba(124,92,255,.4);  box-shadow: 0 12px 28px rgba(124,92,255,.1); }
.feature-card:has(.icon-purple):hover { border-color: rgba(155,89,182,.4);  box-shadow: 0 12px 28px rgba(155,89,182,.08); }
.feature-card:has(.icon-green):hover  { border-color: rgba(87,242,135,.4);  box-shadow: 0 12px 28px rgba(87,242,135,.08); }
.feature-card:has(.icon-yellow):hover { border-color: rgba(241,196,15,.4);  box-shadow: 0 12px 28px rgba(241,196,15,.08); }
.feature-card:has(.icon-red):hover    { border-color: rgba(237,66,69,.4);   box-shadow: 0 12px 28px rgba(237,66,69,.08); }
.feature-card:has(.icon-cyan):hover   { border-color: rgba(0,184,212,.4);   box-shadow: 0 12px 28px rgba(0,184,212,.08); }
.feature-card:has(.icon-pink):hover   { border-color: rgba(233,30,99,.4);   box-shadow: 0 12px 28px rgba(233,30,99,.08); }
.feature-card:has(.icon-orange):hover { border-color: rgba(230,126,34,.4);  box-shadow: 0 12px 28px rgba(230,126,34,.08); }

/* Effet shine au hover */
.feature-card-shine {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.feature-card:hover .feature-card-shine { opacity: 1; }

.feature-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.feature-icon.icon-blue   { background: rgba(124,92,255,.14);  color: var(--violet); }
.feature-icon.icon-purple { background: rgba(155,89,182,.12);  color: #9b59b6; }
.feature-icon.icon-green  { background: rgba(87,242,135,.12);  color: #57f287; }
.feature-icon.icon-yellow { background: rgba(241,196,15,.12);  color: #f1c40f; }
.feature-icon.icon-red    { background: rgba(237,66,69,.12);   color: #ed4245; }
.feature-icon.icon-cyan   { background: rgba(0,184,212,.12);   color: #00b8d4; }
.feature-icon.icon-pink   { background: rgba(233,30,99,.12);   color: #e91e63; }
.feature-icon.icon-orange { background: rgba(230,126,34,.12);  color: #e67e22; }

.feature-content h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.feature-content p  { font-size: .855rem; color: var(--text-secondary); line-height: 1.55; }

/* Carte Premium */
.feature-card.premium-highlight {
  background: linear-gradient(145deg, rgba(36,46,92,.45), rgba(26,34,71,.25));
  border-color: rgba(241,196,15,.2);
}
.feature-card.premium-highlight:hover { border-color: rgba(241,196,15,.55); box-shadow: 0 14px 34px rgba(241,196,15,.1); }

.feature-icon.icon-gold-prem { background: rgba(241,196,15,.15); color: #f1c40f; }

.badge-premium {
  position: absolute;
  top: 18px; right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #f1c40f, #e67e22);
  color: #111830;
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .4px;
  box-shadow: 0 2px 8px rgba(241,196,15,.3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   COMMENT ÇA MARCHE
══════════════════════════════════════════════════════════════════════════════ */
.how-section { padding: 40px 0 70px; }

.how-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.how-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  animation: stepSlide .5s ease both;
}

.how-step:nth-child(2) { animation-delay: .15s; }
.how-step:nth-child(3) { animation-delay: .30s; }

.how-step-number {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--glass-border);
  line-height: 1;
  margin-bottom: -8px;
  letter-spacing: -2px;
}

.how-step-body {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  width: 100%;
  transition: border-color var(--transition), transform var(--transition);
  position: relative;
  z-index: 1;
}

.how-step-body:hover { border-color: var(--border); transform: translateY(-4px); }

.how-step-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--accent-subtle);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0 auto 14px;
}

.how-step-title { font-size: .95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.how-step-desc  { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; }

/* Connecteur entre les étapes */
.how-step-connector {
  position: absolute;
  top: 50%;
  right: -24px;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--border), transparent);
  z-index: 0;
}
.how-step.last .how-step-connector { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   PARTENAIRES (aperçu accueil)
══════════════════════════════════════════════════════════════════════════════ */
.home-partners-section { padding: 20px 0 60px; }

.home-partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.home-partner-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.home-partner-card:hover {
  border-color: var(--border);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.home-partner-logo {
  width: 40px; height: 40px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
}

.home-partner-logo-placeholder {
  width: 40px; height: 40px;
  border-radius: var(--radius-xs);
  background: var(--accent-subtle);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

.home-partner-info { flex: 1; min-width: 0; }
.home-partner-name { display: block; font-size: .875rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-partner-type { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

.home-partner-vip {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(245,197,66,.18);
  border: 1px solid rgba(245,197,66,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem;
  color: #f5c542;
  flex-shrink: 0;
}

.home-partners-cta-wrap { text-align: center; }

.home-partners-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--transition);
}
.home-partners-cta:hover { gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════════════════════════════ */
.final-cta { padding: 60px 0 100px; }

.cta-box {
  position: relative;
  background: linear-gradient(135deg, rgba(124,92,255,.14) 0%, rgba(11,11,20,.6) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124,92,255,.25);
  border-radius: calc(var(--radius) * 1.5);
  padding: 64px 40px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}
.cta-orb-1 { width: 300px; height: 300px; bottom: -80px; left: 10%; background: radial-gradient(circle, rgba(124,92,255,.22) 0%, transparent 70%); }
.cta-orb-2 { width: 200px; height: 200px; top: -40px; right: 15%; background: radial-gradient(circle, rgba(255,92,168,.16) 0%, transparent 70%); }

.cta-inner { position: relative; z-index: 1; }

.cta-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: var(--accent-subtle);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--accent);
  margin: 0 auto 20px;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -.5px;
}

.cta-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn-lg { padding: 14px 32px; font-size: .97rem; }

.btn-vote-cta {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(255, 92, 168, 0.3);
  transition: all var(--transition);
}

.btn-vote-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 92, 168, 0.4);
}

/* Mini stats sous le CTA */
.cta-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-stat { display: flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--text-muted); }
.cta-stat strong { color: var(--text-primary); font-weight: 700; }
.cta-stat-sep { color: var(--glass-border); }

/* Le footer est un composant PARTAGÉ (voir layout.pug + core.css) : il ne doit
   jamais être redéfini ici. L'ancienne version (plusieurs colonnes de liens,
   réseaux sociaux...) ne correspond plus au markup réel du layout et entrait
   en conflit avec les styles de core.css (tailles de logo différentes,
   structure différente) — elle a donc été retirée. */

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { padding: 60px 0 40px; }
  .hero-banner-frame { max-width: 320px; margin-bottom: 18px; }
  .hero-vote-box { padding: 24px 20px; }
  .vote-rewards-section { padding: 40px 0 60px; }
  .vote-rewards-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
  .how-steps { flex-direction: column; gap: 24px; max-width: 400px; }
  .how-step-connector { display: none; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-brand { flex: none; }
  .footer-links-group { gap: 28px; }
  .cta-box { padding: 44px 24px; }
  .features-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-vote-box { padding: 20px 16px; margin-top: 24px; }
  .hero-vote-text { font-size: 0.95rem; }
  .btn-vote { padding: 10px 24px; font-size: 0.85rem; width: 100%; }
  .vote-rewards-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .footer-bottom { flex-direction: column; text-align: center; }
}