/* ------------------------------------------------------------------
     Família Phantom. Herda a fundação do phantomPass (mesmo preto, mesma
     estrutura de painel, mesmo ritmo de cartão e revelação) e troca o
     dourado pelo esmeralda do logo do phantomBetsApi. Quem conhece um
     produto reconhece o outro na hora.
     ------------------------------------------------------------------ */
  :root{
    color-scheme:dark;
    --bg:#050505;
    --bg-soft:#090a0b;
    --panel:#10100f;
    --panel-2:#141513;
    --line:#0b3327;          /* irmã de --line do pass, em verde */
    --line-soft:#1a201d;
    --verde:#00C88E;         /* tom do wordmark do logo, elevado para tela */
    --verde-2:#5BF3C6;       /* brilho, como --gold-2 */
    --verde-3:#00734F;       /* profundidade, como --gold-3 */
    --ink:#EAF3EF;
    --muted:#9AA5A0;
    --faint:#6C7873;
    --sombra:0 18px 70px rgba(0,0,0,.55);
    --raio:8px;
    --fonte:"Aptos","Segoe UI","Noto Sans","Liberation Sans",sans-serif;
    --cond:"Barlow Condensed","Oswald","Segoe UI",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{min-height:100%;overflow-x:hidden}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    /* Mesmo tratamento de fundo do pass: dois halos da cor da marca sobre preto. */
    background:
      radial-gradient(circle at 8% 84%, rgba(0,200,142,.15), transparent 22%),
      radial-gradient(circle at 80% 6%, rgba(0,200,142,.08), transparent 26%),
      linear-gradient(180deg,#030303,#040706 62%,#030303);
    background-attachment:fixed;
    color:var(--ink);
    font:15px/1.6 var(--fonte);
  }
  a{color:var(--verde);text-decoration:none}
  a:hover{text-decoration:underline;text-underline-offset:3px}
  :focus-visible{outline:2px solid var(--verde);outline-offset:3px}
  .env{max-width:1180px;margin:0 auto;padding:0 26px}

  /* ---------- cabeçalho ---------- */
  header{position:sticky;top:0;z-index:20;
    background:rgba(3,3,3,.86);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft)}
  .barra{display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:12px 0;flex-wrap:wrap}
  .marca{display:flex;align-items:center;gap:10px}
  .marca .simbolo{height:40px;width:auto;display:block}
  /* Wordmark oficial da marca, em vez de texto: garante o mesmo desenho de letra
     em qualquer máquina, sem depender de fonte instalada. */
  .marca .wordmark{height:22px;width:auto;display:block}
  nav{display:flex;gap:24px;font-size:14px}
  nav a{color:var(--muted)}
  nav a:hover{color:var(--ink);text-decoration:none}

  /* ---------- botões (mesma anatomia do pass) ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;
    padding:14px 32px;border-radius:var(--raio);font-size:15px;font-weight:700;
    border:none;cursor:pointer;white-space:nowrap;
    transition:filter .15s ease,transform .15s ease,border-color .15s ease}
  .btn-primario{background:var(--verde);color:#04120D}
  .btn-primario:hover{filter:brightness(1.09);transform:translateY(-2px);text-decoration:none}
  .btn-primario:active{transform:translateY(0);filter:brightness(.96)}
  .btn-fantasma{background:transparent;color:var(--muted);font-weight:600;
    border:1px solid rgba(255,255,255,.15);padding:14px 28px}
  .btn-fantasma:hover{color:var(--ink);border-color:rgba(0,200,142,.5);text-decoration:none}

  /* ---------- herói ---------- */
  .heroi{display:grid;grid-template-columns:1fr minmax(0,470px);align-items:center;
    gap:34px;padding:clamp(48px,7vw,96px) 0 clamp(36px,5vw,64px)}
  .heroi-txt{display:flex;flex-direction:column;gap:26px}
  .selo{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    font-size:12.5px;color:var(--muted);border:1px solid var(--line);
    background:rgba(0,200,142,.05);border-radius:999px;padding:6px 14px}
  .pulso{width:7px;height:7px;border-radius:50%;background:var(--verde)}
  @keyframes bate{0%,100%{opacity:1}50%{opacity:.35}}
  .pulso{animation:bate 2.2s ease-in-out infinite}
  /* Barlow Condensed não é auto-hospedada (a CSP do produto irmão bloqueia fonte
     remota), então o tamanho é calibrado para a stack de fallback, que é mais larga. */
  h1{font-family:var(--cond);font-size:clamp(38px,5vw,66px);font-weight:800;
    line-height:1.02;letter-spacing:-.02em;color:#F2F7F4;margin:0;max-width:15ch}
  h1 i{font-style:normal;color:var(--verde)}
  .heroi p{color:var(--muted);font-size:clamp(15px,1.5vw,18px);max-width:44ch;margin:0}
  .heroi-ctas{display:flex;gap:12px;flex-wrap:wrap}
  .heroi-arte{position:relative;display:flex;justify-content:center}
  .heroi-arte img{width:100%;max-width:430px;height:auto;
    filter:drop-shadow(0 24px 60px rgba(0,0,0,.75))}

  /* ---------- números ---------- */
  .medidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
    padding-bottom:12px}
  .medida{padding:20px 22px;border:1px solid var(--line-soft);border-radius:12px;
    background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),
               linear-gradient(135deg,rgba(14,14,14,.96),rgba(4,4,4,.98))}
  .medida b{display:block;font-family:var(--cond);font-size:40px;font-weight:800;
    color:var(--verde);line-height:1;letter-spacing:-.02em}
  .medida span{display:block;margin-top:5px;font-size:13px;color:var(--faint)}

  /* ---------- seções ---------- */
  section{padding:64px 0}
  .cabeca{margin-bottom:30px}
  .sobrancelha{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--verde);margin:0 0 9px}
  h2{font-family:var(--cond);font-size:clamp(25px,3vw,35px);font-weight:800;
    letter-spacing:-.005em;margin:0 0 8px;color:#F6FBF9}
  .sub{color:var(--muted);margin:0;max-width:64ch;font-size:15px}

  .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px}
  .cartao{padding:22px 20px;border:1px solid var(--line-soft);border-radius:12px;
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),
               linear-gradient(135deg,rgba(16,17,16,.94),rgba(5,5,5,.97));
    transition:border-color .16s ease,transform .2s cubic-bezier(.16,1,.3,1)}
  .cartao:hover{border-color:rgba(0,200,142,.4);transform:translateY(-4px)}
  .cartao h3{margin:0 0 7px;font-size:16px;font-weight:700;color:#E8F2EE}
  .cartao p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

  /* ---------- terminal ---------- */
  .terminal{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;
    background:linear-gradient(135deg,rgba(10,12,11,.96),rgba(3,3,3,.98));box-shadow:var(--sombra)}
  .terminal-topo{display:flex;align-items:center;gap:7px;padding:11px 16px;
    border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
  .ponto{width:10px;height:10px;border-radius:50%;background:#2A2E2C}
  .terminal-titulo{margin-left:8px;font-size:12.5px;color:var(--faint)}
  pre{margin:0;padding:20px;overflow-x:auto;color:#C9D6D1;
    font:13px/1.75 ui-monospace,"Cascadia Mono","Consolas",monospace}
  .c-com{color:#5C6A65}.c-cha{color:var(--verde-2)}.c-val{color:var(--verde)}

  /* ---------- planos (anatomia do pass) ---------- */
  .planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
  @media(max-width:900px){.planos{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.planos{grid-template-columns:1fr}}
  .plano{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-radius:12px;
    border:1px solid rgba(255,255,255,.13);
    background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),
               linear-gradient(135deg,rgba(14,14,14,.96),rgba(4,4,4,.98));
    box-shadow:var(--sombra);
    transition:border-color .16s ease,transform .22s cubic-bezier(.16,1,.3,1)}
  .plano:hover{border-color:rgba(0,200,142,.5);transform:translateY(-6px)}
  .plano.destaque{border-color:rgba(0,200,142,.58);transform:translateY(-6px);
    background:radial-gradient(circle at 50% 0,rgba(0,200,142,.11),transparent 52%),
               linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
               linear-gradient(135deg,rgba(12,22,18,.95),rgba(4,4,4,.98))}
  .plano-topo{display:grid;gap:3px}
  .plano-nome{font-family:var(--cond);font-size:25px;font-weight:800;color:#F2F7F4;
    text-transform:uppercase;letter-spacing:.03em}
  .fita{align-self:flex-start;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--verde);border:1px solid rgba(0,200,142,.4);border-radius:999px;padding:3px 10px}
  .taxa{font-family:var(--cond);font-size:40px;font-weight:800;color:var(--verde);
    line-height:1.05;letter-spacing:-.02em}
  .taxa small{font-family:var(--fonte);font-size:13px;font-weight:600;color:var(--faint)}
  .plano ul{list-style:none;padding:0;margin:12px 0 4px;font-size:14px;color:var(--muted)}
  .plano li{padding:7px 0 7px 20px;position:relative;border-bottom:1px solid rgba(255,255,255,.045)}
  .plano li:last-child{border-bottom:none}
  .plano li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
    border-radius:2px;background:var(--verde-3)}
  .plano .btn{margin-top:auto;width:100%}

  /* ---------- transparência ---------- */
  .aviso{border:1px solid var(--line-soft);border-left:2px solid var(--verde);
    border-radius:10px;padding:20px 24px;background:rgba(255,255,255,.018);
    color:var(--muted);max-width:78ch}
  .aviso p{margin:0 0 12px}.aviso p:last-child{margin:0}
  .aviso strong{color:var(--ink)}

  footer{border-top:1px solid var(--line-soft);padding:34px 0 52px;color:var(--faint);font-size:13px}
  .rodape{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
  .rodape-marca{height:19px;width:auto;display:block;margin-bottom:6px}
  .familia{color:var(--faint)}
  .familia a{color:var(--muted)}

  /* Revelação idêntica à do phantomPass. */
  .rev{opacity:0;transform:translateY(22px);
    animation:rev .72s cubic-bezier(.16,1,.3,1) forwards}
  .r1{animation-delay:.10s}.r2{animation-delay:.20s}.r3{animation-delay:.32s}.r4{animation-delay:.46s}
  @keyframes rev{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .rev{animation:none;opacity:1;transform:none}
    .pulso{animation:none}
    html{scroll-behavior:auto}
  }
  @media(max-width:860px){
    .heroi{grid-template-columns:1fr}
    .heroi-arte{order:-1}
    .heroi-arte img{max-width:300px}
  }