:root{
  --bg:#0a0a0a;
  --surface:rgba(30,30,30,.95);
  --surface2:#1e1e1e;
  --border:#444;
  --text:#f0f0f0;
  --muted:#b0b0b0;
  --shadow:rgba(0,0,0,.5);
  --primary-color:#1a73e8;
  --accent:#ffd700;
  --positive:#00d084;
  --negative:#ff4757;
}
*{box-sizing:border-box;margin:0;padding:0}

/* ===========================
   SCROLLBAR PERSONALIZADA
   =========================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
  border: 1px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

::-webkit-scrollbar-thumb:active {
  background: var(--primary-color);
}

::-webkit-scrollbar-corner {
  background: var(--bg);
}

/* Para Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}

html,body{
  height:100%;
  min-height:100vh;
}
body{
  background:linear-gradient(to bottom, #0a0a0a, rgb(20,20,20));
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  margin:0;
  padding:0;
  min-height:100vh;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}
a{text-decoration:none;color:inherit}

/* Contêiner geral - CORREÇÃO PARA LAYOUT FLEX */
.home-container,
.container{
  width:min(1200px,92%);
  margin:22px auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ===========================
   SEÇÃO TESTE GRÁTIS - POSIÇÃO SUPERIOR
   =========================== */
.free-trial-card {
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, #1a1a1a, #2d1a00);
  text-align: center;
  margin-bottom: 18px;
  order: -1;
  position: relative;
  overflow: hidden;
}

.free-trial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #ffd700, #1a73e8, #ffd700);
  background-size: 200%;
  animation: barMove 4s linear infinite;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  z-index: 1;
}

.free-trial-content {
  padding: 8px 0;
  position: relative;
  z-index: 2;
}

