/* HALO · link na bio · tokens da identidade visual */
:root{
  --black:#000000;
  --white:#FFFFFF;
  --blue:#0071E3;
  --blue-label:#2B93FF; /* tom claro do azul da marca: mantém AA nos textos de 11px sobre o fundo cinza */
  --gray:#F5F5F7;
  --brand-gray:#313131; /* mesmo cinza do degradê do rodapé do site */
  --text-secondary:rgba(255,255,255,.55);
  --text-tertiary:rgba(255,255,255,.44); /* setas e chevrons: 3:1 sobre o vidro, mínimo da norma para elementos não textuais */
  --card-bg:rgba(255,255,255,.05);
  --card-bg-hover:rgba(255,255,255,.08);
  --card-border:rgba(255,255,255,.14);
  --card-border-hover:rgba(255,255,255,.22);
  /* vidro líquido: preenchimento em degradê, um fio de luz na borda de cima e um
     mais fraco embaixo, e desfoque com saturação no que passa atrás. São esses
     quatro detalhes juntos que fazem a superfície parecer vidro e não papel. */
  --glass:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 44%,rgba(255,255,255,.03));
  --glass-hover:linear-gradient(165deg,rgba(255,255,255,.18),rgba(255,255,255,.08) 44%,rgba(255,255,255,.05));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(255,255,255,.055);
  --blur:blur(26px) saturate(170%);
  --lift:0 8px 28px rgba(0,0,0,.42);
  --radius:18px;
  --radius-sm:12px;
  --font-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --shell:440px;
  --gutter:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --raio:linear-gradient(90deg,transparent,rgba(0,113,227,.75),transparent);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  position:relative;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* brilho azul da marca sobre a arte, preso ao topo da página (não acompanha a rolagem) */
body::before{
  content:"";
  position:absolute;z-index:0;
  top:0;left:0;right:0;
  height:min(70vh,640px);
  background:radial-gradient(ellipse 72% 56% at 50% 0%,rgba(0,113,227,.13),transparent 66%);
  pointer-events:none;
}

img,svg{display:block}

a{color:inherit}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* fundo: a arte oficial da marca. Fixa na viewport, não no documento: um elemento
   ancorado numa página que ainda vai crescer salta quando o conteúdo chega e isso
   conta como layout shift. */
.ambient{
  position:fixed;
  inset:0;
  background:#000 url("assets/fundo.webp") center center/cover no-repeat;
  pointer-events:none;
  z-index:0;
}

