:root{
  --bg:#0a0f0c;
  --bg2:#111a15;
  --panel:#16211b;
  --panel2:#1c2a22;
  --line:#2b3b31;
  --field:#22b562;
  --field-dim:#159a4f;
  --amber:#ffc23d;
  --amber-dim:#e8a521;
  --text:#f2f7f3;
  --muted:#9fb4a7;
  --muted2:#5e7066;
  --red:#e5484d;
  --green:#46d17f;
  --chalk:#dfe7e0;
  --shadow:0 18px 50px -12px rgba(0,0,0,.7);

  /* ESCALA DE ESPAÇAMENTO
     Um conjunto fechado de medidas, em vez de número solto em cada regra.
     Antes cada bloco escolhia o próprio valor (26px aqui, 44px ali, 14px
     acolá) e o resultado era um ritmo vertical irregular: seção colada na
     seguinte em um lugar, sobrando espaço em outro. Com a escala, "o
     espaço entre duas seções" passa a ser uma decisão só, tomada uma vez.

     Como usar:
       --sp-1  detalhe dentro de um componente
       --sp-2  entre cartões de uma mesma lista
       --sp-3  entre o título de uma seção e o conteúdo dela
       --sp-4  respiro grande dentro de um bloco
       --sp-5  entre seções no celular
       --sp-6  entre seções no desktop */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:40px;
  --sp-5:64px;
  --sp-6:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    none;
}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* "margin-inline:auto" e nao "margin:0 auto".
   A .wrap serve só pra centralizar e limitar a largura, então ela só pode
   mandar no eixo HORIZONTAL. Escrito como "margin:0 auto", ela também zerava
   a margem de CIMA e de BAIXO de tudo que usa a classe, e como quase toda
   <section> tem class="wrap", o ritmo vertical inteiro ia por água abaixo:
   as seções da home ficavam com 0px entre elas, uma colada na outra. */
.wrap{position:relative;z-index:2;max-width:1180px;margin-inline:auto;padding:0 24px}

/* NAV */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(10,14,12,.78);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-family:'Bebas Neue';font-size:30px;letter-spacing:1px;color:var(--text)}
.logo .dot{width:13px;height:13px;border-radius:50%;background:var(--field);box-shadow:0 0 14px var(--field);display:inline-block}
.logo b{color:var(--amber)}
/* A marca precisa ficar num elemento só.
   O .logo é display:flex com gap:10px, e no flexbox um texto solto vira um
   item independente. Como o HTML era [bolinha]["PALPIT"][<b>ERO</b>], eram
   TRÊS itens, e o gap de 10px entrava também entre PALPIT e ERO: a marca
   aparecia partida, "PALPIT ERO". Com o <span class="marca"> em volta, os
   itens do flex voltam a ser dois (bolinha e marca), o gap fica só entre
   eles, e dentro da marca o texto e o <b> seguem inline, colados. */
.logo .marca,.age-gate-logo .marca{display:inline;letter-spacing:inherit}
.logo .marca b,.age-gate-logo .marca b{margin:0;padding:0;letter-spacing:inherit}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.3px;
  transition:color .2s;position:relative;padding-bottom:3px}
.nav-links a:hover{color:var(--text)}
/* Risco de giz que se abre do centro pras pontas, igual à marcação do campo */
.nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  background:var(--amber);border-radius:2px;
  transition:left .22s cubic-bezier(.2,.7,.3,1), right .22s cubic-bezier(.2,.7,.3,1)}
.nav-links a:hover::after,.nav-links a.active::after{left:0;right:0}

/* Marcador de "perfil incompleto": bolinha vermelha, mesmo padrão do
   marcador de notificação de qualquer app. Só aparece quando a pessoa está
   logada e ainda não escolheu time favorito nem preferência de liga. */
.nav-badge{position:absolute;top:-2px;right:-11px;width:8px;height:8px;
  border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--bg)}

/* A barra de cima ganha sombra assim que a página rola */
nav{transition:box-shadow .25s}
nav.scrolled{box-shadow:0 8px 30px -18px rgba(0,0,0,.65)}
.btn{font-family:'Archivo';font-weight:700;border:none;cursor:pointer;border-radius:10px;transition:.2s;font-size:14px}
.btn-amber{background:var(--amber);color:#1a1206;padding:11px 20px}
.btn-amber:hover{background:#ffc54a;transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:11px 20px}
.btn-ghost:hover{border-color:var(--field);color:var(--field)}
@media(max-width:780px){.nav-links a{display:none}}

/* HERO */
/* Os 24px laterais precisam estar aqui: .hero e .wrap têm o mesmo peso e o
   .hero vem depois, então um "padding:90px 0" zerava a folga lateral que a
   .wrap dava e o título do hero ficava 24px mais à esquerda que todo o
   resto da página, desalinhado das seções de baixo. */
.hero{padding:var(--sp-6) 24px var(--sp-5);position:relative}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);
  padding:7px 14px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--field);margin-bottom:26px}
.tag .pulse{width:8px;height:8px;border-radius:50%;background:var(--field);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(28,138,74,.6)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(28,138,74,0)}}
h1{font-family:'Bebas Neue';font-size:clamp(48px,8.5vw,104px);line-height:.92;letter-spacing:1px;max-width:13ch}
h1 .hl{color:var(--amber);position:relative}
.hero p.lead{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:54ch;margin:var(--sp-3) 0 var(--sp-4);line-height:1.6}
.hero-cta{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.hero-stats{display:flex;gap:var(--sp-4);margin-top:var(--sp-5);flex-wrap:wrap}
.hs b{font-family:'Bebas Neue';font-size:44px;color:var(--text);display:block;line-height:1}
.hs span{font-size:13px;color:var(--muted2);font-weight:600;letter-spacing:.5px}
.hs b em{color:var(--field);font-style:normal}

/* SECTION */
/* RITMO VERTICAL
   margin-block (nao padding) de proposito: margens vizinhas colapsam entre
   si, entao duas secoes seguidas ficam com UM respiro de --sp-6, e nao com
   dois somados. O padding tambem some quando a secao esta vazia. */
section{margin-block:var(--sp-6);position:relative}
section:first-of-type{margin-block-start:var(--sp-4)}
.sec-head{margin-bottom:var(--sp-3)}
.sec-kick{font-family:'Space Mono';font-size:13px;color:var(--amber);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--sp-1)}
.sec-title{font-family:'Bebas Neue';font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:.5px}
.sec-sub{color:var(--muted);font-size:17px;max-width:62ch;margin-top:var(--sp-2);line-height:1.6}

