:root{
  --bg:#eef2f7;
  --ink:#0f1630;
  --muted:#56607c;
  --blue:#405889;
  --c1:#1fb6e8; --c2:#6f4bff; --c3:#e9449a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}

/* topo */
.topo{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:28px;padding:18px clamp(16px,4vw,56px);transition:background .3s, box-shadow .3s}
/* sobre o vídeo o topo fica transparente (sem faixa tapando o banner); só ganha fundo depois que o banner termina */
.topo.solido{background:rgba(238,242,247,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(15,22,48,.06)}
.topo:not(.solido) .logo{text-shadow:0 0 14px rgba(255,255,255,.9)}
.logo{font-family:Archivo,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;text-decoration:none;color:var(--blue);margin-right:auto}
.logo span{color:var(--ink);font-weight:500}
/* sem pílula/fundo: nada tapa o rosto das pessoas do vídeo, só o texto com um brilho leve para ler */
#menu{display:flex;gap:26px}
.topo:not(.solido) #menu a{opacity:1;text-shadow:0 0 10px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.9)}
#menu a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink);opacity:.8}
#menu a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:14px;transition:transform .25s, background .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);background:var(--blue)}
.btn.ghost{background:rgba(255,255,255,.55);color:var(--ink);border:1px solid rgba(15,22,48,.18)}
.btn.ghost:hover{background:#fff}
.btn.claro{background:#fff;color:var(--ink)}
.btn.claro:hover{background:var(--c1)}
.menu-toggle{display:none;width:42px;height:42px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:16px;height:2px;background:#fff;transition:transform .3s}
.menu-toggle.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* cena com vídeo na rolagem */
.cena{position:relative;height:1100vh}
.palco{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#e9edf2}
.scrub-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity .5s ease}
.veu{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(238,242,247,.82) 0%,rgba(238,242,247,.45) 28%,rgba(238,242,247,0) 48%);opacity:0;transition:opacity .5s}
.veu.on{opacity:1}

.tag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:16px}
h1,h2{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1}
.cor{display:inline-block;padding:0 .04em .06em 0;background:linear-gradient(90deg,var(--c1),var(--c2) 50%,var(--c3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;white-space:nowrap}
.sub{margin-top:18px;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:var(--muted);max-width:400px}

.beat{position:absolute;z-index:5;left:clamp(16px,5vw,80px);top:50%;width:min(480px,33vw);opacity:0;transform:translateY(-42%);transition:opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.beat.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.beat h1{font-size:clamp(34px,4.1vw,66px)}
.beat h2{font-size:clamp(30px,3.6vw,56px)}
.acoes{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* palavras gigantes que passam "atrás" do homem (multiply some no preto da roupa) */
.gigante{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;mix-blend-mode:multiply;opacity:0;transform:scale(.92);transition:opacity .45s ease, transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.gigante.on{opacity:1;transform:scale(1)}
.gigante small{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(13px,1.4vw,20px);color:#3b2a8f}
.gigante b{font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.04em;line-height:.9;font-size:clamp(56px,11vw,190px);color:#2b1c78}

.gigante.longo b{font-size:clamp(40px,7vw,120px);max-width:1100px}
.rolar{position:absolute;z-index:6;left:clamp(16px,6vw,96px);bottom:26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;transition:opacity .4s}
.rolar i{display:block;width:1px;height:34px;background:linear-gradient(var(--ink),transparent);animation:desce 1.8s ease-in-out infinite}
@keyframes desce{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.barra{position:absolute;z-index:6;right:clamp(14px,2.5vw,36px);top:50%;transform:translateY(-50%);width:2px;height:120px;background:rgba(15,22,48,.12);border-radius:2px}
.barra b{display:block;width:100%;height:0;background:linear-gradient(var(--c1),var(--c2),var(--c3));border-radius:2px}

/* vitrine de modelos */
.modelos{padding:clamp(72px,10vw,140px) clamp(16px,6vw,96px);background:var(--bg);position:relative;overflow:hidden}
.modelos::before{content:"";position:absolute;inset:-20% -10% auto auto;width:60vw;height:60vw;background:radial-gradient(circle,rgba(111,75,255,.12),transparent 60%);pointer-events:none}
.modelos h2{font-size:clamp(32px,4vw,60px);position:relative}
.modelos .intro{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.6;max-width:520px}
.vitrine{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;position:relative}
.modelo{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;border-radius:22px;padding:12px 12px 24px;box-shadow:0 10px 30px rgba(15,22,48,.07);transition:transform .3s, box-shadow .3s}
.modelo:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(64,88,137,.18)}
.modelo .foto{display:block;border-radius:14px;padding:2px;background:linear-gradient(120deg,var(--c1),var(--blue) 40%,var(--c2) 70%,var(--c3));overflow:hidden}
.modelo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;transition:transform .6s}
.modelo:hover img{transform:scale(1.04)}
.modelo .selo{margin:18px 12px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--c2)}
.modelo h3{font-family:Archivo,sans-serif;font-size:24px;letter-spacing:-.02em;margin:8px 12px 8px}
.modelo p{margin:0 12px;color:var(--muted);line-height:1.6;font-size:15px;flex:1}
.modelo .ver{margin:18px 12px 0;font-weight:600;color:var(--blue)}

/* serviços */
.servicos{padding:clamp(72px,10vw,140px) clamp(16px,6vw,96px);background:#fff}
.servicos h2{font-size:clamp(32px,4vw,60px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{border:1px solid #e3e7f0;border-radius:20px;padding:28px;background:linear-gradient(180deg,#fff, #f6f8fc)}
.card .num{font-family:Archivo,sans-serif;font-weight:800;font-size:14px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent}
.card h3{font-family:Archivo,sans-serif;font-size:22px;margin:12px 0 10px;letter-spacing:-.02em}
.card p{color:var(--muted);line-height:1.6;font-size:15px}
.link{display:inline-block;margin-top:30px;font-weight:600;color:var(--blue);text-decoration:none}

/* final */
.final{background:var(--ink);color:#fff;padding:clamp(72px,11vw,150px) clamp(16px,6vw,96px);display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.final h2{font-size:clamp(34px,4.6vw,68px)}
.final p{color:#aab2cc;line-height:1.6;font-size:17px;max-width:440px;margin-bottom:24px}
.rodape{background:var(--ink);color:#6f7896;font-size:13px;padding:0 clamp(16px,6vw,96px) 32px}
.rodape a{color:#aab2cc}

/* celular */
@media (max-width:768px){
  .topo{padding:12px 16px;gap:12px}
  .topo .btn{padding:10px 14px;font-size:13px}
  .menu-toggle{display:flex}
  #menu{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:rgba(15,22,48,.96);opacity:0;pointer-events:none;transition:opacity .3s}
  /* sem blur no topo do celular: o blur prenderia o menu de tela cheia dentro da barra */
  .topo.solido{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(238,242,247,.97)}
  #menu a, .topo:not(.solido) #menu a{color:#fff;font-size:22px;opacity:1;text-shadow:none}
  #menu.nav-open{opacity:1;pointer-events:auto}
  .cena{height:900vh}
  .veu{background:linear-gradient(0deg,rgba(238,242,247,.95) 0%,rgba(238,242,247,.75) 32%,rgba(238,242,247,0) 55%)}
  .beat{left:16px;right:16px;width:auto;top:auto;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateY(12%)}
  .beat.on{transform:translateY(0)}
  .beat h1{font-size:clamp(34px,10vw,44px)}
  .beat h2{font-size:clamp(30px,9vw,40px)}
  .sub{font-size:15px;margin-top:12px}
  .acoes{margin-top:18px}
  .rolar{display:none}
  .barra{right:8px;height:80px}
  .gigante{mix-blend-mode:normal;justify-content:flex-end;padding-bottom:calc(9vh + env(safe-area-inset-bottom))}
  .gigante b{font-size:clamp(46px,15vw,80px);color:#fff;text-shadow:0 6px 30px rgba(43,28,120,.75)}
  .gigante small{color:#fff;text-shadow:0 2px 12px rgba(43,28,120,.8)}
  .gigante.longo b{font-size:clamp(32px,9.5vw,52px)}
  .cards{grid-template-columns:1fr}
  .vitrine{grid-template-columns:1fr;gap:18px;margin-top:32px}
  .final{grid-template-columns:1fr;gap:20px}
  .final .btn{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .rolar i{animation:none}
}