/* ---------- barra superior ---------- */
.topbar{
  position:relative;z-index:2;
  max-width:var(--shell);
  margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) var(--gutter) 0;
  display:flex;justify-content:flex-end;
}
.icon-btn{
  width:44px;height:44px;
  display:grid;place-items:center;
  padding:0;
  border-radius:50%;
  background:var(--glass);
  border:1px solid var(--card-border);
  box-shadow:var(--glass-edge);
  color:var(--white);
  cursor:pointer;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.icon-btn__ic{width:19px;height:19px}
.icon-btn:active{transform:scale(.94)}
@media(hover:hover){.icon-btn:hover{background:var(--glass-hover);border-color:var(--card-border-hover)}}

/* ---------- estrutura ---------- */
.shell{
  position:relative;z-index:1;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section{margin-top:38px}

.label{
  margin:0 0 12px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--blue-label);
}

/* ---------- card base ---------- */
.card{
  display:block;
  background:var(--glass);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--glass-edge),var(--lift);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:inherit;
  text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
@media(hover:hover){
  a.card:hover,.card--list:hover{background:var(--glass-hover);border-color:var(--card-border-hover)}
  a.card:hover{transform:translateY(-1px);box-shadow:var(--glass-edge),0 12px 34px rgba(0,0,0,.5)}
}
a.card:active{transform:scale(.98)}

/* ---------- aviso ---------- */
.notice{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;
  padding:12px 14px;
  min-height:44px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(0,113,227,.24),rgba(0,113,227,.09));
  border:1px solid rgba(0,113,227,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  font-size:13px;line-height:1.4;
  text-decoration:none;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.notice__ic{width:15px;height:15px;flex:none;margin-left:auto;color:rgba(255,255,255,.7)}
a.notice:active{transform:scale(.98)}
@media(hover:hover){a.notice:hover{background:linear-gradient(135deg,rgba(0,113,227,.32),rgba(0,113,227,.14))}}

/* ---------- cabeçalho ---------- */
.hero{text-align:center;padding:16px 0 0}
.hero__logo{height:30px;width:auto;margin:0 auto}
.hero__tagline{
  margin:24px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-.02em;
}

/* prateado do site: linear-gradient(147deg,#a1a1a1 22%,#fff 52%) recortado no texto.
   Só entra onde o navegador sabe recortar; fora disso o texto fica branco sólido. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__tagline,.proof__value{
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .hero__tagline{background-image:linear-gradient(150deg,#cdcdcd 6%,#ffffff 46%)}
  /* em corpo menor o degradê precisa ser mais curto, senão o número parece apagado */
  .proof__value{background-image:linear-gradient(147deg,#c4c4c4 8%,#ffffff 46%)}
}
.hero__sub{
  margin:10px auto 0;
  max-width:320px;
  font-size:14px;
  font-weight:300;
  line-height:1.5;
  color:var(--text-secondary);
  text-wrap:pretty;
}
.socials{display:flex;justify-content:center;gap:2px;margin-top:14px}
.socials a{
  width:44px;height:44px;
  display:grid;place-items:center;
  color:rgba(255,255,255,.6);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.socials svg{width:20px;height:20px}
.socials a:active{transform:scale(.9)}
@media(hover:hover){.socials a:hover{color:var(--white)}}

/* ---------- bloco do app ---------- */
.appcard{
  position:relative;
  padding:20px;
  overflow:hidden;
  /* mesmo degradê do site (310deg, do preto ao #313131), com um fio de
     transparência para o desfoque do vidro ainda ter o que fazer atrás */
  background:linear-gradient(310deg,rgba(0,0,0,.92) 40%,rgba(28,28,28,.9) 72%,rgba(49,49,49,.88) 100%);
}
/* faixas diagonais que se cruzam, na paleta da marca: é a arte do fundo do cartão.
   São gradientes com parada seca, então não custam nenhum arquivo. */
.appcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 44%,rgba(255,255,255,.06) 44%,rgba(255,255,255,.06) 73%,transparent 73%),
    linear-gradient(242deg,transparent 16%,rgba(255,255,255,.045) 16%,rgba(255,255,255,.045) 46%,transparent 46%);
  /* some à esquerda em vez de cortar numa linha reta: o texto fica sobre o preto */
  -webkit-mask-image:linear-gradient(90deg,transparent 6%,#000 46%);
  mask-image:linear-gradient(90deg,transparent 6%,#000 46%);
}
.appcard__head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.appcard__icon{
  width:58px;height:58px;flex:none;
  display:grid;place-items:center;
  border-radius:15px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}
/* a arte oficial do app, vinda da ficha da App Store, sem retoque */
.appcard__icon img{width:100%;height:100%;object-fit:cover}
.appcard__selo{position:static;margin-top:4px}
.appcard__title{
  position:relative;z-index:1;
  margin:18px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.appcard__desc{
  position:relative;z-index:1;
  margin:7px 0 0;
  max-width:300px;
  font-size:13px;
  font-weight:300;
  line-height:1.5;
  color:var(--text-secondary);
  text-wrap:pretty;
}

/* os dois botões de loja dividem a linha em partes iguais */
.stores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.store{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:58px;padding:0 10px;
  border-radius:15px;
  background:var(--glass);
  border:1px solid var(--card-border);
  box-shadow:var(--glass-edge),var(--lift);
  color:var(--white);
  text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.store__mark{width:18px;height:22px;flex:none}
/* o símbolo do Google Play é bitmap, recortado do selo oficial, e tem outra proporção */
.store__mark--img{width:auto;height:20px}
.store__txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store__sm{font-size:10px;font-weight:400;letter-spacing:.012em;color:var(--text-secondary)}
.store__lg{
  margin-top:3px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.012em;
}
a.store:active{transform:scale(.97)}
@media(hover:hover){
  a.store:hover{background:var(--glass-hover);border-color:var(--card-border-hover);transform:translateY(-1px);box-shadow:var(--glass-edge),0 6px 18px rgba(0,0,0,.4)}
}
/* a loja que ainda não abriu mantém a mesma caixa, só perde o peso */
.store--soon{background:rgba(255,255,255,.025);box-shadow:none}
.store--soon .store__lg{color:rgba(255,255,255,.72)}

/* ---------- produtos ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.product{display:flex;flex-direction:column;overflow:hidden}
.product__media{position:relative;aspect-ratio:1/1;background:rgba(255,255,255,.03);overflow:hidden}
.product__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
/* véu na base da foto: costura a imagem com o corpo do card em vez de cortar seco */
.product__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.5));
}
@media(hover:hover){a.product:hover .product__media img{transform:scale(1.045)}}
.product__body{display:flex;align-items:flex-start;gap:8px;padding:13px 14px 15px}
.product__name{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  line-height:1.25;
  letter-spacing:-.01em;
}
.product__frase{
  margin:5px 0 0;
  font-size:12px;
  font-weight:300;
  line-height:1.4;
  color:var(--text-secondary);
}
.product__arrow{width:15px;height:15px;flex:none;margin:2px 0 0 auto;color:var(--text-tertiary)}
.selo{
  position:absolute;top:10px;right:10px;
  padding:4px 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#1E86F0,var(--blue));
  box-shadow:0 1px 6px rgba(0,113,227,.45),inset 0 1px 0 rgba(255,255,255,.22);
  color:var(--white);
  font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  line-height:1;
}

/* ---------- card horizontal ---------- */
.wide{display:flex;align-items:center;gap:14px;padding:12px}
.grid + .wide,.wide + .wide,.wide + .grid{margin-top:12px}
.wide__thumb{
  width:66px;height:66px;flex:none;
  border-radius:var(--radius-sm);
  object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.wide__body{flex:1;min-width:0}
.wide__name{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  line-height:1.25;
}
.wide__frase{margin:4px 0 0;font-size:12px;font-weight:300;color:var(--text-secondary)}
.wide__chev{width:15px;height:15px;flex:none;margin-right:4px;color:var(--text-tertiary)}

/* ---------- lista agrupada ---------- */
.card--list{padding:3px 0;overflow:hidden}
.row{
  position:relative;
  display:flex;align-items:center;gap:14px;
  min-height:54px;
  padding:8px 16px;
  text-decoration:none;
  transition:background .15s var(--ease);
}
.row + .row::before{
  content:"";
  position:absolute;left:50px;right:0;top:0;
  height:1px;
  background:rgba(255,255,255,.08);
}
.row__ic{width:20px;height:20px;flex:none;color:rgba(255,255,255,.7)}
.row__title{font-size:15px;font-weight:400;line-height:1.3}
.row__chev{width:15px;height:15px;flex:none;margin-left:auto;color:var(--text-tertiary)}
.row:active{background:rgba(255,255,255,.07)}
@media(hover:hover){.row:hover{background:rgba(255,255,255,.04)}}

/* ---------- promo (empresas / insights) ---------- */
.promo{display:flex;align-items:center;gap:14px;padding:18px}
.promo__body{flex:1;min-width:0}
.promo__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.01em;
}
.promo__desc{margin:5px 0 0;font-size:13px;font-weight:300;line-height:1.45;color:var(--text-secondary)}
.promo__chev{width:15px;height:15px;flex:none;color:var(--text-tertiary)}
.promo__ic{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
}
.promo__ic svg{width:21px;height:21px}
/* ---------- bloco informativo ---------- */
/* Não é link: fecha a página com texto, sem seta e sem estado de clique. */
.sobre{position:relative;padding:22px 20px;overflow:hidden}
.sobre::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 48%,rgba(255,255,255,.05) 48%,rgba(255,255,255,.05) 74%,transparent 74%),
    linear-gradient(242deg,transparent 18%,rgba(255,255,255,.038) 18%,rgba(255,255,255,.038) 44%,transparent 44%);
  -webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 52%);
  mask-image:linear-gradient(90deg,transparent 10%,#000 52%);
}
.sobre__title{
  position:relative;z-index:1;
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.sobre__texto{
  position:relative;z-index:1;
  margin:11px 0 0;
  font-size:13.5px;
  font-weight:300;
  line-height:1.62;
  color:var(--text-secondary);
  text-wrap:pretty;
}

/* ---------- prova ---------- */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:38px}
.proof__item{padding:20px 12px;text-align:center}
.proof__value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:28px;
  line-height:1;
  letter-spacing:-.02em;
}
.proof__item{position:relative}
.proof__cap{margin:9px 0 0;font-size:11px;font-weight:300;line-height:1.35;color:var(--text-secondary)}
.proof__media{
  /* alinhado pela linha de base: a marca e o texto são os dois recortados da
     altura de maiúscula até a base, então é a base que os faz parecer na mesma linha.
     Centralizar as caixas deixava a marca pendurada abaixo do texto. */
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  margin-top:20px;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  color:rgba(255,255,255,.5);
}
/* a marca oficial da Forbes, recolorida em branco a partir do mesmo arquivo
   que o site usa. A forma das letras é a original. */
