/* Xtreme Fut — redesign 2026 (tema amarelo e preto) */
/* Layout: white base (like the original site), black for the band, the app panel and the footer,
   brand yellow for one full block (download) and small accents. Saira Condensed for titles (echoes the condensed logo inside the app), Saira Semi Condensed for labels, Figtree for text. */
:root{
  --page:#FFFFFF;      /* base branca, como no site original */
  --soft:#FAFAFA;      /* cinza claro da marca */
  --yellow:#FDB701;    /* amarelo da marca: destaque */
  --ink:#0D0D0D;       /* preto */
  --ink-soft:#666666;  /* cinza de texto da marca */
  --line:#EBEAEA;      /* cinza de linha da marca */
  --panel:#0D0D0D;
  --panel-soft:#BDBDBD;
  --display:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --label:"Saira Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:0px;            /* faixas de ponta a ponta: sempre retas */
  --r-media:24px;     /* fotos, pôster e bloco amarelo do topo */
  --r-card:18px;      /* cards */
  --r-ctl:12px;       /* botões, selos das lojas, ícones */
  --r-pill:999px;     /* etiquetas e chips */
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--page)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:.94;margin:0;text-wrap:balance}
h3{font-family:var(--body);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.3;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-ctl)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.top .logo img{height:20px;width:auto}
.nav{display:flex;gap:32px;margin-left:auto;font-family:var(--label);font-weight:700;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:var(--r-ctl);padding:12px 20px;background:var(--yellow);color:var(--ink)}

/* store buttons */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;text-decoration:none;border-radius:var(--r-ctl);padding:10px 22px 10px 16px;min-width:180px;transition:transform .15s ease}
.store:hover{transform:translateY(-2px)}
.store svg{width:24px;height:24px;flex:none;fill:#fff}
.store small{display:block;font-size:11px;font-weight:500;opacity:.75;line-height:1.2}
.store b{display:block;font-size:18px;font-weight:600;line-height:1.15;white-space:nowrap}

/* hero */
.hero{padding-block:56px 80px;overflow:hidden;overflow:clip}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.eyebrow{display:block;font-family:var(--label);font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:-8px}
.hero h1{font-size:clamp(52px,6.4vw,92px);line-height:.92}
.lead{font-size:19px;color:var(--ink-soft);max-width:44ch}
.hero-cta{display:grid;gap:12px}
.cta-note{font-size:14px;color:var(--ink-soft)}
.hero-points{list-style:none;margin:4px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:16px}
.hero-points li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center}
.hero-points b{display:block;font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.hero-points span:not(.tile){display:block;font-size:15px;color:var(--ink-soft);line-height:1.45}
.tile.sm{width:40px;height:40px;border-radius:11px}
.tile.sm svg{width:20px;height:20px}
.tile.xs{width:30px;height:30px;border-radius:50%}
.tile.xs svg{width:17px;height:17px}
.hero-visual{position:relative;aspect-ratio:1/1.08;max-width:600px;width:100%;justify-self:end}
.hv-back{position:absolute;top:9%;bottom:-2%;left:18%;right:-100vw;background:var(--yellow);border-radius:var(--r-media) 0 0 var(--r-media)}
.hv-photo{position:absolute;inset:0 8% 16% 4%;border-radius:var(--r-media);overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.hv-photo img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;scale:1.15}
.hv-screens{position:absolute;left:-7%;bottom:-3%;width:72%;max-width:none;filter:drop-shadow(0 28px 34px rgba(0,0,0,.45));animation:float 7s ease-in-out infinite}
.hv-chip{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;background:var(--page);border-radius:var(--r-pill);font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1;white-space:nowrap;box-shadow:0 18px 34px -16px rgba(0,0,0,.5);animation:bob 5s ease-in-out infinite}
.hv-chip.c1{top:10%;right:-1%}
.hv-chip.c2{top:38%;right:-5%;animation-delay:-1.7s}
.hv-chip.c3{bottom:9%;right:1%;animation-delay:-3.3s}

/* sections */
section{padding-block:96px}
.sec-title{font-size:clamp(38px,4.2vw,58px)}

/* recursos */
.features-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;margin-top:40px;align-items:stretch}
.features-photo{margin:0;border-radius:var(--r-media);overflow:hidden;background:var(--ink);min-height:100%}
.features-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feature{position:relative;display:grid;gap:12px;align-content:start;min-width:0;padding:30px 26px 32px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-card)}
.tile{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:14px;background:var(--yellow);color:var(--ink)}
.tile svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feature .tile{margin-bottom:12px}
.feature h3{font-size:18px}
.feature p{color:var(--ink-soft);font-size:15.5px;line-height:1.6}

