/* ===================================================
   DECIDE AÍ — Landing Page v2.0
   Dark Luxury Cinematic Design
=================================================== */

:root {
  --bg:        #080A0F;
  --surface:   #0E1118;
  --elevated:  #141720;
  --border:    #1E2330;
  --border-l:  rgba(255,255,255,0.07);
  --primary:   #6C63FF;
  --primary-l: rgba(108,99,255,0.15);
  --purple:    #B45CF8;
  --gold:      #FFB347;
  --teal:      #00E5A0;
  --red:       #FF4D6D;
  --cyan:      #00B4D8;
  --green:     #00C853;
  --text:      #F0F2FF;
  --text-2:    #8890A8;
  --text-3:    #4A5168;
  --glass:     rgba(14,17,24,0.85);
}

/* ---- Reset ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  line-height: 1.6;
  max-width: 100vw;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { font-family: 'Syne', sans-serif; line-height: 1.2; }

/* ---- Ambient Background ---- */
.bg-grid {
  position: fixed; inset: 0; z-index: -3;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 44px 44px;
}
.orb {
  position: fixed; border-radius: 50%; filter: blur(80px);
  z-index: -2; pointer-events: none;
}
.orb-1 { width:500px; height:500px; background:rgba(108,99,255,0.07); top:-150px; left:-100px; animation:orbFloat 18s infinite ease-in-out; }
.orb-2 { width:400px; height:400px; background:rgba(255,179,71,0.05); bottom:0; right:-100px; animation:orbFloat 22s infinite ease-in-out reverse; }
.orb-3 { width:300px; height:300px; background:rgba(0,229,160,0.04); top:50%; left:50%; animation:orbFloat 14s infinite ease-in-out 3s; }
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px,30px) scale(1.1); }
}

/* ---- Utility ---- */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-gold {
  background: linear-gradient(135deg, var(--gold), #FF7043);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ms-gradient {
  background: linear-gradient(135deg, var(--green), var(--teal));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Offset de scroll para todas as seções âncora — desconta navbar fixa */
#features, #templates, #megasena, #nomes, #rifas, #apoie {
  scroll-margin-top: 80px;
}
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; }
.section-header p { color: var(--text-2); font-size: 17px; max-width: 600px; margin: 0 auto; }
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 50px; font-size: 12px;
  font-weight: 700; letter-spacing: 1.5px; margin-bottom: 20px;
  color: var(--primary); border: 1px solid rgba(108,99,255,0.3);
  background: rgba(108,99,255,0.08);
}

/* ============================
   NAVBAR
============================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  backdrop-filter: blur(12px);
  padding: 0 32px;
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 40px;
  height: 72px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px;
  flex-shrink: 0;
}
.logo-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--red));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 0 0 16px rgba(108,99,255,0.5);
  animation: spinDice 8s linear infinite;
  flex-shrink: 0;
}
.logo-icon.sm { width: 32px; height: 32px; font-size: 16px; }
@keyframes spinDice {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.logo-badge {
  background: var(--primary-l); border: 1px solid rgba(108,99,255,0.3);
  color: var(--primary); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 50px; font-family: 'DM Sans', sans-serif;
}
.nav-links {
  display: flex; list-style: none; gap: 32px; flex: 1;
  justify-content: center;
}
.nav-links a {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--text-2);
  transition: color 0.2s;
}
.nav-links a i { font-size: 12px; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.btn-outline {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border-l); color: var(--text-2);
  transition: all 0.2s;
}
.btn-outline:hover { border-color: var(--primary); color: var(--text); }
.btn-primary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 22px; border-radius: 8px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: white; transition: all 0.3s;
  box-shadow: 0 0 20px rgba(108,99,255,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(108,99,255,0.5); }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }
.mobile-menu {
  display: none; flex-direction: column; padding: 16px 0 24px;
  border-top: 1px solid var(--border);
}
.mobile-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; font-size: 15px; font-weight: 600;
  color: var(--text-2); border-bottom: 1px solid var(--border);
}
.mobile-menu a i { font-size: 14px; width: 18px; text-align: center; }
.mobile-menu a:hover { color: var(--text); }
.mobile-login {
  margin-top: 16px; color: var(--primary) !important;
  border-bottom: none !important;
}
.mobile-cta {
  margin-top: 12px; background: linear-gradient(135deg, var(--primary), var(--purple));
  color: white !important; padding: 14px 24px !important;
  border-radius: 8px; text-align: center; font-weight: 700; border: none !important;
}
.mobile-menu.open { display: flex; }

/* ============================
   HERO — novo design
============================ */
.hero {
  min-height: 100vh;
  width: 100%; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}

/* Wrapper: texto esq + cards dir */
.hero-inner-grid {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  padding: 90px 40px 24px 48px;
  box-sizing: border-box;
}

/* Coluna esquerda: texto fixo */
.hero-left-col {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  z-index: 1;
  overflow: visible;
}

/* Coluna direita: dois grids empilhados */
.hero-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
  padding-top: 0;
  gap: 0;
}

/* Linha 1: Mega Sena + Decide Aí — alinhado à direita */
.hero-top-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 12px;
  align-items: start;
  width: 80%;
  margin-left: auto;
}

/* Spacer entre top e bottom — empurra roleta/rifa/nomes para depois de possibilidades */
.hero-right-col .hero-spacer {
  flex: 1;
  min-height: 24px;
}

/* Linha 2: Roleta + Rifa + Nomes — após possibilidades */
.hero-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.hero-bottom-row .hc-names {
  display: flex;
  flex-direction: column;
}

/* Marquee: fora do grid, largura total */
.hero-marquee-wrap {
  width: 100%;
  margin-top: auto;
}
.hero-scroll-hint {
  text-align: center; padding: 16px 0;
}

/* Glows de fundo */
.hero-glow {
  position: absolute; border-radius: 50%; filter: blur(100px);
  pointer-events: none; z-index: 0;
}
.hero-glow-purple { width: 600px; height: 600px; background: rgba(108,99,255,0.12); top: -100px; left: -100px; }
.hero-glow-gold   { width: 400px; height: 400px; background: rgba(255,179,71,0.07); top: 100px; right: -80px; }
.hero-glow-teal   { width: 300px; height: 300px; background: rgba(0,229,160,0.06); bottom: 100px; left: 40%; }

/* Badge topo */
.hero-top-badge {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 50px; margin-bottom: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--text-2); border: 1px solid var(--border-l);
  background: rgba(255,255,255,0.03);
  white-space: normal;
  width: fit-content;
  max-width: 100%;
  line-height: 1.5;
  text-align: center;
  justify-content: center;
}
.htb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  box-shadow: 0 0 8px var(--teal);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }

/* Bloco central */
.hero-center {
  position: relative; z-index: 1;
  text-align: left; max-width: 100%;
  margin-bottom: 0; min-width: 0;
}
.hero-title {
  font-size: clamp(40px, 5vw, 72px); font-weight: 800;
  letter-spacing: -2px; line-height: 1.05; margin-bottom: 24px;
  color: var(--text);
}
.hero-title-line2 { display: block; }
.ht-word { display: inline-block; }
.ht-w1 {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-right: 16px;
}
.ht-w2 {
  background: linear-gradient(135deg, var(--gold), #FF7043);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: clamp(14px, 1.2vw, 16px); color: var(--text-2);
  line-height: 1.7; margin-bottom: 28px; max-width: 100%;
}
.hero-cta-row {
  display: flex; gap: 12px; align-items: center;
  justify-content: flex-start; flex-wrap: wrap;
  flex-direction: row;
}
.btn-hero-main {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 28px; border-radius: 50px; font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 14px;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: white; box-shadow: 0 0 30px rgba(108,99,255,0.4);
  transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  width: fit-content;
}
.btn-hero-main:hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 8px 36px rgba(108,99,255,0.6); }
.btn-hero-ghost {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 20px; border-radius: 50px; font-weight: 700; font-size: 13px;
  color: var(--text-2); border: 1px solid var(--border-l);
  transition: all 0.2s; background: rgba(255,255,255,0.03);
  white-space: nowrap;
}
.btn-hero-ghost:hover { color: var(--text); border-color: rgba(108,99,255,0.4); background: var(--primary-l); }