.proof__logo{height:14px;width:auto;opacity:.9}

/* fio azul da marca: fecha a credibilidade no rodapé e separa o cabeçalho */
.raio{
  height:1px;
  margin:22px 0 0;
  background:var(--raio);
}

/* ---------- rodapé ---------- */
/* Antes de o content.json chegar, o rodapé fica vazio logo abaixo do cabeçalho e
   depois salta para o fim da página: um layout shift de 0,43 em metade das medições.
   Fora do fluxo enquanto está vazio, ele não tem de onde saltar. */
#rodape:empty,#aviso:empty{display:none}

.footer{
  position:relative;z-index:1;
  max-width:var(--shell);
  margin:40px auto 0;
  padding:36px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  text-align:center;
}
/* fio azul que fecha a página, como no rodapé do site */
.footer::before{
  content:"";
  position:absolute;top:0;left:var(--gutter);right:var(--gutter);
  height:1px;
  background:var(--raio);
}
.footer__site{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 4px;
  font-size:13px;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.footer__site svg{width:14px;height:14px}
@media(hover:hover){.footer__site:hover{color:var(--white)}}
.footer__legal{
  margin:4px 0 0;
  font-size:11px;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.55);
}

/* ---------- toast ---------- */
.toast{
  position:fixed;z-index:50;
  left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px);
  padding:11px 18px;
  border-radius:999px;
  background:rgba(28,28,30,.92);
  border:1px solid var(--card-border);
  box-shadow:var(--glass-edge),0 8px 24px rgba(0,0,0,.5);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  font-size:13px;line-height:1;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- noscript ---------- */
.noscript{padding-top:28px;font-size:14px;color:var(--text-secondary)}
.noscript ul{padding-left:18px;margin:10px 0 0}
.noscript li{margin-top:8px}
.noscript a{color:var(--white)}

/* ---------- telas estreitas ---------- */
@media(max-width:374px){
  :root{--gutter:16px}
  .hero__tagline{font-size:23px}
  .proof__value{font-size:25px}
  .stores{gap:8px}
  .store{padding:0 6px;gap:7px}
  .store__lg{font-size:14px}
}

/* ---------- desktop ---------- */
@media(min-width:768px){
  body::before{height:min(80vh,800px);background:radial-gradient(ellipse 48% 58% at 50% 0%,rgba(0,113,227,.12),transparent 66%)}
  .topbar{padding-top:18px}
  .hero{padding-top:22px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* selo dentro do card horizontal */
.selo--inline{
  position:static;
  display:inline-block;
  margin-left:6px;
  vertical-align:middle;
  font-family:var(--font-body);
}