/* interface: celular com as telas reais do app no centro, as 4 funções ao redor */
.app-sec .sec-title{text-align:center;font-size:clamp(40px,5vw,72px)}
.showcase{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(40px,5.5vw,80px);row-gap:72px;margin-top:64px;align-items:center}
.tour{grid-column:2;grid-row:1/span 2;position:relative;isolation:isolate;display:grid;justify-items:center;--pw:300px;--dur:3600ms}
.tour-x{position:absolute;z-index:-1;left:50%;top:46%;width:560px;max-width:none;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-10deg);filter:brightness(0);opacity:.09;pointer-events:none}
.items{display:contents}
.item{display:grid;gap:16px;justify-items:start;align-content:start;max-width:290px}
.item:nth-child(-n+2){grid-column:1;justify-self:end;justify-items:end;text-align:right}
.item:nth-child(n+3){grid-column:3;justify-self:start}
.item:nth-child(1),.item:nth-child(3){grid-row:1;align-self:end}
.item:nth-child(2),.item:nth-child(4){grid-row:2;align-self:start}
.item .tile{width:52px;height:52px;border-radius:var(--r-ctl);background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(13,13,13,.3)}
.item .tile svg{width:24px;height:24px}
.item h3{font-size:20px}
.item p{color:#3A2D00;font-size:16px;margin-top:6px}
.item:hover .tile{background:var(--ink);color:var(--yellow);box-shadow:none;rotate:-6deg}

/* o celular (tudo em em, escala com --pw) */
.phone{position:relative;width:var(--pw);aspect-ratio:300/620;font-size:calc(var(--pw) * .0434);padding:.72em;border-radius:3.7em;background:#0B0B0B;box-shadow:inset 0 0 0 .12em #3a3a3a,0 0 0 1px rgba(13,13,13,.5),0 3.4em 5em -2.4em rgba(13,13,13,.55)}
.screen{position:relative;height:100%;border-radius:2.95em;overflow:hidden;background:#0B0B0B;color:#fff;line-height:1.25;isolation:isolate}
.island{position:absolute;z-index:4;top:.75em;left:50%;width:6.8em;height:1.95em;margin-left:-3.4em;border-radius:var(--r-pill);background:#000}
.sbar{position:absolute;z-index:3;inset:0 0 auto;height:3.45em;display:flex;align-items:center;justify-content:space-between;padding:.2em 1.7em 0 2.3em;transition:color .4s ease}
.sbar b{font-weight:600;font-size:1em;letter-spacing:.01em}
.sbar svg{width:4.9em;height:auto;fill:currentColor}
.home{position:absolute;z-index:3;bottom:.55em;left:50%;width:8.4em;height:.3em;margin-left:-4.2em;border-radius:var(--r-pill);background:#fff;transition:background .4s ease}
.screen.light .sbar{color:var(--ink)}
.screen.light .home{background:var(--ink)}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;padding:3.45em 1.9em 2.2em;opacity:0;visibility:hidden;scale:.97;transition:opacity .5s ease,scale .7s cubic-bezier(.2,.75,.2,1),visibility 0s linear .7s}
.scr.on{opacity:1;visibility:visible;scale:1;transition:opacity .5s ease,scale .7s cubic-bezier(.2,.75,.2,1),visibility 0s}
.scr-splash{background:var(--yellow);align-items:center;justify-content:center}
.scr-splash img{width:74%}
.scr-logo{width:64%;margin:0 auto;filter:brightness(0) invert(1)}
.scr-login{justify-content:center;padding-bottom:4.5em}
.fields{display:grid;gap:1.15em;margin-top:4.2em}
.field{display:block;padding:.75em 0 .55em;border-bottom:1px solid #3a3a3a;color:#8c8c8c;font-size:.95em}
.caret{display:inline-block;width:.1em;height:1.1em;margin-right:.15em;vertical-align:-.22em;background:var(--yellow)}
.forgot{align-self:flex-end;margin-top:.9em;font-size:.82em;color:#cfcfcf}
.scr-btn{position:relative;overflow:hidden;margin-top:1.6em;padding:.95em;border-radius:.6em;background:var(--yellow);color:var(--ink);text-align:center;font-family:var(--label);font-weight:700;font-size:.95em;letter-spacing:.07em;text-transform:uppercase}
.signup{margin-top:1.3em;text-align:center;font-size:.82em;color:#a8a8a8}
.signup b{color:#fff;font-weight:700}
.scr-menu .scr-logo{margin:5.6em auto 3.2em}
.scr-menu ul{list-style:none;margin:0;padding:0;display:grid}
.scr-menu li{display:grid;grid-template-columns:1.55em 1fr .9em;align-items:center;gap:1.05em;padding:.92em .1em;font-weight:600;font-size:1em}
.scr-menu svg{width:100%;height:auto;fill:none;stroke:#d6d6d6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scr-menu li svg:last-child{stroke:#6b6b6b;stroke-width:2}
.tour-steps{display:flex;gap:12px;width:var(--pw);margin-top:28px}
.tour-steps button{flex:1;display:grid;gap:10px;padding:0;border:0;background:none;color:rgba(13,13,13,.55);font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .3s ease}
.tour-steps button:hover,.tour-steps button.on{color:var(--ink)}
.tour-steps i{position:relative;display:block;height:3px;border-radius:2px;background:rgba(13,13,13,.18);overflow:hidden}
.tour-steps i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.tour-steps .done i::after{transform:scaleX(1)}
html:not(.motion) .tour-steps .on i::after{transform:scaleX(1)}
.tour-steps button:focus-visible{outline-offset:6px}

/* conquiste */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.split-copy{display:grid;gap:24px;min-width:0}
.split-copy p{color:var(--ink-soft);max-width:56ch;font-size:18px}

.band-yellow{background:var(--yellow);--ink-soft:#3A2D00}
.court-wrap{padding-block:104px}
.app-sec{background:var(--yellow);padding-block:96px;overflow:hidden;overflow:clip}

.cta-split{grid-template-columns:1.25fr .75fr}
.band-yellow{overflow:hidden}
.cta-photo{margin:0 0 -96px;align-self:end;justify-self:center;width:100%;max-width:420px}
.cta-photo img{width:100%;-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent)}
.dl-bar{display:none}

/* descubra */
.court{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--ink);max-width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:end}
.court img{grid-column:2;grid-row:1;width:100%;height:min(74vh,640px);object-fit:cover;object-position:50% 40%}
@media (min-width:761px){.court img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}}
.court h2{grid-column:1;grid-row:1;padding:56px;color:#fff;font-size:clamp(38px,4.4vw,62px)}

/* footer */
footer{background:var(--page);color:var(--ink);padding-block:48px calc(32px + env(safe-area-inset-bottom,0px))}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.foot img{height:20px;width:auto}
.foot-nav{display:flex;gap:28px;font-family:var(--label);font-size:14.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.foot-nav a{color:var(--ink-soft);text-decoration:none;transition:color .2s ease}
.foot-nav a:hover{color:var(--ink)}
.social{display:flex;gap:10px}
.social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.social a:hover{border-color:var(--yellow)}
.social svg{width:18px;height:18px;fill:var(--ink)}
.legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}

/* responsive */
@media (max-width:1000px){
  .features-layout{grid-template-columns:1fr}
  .features-photo{aspect-ratio:16/10;min-height:0}
  .showcase{grid-template-columns:1fr 1fr;column-gap:40px;row-gap:40px;margin-top:48px;align-items:start}
  .tour{grid-column:1/-1;grid-row:1;margin-bottom:16px}
  .item:nth-child(n){grid-column:auto;grid-row:auto;justify-self:stretch;justify-items:start;align-self:start;text-align:left;max-width:none;grid-template-columns:52px 1fr}
  .item p{margin-top:4px}
  .split{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .top .btn{margin-left:auto}
  .hero{padding-block:40px 0}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .lead{font-size:17px}
  .hero-visual{order:-1;justify-self:center;max-width:520px;aspect-ratio:1/.86}
  .hv-chip{font-size:12.5px;padding:6px 12px 6px 6px;gap:8px}
  .hv-chip.c2{right:-2%}
  .hero{padding-block:20px 56px}
  section{padding-block:72px}
  .showcase{margin-top:40px}
  .tour{--pw:264px}
  .tour-x{width:440px}
  .court{grid-template-columns:1fr}
  .court img{grid-column:1;grid-row:1;height:auto;aspect-ratio:4/5;max-height:520px}
  .court h2{grid-column:1;grid-row:2;padding:24px 20px 32px}
  .court-wrap{padding-block:72px}
  .store{min-width:0;flex:1 1 160px}
}
@media (max-width:620px){
  .showcase{grid-template-columns:1fr;row-gap:28px}
  .item .tile{width:48px;height:48px}
  .item:nth-child(n){grid-template-columns:48px 1fr}
}
@media (max-width:460px){
  .features{grid-template-columns:1fr}
  .store{padding:10px 14px 10px 12px;gap:10px}
  .store b{font-size:16px}
  .eyebrow{font-size:13px;letter-spacing:.07em}
}
/* ---------- movimento ---------- */
html{scroll-padding-top:76px}
.ease{transition-timing-function:cubic-bezier(.2,.75,.2,1)}

/* cabeçalho: entra, encolhe ao rolar, barra de progresso */
.top{transition:translate .8s cubic-bezier(.2,.75,.2,1),box-shadow .3s ease}
.top .wrap{transition:height .3s ease}
.top .logo img{transition:height .3s ease}
.top.scrolled{box-shadow:0 12px 30px -20px rgba(0,0,0,.55)}
.top.scrolled .wrap{height:58px}
.top.scrolled .logo img{height:18px}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.nav a{position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.nav a.on{color:var(--ink)}
.btn{transition:translate .35s cubic-bezier(.2,.75,.2,1),box-shadow .25s ease}
.btn:hover{box-shadow:0 10px 22px -10px rgba(0,0,0,.6);background:var(--ink);color:var(--yellow)}
.btn{transition:translate .35s cubic-bezier(.2,.75,.2,1),box-shadow .25s ease,color .25s ease,background .25s ease}

/* botões das lojas: brilho e efeito magnético */
.store{position:relative;overflow:hidden;transition:transform .2s ease,translate .35s cubic-bezier(.2,.75,.2,1),box-shadow .25s ease}
.store::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.75,.2,1);pointer-events:none}
.store:hover{box-shadow:0 14px 26px -12px rgba(0,0,0,.65)}
.store:hover::after{transform:translateX(120%)}
.store:active{transform:scale(.97)}

/* títulos palavra por palavra */
.w.accent>span{position:relative;isolation:isolate}
.w.accent>span::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.1em;height:.3em;background:var(--yellow);z-index:-1;transform-origin:left;transition:transform .9s cubic-bezier(.7,0,.2,1) 1s}
.motion:not(.loaded) .w.accent>span::after,.motion [data-reveal][data-split]:not(.in) .w.accent>span::after{transform:scaleX(0)}
.motion [data-reveal] .w.accent>span::after{transition-delay:.5s}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .1em;margin:-.12em 0 -.1em}
.w>span{display:inline-block}

/* foto do topo */

/* faixa */
.ticker-wrap{overflow:hidden;overflow:clip;padding-block:32px}
.ticker{margin:0 -3%;background:var(--ink);color:var(--yellow);overflow:hidden;transform:rotate(-2deg);padding-block:18px}
.ticker-track{display:flex;align-items:center;width:max-content;will-change:transform}
.ticker span{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.6vw,34px);line-height:1;white-space:nowrap;letter-spacing:.03em}
.ticker img{width:22px;height:22px;margin:0 28px;flex:none}
#recursos{padding-top:64px}

/* recursos */
.feature{transition:background .3s ease,border-color .3s ease}
.feature:nth-child(2){--d:1}.feature:nth-child(3){--d:2}.feature:nth-child(4){--d:3}
.feature:hover{background:var(--yellow);border-color:var(--yellow)}
.feature:hover p{color:#3A2D00}
.tile{transition:rotate .45s cubic-bezier(.3,1.6,.5,1),scale .45s cubic-bezier(.3,1.6,.5,1),background .3s ease,color .3s ease}
.feature:hover .tile{rotate:-6deg;background:var(--ink);color:var(--yellow)}

/* celular do app: as telas passam sozinhas; tocar numa etapa troca a tela */
.tour .phone{animation:float 8s ease-in-out infinite}
.tour-steps .on i::after{animation:fill var(--dur) linear forwards}
.tour.paused .tour-steps .on i::after{animation-play-state:paused}
.scr-splash.on img{animation:logoIn 1s cubic-bezier(.2,.75,.2,1) both}
.scr-login.on .caret{animation:blink 1s steps(1) infinite}
.scr-login.on .scr-btn{animation:tap .55s ease calc(var(--dur) - 950ms) both}
.scr-btn::after{content:"";position:absolute;left:50%;top:50%;width:3.2em;height:3.2em;margin:-1.6em;border-radius:50%;background:rgba(255,255,255,.6);opacity:0;scale:0}
.scr-login.on .scr-btn::after{animation:ripple .7s ease-out calc(var(--dur) - 950ms) both}
.scr-menu.on li{animation:rowIn .6s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i) * 70ms + .15s)}
.tour-x{will-change:translate}

/* pôster com inclinação 3D */

/* quadra */
.court img{will-change:scale}

/* rodapé */
.social a{transition:background .25s ease,border-color .25s ease,translate .3s cubic-bezier(.2,.75,.2,1)}
.social a:hover{background:var(--yellow);border-color:var(--yellow);translate:0 -3px}
.social a svg{transition:fill .25s ease}
.social a:hover svg{fill:var(--ink)}

@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.2deg)}}
@keyframes pulse{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.36;transform:scale(1.12)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(253,183,1,.7)}100%{box-shadow:0 0 0 10px rgba(253,183,1,0)}}
@keyframes fill{to{transform:scaleX(1)}}
@keyframes logoIn{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes blink{50%{opacity:0}}
@keyframes tap{0%,100%{scale:1}40%{scale:.95;filter:brightness(.92)}}
@keyframes ripple{0%{opacity:0;scale:0}30%{opacity:1}100%{opacity:0;scale:4}}
@keyframes rowIn{from{opacity:0;translate:-1.2em 0}to{opacity:1;translate:0 0}}
@keyframes phoneIn{from{opacity:0;transform:translateY(90px) rotate(10deg)}to{opacity:1;transform:translateY(0) rotate(0)}}

/* estados iniciais: só quando o JS roda e o visitante aceita movimento */
.motion [data-split]:not(.is-split){opacity:0}
.motion .top{translate:0 -100%}
.motion.loaded .top{translate:0 0}
.motion [data-split] .w>span{translate:0 108%;transition:translate 1s cubic-bezier(.2,.75,.2,1) calc(var(--i)*70ms)}
.motion .hero h1 .w>span{transition-delay:calc(var(--i)*85ms + 180ms)}
.motion.loaded .hero h1 .w>span,.motion [data-split].in .w>span{translate:0 0}
.motion .hero-copy>:not(h1){opacity:0;translate:0 20px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.75,.2,1)}
.motion .hero-copy>.eyebrow{transition-delay:.5s}
.motion .hero-copy>.lead{transition-delay:.6s}
.motion .hero-copy>.hero-cta{transition-delay:.75s}
.motion .hero-copy>.hero-points{transition-delay:.9s}
.motion.loaded .hero-copy>*{opacity:1;translate:0 0}
.motion .hv-back{clip-path:inset(0 0 0 100%);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) .3s}
.motion.loaded .hv-back{clip-path:inset(0 0 0 0)}
.motion .hv-photo{clip-path:inset(100% 0 0 0 round 24px);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) .45s}
.motion.loaded .hv-photo{clip-path:inset(0 0 0 0 round 24px)}
.motion .hv-photo img{scale:1.4;transition:scale 2s cubic-bezier(.2,.75,.2,1) .45s}
.motion.loaded .hv-photo img{scale:1.15}
.motion .hv-screens{opacity:0}
.motion.loaded .hv-screens{animation:phoneIn 1.1s cubic-bezier(.2,.8,.2,1) 1.05s both,float 7s ease-in-out 2.2s infinite}
.motion .hv-chip{opacity:0;scale:.5;transition:opacity .4s ease,scale .6s cubic-bezier(.3,1.6,.5,1)}
.motion.loaded .hv-chip{opacity:1;scale:1}
.motion.loaded .hv-chip.c1{transition-delay:1.5s}
.motion.loaded .hv-chip.c2{transition-delay:1.65s}
.motion.loaded .hv-chip.c3{transition-delay:1.8s}
.motion [data-reveal]:not([data-split]){opacity:0;translate:0 36px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.75,.2,1)}
.motion .feature[data-reveal]{transition:opacity .8s ease calc(var(--d,0)*110ms),translate 1s cubic-bezier(.2,.75,.2,1) calc(var(--d,0)*110ms),background .3s ease}
.motion .split-copy p[data-reveal]{transition-delay:.15s}
.motion .split-copy .stores[data-reveal]{transition-delay:.3s}
.motion [data-reveal].in{opacity:1;translate:0 0}
.motion .feature .tile{scale:.4;transition:scale .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0)*110ms + .3s),rotate .45s cubic-bezier(.3,1.6,.5,1),background .3s ease,color .3s ease}
.motion .feature.in .tile{scale:1}
.motion .item[data-reveal]{transition:opacity .8s ease calc(var(--d,0)*120ms + .2s),translate 1s cubic-bezier(.2,.75,.2,1) calc(var(--d,0)*120ms + .2s)}
.motion .tour[data-reveal]{translate:0 60px}
.motion .tour[data-reveal].in{translate:0 0}

@media (max-width:760px){
  .dl-bar{display:flex;position:fixed;z-index:55;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));align-items:center;gap:12px;padding:10px;background:var(--ink);color:#fff;border-radius:18px;box-shadow:0 20px 40px -14px rgba(0,0,0,.6);transform:translateY(160%);transition:transform .5s cubic-bezier(.2,.75,.2,1)}
  .dl-bar.show{transform:none}
  .dl-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-ctl);background:#1E1E1E;flex:none}
  .dl-mark img{width:24px;height:24px}
  .dl-text{display:grid;line-height:1.25;min-width:0}
  .dl-text b{font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
  .dl-text span{font-size:12.5px;color:#bdbdbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dl-bar .btn{margin-left:auto}
  .cta-split{grid-template-columns:1fr}
  .cta-photo{max-width:340px;margin-bottom:-72px}
  .ticker-wrap{padding-block:24px}
  .ticker{padding-block:14px}
  .ticker img{width:18px;height:18px;margin:0 18px}

  .app-sec{padding-block:64px}
  #recursos{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}