.free-trial-title {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.free-trial-description {
  color: var(--muted);
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.free-trial-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn-free-trial {
  background: var(--accent);
  color: #000;
  font-weight: 800;
  border: none;
}

.btn-existing-account {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

@media (max-width: 768px) {
  .free-trial-title {
    font-size: 1.1rem;
  }
  
  .free-trial-description {
    font-size: 0.9rem;
  }
  
  .free-trial-buttons {
    gap: 8px;
  }
  
  .free-trial-card::before {
    height: 3px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}

@media (max-width: 480px) {
  .free-trial-card {
    padding: 12px;
  }
  
  .free-trial-title {
    font-size: 1rem;
  }
  
  .free-trial-description {
    font-size: 0.85rem;
  }
  
  .free-trial-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-free-trial,
  .btn-existing-account {
    width: 100%;
    max-width: 200px;
  }
  
  .free-trial-card::before {
    height: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

/* ===========================
   HERO (Blade: .hero-cta)
   =========================== */
.hero-cta{
  border:1px solid var(--border);
  background:
    radial-gradient(1200px 400px at -10% -60%, #1a73e830, transparent 60%),
    radial-gradient(1200px 400px at 110% -60%, #fdbb2d30, transparent 60%),
    linear-gradient(135deg, #1e1e1e, #171717);
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  box-shadow:0 16px 42px var(--shadow);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.hero-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #ffd700, #1a73e8, #ffd700);
  background-size: 200%;
  animation: barMove 4s linear infinite;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 1;
}

@keyframes barMove {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

.hero-cta .badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#0f172a;border:1px solid #213b77;
  color:#9ec5ff;border-radius:999px;font-size:.9rem;
  padding:6px 10px;margin:0 auto 12px
}
.hero-cta .hero-title{font-size:2rem;letter-spacing:.2px;margin-bottom:8px}
.hero-cta .hero-features{color:var(--muted);margin:0 auto 14px;max-width:760px}
.hero-cta .hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* Botões do hero */
.btn-cta-lg{
  display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--border);
  font-weight:800;transition:transform .15s, box-shadow .15s, filter .15s;
  background:var(--surface2);color:var(--text);
  text-align:center;
}
.btn-cta-lg.primary{background:var(--accent);color:#000;border-color:#caa800}
.btn-cta-lg:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* Responsivo do hero */
@media (max-width: 768px){
  .hero-cta{padding:20px 16px !important;margin-bottom:14px !important;border-radius:12px !important}
  .hero-cta .hero-title{font-size:1.5rem !important;line-height:1.2 !important;margin-bottom:6px !important}
  .hero-cta .hero-features{font-size:0.9rem !important;line-height:1.3 !important;margin-bottom:10px !important}
  .btn-cta-lg{padding:10px 16px !important;font-size:0.9rem !important;border-radius:10px !important}
  
  .hero-cta::before {
    height: 3px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}
@media (max-width: 480px){
  .hero-cta{padding:16px 12px !important;margin-bottom:12px !important}
  .hero-cta .badge{font-size:0.8rem;padding:4px 8px;margin-bottom:8px}
  .hero-cta .hero-title{font-size:1.3rem !important}
  .hero-cta .hero-features{font-size:0.8rem !important;margin-bottom:8px !important}
  .btn-cta-lg{padding:8px 12px !important;font-size:0.85rem !important}
  
  .hero-cta::before {
    height: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}
@media (max-width: 360px){
  .hero-cta{padding:14px 10px !important}
  .hero-cta .hero-title{font-size:1.1rem !important}
  .hero-cta .hero-features{font-size:0.75rem !important}
  .hero-cta .hero-actions{flex-direction:column;align-items:center;gap:8px}
  .btn-cta-lg{width:100%;max-width:200px;text-align:center}
}

/* ===========================
   Cards, grades e seções
   =========================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 12px 28px var(--shadow);
  margin-bottom: 18px;
}
.card h2{
  font-size:1.05rem;color:var(--primary-color);
  border-bottom:1px solid var(--border);
  padding-bottom:8px;margin-bottom:12px;text-align:center
}

/* Grid 2x2 que a home já usa */
.grid-2x2{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media (max-width: 900px){.grid-2x2{grid-template-columns:1fr}}
.grid-2x2 > .card h2{font-size:0.95rem;line-height:1.2;text-align:center;margin-bottom:8px}
@media (max-width:480px){.grid-2x2 > .card h2{font-size:0.9rem;margin-bottom:6px}}

/* ===========================
   Performance das Dicas (KPI) - CENTRALIZADO E RESPONSIVO
   =========================== */
.summary-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin:12px 0 6px
}
@media (max-width: 980px){
  .summary-row{grid-template-columns:repeat(3,1fr)}
  .stat .value{font-size:1.1rem}
}
@media (max-width: 768px){
  .summary-row{gap:10px}
  .stat{padding:10px 12px}
  .stat .label{font-size:.75rem}
  .stat .value{font-size:1rem}
}
@media (max-width: 640px){
  .summary-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:8px 10px}
  .stat .label{font-size:.7rem;margin-bottom:4px}
  .stat .value{font-size:0.9rem}
}
@media (max-width: 420px){
  .summary-row{grid-template-columns:1fr;gap:6px}
  .stat{padding:6px 8px}
  .stat .label{font-size:.65rem}
  .stat .value{font-size:0.85rem}
}

.stat{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 10px 24px var(--shadow);
  text-align:center;
}
.stat .label{font-size:.83rem;color:var(--muted);margin-bottom:6px}
.stat .value{font-size:1.25rem;font-weight:900}
.stat .value.positive{color:var(--positive)}
.stat .value.negative{color:var(--negative)}

.kpi-sub{
  text-align:center;
  color:var(--muted);
  margin-top:-2px;
  margin-bottom:10px;
  font-size:0.9rem;
}
@media (max-width: 768px){
  .kpi-sub{font-size:0.85rem;margin-bottom:8px}
}
@media (max-width: 480px){
  .kpi-sub{font-size:0.8rem;line-height:1.3}
}

.kpi-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:8px;
}
.kpi-filters{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.kpi-cta{
  margin-left:auto;
}
.btn-pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface2);
  font-weight:700;
  font-size:0.85rem;
}
@media (max-width: 480px){
  .btn-pill{padding:6px 10px;font-size:0.8rem}
}
.btn-pill.active{background:var(--primary-color);border-color:var(--primary-color);color:#000}
.kpi-count{
  margin-left:auto;
  color:var(--muted);
  font-size:.92rem;
  text-align:center;
}
@media (max-width: 768px){
  .kpi-count{font-size:.85rem}
}
@media (max-width:540px){
  .kpi-actions{flex-direction:column;align-items:flex-start}
  .kpi-cta{margin-left:0;margin-top:8px}
  .kpi-count{width:100%;text-align:left;margin-left:0;margin-top:6px;font-size:.8rem}
}

/* ===========================
   Sliders — Partidas (home)
   =========================== */
.slider{position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;padding:0 44px}
.slide{
  position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0;
}
.slide.active{opacity:1}
.slide .empty{text-align:center;color:var(--muted);padding:20px}

.match{display:flex;align-items:center;justify-content:center;gap:28px;width:100%;max-width:100%;box-sizing:border-box}
.team{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.team.home{justify-content:flex-end}
.team.away{justify-content:flex-start}
.logo{width:42px;height:42px;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;overflow:visible;flex-shrink:0}
.name{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.score{font-weight:800;font-size:1.4rem;min-width:48px;text-align:center;flex-shrink:0}
.meta{margin-top:10px;color:var(--muted);font-size:.92rem;text-align:center}

.arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);
  display:grid;place-items:center;cursor:pointer;z-index:2;flex-shrink:0;
}
.prev{left:6px} .next{right:6px}

@media (max-width: 768px){
  .slider{min-height:200px;padding:0 38px}
  .match{gap:16px;padding:0 4px}
  .team{gap:8px}
  .name{max-width:120px;font-size:0.9rem}
  .score{font-size:1.2rem;min-width:40px}
  .logo{width:36px;height:36px}
  .meta{font-size:0.85rem}
  .arrow{width:34px;height:34px;font-size:1.3rem}
}
@media (max-width: 480px){
  .slider{min-height:240px;padding:0 32px}
  .team .logo{display:none !important}
  .team .name{max-width:90px;font-size:0.8rem}
  .team .score{font-size:1rem !important;line-height:1.2;min-width:auto;padding:0 2px}
  .card .slider .prev{left:2px !important}
  .card .slider .next{right:2px !important}
}

/* ===========================
   Features
   =========================== */
.feature-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 0 !important;
}

.feature{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content: center;
  text-align: left;
  flex: 1;
}

.feature .icon{
  width:40px;
  height:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#0f172a;
  border:1px solid #213b77;
  flex-shrink: 0;
}

.feature h3{
  margin-top:2px;
  margin-bottom:4px;
  font-size:1rem;
}

.feature p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.35;
}

@media (max-width: 768px){
  .feature{gap:10px}
  .feature .icon{width:36px;height:36px;font-size:0.9rem}
  .feature h3{font-size:0.9rem;margin-bottom:2px}
  .feature p{font-size:0.85rem}
}

@media (max-width: 480px){
  .feature {
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
  
  .feature .icon {
    margin-bottom: 8px;
  }
}

.cred{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;margin-top:6px}
.cred .pill{flex:1;min-width:200px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.cred .num{font-size:1.3rem;font-weight:900}
.cred .lbl{color:var(--muted);font-size:.9rem}

@media (max-width: 768px){
  .cred{gap:10px}
  .cred .pill{min-width:150px;padding:10px}
  .cred .num{font-size:1.1rem}
  .cred .lbl{font-size:0.8rem}
}
@media (max-width: 480px){
  .cred .pill{min-width:120px;padding:8px}
  .cred .num{font-size:1rem}
  .cred .lbl{font-size:0.75rem}
}

/* ===========================
   PLANOS
   =========================== */
.pricing {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 0 !important;
}

.pricing .price{
  font-size:1.6rem;
  font-weight:900;
  margin:8px 0;
}

.pricing .price-original {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.pricing ul{
  list-style:none;
  display: flex;
  flex-direction: column;
  gap:8px;
  margin:8px 0;
  padding: 0;
  text-align: left;
  align-items: center;
}

.pricing li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  color:#cfe1ff;
  max-width: 280px;
  width: 100%;
}

.pricing .cta{
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  justify-content: center;
}

.pricing .btn-cta-lg {
  display: block;
  width: auto;
  min-width: 160px;
  max-width: 220px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 768px){
  .pricing .price{font-size:1.4rem}
  .pricing li{font-size:0.9rem; max-width: 240px;}
  .pricing .btn-cta-lg {
    min-width: 140px;
    max-width: 200px;
    padding: 10px 16px;
  }
}
@media (max-width: 480px){
  .pricing .price{font-size:1.2rem}
  .pricing li{
    font-size:0.85rem;
    gap:6px;
    max-width: 200px;
    text-align: center;
    justify-content: center;
  }
  .pricing .btn-cta-lg {
    min-width: 120px;
    max-width: 180px;
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}

/* ===========================
   Rodapé simples
   =========================== */
.footer{
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  padding: 20px 0;
  margin-top: auto;
}
hr.sep{
  border:none;
  border-top:1px solid var(--border);
  opacity:.5;
  margin:18px 0;
}
.small{font-size:.9rem;color:var(--muted)}

@media (max-width: 480px){
  .footer{
    font-size:0.8rem;
    padding: 15px 0;
  }
  hr.sep{margin:14px 0}
}

/* ===========================
   Layout principal corrigido
   =========================== */
.matches-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:900px){.matches-pair{grid-template-columns:1fr}}

/* Espaçamento entre seções */
.home-container > * + * {
  margin-top: 18px;
}

@media (min-width: 1024px){
  .home-container > * + * { margin-top: 22px; }
}

/* Hero com margem inferior específica */
.hero-cta { margin-bottom: 18px; }

/* Cards com margem inferior consistente */
.card { margin-bottom: 18px; }

.card h2 { margin-bottom: 12px; }

/* Performance das Dicas */
.summary-row { 
  margin-top: 14px;
  margin-bottom: 10px;
  gap: 14px;
}
.stat { padding: 14px 16px; }
.kpi-actions { margin-top: 8px; }

/* Grids */
.grid-2x2 { gap: 20px; }
@media (max-width: 900px){ .grid-2x2 { gap: 16px; } }
@media (max-width: 480px){ .grid-2x2 { gap: 12px; } }

.grid-3x1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .grid-3x1 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid-3x1 {
    grid-template-columns: 1fr;
  }
}

/* Sliders */
.slider { padding: 0 44px; min-height: 220px; }
.card .slider .prev { left: 6px; }
.card .slider .next { right: 6px; }
@media (max-width: 768px){
  .slider { padding: 0 38px; min-height: 200px; }
}
@media (max-width: 480px){
  .slider { padding: 0 32px; min-height: 240px; }
}

/* Separações entre seções */
.section + .section,
.card + .card,
.card + .grid-2x2,
.grid-2x2 + .card { margin-top: 18px; }

.card { box-shadow: 0 14px 32px rgba(0,0,0,.55); }

/* Classe de margem superior */
.section-mt {
  margin-top: 16px;
}

/* ===========================
   Responsividade geral
   =========================== */
@media (max-width: 480px) {
  .home-container,
  .container {
    width: min(1200px, 95%);
    margin: 16px auto;
  }
  
  .card {
    padding: 12px;
    border-radius: 12px;
  }
  
  .card h2 {
    font-size: 0.95rem;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
}

@media (max-width: 360px) {
  body {
    font-size: 13px;
  }
  
  .home-container,
  .container {
    width: 98%;
    margin: 12px auto;
  }
  
  .card {
    padding: 10px;
    border-radius: 10px;
  }
  
  .card h2 {
    font-size: 0.9rem;
  }
  
  .pricing .btn-cta-lg {
    min-width: 100px;
    max-width: 160px;
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .pricing li {
    max-width: 180px;
    font-size: 0.8rem;
  }
}

/* ===========================
   Reset de margens para grids
   =========================== */
.grid-3x1 .card,
.grid-2x2 .card {
  margin-top: 0;
}

.card.pricing,
.card.feature-card {
  margin-top: 0 !important;
}

/* ===========================
   Background fixo
   =========================== */
html {
  background: linear-gradient(to bottom, #0a0a0a, rgb(20,20,20));
  background-attachment: fixed;
  min-height: 100%;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #0a0a0a, rgb(20,20,20));
  z-index: -1;
}