/* =============================================================================
   RobMob — home institucional (robmob.com.br)
   -----------------------------------------------------------------------------
   Mesmos tokens de cor/raio/sombra do app Flutter (ver assets/css/auth.css
   para o comentário completo da origem) — repetidos aqui porque style.css e
   auth.css continuam sendo duas folhas independentes, exatamente como já
   era antes desta reformulação (nenhuma mudança de arquitetura do site).

   RODADA "EXPERIÊNCIA PREMIUM/ANIMADA" (2026-09-08): tudo daqui pra baixo
   usa só CSS transforms/opacity (nunca layout/width/height animados) —
   mais barato pro navegador, e é exatamente o que prefers-reduced-motion
   consegue desligar de forma limpa. Nenhuma biblioteca de animação: só
   CSS + o pouco de JS em assets/js/hero-demo.js (loop do celular +
   paralaxe do mouse) e o IntersectionObserver que já existia em main.js
   (reaproveitado sem nenhuma mudança).
   ============================================================================= */
:root{
  --brand:#E53935;
  --brand-dark:#C62828;
  --brand-soft:#FFEBEE;
  --ink:#111827;
  --muted:#6B7280;
  --subtle:#9CA3AF;
  --bg:#F1F3F6;
  --surface:#FFFFFF;
  --surface-soft:#F8FAFC;
  --border:#E5E7EB;
  --premium:#7C3AED;

  --bronze:#B7791F;
  --silver:#64748B;
  --gold:#D4A017;
  --diamond:#2563EB;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-hero:32px; --r-pill:999px;

  --shadow-elevate:0 2px 6px rgba(17,24,39,.09), 0 18px 32px rgba(17,24,39,.11);
  --shadow-elevate-soft:0 2px 5px rgba(17,24,39,.07), 0 14px 26px rgba(17,24,39,.08);
  --shadow-cta:0 7px 0 0 #F0A6A4, 0 7px 14px 0 rgba(229,57,53,.22), 0 22px 32px -4px rgba(229,57,53,.22);
  --shadow-cta-active:0 2px 0 0 #F0A6A4, 0 2px 6px 0 rgba(229,57,53,.18), 0 8px 16px -4px rgba(229,57,53,.18);

  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Roboto,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;transition:color .15s ease}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin:auto}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(20px);border-bottom:1px solid rgba(17,24,39,.06)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink)}
