*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;border-radius:0}
:root{
  --gold:#cfad68; --gold-light:#e6cf97; --gold-deep:#ba9050;
  --grad-gold:linear-gradient(135deg,#e6cf97 0%,#cfad68 42%,#ba9050 100%);
  --ink:#0F102B; --navy:#1B2249;
  --on:#EEF5F7; --on-mute:#C6D5DB;
  --green-light:#3ce07a;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --texto:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  min-height:100svh; font-family:var(--texto); color:var(--on);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(30px,4.6vh,48px) 18px calc(14px + env(safe-area-inset-bottom));
  position:relative; overflow-x:hidden;
}
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}
.bg picture{display:contents}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;
  animation:heroZoom 18s ease-out both}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.bg__chapa{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(15,16,43,.14) 0%, rgba(15,16,43,.18) 20%, rgba(15,16,43,.30) 34%,
  rgba(15,16,43,.40) 50%, rgba(15,16,43,.50) 62%, rgba(15,16,43,.72) 76%,
  rgba(15,16,43,.90) 88%, rgba(15,16,43,.97) 100%)}
.bg__luz{position:absolute;inset:0;
  -webkit-mask:linear-gradient(0deg,#000 0%,#000 34%,transparent 66%);
  mask:linear-gradient(0deg,#000 0%,#000 34%,transparent 66%);background:
  radial-gradient(60% 32% at 12% 96%, rgba(207,173,104,.16), transparent 66%),
  radial-gradient(70% 24% at 70% 100%, rgba(42,63,96,.40), transparent 70%)}
.bg__topo{position:absolute;inset:0;background:
  radial-gradient(70% 22% at 50% 30%, rgba(15,16,43,.58), transparent 76%)}
.fio{position:fixed;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-light) 50%,var(--gold) 70%,transparent)}
.wrap{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center}
.marca{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px}
.simbolo{width:clamp(70px,19vw,82px);position:relative;--mk:url('../img/simbolo.png');
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.55))}
.simbolo img,.letreiro img{height:auto}
.simbolo img{width:100%;display:block}
.simbolo__rev{animation:varredura 1.05s cubic-bezier(.4,0,.15,1) .12s both}
@keyframes varredura{
  from{clip-path:polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%)}
  to  {clip-path:polygon(-20% 120%, 120% 120%, 120% -20%, -20% -20%)}
}
.simbolo__luz{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;
  background-image:linear-gradient(104deg,transparent 38%,rgba(246,233,196,.95) 50%,transparent 62%);
  background-repeat:no-repeat;background-size:260% 100%;
  animation:luz 1.15s cubic-bezier(.35,0,.2,1) .95s both}
@keyframes luz{from{background-position:-180% 0}to{background-position:280% 0}}
.letreiro{width:clamp(160px,44vw,184px);animation:sobe .7s var(--ease) .82s both}
.letreiro img{width:100%;display:block;filter:drop-shadow(0 2px 14px rgba(0,0,0,.75))}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nums{width:100%;display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 16px;
  animation:sobe .7s var(--ease) .46s both}
.num{text-align:center;padding:0 4px;position:relative}
.num + .num::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(207,173,104,.55),transparent)}
.num > b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(24px,7vw,29px);
  line-height:1;letter-spacing:-.01em;color:var(--gold);white-space:nowrap;
  text-shadow:0 2px 16px rgba(0,0,0,.7)}
.num > b small{font-family:var(--texto);font-size:.44em;font-weight:600;margin-left:.2em;letter-spacing:0}
.num > span{display:block;margin-top:6px;font-size:12px;line-height:1.3;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.85)}
.bloco{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
.bloco::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;margin-left:-50vw;width:100vw;top:-96px;bottom:-22px;
  background:linear-gradient(180deg,rgba(15,16,43,0) 0%,rgba(15,16,43,.12) 8%,
    rgba(15,16,43,.36) 16%,rgba(15,16,43,.62) 24%,rgba(15,16,43,.80) 32%,rgba(15,16,43,.76) 60%,rgba(15,16,43,.62) 86%,rgba(15,16,43,0) 100%)}
.ganho{text-align:center;font-family:var(--display);font-weight:500;
  font-size:clamp(17px,4.7vw,19px);line-height:1.38;
  color:#fff;width:calc(100% + 16px);margin:0 -8px;
  text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.5);
  animation:sobe .7s var(--ease) .96s both}