/* hero-cards-grid — mantido para compatibilidade mobile */
.hero-cards-grid { display: contents; }
.hc-card {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.hc-card:hover { transform: translateY(-5px); border-color: rgba(108,99,255,0.3); }
.hc-card-tag {
  font-size: 10px; font-weight: 700; color: var(--primary);
  margin-bottom: 8px; display: flex; align-items: center; gap: 4px;
}

.hc-roulette {
  display: flex; flex-direction: column; justify-content: space-between;
}
.hc-roulette-visual { display: flex; justify-content: center; padding: 8px 0; }
.hc-ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgba(108,99,255,0.3);
  position: relative; display: flex; align-items: center; justify-content: center;
  animation: spin 5s linear infinite;
}
.hc-ring-center {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: white; animation: spin 5s linear infinite reverse;
  box-shadow: 0 0 16px rgba(108,99,255,0.6);
}
.hc-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.hcd-1 { top:-3px; left:50%; transform:translateX(-50%); }
.hcd-2 { bottom:-3px; left:50%; transform:translateX(-50%); }
.hcd-3 { left:-3px; top:50%; transform:translateY(-50%); }
.hcd-4 { right:-3px; top:50%; transform:translateY(-50%); }
.hcd-5 { top:11%; right:11%; }
.hcd-6 { bottom:11%; left:11%; }
.hc-result {
  background: linear-gradient(135deg, rgba(108,99,255,0.15), rgba(180,92,248,0.08));
  border: 1px solid rgba(108,99,255,0.25); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.hc-result-emoji { font-size: 16px; }
.hc-moods { display: flex; gap: 6px; flex-wrap: wrap; }
.hcm {
  padding: 4px 10px; border-radius: 50px; font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.hcm-active { background: var(--primary-l); border-color: var(--primary); color: var(--text); }
.hcm-green  { border-color: rgba(0,200,83,0.3); color: var(--green); }
.hcm-orange { border-color: rgba(255,179,71,0.3); color: var(--gold); }
.hcm-red    { border-color: rgba(255,77,109,0.3); color: var(--red); }

.hc-mega {
  border-color: rgba(0,200,83,0.2);
  display: flex; flex-direction: column; gap: 6px;
}
.hc-mega:hover { border-color: rgba(0,200,83,0.4); }
.hc-ms-balls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.hc-ball {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #009C3B);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 9px; color: white;
  box-shadow: 0 2px 6px rgba(0,200,83,0.4);
}
.hcb-hot { background: linear-gradient(135deg,#FF4D6D,#FFB347) !important; box-shadow: 0 3px 10px rgba(255,77,109,0.4) !important; }
.hcb-cold { background: linear-gradient(135deg,#00B4D8,#6C63FF) !important; box-shadow: 0 3px 10px rgba(0,180,216,0.4) !important; }
.hc-ms-score { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.hcms-label { font-size: 9px; color: var(--text-3); white-space: nowrap; }
.hcms-bar { flex:1; background: var(--border); border-radius: 50px; height: 4px; overflow: hidden; }
.hcms-fill { width: 78%; height: 100%; background: linear-gradient(90deg, var(--green), var(--teal)); border-radius: 50px; }
.hcms-val { font-size: 10px; font-weight: 800; color: var(--green); white-space: nowrap; }
.hc-ms-mini-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.hcms-stat-col {
  background: var(--surface); border-radius: 8px; padding: 6px 8px;
  border: 1px solid var(--border);
}
.hcms-stat-title {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; margin-bottom: 4px;
  color: var(--text-2);
}
.hcms-stat-nums { font-size: 10px; font-weight: 700; color: var(--text-2); line-height: 1.4; }
.hc-ms-last {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(255,179,71,0.06); border: 1px solid rgba(255,179,71,0.2);
  font-size: 10px; color: var(--text-2); line-height: 1.5;
}
.hc-ms-last strong { color: var(--gold); }
.hc-ms-source {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--green); font-weight: 600;
  opacity: 0.9; flex-wrap: wrap;
}
.hc-ms-age {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: #FF6B6B; font-weight: 700;
  margin-top: 2px;
}

.hc-stats {
  display: flex; flex-direction: column; gap: 14px;
}
.hc-stats-title { font-family: 'Syne',sans-serif; font-weight: 800; font-size: 15px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hc-stats-title i { color: var(--primary); font-size: 14px; }
.hc-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hcs-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 4px; text-align: center;
}
.hcs-num { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; color: var(--text); }
.hcs-lbl { font-size: 8px; color: var(--text-3); font-weight: 600; }
.hcs-free { color: var(--teal); }
.hcs-priv { color: var(--primary); }
.hc-platforms {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.hc-platforms span {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--text-3);
}

.hc-rifa {
  border-color: rgba(255,179,71,0.15);
}
.hc-rifa:hover { border-color: rgba(255,179,71,0.35); }
.hc-rifa-range {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}
.hrr-box { flex:1; text-align: center; }
.hrr-lbl { font-size: 10px; color: var(--text-3); font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.hrr-val { font-family:'Syne',sans-serif; font-weight:800; font-size:26px; color:var(--text-2); }
.hc-rifa-winner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(255,179,71,0.08); border: 1px solid rgba(255,179,71,0.25);
  color: var(--text-2);
}
.hc-rifa-winner i { color: var(--gold); }
.hc-rifa-winner strong { color: var(--gold); font-size: 16px; }

.hc-names {
  border-color: rgba(180,92,248,0.15);
  display: flex; flex-direction: column; gap: 8px;
}
.hc-names:hover { border-color: rgba(180,92,248,0.35); }
.hc-names-result {
  font-family:'Syne',sans-serif; font-weight:800; font-size:16px;
  text-align: center; padding: 12px; border-radius: 12px;
  background: rgba(180,92,248,0.08); border: 1px solid rgba(180,92,248,0.2);
  margin-bottom: 10px; color: var(--text);
}
.hc-names-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.hc-names-filters span {
  padding: 4px 10px; border-radius: 50px; font-size: 11px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.hnf-active { background: rgba(180,92,248,0.1) !important; border-color: rgba(180,92,248,0.3) !important; color: var(--purple) !important; }
.hc-names-history { font-size: 11px; color: var(--text-3); text-align: center; }

/* Marquee do hero */
.hero-marquee-wrap {
  position: relative; z-index: 1;
  width: 100%; overflow: hidden; padding: 20px 0;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  border-top: 1px solid var(--border);
  margin-top: 32px;
}
.hero-marquee-track {
  display: flex; align-items: center; gap: 20px; width: max-content;
  animation: marqueeRun 35s linear infinite;
}
.hero-marquee-track span {
  font-size: 13px; font-weight: 700; color: var(--text-2); white-space: nowrap;
}
.hm-dot { color: var(--text-3) !important; font-weight: 400 !important; }
@keyframes marqueeRun {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hero-scroll-hint {
  position: relative; z-index: 1;
  color: var(--text-3); font-size: 18px; padding: 20px 0;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatCard {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============================
   FEATURES OVERVIEW
============================ */
.features-overview { padding: 120px 0; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 20px;
  align-items: start;
  /* feature-large usa align-self: stretch para preencher as 2 linhas */
}
/* Linha 1: Roleta (col 1-2 span) + Mega Sena (col 3) */
/* Linha 2: Roleta continua (col 1-2) + Templates (col 3) */
/* Linha 3+: demais cards nas 3 colunas normalmente */
.feature-card {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.feature-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 20px;
  background: linear-gradient(135deg, rgba(108,99,255,0.05), transparent);
  opacity: 0; transition: 0.3s;
}
.feature-card:hover { transform: translateY(-4px); border-color: rgba(108,99,255,0.3); }
.feature-card:hover::before { opacity: 1; }
/* Roleta: col 1-2, linhas 1-2, altura total */
.feature-large {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Mega Sena: col 3, linha 1 */
.feature-mega {
  grid-column: 3;
  grid-row: 1;
}
/* Templates: col 3, linha 2 — diretamente abaixo de Mega Sena */
.feature-below-mega {
  grid-column: 3;
  grid-row: 2;
}
.feature-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: white; margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.feature-card h3 { font-size: 19px; margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: var(--text-2); line-height: 1.65; margin-bottom: 16px; }
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.feature-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.feature-list li i { color: var(--teal); font-size: 11px; }
.feature-tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ftag {
  padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border);
}
.ftag-green { border-color: rgba(0,200,83,0.3); color: var(--green); }
.ftag-orange { border-color: rgba(255,179,71,0.3); color: var(--gold); }
.ftag-red { border-color: rgba(255,77,109,0.3); color: var(--red); }
.balls-preview {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.ball {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  box-shadow: 0 4px 12px rgba(0,200,83,0.4);
}
.feature-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  transition: gap 0.2s;
}
.feature-link:hover { gap: 10px; }
.color-swatches { display: flex; gap: 8px; margin-top: 12px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.privacy-badges {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.privacy-badges span {
  padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600;
  background: rgba(0,229,160,0.08); border: 1px solid rgba(0,229,160,0.2);
  color: var(--teal); display: flex; align-items: center; gap: 6px;
}
.platform-icons { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.platform-icons span {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}

/* ---- Feature draw mode mini-cards ---- */
.feature-draw-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 18px;
}
.fdm-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface);
}
.fdm-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: white;
}
.fdm-traditional .fdm-icon { background: linear-gradient(135deg, var(--primary), var(--purple)); }
.fdm-best3 .fdm-icon       { background: linear-gradient(135deg, var(--gold), #FF7043); }
.fdm-best3 { border-color: rgba(255,179,71,0.25); }
.fdm-traditional { border-color: rgba(108,99,255,0.25); }
.fdm-card strong { display: block; font-size: 13px; margin-bottom: 3px; }
.fdm-card span   { font-size: 12px; color: var(--text-2); line-height: 1.4; }

/* ============================
   MOODS
============================ */
.moods-section { padding: 80px 0; background: linear-gradient(to bottom, transparent, rgba(108,99,255,0.04), transparent); }
.moods-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.mood-card {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 20px; padding: 30px 24px; text-align: center;
  transition: all 0.3s;
}
.mood-card:hover { transform: translateY(-6px); }
.mood-icon { font-size: 40px; margin-bottom: 14px; }
.mood-card h3 { font-size: 18px; margin-bottom: 10px; }
.mood-card p { font-size: 13px; color: var(--text-2); margin-bottom: 20px; line-height: 1.5; }
.mood-bar { background: var(--border); border-radius: 50px; height: 6px; overflow: hidden; }
.mood-fill { height: 100%; border-radius: 50px; }
.mood-normal:hover { border-color: rgba(108,99,255,0.4); }
.mood-lucky:hover { border-color: rgba(0,200,83,0.4); }
.mood-serious:hover { border-color: rgba(255,179,71,0.4); }
.mood-dare:hover { border-color: rgba(255,77,109,0.4); }

/* ============================
   DRAW MODES SECTION
============================ */
.draw-modes-section { padding: 120px 0; background: linear-gradient(to bottom, transparent, rgba(108,99,255,0.04), transparent); }

.dm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-bottom: 32px;
}
.dm-card {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 24px; padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
  transition: all 0.3s;
}
.dm-card:hover { transform: translateY(-4px); }
.dm-traditional { border-color: rgba(108,99,255,0.2); }
.dm-traditional:hover { border-color: rgba(108,99,255,0.4); box-shadow: 0 20px 50px rgba(108,99,255,0.08); }
.dm-best3 { border-color: rgba(255,179,71,0.2); }
.dm-best3:hover { border-color: rgba(255,179,71,0.4); box-shadow: 0 20px 50px rgba(255,179,71,0.08); }

.dm-card-top { display: flex; align-items: center; justify-content: space-between; }
.dm-icon-wrap {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: white;
}
.dm-icon-purple { background: linear-gradient(135deg, var(--primary), var(--purple)); box-shadow: 0 8px 20px rgba(108,99,255,0.4); }
.dm-icon-gold   { background: linear-gradient(135deg, var(--gold), #FF7043); box-shadow: 0 8px 20px rgba(255,179,71,0.4); }

.dm-badge {
  padding: 4px 14px; border-radius: 50px; font-size: 11px; font-weight: 700;
  background: rgba(108,99,255,0.1); border: 1px solid rgba(108,99,255,0.3); color: var(--primary);
}
.dm-badge-gold { background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.3); color: var(--gold); }

.dm-card h3 { font-size: 26px; }
.dm-desc { font-size: 14px; color: var(--text-2); line-height: 1.65; }

/* Flow steps */
.dm-flow { display: flex; flex-direction: column; gap: 0; }
.dm-step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.dm-step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-l); border: 1px solid rgba(108,99,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne',sans-serif; font-weight: 800; font-size: 12px; color: var(--primary);
}
.dm-step-num i { font-size: 11px; }
.dm-step-win { background: linear-gradient(135deg, var(--teal), var(--cyan)); border: none; color: #080A0F; }
.dm-step-result { background: rgba(0,229,160,0.06); border-color: rgba(0,229,160,0.25); }
.dm-step-text { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.dm-step-text strong { color: var(--text); }
.dm-flow-arrow { color: var(--text-3); font-size: 12px; padding: 4px 0 4px 20px; }

/* Example */
.dm-example { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.dm-ex-label { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 1px; margin-bottom: 10px; }
.dm-ex-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dm-opt {
  padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 600;
  background: var(--elevated); border: 1px solid var(--border); color: var(--text-2);
}
.dm-opt-win {
  background: linear-gradient(135deg, rgba(0,229,160,0.15), rgba(0,180,216,0.1));
  border-color: rgba(0,229,160,0.35); color: var(--teal);
}
.dm-ex-verdict {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
}
.dm-verdict-traditional {
  background: rgba(0,229,160,0.07); border: 1px solid rgba(0,229,160,0.25); color: var(--teal);
}

/* Rounds */
.dm-rounds { display: flex; flex-direction: column; gap: 8px; }
.dm-round {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface);
}
.dm-round-win  { border-color: rgba(0,229,160,0.25); background: rgba(0,229,160,0.05); }
.dm-round-lose { border-color: rgba(108,99,255,0.2); }
.dm-round-final { border-color: rgba(255,179,71,0.3); background: rgba(255,179,71,0.05); }
.dm-round-label { font-size: 11px; font-weight: 700; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.dm-round-label i { font-size: 10px; }
.dm-round-result { font-size: 13px; color: var(--text-2); }
.dr-winner { font-weight: 700; color: var(--teal); }
.dr-champion {
  color: var(--gold) !important; font-size: 14px;
  text-shadow: 0 0 12px rgba(255,179,71,0.4);
}

/* Scoreboard */
.dm-scoreboard { display: flex; gap: 12px; }
.dm-score-item {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.dm-score-win { border-color: rgba(255,179,71,0.3); background: rgba(255,179,71,0.06); }
.dsi-emoji { font-size: 20px; }
.dsi-name { font-size: 13px; font-weight: 600; flex: 1; }
.dsi-pts { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; color: var(--gold); }
.dsi-pts span { font-size: 11px; font-weight:600; color:var(--text-3); }
.dsi-pts-low { color: var(--text-3); }

/* Champion banner */
.dm-champion-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 12px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, rgba(255,179,71,0.12), rgba(255,112,67,0.08));
  border: 1px solid rgba(255,179,71,0.35); color: var(--gold);
}
.dm-champion-banner i { font-size: 16px; }

/* Tiebreak note */
.dm-tiebreak-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px; font-size: 13px;
  background: rgba(108,99,255,0.05); border: 1px solid rgba(108,99,255,0.2);
  color: var(--text-2);
}
.dm-tiebreak-note i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.dm-tiebreak-note strong { display: block; color: var(--text); margin-bottom: 3px; }

/* Ideal for */
.dm-ideal {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: 12px; font-size: 13px; color: var(--text-2); line-height: 1.5;
  background: rgba(108,99,255,0.05); border: 1px solid rgba(108,99,255,0.15);
}
.dm-ideal i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

/* Availability note */
.dm-availability {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 24px; border-radius: 14px;
  background: rgba(0,229,160,0.05); border: 1px solid rgba(0,229,160,0.2);
}
.dm-availability i { color: var(--teal); font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.dm-availability p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.dm-availability strong { color: var(--text); }

/* ============================
   TEMPLATES
============================ */
.templates-section { padding: 120px 0; }
/* ---- Template customize banner ---- */
.tpl-customize-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(108,99,255,0.08), rgba(0,229,160,0.05));
  border: 1px solid rgba(108,99,255,0.25);
  border-radius: 20px; padding: 24px 28px;
  margin-bottom: 48px;
}
.tcb-left {
  display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 260px;
}
.tcb-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
}
.tcb-left strong { display: block; font-size: 15px; margin-bottom: 6px; color: var(--text); }
.tcb-left p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }
.tcb-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tcb-step {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 50px; font-size: 13px; font-weight: 600;
  background: var(--elevated); border: 1px solid var(--border); color: var(--text-2);
  white-space: nowrap;
}
.tcb-step-go {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  border-color: transparent; color: white;
  box-shadow: 0 4px 16px rgba(108,99,255,0.35);
}
.tcb-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-l); border: 1px solid rgba(108,99,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne',sans-serif; font-weight: 800; font-size: 11px;
  color: var(--primary); flex-shrink: 0;
}
.tcb-num-go { background: rgba(255,255,255,0.2); border-color: transparent; color: white; }
.tcb-arrow { color: var(--text-3); font-size: 12px; }

.template-categories { display: flex; flex-direction: column; gap: 48px; }
.template-category {}
.cat-header {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--text-2); margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.cat-header i { color: var(--primary); }
.template-cards-row {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.tpl-card {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px;
  transition: all 0.3s; cursor: default;
  width: 190px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.tpl-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  opacity: 0; transition: 0.3s;
}
.tpl-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.1); }
.tpl-card:hover::after { opacity: 1; }
.tpl-emoji { font-size: 28px; margin-bottom: 10px; }
.tpl-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.tpl-count {
  display: inline-block; padding: 2px 10px; border-radius: 50px;
  font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: white; margin-bottom: 8px;
}
.tpl-options { font-size: 11px; color: var(--text-3); line-height: 1.4; }
.tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; overflow: hidden; }
.tpl-tags .tpl-count {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: white;
}
.tpl-free {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 700;
  background: rgba(0,229,160,0.1); border: 1px solid rgba(0,229,160,0.3);
  color: var(--teal); white-space: nowrap; max-width: 100%;
}
.tpl-free i { font-size: 9px; }
.tpl-numeric {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 700;
  background: rgba(255,179,71,0.1); border: 1px solid rgba(255,179,71,0.3);
  color: var(--gold);
}
.tpl-special {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 700;
  background: rgba(0,200,83,0.1); border: 1px solid rgba(0,200,83,0.3);
  color: var(--green);
}

/* ============================
   MEGA SENA
============================ */
.megasena-section {
  padding: 120px 0;
  background: linear-gradient(to bottom, transparent, rgba(0,200,83,0.03), transparent);
}
.megasena-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.ms-tag { color: var(--green); border-color: rgba(0,200,83,0.3); background: rgba(0,200,83,0.08); }
.megasena-info h2 { font-size: clamp(32px,4vw,44px); margin-bottom: 20px; }
.megasena-info > p { color: var(--text-2); font-size: 16px; margin-bottom: 36px; line-height: 1.7; }
.ms-features { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.ms-feature { display: flex; align-items: flex-start; gap: 16px; }
.ms-feat-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: rgba(0,200,83,0.1); border: 1px solid rgba(0,200,83,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--green); font-size: 16px;
}
.ms-feature strong { display: block; font-size: 14px; margin-bottom: 4px; }
.ms-feature p { font-size: 13px; color: var(--text-2); }
.ms-disclaimer {
  display: flex; gap: 12px; padding: 16px; border-radius: 12px;
  background: rgba(255,179,71,0.06); border: 1px solid rgba(255,179,71,0.2);
  align-items: flex-start;
}
.ms-disclaimer i { color: var(--gold); margin-top: 3px; flex-shrink: 0; }
.ms-disclaimer p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
/* MS Card */
.ms-card {
  background: var(--elevated); border: 1px solid rgba(0,200,83,0.25);
  border-radius: 24px; padding: 28px;
  box-shadow: 0 0 40px rgba(0,200,83,0.08);
}
.ms-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.ms-logo-text { font-family:'Syne',sans-serif; font-weight:800; font-size:16px; color:var(--green); }
.ms-edition { font-size:12px; color:var(--text-2); }
.ms-balls-container {
  display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap;
}
.ms-ball {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #00C853, #009C3B);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px;
  color: white; box-shadow: 0 4px 20px rgba(0,200,83,0.5);
  animation: ballPulse 2s ease-in-out infinite;
}
.ms-ball:nth-child(2) { animation-delay: 0.2s; }
.ms-ball:nth-child(3) { animation-delay: 0.4s; }
.ms-ball:nth-child(4) { animation-delay: 0.6s; }
.ms-ball:nth-child(5) { animation-delay: 0.8s; }
.ms-ball:nth-child(6) { animation-delay: 1s; }
@keyframes ballPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,200,83,0.5); }
  50% { box-shadow: 0 4px 30px rgba(0,200,83,0.8); }
}
.ms-score-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ms-score-label { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ms-score-track { flex: 1; background: var(--border); border-radius: 50px; height: 6px; overflow: hidden; }
.ms-score-fill { width: 87%; height: 100%; background: linear-gradient(90deg, var(--green), var(--teal)); border-radius: 50px; }
.ms-score-val { font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; }
.ms-stats-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ms-stat-col { background: var(--surface); border-radius: 12px; padding: 12px; }
.ms-stat-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.ms-stat-nums { font-size: 13px; font-weight: 600; color: var(--text-2); }

/* ---- Ball legend inline (hero card e card de jogo) ---- */
.ball-legend-inline {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.ball-legend-inline span {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
}
.bli-hot    { color: #FF4D6D; }
.bli-neutral{ color: var(--green); }
.bli-cold   { color: var(--cyan); }

/* ---- ms-ball-legend melhorada (seção Mega Sena — card jogo) ---- */
.ms-ball-legend {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.ms-ball-legend span {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
}
.ms-legend-hot     { color: #FF4D6D; }
.ms-legend-neutral { color: var(--green); }
.ms-legend-cold    { color: var(--cyan); }

/* ---- Legenda global tela stats (mss-global-legend) ---- */
.mss-global-legend {
  padding: 16px 40px 0;
}
.mgl-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  margin-bottom: 12px;
}
.mgl-title i { color: var(--primary); }
.mgl-items { display: flex; gap: 20px; flex-wrap: wrap; }
.mgl-item  { display: flex; align-items: center; gap: 10px; }
.mgl-ball  {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 12px; color: white;
}
.mgl-ball-hot     { background: linear-gradient(135deg,#FF4D6D,#FFB347); box-shadow: 0 3px 10px rgba(255,77,109,0.45); }
.mgl-ball-neutral { background: linear-gradient(135deg,#00C853,#009C3B); box-shadow: 0 3px 10px rgba(0,200,83,0.4); }
.mgl-ball-cold    { background: linear-gradient(135deg,#00B4D8,#6C63FF); box-shadow: 0 3px 10px rgba(0,180,216,0.4); }
.mgl-label { display: flex; flex-direction: column; gap: 2px; }
.mgl-label strong { font-size: 13px; color: var(--text); }
.mgl-label span   { font-size: 11px; color: var(--text-3); }

/* ---- Legenda de cores no card do último resultado (mss-color-legend) ---- */
.mss-color-legend {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
}
.mcl-title { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.5px; margin-bottom: 2px; }
.mcl-row   { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.mcl-dot   { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.mcl-hot     { background: linear-gradient(135deg,#FF4D6D,#FFB347); box-shadow: 0 0 6px rgba(255,77,109,0.5); }
.mcl-neutral { background: linear-gradient(135deg,#00C853,#009C3B); box-shadow: 0 0 6px rgba(0,200,83,0.4); }
.mcl-cold    { background: linear-gradient(135deg,#00B4D8,#6C63FF); box-shadow: 0 0 6px rgba(0,180,216,0.4); }
.mcl-row strong { color: var(--text); }

/* ---- Responsivo mss-global-legend ---- */
@media (max-width: 768px) {
  .mss-global-legend { padding: 16px 20px 0; }
  .mgl-items { gap: 12px; }
}

/* ---- MS source badge ---- */
.ms-source-badge {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px; margin-bottom: 28px;
  background: rgba(0,200,83,0.06); border: 1px solid rgba(0,200,83,0.25);
}
.msb-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: linear-gradient(135deg, #00C853, #009C3B);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px;
}
.msb-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.msb-sub { font-size: 11px; color: var(--text-2); }

/* ---- MS intro grid ---- */
.ms-intro-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px;
  align-items: start; margin-bottom: 80px;
}

/* ---- Ball legend ---- */
.ms-ball-legend {
  display: flex; gap: 14px; justify-content: center; margin-bottom: 14px;
}
.ms-ball-legend span { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.ms-legend-hot { color: #FF4D6D; }
.ms-legend-cold { color: #00B4D8; }
.ms-legend-neutral { color: var(--green); }

/* ---- Hot / cold ball variants ---- */
.ms-ball-hot {
  background: linear-gradient(135deg, #FF4D6D, #FFB347) !important;
  box-shadow: 0 4px 20px rgba(255,77,109,0.5) !important;
}
.ms-ball-cold {
  background: linear-gradient(135deg, #00B4D8, #6C63FF) !important;
  box-shadow: 0 4px 20px rgba(0,180,216,0.5) !important;
}

/* ---- MS verdict ---- */
.ms-verdict {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: 12px; margin-top: 4px;
}
.ms-verdict-good {
  background: rgba(0,229,160,0.07); border: 1px solid rgba(0,229,160,0.25);
}
.ms-verdict i { color: var(--teal); font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.ms-verdict strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.ms-verdict span { font-size: 12px; color: var(--text-2); }

/* ---- Stats section wrapper ---- */
.ms-stats-section {
  background: var(--elevated); border: 1px solid rgba(0,200,83,0.15);
  border-radius: 28px; overflow: hidden;
}
.ms-stats-header {
  padding: 36px 40px 0;
}
.ms-stats-title-block h3 { font-size: clamp(22px,2.5vw,30px); margin-bottom: 10px; }
.ms-stats-title-block p { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 680px; }

/* ---- Stats screen mock ---- */
.ms-stats-screen {
  margin: 28px 0 0;
}
.mss-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 40px; background: rgba(0,200,83,0.06);
  border-top: 1px solid rgba(0,200,83,0.15);
  border-bottom: 1px solid rgba(0,200,83,0.1);
  flex-wrap: wrap; gap: 12px;
}
.mss-tabs { display: flex; gap: 8px; }
.mss-tab {
  padding: 7px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
  cursor: default;
}
.mss-tab-active {
  background: linear-gradient(135deg, #00C853, #009C3B);
  color: white; border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,200,83,0.35);
}
.mss-source {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--green);
}
.mss-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 32px 40px; gap: 32px;
}
.mss-col { display: flex; flex-direction: column; gap: 20px; }
.mss-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
}
.mss-block-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; margin-bottom: 16px; color: var(--text);
}

/* Frequency bars */
.mss-freq-list { display: flex; flex-direction: column; gap: 10px; }
.mss-freq-row { display: flex; align-items: center; gap: 10px; }
.mff-num {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 12px;
  flex-shrink: 0;
}
.mff-num.hot { background: linear-gradient(135deg,#FF4D6D,#FFB347); color:white; box-shadow:0 2px 10px rgba(255,77,109,0.4); }
.mff-num.cold { background: linear-gradient(135deg,#00B4D8,#6C63FF); color:white; box-shadow:0 2px 10px rgba(0,180,216,0.4); }
.mff-bar-wrap { flex: 1; background: var(--border); border-radius: 50px; height: 8px; overflow: hidden; }
.mff-bar { height: 100%; border-radius: 50px; }
.mff-count { font-size: 12px; font-weight: 700; color: var(--text-2); width: 28px; text-align: right; }
.mss-more { font-size: 12px; color: var(--text-3); padding: 4px 0 0 42px; }

/* Last result */
.mss-concurso-num { font-family:'Syne',sans-serif; font-weight:800; font-size:18px; margin-bottom:2px; }
.mss-concurso-date { font-size:12px; color:var(--text-3); margin-bottom:14px; }
.mss-last-balls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.mss-lball {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#00C853,#009C3B); border: none;
  box-shadow: 0 3px 12px rgba(0,200,83,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family:'Syne',sans-serif; font-weight:800; font-size:13px;
  color: white;
}
.mss-lball.hot-ball { background:linear-gradient(135deg,#FF4D6D,#FFB347); border:none; color:white; box-shadow:0 3px 12px rgba(255,77,109,0.4); }
.mss-lball.cold-ball { background:linear-gradient(135deg,#00B4D8,#6C63FF); border:none; color:white; box-shadow:0 3px 12px rgba(0,180,216,0.4); }
.mss-last-tags { display:flex; gap:8px; flex-wrap:wrap; }
.mss-ltag {
  display:flex; align-items:center; gap:5px;
  padding: 4px 12px; border-radius:50px; font-size:11px; font-weight:700;
}
.hot-tag { background:rgba(255,77,109,0.1); border:1px solid rgba(255,77,109,0.25); color:#FF4D6D; }
.cold-tag { background:rgba(0,180,216,0.1); border:1px solid rgba(0,180,216,0.25); color:#00B4D8; }
.neutral-tag { background:rgba(0,200,83,0.08); border:1px solid rgba(0,200,83,0.25); color:var(--green); }

/* Analysis block */
.mss-analysis { display:flex; flex-direction:column; gap:12px; }
.mss-analysis-row { display:flex; align-items:center; gap:10px; }
.mar-label { font-size:12px; color:var(--text-2); width:160px; flex-shrink:0; }
.mar-bar-wrap { flex:1; background:var(--border); border-radius:50px; height:8px; overflow:hidden; }
.mar-bar { height:100%; border-radius:50px; }
.mar-val { font-size:12px; font-weight:800; width:34px; text-align:right; }
.hot-val { color:#FF4D6D; }
.teal-val { color:var(--teal); }
.purple-val { color:var(--primary); }

.mss-verdict-block {
  display:flex; flex-direction:column; gap:6px;
  padding:14px; border-radius:12px;
}
.mss-verdict-block.mss-verdict-good {
  background:rgba(0,229,160,0.07); border:1px solid rgba(0,229,160,0.25);
}
.mvb-header { display:flex; align-items:center; gap:8px; color:var(--teal); }
.mvb-header strong { font-size:13px; color:var(--text); }
.mss-verdict-block p { font-size:12px; color:var(--text-2); line-height:1.5; margin:0; }
.mss-verdict-block strong { color:var(--teal); }

.mss-disclaimer-inline {
  display:flex; align-items:flex-start; gap:8px;
  font-size:11px; color:var(--text-3); line-height:1.5;
  padding-top:4px;
}
.mss-disclaimer-inline i { color:var(--primary); margin-top:1px; flex-shrink:0; }

/* ============================
   NAMES
============================ */
.names-section { padding: 120px 0; }
.names-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.names-features-list { display: flex; flex-direction: column; gap: 24px; }
.names-feat { display: flex; gap: 16px; align-items: flex-start; }
.names-feat-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
}
.names-feat strong { display: block; font-size: 15px; margin-bottom: 4px; }
.names-feat p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.names-card {
  background: var(--elevated); border: 1px solid rgba(108,99,255,0.25);
  border-radius: 24px; padding: 24px;
  box-shadow: 0 0 40px rgba(108,99,255,0.06);
}
.names-card-header {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
  margin-bottom: 16px; color: var(--primary);
}
.names-filters { display: flex; gap: 8px; margin-bottom: 20px; }
.names-filter {
  padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer;
}
.names-filter.active { background: var(--primary-l); border-color: var(--primary); color: var(--text); }
.names-filter.active-2 { background: rgba(255,77,109,0.1); border-color: rgba(255,77,109,0.3); color: var(--red); }
.names-result-box {
  background: var(--surface); border-radius: 16px; padding: 20px;
  text-align: center; margin-bottom: 16px;
  border: 1px solid var(--border);
}
.names-shuffling { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.names-winner { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); }
.names-history { background: var(--surface); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.nh-title { font-size: 11px; color: var(--text-3); font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; }
.nh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nh-grid span {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  padding: 4px 10px; background: var(--elevated); border-radius: 8px;
}
.names-disclaimer {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px;
  background: rgba(108,99,255,0.06); border: 1px solid rgba(108,99,255,0.15);
  align-items: flex-start;
}
.names-disclaimer i { color: var(--primary); font-size: 13px; margin-top: 2px; }
.names-disclaimer p { font-size: 12px; color: var(--text-2); line-height: 1.5; }

/* ============================
   RIFAS
============================ */
.rifas-section { padding: 120px 0; background: linear-gradient(to bottom, transparent, rgba(255,179,71,0.03), transparent); }
.rifas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rifa-card {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; transition: all 0.3s;
}
.rifa-card:hover { transform: translateY(-6px); border-color: rgba(255,179,71,0.3); }
.rifa-card-header {
  padding: 20px; display: flex; align-items: center; gap: 14px;
}
.rifa-emoji { font-size: 28px; }
.rifa-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; }
.rifa-sub { font-size: 12px; color: rgba(255,255,255,0.6); }
.rifa-numbers {
  padding: 16px 20px; display: flex; gap: 8px; flex-wrap: wrap;
}
.rifa-num {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--text-2);
}
.rifa-winner {
  background: linear-gradient(135deg, var(--gold), #FF7043);
  border-color: transparent; color: white;
  box-shadow: 0 4px 16px rgba(255,179,71,0.5);
}
.rifa-card > p { padding: 0 20px 20px; font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ---- Rifa Hero Card ---- */
.rifa-hero-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
  align-items: center;
  background: var(--elevated); border: 1px solid rgba(255,179,71,0.2);
  border-radius: 28px; padding: 48px;
  margin-bottom: 40px;
  position: relative; overflow: hidden;
}
.rifa-hero-card::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,179,71,0.08), transparent 70%);
  pointer-events:none;
}
.rifa-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 50px; font-size: 11px;
  font-weight: 700; letter-spacing: 1.5px; margin-bottom: 20px;
  color: var(--gold); border: 1px solid rgba(255,179,71,0.35);
  background: rgba(255,179,71,0.08);
}
.rifa-hero-left h3 {
  font-size: clamp(24px,3vw,34px); margin-bottom: 16px; line-height: 1.25;
}
.rifa-hero-left > p {
  font-size: 15px; color: var(--text-2); line-height: 1.7; margin-bottom: 28px;
}
.rifa-hero-left > p strong { color: var(--text); }
.rifa-examples {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px;
}
.rifa-example {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.2s;
}
.rifa-example:hover { border-color: rgba(255,179,71,0.4); transform: translateY(-2px); }
.rifa-example i { color: var(--text-3); font-size: 11px; }
.re-from { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; color:var(--text-2); }
.re-to { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; color:var(--gold); }
.re-label { font-size:11px; font-weight:600; color:var(--text-3); margin-left:4px; }
.rifa-example-star {
  background: rgba(255,179,71,0.07);
  border-color: rgba(255,179,71,0.3);
}
.rifa-example-star .re-to { color: var(--primary); }
.rifa-usecases {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.rifa-usecase {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 50px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  transition: 0.2s;
}
.rifa-usecase i { color: var(--gold); font-size: 12px; }
.rifa-usecase:hover { border-color: rgba(255,179,71,0.35); color: var(--text); }

/* Rifa demo card (right side) */
.rifa-demo-card {
  background: var(--surface); border: 1px solid rgba(255,179,71,0.25);
  border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 0 40px rgba(255,179,71,0.06);
}
.rifa-demo-header { display: flex; align-items: center; gap: 12px; }
.rifa-demo-icon { font-size: 26px; }
.rifa-demo-title { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; }
.rifa-demo-sub { font-size:12px; color:var(--text-2); }
.rifa-demo-inputs {
  display: flex; align-items: center; gap: 12px;
  background: var(--elevated); border-radius: 12px; padding: 14px;
}
.rifa-demo-field { flex: 1; text-align: center; }
.rfd-label { font-size: 10px; font-weight: 700; color: var(--text-3); letter-spacing: 1px; margin-bottom: 6px; }
.rfd-value {
  font-family:'Syne',sans-serif; font-weight:800; font-size:28px;
  color: var(--text-2);
}
.rfd-custom { color: var(--gold); text-shadow: 0 0 20px rgba(255,179,71,0.4); }
.rifa-demo-arrow { color: var(--text-3); font-size: 14px; }
.rifa-demo-result {
  background: var(--elevated); border-radius: 12px; padding: 14px; text-align: center;
}
.rifa-drum-numbers {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 12px;
  opacity: 0.4;
}
.rifa-drum-numbers span {
  font-family:'Syne',sans-serif; font-weight:700; font-size:13px;
  padding: 4px 8px; background: var(--surface); border-radius: 6px; color: var(--text-2);
}
.rdw-label { font-size:11px; color:var(--text-3); font-weight:600; margin-bottom:6px; }
.rdw-number {
  font-family:'Syne',sans-serif; font-weight:800; font-size:44px;
  background: linear-gradient(135deg, var(--gold), #FF7043);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  filter: drop-shadow(0 0 12px rgba(255,179,71,0.5));
}
.rifa-demo-btn {
  background: linear-gradient(135deg, var(--gold), #FF7043);
  color: white; border-radius: 50px; padding: 13px;
  text-align: center; font-family:'Syne',sans-serif; font-weight:800; font-size:13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(255,179,71,0.35);
}
.rifa-demo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,179,71,0.5); }

/* Rifa card custom */
.rifa-card-custom { border-color: rgba(108,99,255,0.2); }
.rifa-custom-preview { padding: 12px 20px 4px; }
.rcp-row { display: flex; align-items: center; gap: 12px; }
.rcp-box {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; text-align: center;
}
.rcp-lbl { font-size: 10px; font-weight: 700; color: var(--text-3); letter-spacing: 1px; margin-bottom: 4px; }
.rcp-val { font-family:'Syne',sans-serif; font-weight:800; font-size:22px; color:var(--text); }

/* ============================
   SCREENS SHOWCASE
============================ */
.screens-section { padding: 120px 0; }
.screens-showcase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.screen-item { display: flex; flex-direction: column; gap: 12px; }
.screen-mockup {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 20px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 280px;
}
.screen-label { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; }
.screen-item > p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.sm-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sm-title { font-family:'Syne',sans-serif; font-weight:700; font-size:12px; }
.sm-icons { display:flex; gap:8px; color:var(--text-2); font-size:11px; }
.sm-search {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font-size: 11px;
  color: var(--text-3); display: flex; align-items: center; gap: 6px;
}
.sm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sm-card {
  padding: 8px; border-radius: 8px; display: flex;
  flex-direction: column; gap: 3px;
}
.sm-card-food { background: linear-gradient(135deg,rgba(255,107,53,0.3),rgba(255,69,0,0.2)); }
.sm-card-movie { background: linear-gradient(135deg,rgba(255,107,53,0.3),rgba(255,179,71,0.2)); }
.sm-card-travel { background: linear-gradient(135deg,rgba(0,180,216,0.3),rgba(0,77,182,0.2)); }
.sm-card-game { background: linear-gradient(135deg,rgba(108,99,255,0.3),rgba(0,180,216,0.2)); }
.sm-card-emoji { font-size: 16px; }
.sm-card-title { font-size: 10px; font-weight: 700; }
.sm-card-badge { font-size: 9px; color: var(--text-2); }
.sm-fab {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: white; align-self: flex-end;
  box-shadow: 0 4px 14px rgba(108,99,255,0.5);
}
.sm-roulette-area { display: flex; justify-content: center; padding: 8px 0; }
.sm-roulette-ring {
  width: 70px; height: 70px; border-radius: 50%;
  border: 2px solid var(--primary-l);
  display: flex; align-items: center; justify-content: center;
  position: relative; animation: spin 3s linear infinite;
}
.sm-roulette-center {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; animation: spin 3s linear infinite reverse;
}
.sm-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}
.smd-1 { top:-3px; left:50%; transform:translateX(-50%); }
.smd-2 { bottom:-3px; left:50%; transform:translateX(-50%); }
.smd-3 { left:-3px; top:50%; transform:translateY(-50%); }
.smd-4 { right:-3px; top:50%; transform:translateY(-50%); }
.sm-mood-row { display: flex; gap: 6px; justify-content: center; }
.sm-mood {
  width: 28px; height: 28px; border-radius: 8px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.active-mood { background: var(--primary-l); border-color: var(--primary); }
.sm-draw-btn {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: white; border-radius: 50px; padding: 8px;
  text-align: center; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: auto;
}
.sm-tabs { display: flex; gap: 8px; }
.sm-tab {
  flex: 1; padding: 6px; background: var(--surface); border-radius: 8px;
  font-size: 11px; font-weight: 700; color: var(--text-2); text-align: center;
  border: 1px solid var(--border);
}
.active-tab { background: var(--primary-l); border-color: var(--primary); color: var(--text); }
.sm-ms-balls { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.sm-ms-ball {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #00C853, #009C3B);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: white;
}
.sm-ms-btn {
  padding: 8px; border-radius: 50px; text-align: center;
  font-size: 10px; font-weight: 700; color: white; margin-top: auto;
}
.sm-names-filters { display: flex; gap: 6px; }
.sm-nf {
  padding: 4px 10px; border-radius: 50px; font-size: 10px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.active-nf { background: var(--primary-l); border-color: var(--primary); color: var(--text); }
.sm-names-result {
  background: var(--surface); border-radius: 12px; padding: 14px;
  text-align: center;
}
.sm-names-winner { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; }
.sm-names-history {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.sm-names-history span {
  padding: 3px 8px; background: var(--surface); border-radius: 6px;
  font-size: 10px; color: var(--text-2);
}
.sm-names-btn { padding: 8px; border-radius: 50px; text-align: center; font-size: 10px; font-weight: 700; color: white; margin-top: auto; }
.decision-screen { background: linear-gradient(to bottom, var(--elevated), rgba(108,99,255,0.05)); }
.megasena-screen { background: linear-gradient(to bottom, var(--elevated), rgba(0,200,83,0.05)); }
.names-screen { background: linear-gradient(to bottom, var(--elevated), rgba(108,99,255,0.05)); }

/* ============================
   TECH SECTION
============================ */
.tech-section { padding: 120px 0; }
.tech-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; }
.tech-grid-single { grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.privacy-highlights {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.priv-item {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; text-align: center;
  transition: all 0.25s;
}
.priv-item:hover { transform: translateY(-4px); border-color: rgba(108,99,255,0.3); }
.priv-icon {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: white;
}
.priv-label { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; margin-bottom:4px; }
.priv-desc { font-size:12px; color:var(--text-3); }
.tech-info .section-tag { margin-bottom: 20px; }
.tech-info h2 { font-size: clamp(32px,4vw,44px); margin-bottom: 20px; }
.tech-info > p { color: var(--text-2); font-size: 16px; margin-bottom: 36px; line-height: 1.7; }
.tech-points { display: flex; flex-direction: column; gap: 22px; }
.tech-point { display: flex; gap: 16px; align-items: flex-start; }
.tp-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  background: var(--elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 18px;
}
.tech-point strong { display: block; font-size: 14px; margin-bottom: 4px; }
.tech-point p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.tech-stack {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px;
}
.stack-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 20px; color: var(--text-2); letter-spacing: 1px; }
.stack-items { display: flex; flex-direction: column; gap: 12px; }
.stack-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; padding: 10px 14px;
  background: var(--surface); border-radius: 10px;
  border: 1px solid var(--border); transition: 0.2s;
}
.stack-item:hover { border-color: rgba(108,99,255,0.3); }

/* ============================
   SUPPORT / PIX
============================ */
.support-section { padding: 120px 0; }
.support-card {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 28px; padding: 48px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: center;
  position: relative; overflow: hidden;
}
.support-card::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,77,109,0.08), transparent);
  pointer-events:none;
}
.support-icon { font-size: 48px; margin-bottom: 16px; }
.support-left h2 { font-size: 36px; margin-bottom: 16px; }
.support-left > p { font-size: 16px; color: var(--text-2); margin-bottom: 28px; line-height: 1.7; }
.support-perks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.perk { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.perk i { color: var(--teal); }
.support-contact {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--primary);
  transition: color 0.2s;
}
.support-contact:hover { color: var(--purple); }
.pix-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 24px; text-align: center;
}
.pix-qr-wrap {
  background: white; padding: 12px; border-radius: 14px;
  display: inline-block; margin-bottom: 20px;
}
.pix-qr-img { width: 160px; height: 160px; display: block; }
.pix-info {}
.pix-label { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 1px; margin-bottom: 10px; display: block; }
.pix-key-row { display: flex; align-items: center; gap: 10px; }
.pix-key-row code { font-size: 12px; color: var(--text-2); font-family: 'DM Sans',sans-serif; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix-copy-btn {
  background: var(--primary); color: white; border: none;
  padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: all 0.2s; flex-shrink: 0;
}
.pix-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(108,99,255,0.4); }

/* ============================
   FOOTER
============================ */
.footer { padding: 80px 0 40px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand { }
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px;
  margin-bottom: 16px;
}
.footer-brand p { font-size: 14px; color: var(--text-2); line-height: 1.6; max-width: 340px; margin-bottom: 12px; }
.footer-lgpd { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.footer-lgpd i { color: var(--teal); }
.footer-links { display: flex; flex-direction: column; gap: 14px; }
.footer-links h4 { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; margin-bottom: 4px; }
.footer-links a { font-size: 14px; color: var(--text-2); transition: color 0.2s; display: flex; align-items: center; gap: 8px; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  padding-top: 28px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-legal { display: flex; gap: 16px; align-items: center; }
.footer-legal a { font-size: 13px; color: var(--text-2); transition: color 0.2s; }
.footer-legal a:hover { color: var(--text); }
.footer-legal span { color: var(--text-3); }
.footer-bottom > p { font-size: 13px; color: var(--text-3); }

/* ============================
   LOGIN MODAL
============================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.login-modal {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 28px; width: 100%; max-width: 460px;
  padding: 40px; position: relative;
  transform: translateY(20px); transition: transform 0.3s;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.modal-overlay.active .login-modal,
.modal-overlay.active .legal-modal { transform: translateY(0); }
.modal-close {
  position: absolute; top: 20px; right: 20px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); width: 36px; height: 36px; border-radius: 8px;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.modal-close:hover { color: var(--text); border-color: var(--primary); }
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px;
  margin-bottom: 16px;
}
.login-header h2 { font-size: 26px; margin-bottom: 8px; }
.login-header p { font-size: 14px; color: var(--text-2); }
.login-body { display: flex; flex-direction: column; gap: 16px; }
.login-option {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s;
}
.login-option:hover { border-color: var(--primary); background: var(--primary-l); }
.login-opt-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 20px;
}
.login-opt-info { flex: 1; }
.login-opt-info strong { display: block; font-size: 14px; margin-bottom: 2px; }
.login-opt-info span { font-size: 12px; color: var(--text-2); }
.login-opt-arrow { color: var(--text-3); font-size: 14px; }
.login-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-3); font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.login-info-box {
  display: flex; gap: 12px; padding: 14px; border-radius: 12px;
  background: rgba(108,99,255,0.06); border: 1px solid rgba(108,99,255,0.15);
  align-items: flex-start;
}
.login-info-box i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.login-info-box p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.login-btn-main {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: white; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px;
  transition: all 0.3s; box-shadow: 0 4px 20px rgba(108,99,255,0.4);
}
.login-btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(108,99,255,0.6); }
.login-features-row {
  display: flex; gap: 12px; justify-content: center;
}
.lf-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1; padding: 14px 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 12px; font-weight: 600; color: var(--text-2); text-align: center;
}
.lf-item i { font-size: 20px; }
.login-legal { text-align: center; font-size: 12px; color: var(--text-3); }
.login-legal a { color: var(--primary); text-decoration: underline; }

/* ============================
   LEGAL MODAL
============================ */
.legal-modal {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 28px; width: 100%; max-width: 640px;
  max-height: 85vh; overflow-y: auto;
  padding: 40px; position: relative;
  transform: translateY(20px); transition: transform 0.3s;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.legal-content h2 { font-size: 26px; color: var(--primary); margin-bottom: 8px; }
.legal-content .legal-updated { font-size: 12px; color: var(--text-3); margin-bottom: 28px; }
.legal-content h3 { font-size: 15px; color: var(--text); margin: 20px 0 8px; }
.legal-content p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin-bottom: 12px; }
.legal-content .legal-alert {
  padding: 16px; border-radius: 12px; margin: 16px 0;
  background: rgba(255,179,71,0.07); border: 1px solid rgba(255,179,71,0.2);
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}
.legal-content .legal-alert strong { color: var(--gold); }

/* ============================
   EMAIL MODAL
============================ */
.email-modal {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 28px; width: 100%; max-width: 420px;
  padding: 40px; position: relative; text-align: center;
  transform: translateY(20px); transition: transform 0.3s;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.modal-overlay.active .email-modal { transform: translateY(0); }
.email-modal-icon {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: white;
  box-shadow: 0 8px 24px rgba(108,99,255,0.4);
}
.email-modal h2 { font-size: 22px; margin-bottom: 10px; }
.email-modal > p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
.email-copy-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 12px;
}
.email-address {
  flex: 1; font-size: 14px; font-weight: 700; color: var(--text);
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.email-copy-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--primary); color: white; border: none;
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.email-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(108,99,255,0.4); }
.email-copy-btn.copied { background: var(--teal); color: #080A0F; }
.email-open-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border-radius: 12px; margin-bottom: 16px;
  border: 1px solid var(--border); color: var(--text-2);
  font-size: 14px; font-weight: 600; transition: all 0.2s;
  background: var(--surface);
}
.email-open-btn:hover { border-color: var(--primary); color: var(--text); background: var(--primary-l); }
.email-footer-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; color: var(--text-3);
}
.email-footer-note i { color: var(--primary); }

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 1172px) {
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 1100px) {
  .rifa-hero-card { grid-template-columns: 1fr; gap: 36px; }

  /* Tudo que o Decide Aí oferece — 1 coluna a partir de 1100px */
  .features-grid {
    grid-template-columns: 1fr;
  }
  .feature-large {
    grid-column: 1; grid-row: auto;
    align-self: auto; justify-content: flex-start;
  }
  .feature-mega       { grid-column: 1; grid-row: auto; }
  .feature-below-mega { grid-column: 1; grid-row: auto; }
  .feature-draw-modes { grid-template-columns: 1fr; }

  /* Hero slide 1 — coluna única a partir de 1100px */
  .hero-inner-grid {
    flex-direction: column;
    align-items: stretch;
    padding: 90px 24px 24px;
    gap: 0;
  }
  .hero-left-col { flex: none; width: 100%; }
  .hero-center { text-align: center; }
  .hero-top-badge { align-self: center; }
  .hero-cta-row { justify-content: center; }
  .hero-right-col {
    flex: none; width: 100%;
    padding-top: 20px;
    align-self: auto; height: auto;
  }
  .hero-spacer { display: none; }
  .hero-top-row {
    display: flex; flex-direction: column;
    max-width: 100%; margin-left: 0;
    gap: 10px; width: 100%;
  }
  .hero-top-row .hc-card { width: 100%; }
  .hero-bottom-row {
    grid-template-columns: 1fr;
    margin-top: 10px; gap: 10px; width: 100%;
  }
  .hero-bottom-row .hc-card { width: 100%; }
  /* Nomes: força coluna única interna */
  .hero-bottom-row .hc-names {
    display: flex; flex-direction: column; gap: 8px;
  }

  .moods-grid { grid-template-columns: repeat(2,1fr); }
  .screens-showcase { grid-template-columns: repeat(2,1fr); }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-grid-single { grid-template-columns: 1fr; }
  .megasena-grid { grid-template-columns: 1fr; }
  .ms-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .mss-body { grid-template-columns: 1fr; }
  .mss-header { padding: 14px 20px; }
  .ms-stats-header { padding: 28px 20px 0; }
  .mss-body { padding: 20px; }
  .names-grid { grid-template-columns: 1fr; }
  .support-card { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Layout geral */
  .section-container { padding: 0 16px; }

  /* ── Hero mobile: coluna única ── */
  .hero { overflow-x: hidden; }
  .hero-inner-grid {
    flex-direction: column;
    align-items: stretch;
    padding: 80px 16px 24px;
    gap: 0;
  }
  /* Texto centralizado */
  .hero-left-col { width: 100%; flex: none; }
  .hero-top-badge { align-self: center; margin-bottom: 16px; }
  .hero-center { text-align: center; width: 100%; }
  .hero-title { font-size: clamp(28px, 6.5vw, 48px); letter-spacing: -1px; word-break: break-word; }
  .hero-sub { font-size: 14px; max-width: 100%; }
  .hero-cta-row { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; }
  .btn-hero-main { padding: 13px 20px; font-size: 14px; }
  .btn-hero-ghost { padding: 13px 16px; font-size: 13px; }

  /* Coluna direita: empilha normalmente */
  .hero-right-col {
    width: 100%; flex: none;
    padding-top: 20px;
    align-self: auto;
    height: auto;
  }
  /* Sem spacer no mobile */
  .hero-spacer { display: none; }
  /* Todos os cards em coluna única, largura total */
  .hero-top-row {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin-left: 0;
    gap: 10px;
    width: 100%;
  }
  .hero-top-row .hc-card {
    width: 100%;
  }
  .hero-bottom-row {
    grid-template-columns: 1fr;
    margin-top: 10px;
    gap: 10px;
    width: 100%;
  }
  .hero-bottom-row .hc-card {
    width: 100%;
  }
  .hc-names { display: flex; flex-direction: column; }

  .feature-draw-modes { grid-template-columns: 1fr; }

  /* Moods */
  .moods-grid { grid-template-columns: 1fr 1fr; }

  /* Draw modes */
  .dm-grid { grid-template-columns: 1fr; }
  .dm-scoreboard { flex-direction: column; }

  /* Templates */
  .tpl-customize-banner { flex-direction: column; gap: 20px; padding: 20px; }
  .tcb-right { justify-content: flex-start; flex-wrap: wrap; }

  /* Templates: scroll horizontal sem corte */
  .templates-section .section-container { padding: 0; }
  .templates-section .section-header,
  .templates-section .tpl-customize-banner,
  .templates-section .template-categories { padding-left: 16px; padding-right: 16px; }
  .template-cards-row {
    overflow-x: auto; flex-wrap: nowrap;
    padding: 4px 16px 14px;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
  }
  .template-cards-row::-webkit-scrollbar { display: none; }
  .tpl-card { width: 175px; min-width: 175px; padding: 14px; flex-shrink: 0; }
  .tpl-emoji { font-size: 22px; margin-bottom: 8px; }
  .tpl-name { font-size: 12px; margin-bottom: 4px; }
  .tpl-tags { gap: 4px; margin-bottom: 6px; }
  .tpl-tags .tpl-count { font-size: 10px; padding: 2px 8px; }
  .tpl-free, .tpl-numeric, .tpl-special { font-size: 10px; padding: 2px 7px; }
  .tpl-options { font-size: 10px; }
  .template-categories { gap: 28px; }
  .cat-header { font-size: 14px; margin-bottom: 10px; }

  /* Rifas */
  .rifas-grid { grid-template-columns: 1fr; }
  .rifa-hero-card { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
  .rifa-examples { gap: 6px; }
  .rifa-usecases { gap: 6px; }

  /* Mega Sena */
  .ms-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .mss-body { grid-template-columns: 1fr; padding: 16px; }
  .mss-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .mss-source { font-size: 11px; }
  .ms-stats-header { padding: 20px 16px 0; }
  .mss-global-legend { padding: 12px 16px 0; }
  .mgl-items { flex-direction: column; gap: 10px; }

  /* Nomes */
  .names-grid { grid-template-columns: 1fr; }

  /* Tech */
  .tech-grid { grid-template-columns: 1fr; }
  .tech-grid-single { grid-template-columns: 1fr; }
  .privacy-highlights { grid-template-columns: 1fr 1fr; }

  /* Suporte */
  .support-card { grid-template-columns: 1fr; padding: 24px; }

  /* Screens */
  .screens-showcase { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .moods-grid { grid-template-columns: 1fr 1fr; }
  .screens-showcase { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .privacy-highlights { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: clamp(22px, 7vw, 34px); }
  .hero-top-badge { display: none; } /* muito pequeno em 320px — esconde */
  .dm-rounds { gap: 6px; }
  .dm-scoreboard { flex-direction: column; }
  .ms-balls-container { gap: 6px; }
  .ms-ball { width: 42px; height: 42px; font-size: 15px; }
  .mgl-ball { width: 30px; height: 30px; font-size: 10px; }
}

/* ── Cookie Banner ─────────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(14, 16, 27, 0.97);
  border-top: 1px solid rgba(108, 99, 255, 0.25);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
  padding: 16px 24px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.visible {
  transform: translateY(0);
}
.cookie-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.cookie-banner-text {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.cookie-banner-text a {
  color: #6C63FF;
  text-decoration: underline;
  font-weight: 600;
}
.cookie-banner-text a:hover {
  color: #B45CF8;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn-entendi {
  background: linear-gradient(135deg, #6C63FF, #B45CF8);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.cookie-btn-entendi:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-btn-entendi { width: 100%; text-align: center; }
}