.logo{width:36px;height:36px;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 8px 18px rgba(229,57,53,.28);flex:none;transition:transform .2s ease}
.logo img{width:100%;height:100%;object-fit:cover}
.brand:hover .logo{transform:scale(1.06) rotate(-3deg)}
nav{display:flex;gap:26px;color:var(--muted);font-size:.92rem;font-weight:600}
nav a{position:relative}
nav a:hover{color:var(--ink)}
nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--brand);border-radius:2px;transform:scaleX(0);transition:transform .2s ease}
nav a:hover:after{transform:scaleX(1)}
.nav-admin-link{color:var(--brand)!important;background:var(--brand-soft);padding:6px 12px;border-radius:var(--r-pill)}
.nav-admin-link:after{display:none}
.nav-admin-link:hover{color:var(--brand-dark)!important;background:#FBD5D3}
.actions{display:flex;align-items:center;gap:14px;font-weight:700}

/* ---------- buttons (microinterações) ---------- */
.btn,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:var(--r-md);font-weight:800;font-size:.95rem;border:none;cursor:pointer}
.btn{
  position:relative;overflow:hidden;
  background:var(--brand);color:#fff;box-shadow:var(--shadow-cta);
  transition:box-shadow .18s ease, transform .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{box-shadow:var(--shadow-cta-active);transform:translateY(5px)}
/* Brilho diagonal que varre o botão no hover — só transform, barato, some
   de propósito em reduced-motion/mobile (media queries no fim do arquivo). */
.btn:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
  transform:translateX(-120%);
}
.btn:hover:before{transition:transform .65s ease}
.btn:hover:before{transform:translateX(120%)}
.small{min-height:44px;padding:0 18px;font-size:.86rem}
.ghost{border:1.4px solid var(--border);background:#fff;color:var(--ink);transition:background-color .18s ease, transform .18s ease, border-color .18s ease}
.ghost:hover{background:var(--surface-soft);transform:translateY(-2px);border-color:#D8DAE0}
.ghost:active{transform:translateY(0)}

/* ---------- hero ---------- */
.hero{padding:88px 0 100px;background:radial-gradient(circle at 80% 12%,rgba(229,57,53,.12),transparent 45%),linear-gradient(180deg,#fff,#fbfbfc);overflow:clip}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.eyebrow{display:inline-block;color:var(--brand);font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em}
.eyebrow.light{color:#FF7A76}
.hero h1{font-size:clamp(2.8rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.03em;margin:18px 0;color:var(--ink)}
.hero p{font-size:1.08rem;color:var(--muted);line-height:1.65;max-width:480px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{display:flex;align-items:center;gap:14px;margin-top:36px}
.trust .stars{color:var(--brand);font-size:1rem;letter-spacing:2px}
.trust strong,.trust small{display:block}
.trust small{color:var(--subtle);margin-top:4px;font-size:.78rem}

/* ---------- entrada do hero (só no load, não é scroll-reveal) ----------
   logo/eyebrow -> título -> parágrafo -> CTA -> confiança -> celular,
   cada um um pouco depois do anterior. translateY curto + opacity, nunca
   width/height. Uma única keyframe reaproveitada com atraso crescente. */
@keyframes heroRise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroRiseSide{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.hero-anim{opacity:0;animation:heroRise .75s cubic-bezier(.22,.8,.25,1) forwards}
.hero-anim-1{animation-delay:.05s}
.hero-anim-2{animation-delay:.16s}
.hero-anim-3{animation-delay:.30s}
.hero-anim-4{animation-delay:.44s}
.hero-anim-5{animation-delay:.56s}
.hero-anim-phone{opacity:0;animation:heroRiseSide .85s cubic-bezier(.22,.8,.25,1) forwards;animation-delay:.34s}

/* ---------- phone mockup: reprodução fiel da tela Explorar real, VIVA ----------
   Fonte: lib/pages/explorar/explorar_page.dart + explorar_top_bar.dart +
   explorar_feed_card.dart + lib/pages/app_shell.dart (BottomFloatingMenu).
   Estrutura estática preservada da rodada anterior (cabeçalho = lupa
   flutuante, coluna de ações, painel de vidro, barra inferior). Nesta
   rodada, .xp-feed/.xp-track/.xp-ad viram uma demonstração em loop
   (assets/js/hero-demo.js): fotos trocam para os LADOS dentro do mesmo
   anúncio (translateX de .xp-photo-track), depois o anúncio inteiro troca
   para CIMA (translateY de .xp-track) — a mesma gramática de gesto do
   Explorar real (fotos = horizontal, feed = vertical). Sem áudio, sem
   Supabase: dado 100% local/demonstrativo (ver ADS_DEMO no JS). */
.phone-stage{position:relative;min-height:640px;display:grid;place-items:center;perspective:1400px}
.phone-float{animation:idleFloat 6s ease-in-out infinite}
@keyframes idleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
.iphone{
  position:relative;
  width:300px;height:610px;border-radius:48px;
  background:linear-gradient(160deg,#1F2430,#111827);
  padding:14px;
  box-shadow:0 30px 60px rgba(17,24,39,.22), 0 60px 110px rgba(17,24,39,.22);
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(1.2deg);
  transition:transform .2s ease-out, box-shadow .2s ease-out;
  transform-style:preserve-3d;
}
/* Reflexo de vidro — camada estática, discreta, nunca animada (luz de
   canto, como um brilho de tela) */
.iphone:before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 32%);
  pointer-events:none;z-index:9;
}
/* Fundo do "screen" — NUNCA preto (achado 2026-09-08: gradientes escuros
   aqui liam como tela preta). Tom neutro claro, coerente com --surface-
   soft do resto do site; só aparece por uma fração de segundo, antes da
   primeira <img> pintar. */
.screen{height:100%;border-radius:36px;position:relative;overflow:hidden;background:var(--surface-soft)}

.xp-island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:86px;height:22px;border-radius:16px;background:#000;z-index:8}

/* Viewport que esconde o anúncio "de baixo" enquanto ele ainda não entrou
   — sem isto, .xp-track (200% de altura) vazaria por baixo do celular. */
.xp-feed{position:absolute;inset:0;overflow:hidden}
/* Trilho vertical: 2 anúncios empilhados (A em cima, B logo abaixo), cada
   um ocupando exatamente 50% da altura do trilho = 100% da tela. Mover
   translateY(-50%) troca de A pra B — depois o JS reposiciona sem
   transição e reaproveita os mesmos 2 nós pro próximo ciclo (nunca cresce
   o DOM). */
.xp-track{position:absolute;left:0;right:0;top:0;height:200%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.xp-ad{position:relative;height:50%;width:100%}

/* Trilho horizontal de fotos DENTRO de cada anúncio — mesma ideia, só que
   lateral: N fotos lado a lado, translateX(-index*100%) troca de foto. */
.xp-photo-track{position:absolute;inset:0;display:flex;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
/* Cada foto é uma imagem local real (assets/images/demo/) — background-
   color aqui é só o placeholder ENQUANTO a imagem ainda não pintou (claro,
   nunca preto), pré-carregada antes do loop começar (ver hero-demo.js). */
.xp-photo-slide{flex:0 0 100%;height:100%;background:var(--surface-soft);overflow:hidden}
.xp-photo-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* Gradientes de legibilidade — exatamente como em ExplorarFeedCard (topo
   escurece pra dar contraste à lupa/ações, base escurece pro texto). */
.xp-photo-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.16) 24%, transparent 44%),
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.22) 20%, transparent 42%);
}

/* Indicador de foto (bolinhas) — reforça visualmente "isso é uma foto que
   passa pro lado", junto com o contador 1/N que já existia na coluna de
   ações. */
.xp-dots{position:absolute;left:14px;bottom:98px;display:flex;gap:5px;z-index:3}
.xp-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);transition:background-color .25s ease, transform .25s ease}
.xp-dots span.on{background:#fff;transform:scale(1.35)}

/* Lupa compacta — o cabeçalho real do Explorar (ExplorarTopBar recolhida:
   GlassCircleButton, vidro translúcido, ícone branco). */
.xp-topbar{
  position:absolute;top:42px;right:14px;z-index:6;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);color:#fff;font-size:1rem;
  display:grid;place-items:center;
}

/* Coluna de ações à direita: favorito, contador de fotos, chat, compartilhar
   — mesma ordem/posição de ExplorarFeedCard. */
.xp-actions{position:absolute;right:12px;top:92px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:9px}
.xp-bubble{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;font-size:.85rem;color:#fff;transition:transform .2s ease, background-color .2s ease, color .2s ease}
.xp-bubble.fav{color:var(--brand)}
/* Reação de favorito — pulso curto de escala quando a demonstração
   "favorita" o anúncio (ver hero-demo.js). Só transform, sem repaint de
   layout. */
@keyframes favPulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  60%{transform:scale(.92)}
  100%{transform:scale(1)}
}
.xp-bubble.fav.pulsing{animation:favPulse .5s ease;background:rgba(255,255,255,.94)}
.xp-counter{padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.42);color:#fff;font-size:.58rem;font-weight:800}
/* Balão "Chat" — mesmo desenho do ChatBubbleGlyph real (retângulo bem
   arredondado vermelho + pontinha triangular abaixo). */
.xp-chat{position:relative;width:32px;height:19px;border-radius:7px;background:var(--brand);color:#fff;font-size:.48rem;font-weight:900;display:grid;place-items:center;letter-spacing:-.2px;margin-bottom:4px}
.xp-chat:after{content:"";position:absolute;left:9px;bottom:-5px;border-width:5px 4px 0;border-style:solid;border-color:var(--brand) transparent transparent}

/* Painel de vidro inferior — mesmo conteúdo de _BottomInfoPanel: preço em
   chip escuro (vermelho, bold), título branco, localização com pino,
   specs com check. */
.xp-panel{
  position:absolute;left:10px;right:10px;bottom:76px;z-index:5;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:10px 12px;backdrop-filter:blur(3px);
}
.xp-price{display:inline-block;background:rgba(0,0,0,.32);border-radius:8px;padding:3px 9px;color:#FF6058;font-weight:900;font-size:.92rem;letter-spacing:-.02em}
.xp-title{color:#fff;font-weight:900;font-size:.76rem;margin-top:7px;line-height:1.2}
.xp-loc{display:flex;align-items:center;gap:4px;color:rgba(255,255,255,.75);font-size:.6rem;font-weight:700;margin-top:5px}
.xp-specs{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}
.xp-specs span{color:rgba(255,255,255,.92);font-size:.58rem;font-weight:800}
.xp-specs span:before{content:"✓ ";color:rgba(255,255,255,.55)}

/* Barra inferior — mesmos 5 itens/mesma ordem de BottomFloatingMenu.
   Ícone: quadrado branco 26px raio 9 (proporção do quadrado 44/16 real).
   Selecionado (Explorar): ícone e rótulo em vermelho da marca. Os demais:
   ícone cinza escuro, rótulo branco (legível sobre a foto) — mesmo
   critério de cor do app real. */
.xp-navbar{
  position:absolute;left:8px;right:8px;bottom:14px;z-index:7;
  height:54px;border-radius:22px;background:rgba(0,0,0,.36);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:space-around;padding-bottom:6px;
}
.xp-nav-item,.xp-nav-center{display:flex;flex-direction:column;align-items:center;gap:3px}
.xp-nav-ico{width:26px;height:26px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:.78rem;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.xp-nav-item:not(.active) .xp-nav-ico{filter:grayscale(1) brightness(.75)}
.xp-nav-label{font-size:.48rem;font-weight:800;color:#fff}
.xp-nav-item.active .xp-nav-label{color:var(--brand)}
.xp-nav-add{width:32px;height:32px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:900;transform:translateY(-8px);box-shadow:0 4px 10px rgba(229,57,53,.45)}

.float{position:absolute;display:flex;gap:11px;align-items:center;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);padding:12px 15px;border-radius:var(--r-lg);box-shadow:var(--shadow-elevate);z-index:3}
.float small,.float b{display:block}
.float small{font-size:.64rem;color:var(--subtle)}
.float b{font-size:.8rem;margin-top:3px;color:var(--ink)}
.f1{left:-34px;top:96px}
.f2{right:-22px;bottom:150px}
.float .dot{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:1rem}

/* ---------- sections ---------- */
.section{padding:104px 0}
.soft{background:var(--surface-soft)}
.heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.heading h2,.center h2,.pro h2,.security h2,.download h2{font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.03em;margin:12px 0}
.heading p{color:var(--muted);max-width:480px;margin-top:10px}
.center{text-align:center;max-width:680px;margin:0 auto 46px}
.center p{color:var(--muted)}

/* ---------- scroll reveal (base já existia; nesta rodada ganha stagger
   por nth-child nos grids, sem precisar de JS a mais — o
   IntersectionObserver de main.js continua sendo o único "motor" disso,
   só adiciona .visible). ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.8,.25,1), transform .7s cubic-bezier(.22,.8,.25,1)}
.reveal.visible{opacity:1;transform:none}

.feature-grid .feature:nth-child(1){transition-delay:0s}
.feature-grid .feature:nth-child(2){transition-delay:.08s}
.feature-grid .feature:nth-child(3){transition-delay:.16s}
.feature-grid .feature:nth-child(4){transition-delay:.24s}

.works-grid .works-step:nth-child(1){transition-delay:0s}
.works-grid .works-step:nth-child(2){transition-delay:.09s}
.works-grid .works-step:nth-child(3){transition-delay:.18s}
.works-grid .works-step:nth-child(4){transition-delay:.27s}

.points div:nth-child(1){transition-delay:0s}
.points div:nth-child(2){transition-delay:.08s}
.points div:nth-child(3){transition-delay:.16s}

.plan-chip:nth-child(1){transition-delay:0s}
.plan-chip:nth-child(2){transition-delay:.06s}
.plan-chip:nth-child(3){transition-delay:.12s}
.plan-chip:nth-child(4){transition-delay:.18s}

/* ---------- feature grid (Explorar/Anunciar/Conversar/Favoritos) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  padding:26px 22px;box-shadow:var(--shadow-elevate-soft);
  transition:transform .25s cubic-bezier(.22,.8,.25,1), box-shadow .25s ease, border-color .25s ease;
}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-elevate);border-color:#DEE1E8}
.feature .ico{
  width:52px;height:52px;border-radius:var(--r-md);
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.feature:hover .ico{transform:scale(1.1) rotate(-6deg)}
.feature h3{font-size:1.15rem;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.feature p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0}

/* ---------- "Como funciona" — demonstração visual curta, pouco texto ----
   Cada etapa tem um glifo animado em loop mostrando o GESTO (não é
   decoração gratuita: swipe pra cima = trocar de anúncio, swipe pros
   lados = trocar de foto, coração pulsando = favoritar/conversar, "+"
   pulsando = anunciar) — a mesma gramática do celular do hero. */
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.works-step{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  padding:26px 20px;text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.works-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-elevate-soft)}
.works-glyph{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  background:var(--surface-soft);border:1px solid var(--border);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.works-step h3{font-size:1rem;margin:0 0 6px;color:var(--ink)}
.works-step p{color:var(--muted);font-size:.85rem;line-height:1.5;margin:0}

/* Glifo 1 — Explore: seta subindo em loop (swipe vertical) */
.g-up{width:3px;height:22px;background:var(--brand);border-radius:2px;position:relative}
.g-up:before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-width:0 5px 7px;border-style:solid;border-color:transparent transparent var(--brand)}
@keyframes glyphUp{0%{transform:translateY(10px);opacity:0}30%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.g-up{animation:glyphUp 1.6s cubic-bezier(.4,0,.2,1) infinite}

/* Glifo 2 — Veja as fotos: seta indo e voltando pros lados (swipe horizontal) */
.g-side{display:flex;align-items:center;gap:10px}
.g-side span{width:8px;height:8px;border-radius:50%;background:var(--border)}
.g-side span.on{background:var(--brand)}
@keyframes glyphSide{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(14px)}
}
.g-side{animation:glyphSide 1.8s ease-in-out infinite}

/* Glifo 3 — Encontrou algo?: coração pulsando (favoritar/conversar) */
.g-heart{font-size:1.6rem;color:var(--brand)}
@keyframes glyphHeart{
  0%,100%{transform:scale(1)}
  25%{transform:scale(1.22)}
  40%{transform:scale(.94)}
  55%{transform:scale(1.08)}
}
.g-heart{animation:glyphHeart 2.2s ease-in-out infinite}

/* Glifo 4 — Quer vender?: "+" respirando, convite ao toque */
.g-plus{
  width:34px;height:34px;border-radius:11px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:1.2rem;font-weight:900;
}
@keyframes glyphPlus{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(229,57,53,.35)}
  50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(229,57,53,0)}
}
.g-plus{animation:glyphPlus 2s ease-in-out infinite}

/* ---------- RobMob Pro (acabamento premium) ---------- */
.pro{padding:110px 0;background:linear-gradient(155deg,#171923,#0F1117);color:#fff;position:relative}
.pro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.pro p{color:#B7BAC5;line-height:1.7}
.plans-row{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}
.plan-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);font-weight:700;font-size:.82rem;color:#fff;
  transition:transform .2s ease, background-color .2s ease;
}
.plan-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.11)}
.plan-chip:before{content:"";width:9px;height:9px;border-radius:50%}
.plan-chip.bronze:before{background:var(--bronze)}
.plan-chip.silver:before{background:var(--silver)}
.plan-chip.gold:before{background:var(--gold)}
.plan-chip.diamond:before{background:var(--diamond)}

.pro-card-wrap{position:relative}
/* Glow suave e LENTO atrás do card — nunca neon, só uma respiração de
   opacidade bem discreta, sempre atrás (z-index -1), nunca sobre o
   conteúdo. */
@keyframes proGlow{
  0%,100%{opacity:.35}
  50%{opacity:.6}
}
.pro-card-wrap:before{
  content:"";position:absolute;inset:-14px;z-index:0;
  background:radial-gradient(circle at 30% 20%, rgba(229,57,53,.28), transparent 60%);
  filter:blur(18px);
  animation:proGlow 4.5s ease-in-out infinite;
}
.pro-card{
  position:relative;z-index:1;
  background:linear-gradient(160deg,#20232F,#15171F);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  padding:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.22,.8,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.pro-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.pro-card .pc-top{display:flex;justify-content:space-between;align-items:baseline}
.pro-card .pc-name{font-size:1.3rem;font-weight:800}
.pro-card .pc-price{font-size:1.15rem;font-weight:800;color:#FF6D68}
.pro-card .pc-price span{font-size:.75rem;font-weight:700;opacity:.75}
.pro-card .pc-ads{margin-top:6px;color:#8D90A0;font-size:.82rem}
.pro-card .pc-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.pro-card .pc-list li{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:#D3D5DF;line-height:1.5}
.pro-card .pc-list li:before{content:"✓";color:#FF6D68;font-weight:800;flex:none}

/* ---------- segurança ---------- */
.security{background:linear-gradient(150deg,#fff,#f5f6f8);border:1px solid var(--border);border-radius:var(--r-hero);padding:56px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.security p{color:var(--muted);line-height:1.7}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.points div{background:#fff;border:1px solid var(--border);padding:16px;border-radius:var(--r-lg);box-shadow:var(--shadow-elevate-soft);transition:transform .22s ease, box-shadow .22s ease}
.points div:hover{transform:translateY(-4px);box-shadow:var(--shadow-elevate)}
.points span{font-size:1.3rem}
.points b,.points small{display:block}
.points b{margin-top:10px;font-size:.92rem}
.points small{color:var(--subtle);margin-top:5px;font-size:.8rem;line-height:1.45}
.shield{display:grid;place-items:center}
.shield span{width:118px;height:118px;border-radius:var(--r-hero);background:var(--brand);color:#fff;display:grid;place-items:center;font-size:2.8rem;box-shadow:0 26px 54px rgba(229,57,53,.3)}

/* ---------- download CTA (final) ---------- */
.download{background:linear-gradient(135deg,#FF4A45,var(--brand-dark));color:#fff;border-radius:var(--r-hero);padding:60px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:30px;position:relative;overflow:hidden}
.download p{color:rgba(255,255,255,.85)}
.download .btn{background:#fff;color:var(--brand-dark);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.download .btn:hover{transform:translateY(-2px)}
.download .btn:active{transform:translateY(3px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.download .btn:before{background:linear-gradient(115deg, transparent 35%, rgba(196,30,25,.14) 50%, transparent 65%)}
.download-trust{margin-top:14px;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.85)}
.mini-phone{width:210px;height:390px;background:#fff;border:8px solid #111827;border-radius:var(--r-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(5deg);box-shadow:0 32px 66px rgba(0,0,0,.28);margin:auto;transition:transform .3s ease}
.download:hover .mini-phone{transform:rotate(2deg) translateY(-4px)}
.mini-phone .logo{width:64px;height:64px;border-radius:var(--r-md);box-shadow:none}
.mini-phone b{font-size:1.2rem;margin-top:14px;color:var(--ink)}
.mini-phone small{color:var(--subtle);margin-top:6px;font-size:.82rem}

/* ---------- footer ---------- */
footer{background:#111827;color:#fff;padding:56px 0 24px}
.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.foot>div{display:flex;flex-direction:column;gap:11px}
.foot>div>b{color:#8C8FA0;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.foot a:not(.brand){color:#D0D2DB;font-size:.88rem}
.foot a:not(.brand):hover{color:#fff}
.foot p{color:#8C8FA0;max-width:300px;line-height:1.6;font-size:.9rem}
.foot .brand{color:#fff}
.copy{border-top:1px solid #262A38;margin-top:36px;padding-top:20px;color:#7C7F90;font-size:.8rem}

/* ---------- prefers-reduced-motion: desliga movimento, mantém o layout
   final (nunca deixa nada preso em opacity:0). ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-anim,.hero-anim-phone{animation:none !important;opacity:1 !important;transform:none !important}
  .phone-float{animation:none !important}
  .iphone{transition:none !important}
  .reveal{transition:opacity .25s ease !important;transform:none !important}
  .xp-track,.xp-photo-track{transition:none !important}
  .xp-bubble.fav.pulsing{animation:none !important}
  .pro-card-wrap:before{animation:none !important;opacity:.4}
  .g-up,.g-side,.g-heart,.g-plus{animation:none !important}
  .btn:before{display:none}
}

@media(max-width:980px){
  nav{display:none}
  .hero-grid,.pro-grid,.security,.download{grid-template-columns:1fr}
  .feature-grid,.works-grid{grid-template-columns:repeat(2,1fr)}
  .copy{text-align:center}
  .phone-stage{margin-top:10px}
  .points{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,1180px)}
  .hero{padding:52px 0}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn,.hero-actions .ghost{width:100%}
  .phone-stage{transform:scale(.82);margin:-20px 0 -50px}
  .f1{left:-40px}
  .f2{right:-30px}
  .section{padding:72px 0}
  .feature-grid,.works-grid{grid-template-columns:1fr}
  .pro{padding:76px 0}
  .heading{align-items:flex-start;flex-direction:column}
  .security,.download{padding:30px 22px}
  .foot{grid-template-columns:1fr}
  .actions{gap:8px}
  .actions a:first-child{display:none}

  /* Mobile: efeitos custosos desligados/reduzidos, sensação premium mantida
     (sombra, radius, cor, tipografia continuam) — só paralaxe/glow/idle
     mais pesados saem, como pedido. */
  .phone-float{animation:none}
  .iphone{transform:rotate(0deg) !important;box-shadow:0 24px 50px rgba(17,24,39,.22)}
  .pro-card-wrap:before{animation:none;opacity:.3;filter:blur(14px)}
  .feature:hover,.points div:hover,.pro-card:hover{transform:none}
}