.ganho b{font-weight:600;color:var(--gold)}
.links{width:100%;display:flex;flex-direction:column;gap:12px}
.btn{
  position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:11px;
  padding:15px 15px;font-family:var(--texto);font-weight:600;font-size:15px;line-height:1.3;
  letter-spacing:.01em;text-decoration:none;
  transition:transform .2s var(--ease),filter .25s,box-shadow .25s;
  opacity:0;animation:entra .5s var(--ease) both;
}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.btn:nth-child(1){animation-delay:.10s}
.btn:nth-child(2){animation-delay:.22s}
.btn:nth-child(3){animation-delay:.34s}
.btn:active{transform:translateY(1px)}
@media (hover:hover){.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}}
.btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.btn__ic{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center}
.btn__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.btn__tx{flex:1 1 auto}
.btn__seta{flex:0 0 auto;width:19px;height:19px;opacity:.75;transition:transform .2s}
@media (hover:hover){.btn:hover .btn__seta{transform:translateX(3px)}}
.btn--ouro{color:var(--ink);background:var(--grad-gold);
  box-shadow:0 14px 34px -12px rgba(207,173,104,.65)}
@media (hover:hover){.btn--ouro:hover{box-shadow:0 18px 40px -12px rgba(207,173,104,.8)}}
.btn--vidro{color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(230,207,151,.28)}
.btn--vidro::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);animation:btnShine 4.2s ease-in-out 1.4s infinite;pointer-events:none}
@keyframes btnShine{0%{left:-130%}55%,100%{left:140%}}
.btn--zap{color:#fff;
  background:radial-gradient(26px 26px at 28px 50%,var(--green-light),transparent 100%),#127A40;
  box-shadow:0 14px 34px rgba(31,168,88,.22)}
.btn--zap .btn__ic svg{stroke:none;fill:currentColor}
.pe{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:sobe .7s var(--ease) .58s both}
.locais{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 16px}
.local{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--on-mute);
  text-shadow:0 1px 10px rgba(0,0,0,.8)}
.local svg{width:12px;height:12px;fill:none;stroke:var(--gold);stroke-width:1.8;flex:0 0 auto}
.dev{display:flex;align-items:center;gap:9px;font-size:11.5px;color:rgba(198,213,219,.78)}
.dev a{color:var(--gold);font-weight:700;letter-spacing:.06em;text-decoration:none;transition:color .25s}
@media (hover:hover){.dev a:hover{color:#fff}}
@media (min-width:720px){
  .bg img{object-position:50% 40%}
  .bloco::before{display:none}
  .bg__topo{background:linear-gradient(90deg,rgba(15,16,43,0) 16%,rgba(15,16,43,.64) 33%,
    rgba(15,16,43,.78) 50%,rgba(15,16,43,.64) 67%,rgba(15,16,43,0) 84%)}
  .bg__chapa{background:linear-gradient(180deg,
    rgba(15,16,43,.30) 0%, rgba(15,16,43,.26) 26%, rgba(15,16,43,.38) 44%,
    rgba(15,16,43,.62) 60%, rgba(15,16,43,.86) 76%, rgba(15,16,43,.95) 90%, rgba(15,16,43,.98) 100%)}
}
@media (max-height:740px){
  .bg__chapa{background:linear-gradient(180deg,
    rgba(15,16,43,.16) 0%, rgba(15,16,43,.24) 20%, rgba(15,16,43,.36) 40%,
    rgba(15,16,43,.48) 58%, rgba(15,16,43,.74) 76%, rgba(15,16,43,.97) 100%)}
  body{padding-top:18px}
  .marca{gap:6px;margin-bottom:12px}
  .simbolo{width:58px}
  .letreiro{width:142px}
  .num > b{font-size:23px}
  .num > span{font-size:11.5px;margin-top:4px}
  .nums{margin-bottom:10px}
  .ganho{font-size:15.6px}
  .bloco{margin-bottom:16px}
  .links{gap:8px}
  .btn{padding:12px 14px;font-size:14.2px}
  .pe{margin-top:14px;gap:7px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important}
  .simbolo__rev{clip-path:none}
  .simbolo__luz{display:none}
  .btn--vidro::after{display:none}
}