/* PILLARS */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
@media(max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:var(--sp-3);position:relative;overflow:hidden;transition:.25s}
.pillar:hover{transform:translateY(-5px);border-color:var(--field-dim)}
.pillar .bar{position:absolute;top:0;left:0;right:0;height:4px}
.pillar:nth-child(1) .bar{background:#3b82f6}
.pillar:nth-child(2) .bar{background:var(--field)}
.pillar:nth-child(3) .bar{background:var(--amber)}
.pillar:nth-child(4) .bar{background:#b5453a}
.pillar .num{font-family:'Space Mono';font-size:12px;color:var(--muted2);letter-spacing:2px;margin-bottom:14px}
.pillar h3{font-size:20px;font-weight:800;margin-bottom:10px;letter-spacing:-.3px}
.pillar p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* MATCH ANALYZER */
.analyzer{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.match-head{background:var(--panel2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.match-league{font-family:'Space Mono';font-size:12px;color:var(--muted);letter-spacing:1px;display:flex;align-items:center;gap:8px}
.match-league .live{background:var(--red);color:#fff;font-family:'Archivo';font-weight:800;font-size:10px;padding:3px 8px;border-radius:5px;letter-spacing:1px}
.match-select{display:flex;gap:8px;flex-wrap:wrap}
.league-filter{display:flex;gap:7px;flex-wrap:wrap}
.lf-btn{background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:6px 13px;min-height:48px;
  display:inline-flex;align-items:center;box-sizing:border-box;border-radius:8px;font-size:12px;font-weight:700;
  cursor:pointer;transition:.2s;font-family:'Space Mono';letter-spacing:.3px}
.lf-btn:hover{color:var(--text);border-color:var(--field-dim)}
.lf-btn.active{background:var(--amber);border-color:var(--amber);color:#1a1206}
.match-chips-wrap{padding:16px 26px 0;overflow-x:auto}
.match-chips-wrap .match-select{flex-wrap:nowrap;min-width:min-content;padding-bottom:6px}
.chip{background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:7px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--field-dim)}
.chip.active{background:var(--field);border-color:var(--field);color:#fff}
.teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--sp-4) var(--sp-3);gap:var(--sp-2)}
.team{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.crest{width:74px;height:74px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:34px;color:#fff;box-shadow:var(--shadow)}
.team-name{font-weight:800;font-size:18px}
.team-meta{font-family:'Space Mono';font-size:12px;color:var(--muted)}
.vs{font-family:'Bebas Neue';font-size:30px;color:var(--muted2)}
.kickoff{text-align:center;font-family:'Space Mono';font-size:12px;color:var(--amber);margin-top:6px}

/* PROBABILITY BAR */
.prob-wrap{padding:0 var(--sp-3) var(--sp-3)}
.prob-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:10px}
.prob-label .pl-home{color:var(--field)}
.prob-label .pl-draw{color:var(--muted)}
.prob-label .pl-away{color:var(--amber)}
.prob-bar{height:42px;border-radius:12px;overflow:hidden;display:flex;border:1px solid var(--line)}
.prob-seg{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;transition:width .8s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.seg-home{background:var(--field)}
.seg-draw{background:#3a4a40;color:var(--chalk)}
.seg-away{background:var(--amber);color:#241803}

/* FACTORS */
.factors{padding:var(--sp-1) var(--sp-3) var(--sp-3)}
.factors-title{font-family:'Space Mono';font-size:12px;color:var(--muted2);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.factor{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line)}
.factor:last-child{border-bottom:none}
.factor .ico{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:17px}
.factor .ftext{flex:1}
.factor .ftext b{font-size:14.5px;display:block}
.factor .ftext span{font-size:13px;color:var(--muted)}
.factor .fmeter{width:90px;height:7px;border-radius:4px;background:var(--bg2);overflow:hidden;flex-shrink:0}
.factor .fmeter i{display:block;height:100%;border-radius:4px;background:var(--field)}
.factor.away .fmeter i{background:var(--amber)}

/* ABAS DE ESPORTE (página Análise) */
.sport-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.sport-tab{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:10px 18px;min-height:48px;box-sizing:border-box;border-radius:11px;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:.2s;display:flex;align-items:center;gap:8px}
.sport-tab:hover{color:var(--text);border-color:var(--field-dim)}
.sport-tab.active{background:var(--field);border-color:var(--field);color:#fff}

/* ÚLTIMOS 5 JOGOS */
.last5-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:4px 26px 26px;border-top:1px solid var(--line);padding-top:22px}
@media(max-width:620px){.last5-wrap{grid-template-columns:1fr}}
.last5-title{font-family:'Space Mono';font-size:11.5px;color:var(--muted2);letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:10px}
.last5-col.away{text-align:right}
.last5-list{display:flex;flex-direction:column;gap:7px}
.last5-item{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px}
.last5-col.away .last5-item{flex-direction:row-reverse}
.last5-col.away .l5-info{justify-content:flex-end}
.l5-badge{width:24px;height:24px;flex-shrink:0;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-family:'Bebas Neue';font-size:14px;color:#fff}
.l5-badge.r-V{background:var(--field)}
.l5-badge.r-E{background:var(--muted2)}
.l5-badge.r-D{background:var(--red)}
.last5-item .l5-info{flex:1;font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.last5-item .l5-local{font-family:'Space Mono';font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted2);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.last5-item .l5-placar{font-family:'Space Mono';font-weight:700;color:var(--text)}
.last5-empty{color:var(--muted2);font-size:12.5px}

/* MODO OUTROS ESPORTES: probabilidade implícita das odds */
.odds-mode .odds-cards{padding:22px 26px}
.odds-note{background:rgba(255,194,61,.08);border:1px solid rgba(255,194,61,.25);border-radius:11px;
  padding:13px 16px;color:var(--muted);font-size:13px;margin-top:6px}
.occard{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.occard .oc-meta{font-family:'Space Mono';font-size:11px;color:var(--muted2);letter-spacing:.5px;margin-bottom:6px}
.occard .oc-teams{font-weight:800;font-size:16.5px;margin-bottom:14px}
.oc-bar{height:34px;border-radius:9px;overflow:hidden;display:flex;border:1px solid var(--line);margin-bottom:12px}
.oc-seg{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  color:#fff;white-space:nowrap;transition:width .8s cubic-bezier(.4,0,.2,1)}
.oc-seg.oc-home{background:var(--field)}
.oc-seg.oc-draw{background:#3a4a40;color:var(--chalk)}
.oc-seg.oc-away{background:var(--amber);color:#241803}
.oc-results{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.oc-res{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.oc-res .n{font-size:12px;color:var(--muted);margin-bottom:4px}
.oc-res .o{font-family:'Space Mono';font-size:13px;color:var(--text)}
.oc-res .o b{color:var(--amber)}

/* ODDS COMPARATOR */
.odds-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.odds-cell{background:var(--panel);padding:16px 14px;font-size:14px}
.odds-cell.head{background:var(--panel2);font-family:'Space Mono';font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;font-weight:700}
.odds-cell.house{font-weight:800;display:flex;align-items:center;gap:8px}
.house-logo{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff}
.odds-val{font-family:'Space Mono';font-weight:700;font-size:15px;position:relative}
.odds-val.best{color:var(--green)}
.odds-val.best::after{content:"/";font-size:11px;margin-left:5px}
@media(max-width:620px){.odds-grid{font-size:12px}.odds-cell{padding:12px 8px}}

/* GENERIC CARD GRID */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:var(--sp-3);transition:.25s}
.feat:hover{border-color:var(--field-dim);transform:translateY(-4px)}
.feat .fi{width:46px;height:46px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;border:1px solid var(--line)}
.feat h4{font-size:17px;font-weight:800;margin-bottom:8px}
.feat p{color:var(--muted);font-size:14px;line-height:1.6}

/* DATA LIST */
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
@media(max-width:680px){.data-grid{grid-template-columns:1fr}}
.dataitem{display:flex;gap:var(--sp-2);background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:var(--sp-3)}
.dataitem .di-ico{font-size:22px;flex-shrink:0}
.dataitem b{font-size:15px;display:block;margin-bottom:5px}
.dataitem span{color:var(--muted);font-size:13.5px;line-height:1.5}

/* CALCULATOR */
.calc{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:var(--sp-3);box-shadow:var(--shadow)}
.calc-row{margin-bottom:var(--sp-3)}
.calc-row label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:9px;letter-spacing:.3px}
.calc-input{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:14px 16px;border-radius:11px;font-family:'Space Mono';font-size:16px;font-weight:700;outline:none;transition:.2s}
.calc-input:focus{border-color:var(--field)}
.slider-row{display:flex;align-items:center;gap:16px}
input[type=range]{flex:1;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--bg2);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 12px rgba(245,180,49,.5)}
.slider-val{font-family:'Space Mono';font-weight:700;color:var(--amber);min-width:48px;text-align:right}
.calc-result{background:var(--field-dim);border-radius:14px;padding:24px;text-align:center;margin-top:6px}
.calc-result span{font-size:13px;color:rgba(255,255,255,.7);font-weight:600;letter-spacing:.5px}
.calc-result b{font-family:'Bebas Neue';font-size:52px;color:#fff;display:block;line-height:1;margin-top:6px}
.calc-result .calc-ref{margin-top:8px;font-size:12px;color:rgba(255,255,255,.75);font-family:'Space Mono'}

/* Aviso de risco dinâmico: 4 faixas, de seguro a perigo */
.calc-warn{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--muted);display:flex;gap:11px;
  align-items:flex-start;padding:15px 17px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);transition:.2s}
.calc-warn svg{flex-shrink:0;margin-top:1px}
.calc-warn b{color:var(--text)}
.calc-warn.risk-safe{border-color:rgba(70,209,127,.35)}
.calc-warn.risk-safe svg,.calc-warn.risk-safe b{color:var(--green)}
.calc-warn.risk-medio{border-color:rgba(255,194,61,.4)}
.calc-warn.risk-medio svg,.calc-warn.risk-medio b{color:var(--amber)}
.calc-warn.risk-alto{border-color:rgba(255,194,61,.6);background:rgba(255,194,61,.07)}
.calc-warn.risk-alto svg,.calc-warn.risk-alto b{color:#ff9f1a}
.calc-warn.risk-perigo{border-color:rgba(229,72,77,.5);background:rgba(229,72,77,.1)}
.calc-warn.risk-perigo svg,.calc-warn.risk-perigo b{color:var(--red)}

/* ROADMAP */
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
@media(max-width:760px){.roadmap{grid-template-columns:1fr}}
.phase{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:var(--sp-3);position:relative}
.phase .pnum{font-family:'Bebas Neue';font-size:60px;line-height:.8;color:var(--line);position:absolute;top:18px;right:20px}
.phase h4{font-family:'Space Mono';font-size:13px;color:var(--amber);letter-spacing:1px;margin-bottom:6px}
.phase h3{font-size:19px;font-weight:800;margin-bottom:12px}
.phase ul{list-style:none}
.phase li{color:var(--muted);font-size:14px;padding:6px 0 6px 22px;position:relative}
.phase li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;background:var(--field)}
.phase.p2 li::before{background:var(--amber)}
.phase.p3 li::before{background:#3b82f6}

/* LEAGUES */
.leagues{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-3)}
.league-pill{background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:11px 20px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px;transition:.2s;cursor:default}
.league-pill:hover{border-color:var(--field);color:var(--field)}
.league-pill .lc{width:10px;height:10px;border-radius:3px}

/* PRICING */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);max-width:760px;margin:0 auto}
@media(max-width:640px){.pricing{grid-template-columns:1fr}}
.price{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:var(--sp-3);position:relative}
.price.pro{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 20px 50px -20px rgba(245,180,49,.4)}
.price .ribbon{position:absolute;top:-12px;right:24px;background:var(--amber);color:#1a1206;font-size:11px;font-weight:900;letter-spacing:1px;padding:5px 12px;border-radius:7px;text-transform:uppercase}
.price h3{font-family:'Bebas Neue';font-size:30px;letter-spacing:.5px}
.price .amount{font-family:'Bebas Neue';font-size:58px;line-height:1;margin:10px 0 4px}
.price .amount em{font-family:'Archivo';font-size:16px;font-style:normal;color:var(--muted);font-weight:600}
.price .pdesc{color:var(--muted);font-size:14px;margin-bottom:22px}
.price ul{list-style:none;margin-bottom:26px}
.price li{padding:9px 0 9px 26px;position:relative;font-size:14px;border-bottom:1px solid var(--line)}
.price li::before{content:"/";position:absolute;left:0;color:var(--field);font-weight:900}
.price li.off{color:var(--muted2)}
.price li.off::before{content:"·";color:var(--muted2)}
.price .btn{width:100%}

/* RESPONSIBLE BANNER */
.resp{background:var(--panel2);border:1px solid var(--field-dim);border-radius:18px;padding:var(--sp-3);display:flex;gap:var(--sp-3);align-items:flex-start}
.resp .ri{font-size:30px}
.resp h4{font-size:18px;font-weight:800;margin-bottom:8px}
.resp p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* FOOTER
   Precisa ser "footer.wrap", não só "footer": o rodapé também leva a classe
   .wrap (pro conteúdo alinhar com o resto da página), e ".wrap" tem
   "padding:0 24px" com peso MAIOR que um seletor de elemento sozinho. Isso
   zerava na prática o padding-top e o margin-top do rodapé inteiro, e era
   por isso que ele ficava grudado na linha divisória de cima. */
   Atenção ao escrever o padding: precisa declarar os quatro lados. Um
   "padding:96px 0 48px" zera a folga das LATERAIS que a .wrap dava, e o
   texto do copyright vai colar na borda esquerda da tela. */
/* ============ AVISO DE PERFIL INCOMPLETO ============ */
.onboarding-aviso{background:var(--panel2);border-bottom:1px solid var(--field-dim)}
.onboarding-in{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:12px 24px;color:var(--text);font-size:14px}
.onboarding-in .btn{padding:9px 16px;font-size:13px;flex-shrink:0}
.onboarding-x{margin-left:auto;background:transparent;border:none;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;min-width:48px;min-height:48px}
.onboarding-x:hover{color:var(--text)}
@media(max-width:560px){
  .onboarding-in{padding:10px 16px}
  .onboarding-in .btn{width:100%;order:3}
  .onboarding-x{order:2;margin-left:auto}
}

footer.wrap{border-top:1px solid var(--line);padding:var(--sp-6) 24px var(--sp-4);margin-top:var(--sp-6)}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-start}
.foot-tagline{display:flex;align-items:flex-start;gap:10px}
.foot-mono{width:22px;height:22px;flex-shrink:0;margin-top:1px}
.foot-col h5{font-family:'Space Mono';font-size:12px;color:var(--muted2);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:14px;padding:5px 0;transition:.2s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--muted2);font-size:13px}

/* ANIMAÇÃO DE ENTRADA, VERSÃO SEGURA
   Regra de ouro: o conteúdo é SEMPRE visível. A animação só desliza um
   pouquinho pra cima, sem nunca zerar a opacidade. Assim, mesmo que o
   JavaScript não rode (4G lento, erro, aba em segundo plano), a página
   aparece inteira. Antes, o conteúdo começava invisível esperando o JS,
   e quando o JS falhava no celular a tela ficava em branco. */
/* REVEAL REMOVIDO.
   O conteudo nao tem mais NENHUM mecanismo que dependa de JavaScript para
   aparecer. A classe .reveal continua no HTML mas nao esconde mais nada:
   e apenas um marcador inerte. Se um dia voltar a animacao, ela nao pode
   mexer em opacity nem em transform de bloco de conteudo. */
.reveal{opacity:1 !important;transform:none !important;visibility:visible !important}

/* MODEL OUTPUT */
.model-out{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin:0 26px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
@media(max-width:620px){.model-out{grid-template-columns:1fr 1fr}}
.mo-item{background:var(--panel2);padding:14px 16px}
.mo-item span{display:block;font-size:11px;color:var(--muted2);font-family:'Space Mono';letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.mo-item b{font-family:'Space Mono';font-size:16px;color:var(--text);font-weight:700}
.mo-item.odds{background:var(--field-dim)}
.mo-item.odds span{color:rgba(255,255,255,.65)}
.mo-item.odds b{color:#fff}
.data-source{font-family:'Space Mono';font-size:11px;color:var(--muted2);padding:14px 26px 20px;letter-spacing:.5px}

/* LAB */
.lab{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:720px){.lab-grid{grid-template-columns:1fr}}
.lab-team h4{font-family:'Bebas Neue';font-size:24px;letter-spacing:.5px;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.lab-field{margin-bottom:13px}
.lab-field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:5px}
.lab-field input{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:9px 12px;border-radius:8px;font-family:'Space Mono';font-size:14px;outline:none;transition:.2s}
.lab-field input:focus{border-color:var(--field)}
.lab-run{margin-top:8px;width:100%}
.lab-result{margin-top:24px;display:none}
.lab-result.show{display:block;animation:fadeUp .5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============ MULTI-PAGE ============ */
.nav-links a.active{color:var(--amber)}
/* Todo cabecalho de pagina comeca a MESMA distancia da barra de cima.
   Antes cada pagina escolhia a sua: 40px em esportes, 34px no perfil,
   60px nas demais, e no celular isso virava 34, 54, 66 e 121px. */
.page-head{padding-block:var(--sp-5) var(--sp-3)}
.page-head .crumb{font-family:'Space Mono';font-size:12px;color:var(--muted2);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--sp-2)}
.page-head .crumb a{color:var(--muted2);text-decoration:none;transition:.2s}
.page-head .crumb a:hover{color:var(--field)}
.page-head h1{font-family:'Bebas Neue';font-size:clamp(40px,7vw,80px);line-height:.95;letter-spacing:.5px;max-width:18ch}
.page-head h1 .hl{color:var(--amber)}
.page-head .lead{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:62ch;margin-top:var(--sp-2);line-height:1.6}
.page-content{padding-bottom:var(--sp-5)}

/* Comparador de odds: um card por jogo, uma linha por resultado (1/X/2) */
.cmp-list{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.cmp-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.cmp-head{background:var(--panel2);padding:16px 20px;border-bottom:1px solid var(--line)}
.cmp-head .cmp-teams{font-weight:800;font-size:16px;margin-bottom:3px}
.cmp-head .cmp-meta{font-family:'Space Mono';font-size:11.5px;color:var(--muted)}
.cmp-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:16px}
.cmp-row-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:9px}
.cmp-row-label .cmp-fair{margin-left:auto;font-family:'Space Mono';font-weight:700;color:var(--amber);font-size:12px;
  text-transform:none;letter-spacing:0}
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cmp-chip{display:flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;min-height:48px;box-sizing:border-box;font-family:'Space Mono';
  font-size:13.5px;font-weight:700;color:var(--text)}
.cmp-chip .casa-nome{font-family:'Archivo';font-weight:600;color:var(--muted);font-size:12px}
.cmp-chip.best{border-color:var(--green);color:var(--green);background:rgba(70,209,127,.1)}
.cmp-chip .selo-melhor{font-family:'Archivo';font-size:9px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;
  background:var(--green);color:#06210f;border-radius:5px;padding:2px 6px}
.cmp-chip .selo-valor{font-family:'Archivo';font-size:9px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;
  background:var(--amber);color:#241803;border-radius:5px;padding:2px 6px}
.cmp-tag-exemplo{font-size:9.5px;color:var(--muted2);text-transform:none;font-weight:600;margin-left:2px}
@media(max-width:480px){.cmp-head,.cmp-body{padding-left:14px;padding-right:14px}}

/* CTA box no fim de cada página */
.cta-box{margin-top:var(--sp-5);background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:var(--sp-3);text-align:center}
.cta-box h3{font-family:'Bebas Neue';font-size:28px;letter-spacing:.5px;margin-bottom:8px}
.cta-box p{color:var(--muted);margin-bottom:18px;font-size:15px}
.cta-box .btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ============ HOME: DESTAQUES DO DIA ============ */
.dq-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.dq-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--sp-2) var(--sp-3)}
.dq-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.dq-badge{font-family:'Space Mono';font-size:10.5px;color:var(--field);letter-spacing:.5px;text-transform:uppercase;
  background:rgba(34,181,98,.12);border:1px solid rgba(34,181,98,.3);border-radius:20px;padding:3px 10px}
.dq-kickoff{font-family:'Space Mono';font-size:11px;color:var(--muted2)}
.dq-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dq-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.dq-teams{font-weight:700;font-size:15px}
.dq-outcome{font-size:13px;color:var(--amber);font-weight:600}
.dq-nums{display:flex;align-items:center;gap:14px}
.dq-compare{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);text-align:right}
.dq-compare b{color:var(--text)}
.dq-gap{font-family:'Bebas Neue';font-size:32px;color:var(--field);line-height:1;white-space:nowrap}
.dq-gap small{font-family:'Space Mono';font-size:11px;color:var(--muted2);margin-left:2px}
.dq-footnote{color:var(--muted);font-size:13.5px;margin-top:var(--sp-2);text-align:center}
.dq-footnote a{color:var(--amber);text-decoration:none;font-weight:600}
.dq-footnote a:hover{text-decoration:underline}
@media(max-width:560px){
  .dq-row{flex-direction:column;align-items:flex-start}
  .dq-nums{width:100%;justify-content:space-between}
}

/* ============ HOME: PRÓXIMOS JOGOS ============ */
.home-games{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-3)}
@media(max-width:900px){.home-games{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.home-games{grid-template-columns:1fr}}
.hg-loading{grid-column:1/-1;text-align:center;color:var(--muted2);padding:40px;font-family:'Space Mono';font-size:14px}

/* Aviso honesto: os jogos na tela são do último resultado bom guardado, não
   de uma busca fresca, porque Understat/football-data.org estão bloqueados
   agora. Fica sempre visível junto dos jogos, nunca escondido. */
.dados-desatualizados{grid-column:1/-1;background:rgba(255,194,61,.08);
  border:1px solid rgba(255,194,61,.3);border-radius:10px;padding:10px 14px;
  color:var(--amber);font-size:13px;text-align:center;margin-bottom:var(--sp-2)}
.hg-loading a{color:var(--amber);text-decoration:none}
.hg-loading a:hover{text-decoration:underline}
.hg-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--sp-3);text-decoration:none;color:inherit;display:block;transition:.2s;cursor:pointer}
.hg-card:hover{border-color:var(--field-dim);transform:translateY(-3px)}
.hg-meta{font-family:'Space Mono';font-size:10.5px;color:var(--muted2);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.hg-teams{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.hg-team{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.hg-team.away{justify-content:flex-end}
.hg-crest{width:30px;height:30px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:13px;color:#fff}
.hg-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-vs{font-family:'Space Mono';font-size:11px;color:var(--muted2)}
.hg-bar{height:30px;border-radius:7px;overflow:hidden;display:flex;border:1px solid var(--line)}
.hg-seg{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;white-space:nowrap}

/* Card de "Próximos jogos" pra liga sem modelo próprio (preferência do
   usuário fora de futebol): mesmo cartão, mas com probabilidade da odd em
   vez da barra do Dixon-Coles. */
.hg-odds-teams{font-weight:700;font-size:15px;margin-bottom:12px}
.hg-odds-list{display:flex;flex-direction:column;gap:6px}
.hg-odds-row{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:7px 11px;font-size:12.5px}
.hg-odds-row span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-odds-row b{color:var(--amber);font-family:'Space Mono';flex-shrink:0}
.hg-seg.h{background:var(--field)}
.hg-seg.d{background:#3a4a40;color:var(--chalk)}
.hg-seg.a{background:var(--amber);color:#241803}

/* ============ HOME: COMO USAR ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-3)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:var(--sp-3);position:relative}
.step-num{font-family:'Bebas Neue';font-size:54px;line-height:1;color:var(--amber);margin-bottom:8px}
.step h3{font-size:18px;font-weight:800;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* ============ CALCULADORA (layout limpo) ============ */
.calc-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:760px){.calc-layout{grid-template-columns:1fr}}
.calc-explain{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:28px}
.calc-explain h3{font-family:'Bebas Neue';font-size:26px;letter-spacing:.5px;margin-bottom:14px;color:var(--amber)}
.calc-explain p{color:var(--muted);font-size:15px;line-height:1.6}
.calc-explain b{color:var(--text)}

/* ============ NAV (usuário logado) ============ */
.nav-auth{display:flex;align-items:center;gap:14px}
.nav-login{color:var(--text);text-decoration:none;font-weight:600;font-size:14px;transition:.2s}
.nav-login:hover{color:var(--field)}
.user-pill{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;background:var(--bg2);border:1px solid var(--line);border-radius:100px;text-decoration:none;color:var(--text);transition:.2s}
.user-pill:hover{border-color:var(--field-dim)}
.user-pill img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.user-initial{width:32px;height:32px;border-radius:50%;background:var(--field);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.user-name{font-size:13px;font-weight:700}
@media(max-width:680px){.user-name{display:none}}

/* ============ AUTH (cadastro / login) ============ */
.auth-card{max-width:440px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:var(--sp-3)}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:.3px}
.auth-field input{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:10px;font-family:inherit;font-size:15px;outline:none;transition:.2s}
.auth-field input:focus{border-color:var(--field)}
.auth-foot{margin-top:20px;text-align:center;font-size:14px;color:var(--muted)}
.auth-foot a{color:var(--amber);text-decoration:none;font-weight:700}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px;background:#fff;color:#1f1f1f;border-radius:10px;text-decoration:none;font-weight:700;font-size:15px;transition:.2s;margin-bottom:16px;border:1px solid transparent}
.btn-google:hover{background:#f1f1f1}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted2);font-size:12px;font-family:'Space Mono';margin-bottom:16px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.flash{padding:11px 14px;border-radius:8px;font-size:14px;margin-bottom:14px;border:1px solid}
.flash-erro{background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.4);color:#fc888c}
.flash-ok{background:rgba(28,138,74,.1);border-color:rgba(28,138,74,.4);color:#5fd293}

/* ============ CONTA ============ */
.conta-grid{display:grid;grid-template-columns:300px 1fr;gap:var(--sp-3);align-items:start}
@media(max-width:760px){.conta-grid{grid-template-columns:1fr}}
.conta-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:var(--sp-3);text-align:center}
.conta-avatar{width:88px;height:88px;border-radius:50%;background:var(--field);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;overflow:hidden;font-family:'Bebas Neue';font-size:40px}
.conta-avatar img{width:100%;height:100%;object-fit:cover}
.conta-card h3{font-size:20px;font-weight:800;margin-bottom:4px}
.conta-email{color:var(--muted);font-size:13px;margin-bottom:14px;word-break:break-all}
.conta-plano{font-size:13px;color:var(--muted);font-family:'Space Mono';letter-spacing:1px}
.conta-plano b{color:var(--text);font-weight:700}
.conta-plano b.plano-pro{color:var(--amber)}

.bk-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.bk-item b{display:block;font-size:14px;margin-bottom:3px}
.bk-item span{font-size:12px;color:var(--muted)}
.bk-del{background:transparent;border:none;color:var(--muted2);font-size:12px;cursor:pointer;font-family:inherit;transition:.2s}
.bk-del:hover{color:var(--red)}

/* ============ GATE DE IDADE ============ */
.age-gate{position:fixed;inset:0;z-index:9999;background:rgba(5,8,6,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px}
.age-gate-box{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:40px 34px;max-width:440px;text-align:center;box-shadow:var(--shadow)}
.age-gate-logo{font-family:'Bebas Neue';font-size:32px;letter-spacing:1px;margin-bottom:22px;display:flex;align-items:center;justify-content:center;gap:10px}
.age-gate-logo .dot{width:13px;height:13px;border-radius:50%;background:var(--field);box-shadow:0 0 14px var(--field)}
.age-gate-logo b{color:var(--amber)}
.age-gate-box h2{font-size:22px;font-weight:800;margin-bottom:12px}
.age-gate-box p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:24px}
.age-gate-btns{display:flex;gap:12px;justify-content:center;margin-bottom:18px}
.age-gate-btns .btn{text-decoration:none}
.age-gate-box small{color:var(--muted2);font-size:12px}

/* ============ CONTATO ============ */
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--sp-3);align-items:start}
@media(max-width:760px){.contact-layout{grid-template-columns:1fr}}

.contact-cards{display:flex;flex-direction:column;gap:var(--sp-2)}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:var(--sp-3)}
.contact-card .cc-icon{width:46px;height:46px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--field)}
.contact-card .cc-icon svg{width:22px;height:22px}
.contact-card h3{font-size:16px;font-weight:800;margin-bottom:6px}
.contact-card p{color:var(--muted);font-size:14px;line-height:1.6}

.contact-form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:var(--sp-3);
  display:flex;flex-direction:column;gap:16px}
.cf-field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px;letter-spacing:.3px}
.cf-field .cf-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted2)}
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;min-height:48px;border-radius:10px;font-family:inherit;
  font-size:16px;outline:none;transition:.2s;box-sizing:border-box}
.cf-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.cf-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239fb4a7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--field)}

/* Honeypot: existe no HTML pra robô de spam preencher, invisível pra pessoa */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contato-msg{display:none;padding:12px 14px;border-radius:10px;font-size:14px;border:1px solid}
.contato-msg.show{display:block}
.contato-msg.ok{background:rgba(28,138,74,.1);border-color:rgba(28,138,74,.4);color:#5fd293}
.contato-msg.erro{background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.4);color:#fc888c}

.cf-legal{color:var(--muted2);font-size:12.5px;text-align:center;margin-top:-4px}
.cf-legal a{color:var(--amber);text-decoration:none}
.cf-legal a:hover{text-decoration:underline}

#cf_submit{width:100%;min-height:48px;font-size:15px}
#cf_submit:disabled{opacity:.6;cursor:default;transform:none}

/* ============ BACKTEST ============ */
.bt-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-bottom:var(--sp-3)}
@media(max-width:560px){.bt-summary{grid-template-columns:1fr}}
.bt-stat{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:var(--sp-3);text-align:center}
.bt-num{display:block;font-family:'Bebas Neue';font-size:44px;color:var(--field);line-height:1}
.bt-label{display:block;font-family:'Space Mono';font-size:11px;color:var(--muted2);letter-spacing:1px;text-transform:uppercase;margin-top:8px}
.bt-note{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:64ch;margin-bottom:var(--sp-3)}
.bt-list{display:flex;flex-direction:column;gap:10px}
.bt-item{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:12px;padding:14px 18px}
.bt-item.bt-ok{border-left-color:var(--field)}
.bt-item.bt-erro{border-left-color:var(--red)}
.bt-teams{font-weight:700;font-size:14.5px}
.bt-meta{font-family:'Space Mono';font-size:11px;color:var(--muted2);margin-top:3px}
.bt-probs{color:var(--muted);font-size:13px}
.bt-badge{font-family:'Space Mono';font-size:11px;font-weight:700;letter-spacing:1px;padding:5px 12px;border-radius:20px}
.bt-ok .bt-badge{background:rgba(34,181,98,.15);color:var(--field)}
.bt-erro .bt-badge{background:rgba(229,72,77,.15);color:var(--red)}
.bt-empty{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:var(--sp-4);text-align:center}
.bt-empty p{color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch;margin:0 auto}

/* ============ PÁGINAS LEGAIS ============ */
.legal{max-width:760px}
.legal h2{font-size:19px;font-weight:800;margin:var(--sp-4) 0 var(--sp-1);color:var(--text)}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:var(--sp-2)}
.legal b{color:var(--text)}

/* ============ PWA: botão instalar ============ */
/* ---------------------------------------------------------------------------
   CONVITE PRA INSTALAR O APP
   Cartão comum, no fim da home e dentro do perfil. O botão flutuante fixo que
   existia antes ficava por cima do conteúdo o tempo todo e atrapalhava a
   leitura justo em tela pequena, que é onde instalar faz mais sentido.
   --------------------------------------------------------------------------- */
.inst{
  background:var(--panel);border:1px solid var(--line);border-radius:15px;
  padding:var(--sp-3);display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);flex-wrap:wrap;
}
.inst[hidden]{display:none}
.inst-texto{display:flex;flex-direction:column;gap:4px;max-width:46ch}
.inst-titulo{font-size:16px;font-weight:800}
.inst-sub{color:var(--muted);font-size:14px;line-height:1.6}
.inst-acoes{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.inst-depois{
  min-height:48px;padding:0 14px;background:transparent;border:1px solid var(--line);
  border-radius:10px;color:var(--muted);font-family:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;transition:border-color .18s,color .18s;
  -webkit-tap-highlight-color:transparent;
}
.inst-depois:hover{border-color:var(--field);color:var(--text)}

/* Passo a passo do iPhone */
.inst-ios{flex-basis:100%;border-top:1px dashed var(--line);padding-top:var(--sp-2)}
.inst-ios[hidden]{display:none}
.inst-ios ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.inst-ios li{color:var(--muted);font-size:14px;line-height:1.6}
.inst-ios-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;vertical-align:-7px;margin-right:6px;
  border:1px solid var(--line);background:var(--bg2);color:var(--field);
}
.inst-ios-icone svg{width:16px;height:16px}

@media(max-width:560px){
  .inst{flex-direction:column;align-items:stretch}
  .inst-acoes{width:100%}
  .inst-acoes .btn,.inst-depois{flex:1}
}

/* ---------------------------------------------------------------------------
   ANÚNCIOS
   Moldura discreta e sempre rotulada. O anúncio nunca imita conteúdo do app:
   além de ser exigência do AdSense, usuário enganado não volta.
   --------------------------------------------------------------------------- */
.ad-bloco{
  margin:28px 0;
  padding:12px;
  border:1px dashed rgba(233,241,231,.14);
  border-radius:12px;
  background:rgba(255,255,255,.015);
  min-height:100px;
  overflow:hidden;
}
.ad-rotulo{
  font-family:'Space Mono',monospace;
  font-size:9.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.55;
  margin-bottom:8px;
}
.ad-bloco .adsbygoogle{min-height:90px}

/* ---------------------------------------------------------------------------
   REFINO DE HIERARQUIA DA HOME (5 princípios de design)
   1 minimalista: uma ação principal na primeira dobra (botão âmbar), a
     secundária vira link discreto, não competindo pela atenção.
   2 hierarquia: um só H1 forte, subtítulo curto, resto respira.
   3 leitura fácil: linha de texto limitada a ~50 caracteres.
   4 navegação: ação primária óbvia e única.
   5 mobile: tudo revalidado em 375px (bloco @media abaixo).
   --------------------------------------------------------------------------- */
.hero-link{
  color:var(--muted);
  font-size:14.5px;
  text-decoration:none;
  border-bottom:1px solid rgba(233,241,231,.2);
  padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.hero-link:hover{ color:var(--chalk,#e9f1e7); border-color:var(--amber); }

/* Subtítulo mais curto e legível */
.hero p.lead{ max-width:46ch; }

@media (max-width:400px){
  .hero{ padding-block:var(--sp-4); }
  .hero h1{ font-size:32px !important; line-height:1.02; }
  .hero p.lead{ font-size:15.5px; margin:16px 0 24px; max-width:100%; }
  .hero-cta{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero-cta a:first-child{ width:100%; }
  .hero-cta .btn{ width:100%; }
  .hero-link{ align-self:center; }
}

/* ---------------------------------------------------------------------------
   VIDA E MOVIMENTO (visual mais profissional e menos "morto")
   Animações sutis: entram uma vez, não distraem, dão sensação de produto vivo.
   --------------------------------------------------------------------------- */

/* Brilho suave que pulsa atrás do título, dá profundidade sem poluir */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-30%;right:-10%;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(34,181,98,.10), transparent 70%);
  filter:blur(20px);
  animation:respira 8s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
/* Segunda luz, âmbar e mais fraca, fora de fase com a verde: dá a sensação
   de refletor duplo de estádio sem virar gradiente decorativo */
.hero::after{
  content:"";position:absolute;bottom:-25%;left:-8%;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,194,61,.07), transparent 72%);
  filter:blur(18px);
  animation:respira 11s ease-in-out infinite reverse;
  pointer-events:none;z-index:0;
}
.hero > *{position:relative;z-index:1}
@keyframes respira{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}

/* Cartões entram em cascata curta, um logo depois do outro, em vez de
   tudo aparecer no mesmo instante. Só desliza, nunca zera a opacidade
   antes de aparecer: se o JS falhar, o conteúdo continua visível. */
.reveal.in .pillar,.reveal.revealed .pillar,
.reveal.in .feat,.reveal.revealed .feat,
.reveal.in .step,.reveal.revealed .step,
.reveal.in .hg-card,.reveal.revealed .hg-card{
  animation:sobeSuave .5s cubic-bezier(.2,.7,.3,1) both}
.pillars .pillar:nth-child(2),.feat-grid .feat:nth-child(2),
.steps .step:nth-child(2),.home-games .hg-card:nth-child(2){animation-delay:.06s}
.pillars .pillar:nth-child(3),.feat-grid .feat:nth-child(3),
.steps .step:nth-child(3),.home-games .hg-card:nth-child(3){animation-delay:.12s}
.pillars .pillar:nth-child(4){animation-delay:.18s}
@keyframes sobeSuave{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .reveal .pillar,.reveal .feat,.reveal .step,.reveal .hg-card{animation:none}
}

/* Cards sobem de leve ao passar o mouse, com sombra: sensação tátil */
.step,.hg-card,.esp-card{
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
}
.step:hover,.hg-card:hover{
  transform:translateY(-4px);
  border-color:var(--field);
  box-shadow:0 12px 30px -12px rgba(34,181,98,.35);
}

/* Botão âmbar com brilho ao passar o mouse */
.btn-amber{
  transition:transform .16s, box-shadow .22s, filter .16s;
  box-shadow:0 4px 16px -6px rgba(255,194,61,.5);
}
.btn-amber:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 26px -6px rgba(255,194,61,.65);
  filter:brightness(1.06);
}
.btn-amber:active{transform:translateY(0)}

/* A bolinha do logo pulsa devagar, sinal de "ao vivo" */
.logo .dot{animation:pulseLogo 2.4s ease-in-out infinite}
@keyframes pulseLogo{
  0%,100%{box-shadow:0 0 10px var(--field)}
  50%{box-shadow:0 0 22px var(--field), 0 0 4px var(--field)}
}

/* Barra de probabilidade cresce ao aparecer */
.hg-seg{transition:width .8s cubic-bezier(.2,.7,.3,1)}

/* Número dos passos com leve destaque animado ao entrar na tela */
.reveal.in .step-num{animation:sobe .5s ease both}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce){
  .hero::before,.hero::after,.logo .dot{animation:none}
}