/* vemdebio.site — página de apresentação. Ambiente índigo; cada seção é um palco com a sua própria cor e personagens 3D. */
:root{
  --page:#0e0f2d; --chrome:#23272a; --surface:#2c2f33; --night:#08091c;
  --fog:#babcd9;
  --blurple:#4d1dff; --blurple-dark:#3a10d6; --blurple-hover:#8a6bff; --green:#25edbc; --mint:#25edbc;
  --display:'Unbounded','Nunito',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-btn:12px; --r-card:16px; --r-stage:24px; --r-pill:104px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--page);color:var(--fog);font:400 16px/1.5 var(--body);letter-spacing:.013em;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blurple-hover);outline-offset:3px;border-radius:8px}
::selection{background:var(--blurple);color:#fff}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#000;padding:10px 16px;border-radius:var(--r-btn)}
.skip:focus{left:16px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-btn);padding:15px 24px;font:500 16px/1.2 var(--body);letter-spacing:.016em;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .2s,color .2s,translate .25s var(--spring),scale .15s}
.btn:hover{translate:0 -3px}
.btn:active{scale:.97;translate:0 0}
.btn-blurple{background:var(--blurple);color:#fff;padding:19.5px 24px}
.btn-blurple:hover{background:var(--blurple-dark)}
.btn-white{background:#fff;color:#23272a;border-color:#23272a}
.btn-white:hover{background:#e9eaff}
.btn-login{background:#fff;color:#000;border-color:#000;border-radius:16px;padding:10px 16px}
.btn-sm{padding:10px 16px}
.btn-big{padding:22px 32px;font-size:18px;border-radius:16px}

/* ---------- navegação ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:16px;padding:14px max(16px,calc((100vw - 1200px)/2));
  transition:background-color .3s}
.nav.solid{background:rgba(14,15,45,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo img{height:34px;width:auto}
.f-brand .logo img{height:40px}
.nav nav{margin:0 auto}
.nav ul{display:flex;gap:4px}
.nav ul a{display:block;padding:10px 14px;border-radius:var(--r-btn);color:#fff;text-decoration:none;font-weight:500;transition:background-color .2s}
.nav ul a:hover{background:rgba(255,255,255,.1)}
.nav-menu{display:none;background:transparent;border:1px solid #fff;color:#fff;border-radius:var(--r-btn);padding:10px 16px;cursor:pointer}

/* ---------- herói ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;
  max-width:1200px;margin:0 auto;padding:112px 16px 64px;grid-template-columns:1.08fr .92fr}
.hero::before{content:"";position:absolute;inset:-20% -50vw 0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 40%,#2d1a9e 0%,transparent 70%),radial-gradient(40% 40% at 20% 80%,#3b1d6e 0%,transparent 70%),linear-gradient(180deg,#121445 0%,var(--page) 100%)}
.hero h1{font:800 clamp(2.2rem,4.4vw,3.8rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.hero .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero .ln>span{display:inline-block;white-space:nowrap}
.lead{margin-top:24px;max-width:430px;font-size:18px;color:#fff}
.cta-pair{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px;align-items:center}
.fine{margin-top:20px;font-size:15px;color:var(--fog)}
.fine b{color:#fff}
.hero-scene{position:relative;aspect-ratio:1/1;width:100%}
.glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(77,29,255,.55),transparent 65%);filter:blur(20px)}
.px{position:absolute;will-change:transform}
.px-cel{left:24%;top:4%;width:52%}
.px-dona{left:-2%;bottom:0;width:34%;z-index:2}
.px-balao{right:2%;top:8%;width:26%;z-index:2}
.px-burguer{right:-4%;bottom:6%;width:36%;z-index:3}

/* flutuação contínua dos objetos 3D (transform); a entrada usa translate/scale/rotate, então as duas não brigam */
.fl{animation:bob-a 6s ease-in-out infinite alternate}
.fl-b{animation:bob-b 7.5s ease-in-out infinite alternate}
.fl-c{animation:bob-c 5.2s ease-in-out infinite alternate}
.fl-d{animation:bob-d 8s ease-in-out infinite alternate}
@keyframes bob-a{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-16px) rotate(2deg)}}
@keyframes bob-b{from{transform:translateY(-6px) rotate(1.5deg)}to{transform:translateY(10px) rotate(-2.5deg)}}
@keyframes bob-c{from{transform:translateY(4px) rotate(4deg) scale(1)}to{transform:translateY(-14px) rotate(-3deg) scale(1.04)}}
@keyframes bob-d{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-12px) rotate(3deg)}}

/* ---------- palcos ---------- */
.stage{position:relative;max-width:1200px;margin:0 auto;padding:56px 16px}
.card{position:relative;border-radius:var(--r-stage);padding:clamp(28px,5vw,64px);color:#fff}
.card h2,.sec-title{font:800 clamp(1.9rem,3.8vw,3rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.card .copy>p{margin-top:18px;font-size:18px;max-width:440px;color:#fff}
.card-violet{background:linear-gradient(135deg,#4d1dff 0%,#7a2fa8 100%)}
.card-green{background:linear-gradient(135deg,#0a5a43 0%,#14a16f 100%)}
.card-magenta{background:linear-gradient(135deg,#8b31a0 0%,#e0409f 100%)}
.card-blue{background:linear-gradient(135deg,#0b3f8f 0%,#0a9fd8 100%)}
.card-final{background:linear-gradient(135deg,#f08a12 0%,#de2761 100%);text-align:center;padding-block:clamp(64px,9vw,112px)}
.split{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split.rev{grid-template-columns:1fr auto}
.copy{min-width:0}
.copy>.btn{margin-top:28px}

/* objetos 3D nas bordas dos palcos */
.prop{z-index:2;pointer-events:none}
.prop-esmalte{right:-28px;top:-56px;width:clamp(90px,11vw,150px)}
.prop-barbeiro{right:6%;bottom:-48px;width:clamp(120px,15vw,200px)}
.prop-loja{left:-36px;top:-64px;width:clamp(110px,14vw,190px)}
.prop-burguer{right:-40px;top:-70px;width:clamp(140px,18vw,240px)}
.prop-placa{right:-24px;bottom:-40px;width:clamp(110px,13vw,170px)}
.prop-dona2{right:-36px;top:-90px;width:clamp(100px,11vw,150px)}
.prop-balao2{left:-30px;top:-50px;width:clamp(110px,14vw,190px)}
.prop-celular2{right:-20px;bottom:-60px;width:clamp(110px,14vw,190px)}

/* celular com bio de verdade */
.phone{position:relative;width:300px;aspect-ratio:9/19;border-radius:42px;border:10px solid #0b0c24;background:#000;overflow:hidden;justify-self:center;
  box-shadow:0 30px 60px -20px rgba(8,9,28,.7)}
.phone iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.phone-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .25s}
.phone-shot img.swap{opacity:0}

/* teste com o seu nome */
.try{display:grid;gap:8px;margin-top:28px;max-width:440px;font-weight:500}
.try input{width:100%;background:#fff;color:#23272a;border:0;border-radius:var(--r-btn);padding:16px 18px;font-size:18px}
.try input::placeholder{color:#6b6e8a}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pills button,.chip{border:1px solid rgba(255,255,255,.55);background:transparent;border-radius:var(--r-pill);padding:9px 16px;font-weight:500;cursor:pointer;
  transition:background-color .2s,color .2s,translate .25s var(--spring)}
.pills button:hover,.chip:hover{background:rgba(255,255,255,.14);translate:0 -2px}
.pills button[aria-checked=true]{background:#fff;color:#2b1f7a;border-color:#fff}
.now{margin-top:18px;font-size:15px;color:#fff}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{font-size:14px;padding:7px 14px;background:rgba(0,0,0,.18);border-color:transparent}

/* passos */
.steps{display:grid;gap:10px;margin-top:28px;max-width:460px}
.steps button{display:flex;gap:16px;align-items:center;width:100%;text-align:left;background:rgba(0,0,0,.2);border:0;border-radius:var(--r-card);padding:14px 16px;cursor:pointer;
  transition:background-color .25s,color .25s,translate .25s var(--spring)}
.steps button:hover{background:rgba(0,0,0,.3);translate:4px 0}
.steps b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);font:800 16px/1 var(--display)}
.steps span{display:grid;gap:2px;font-size:15px}
.steps strong{font-size:17px}
.steps button[aria-selected=true]{background:#fff;color:#0a4a37}
.steps button[aria-selected=true] b{background:#14a16f;color:#fff}

/* recursos */
.feat-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;margin-top:36px}
.f-photo{grid-row:span 2;border-radius:var(--r-card);overflow:hidden;min-height:340px}
.f-photo img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--ease)}
.f-photo:hover img{scale:1.06}
.f-item{background:rgba(40,0,50,.28);border-radius:var(--r-card);padding:24px}
.f-item b{display:block;font:700 18px/1.1 var(--display);text-transform:uppercase;color:#fff}
.f-item p{margin-top:10px;color:#fff}

/* domínio */
.url-list{display:grid;gap:12px}
.url-list li{display:flex;align-items:center;gap:12px;background:#fff;color:#0e0f2d;border-radius:var(--r-pill);padding:16px 22px;font-weight:500;font-size:17px;
  transition:translate .3s var(--spring)}
.url-list li:nth-child(2){margin-left:32px}
.url-list li:nth-child(3){margin-left:12px}
.url-list li:hover{translate:-6px 0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--mint);flex:none;animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(37,237,188,.6)}100%{box-shadow:0 0 0 10px rgba(37,237,188,0)}}

/* preço */
.sec-title{text-align:center;margin-bottom:40px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}
.plan{position:relative;background:var(--chrome);border-radius:var(--r-stage);padding:40px;display:flex;flex-direction:column;color:#fff}
.plan-main{background:var(--surface);outline:2px solid var(--blurple);outline-offset:-2px}
.plan h3{font:500 16px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--fog)}
.plan .val{margin-top:14px;font:800 clamp(2.4rem,4.4vw,3.4rem)/1 var(--display);color:#fff;letter-spacing:-.01em}
.plan .per{margin-top:6px;color:var(--fog)}
.plan ul{display:grid;gap:10px;margin:28px 0 32px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"✓";color:var(--green);font-weight:700}
.plan .btn{margin-top:auto}

/* dúvidas */
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.faq details{background:var(--chrome);border-radius:var(--r-card);transition:background-color .2s}
.faq details[open]{background:var(--surface)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 24px;cursor:pointer;list-style:none;font:700 19px/1.3 var(--body);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--blurple);font:500 22px/1 var(--body);transition:rotate .3s var(--spring)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 24px 24px;color:var(--fog);font-size:17px;max-width:640px}

/* chamada final */
.card-final h2{font-size:clamp(2.2rem,5.6vw,4.4rem)}
.card-final p{margin:18px auto 0;font-size:19px;max-width:440px}
.card-final .btn{margin-top:32px}

/* rodapé */
.foot{margin-top:64px;background:var(--night);padding:64px max(16px,calc((100vw - 1200px)/2)) 32px}
.f-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.f-brand p{margin-top:16px;color:var(--fog)}
.foot h3{font:500 16px/1.2 var(--body);letter-spacing:.013em;color:#fff;margin-bottom:12px}
.foot ul{display:grid;gap:8px}
.foot ul a{color:var(--fog);text-decoration:none;transition:color .2s}
.foot ul a:hover{color:#fff}
.f-last{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:24px;color:var(--fog)}

/* ---------- entradas (só com JS; nada fica escondido sem ele) ---------- */
.js .hero .ln>span{translate:0 110%;transition:translate .9s var(--ease)}
.js .hero .ln:nth-child(2)>span{transition-delay:.08s}
.js .hero .ln:nth-child(3)>span{transition-delay:.16s}
.js .up{opacity:0;translate:0 24px;transition:opacity .7s var(--ease),translate .8s var(--ease)}
.js .lead{transition-delay:.3s}.js .cta-pair{transition-delay:.4s}.js .fine{transition-delay:.5s}
.js .pop{opacity:0;scale:.6;transition:opacity .6s var(--ease) var(--d),scale 1s var(--spring) var(--d)}
.js .fly-l{opacity:0;translate:-90px 40px;rotate:-12deg;transition:opacity .6s var(--ease) var(--d),translate 1s var(--spring) var(--d),rotate 1s var(--spring) var(--d)}
.js .fly-r{opacity:0;translate:90px -30px;rotate:12deg;transition:opacity .6s var(--ease) var(--d),translate 1s var(--spring) var(--d),rotate 1s var(--spring) var(--d)}
.ready .hero .ln>span,.ready .up,.ready .pop,.ready .fly-l,.ready .fly-r{opacity:1;translate:0 0;scale:1;rotate:0deg}

.js .card,.js .plan{opacity:0;scale:.94;transition:opacity .7s var(--ease),scale .9s var(--spring)}
.js .card.in,.js .plan.in{opacity:1;scale:1}
.js .prop img{opacity:0;scale:.3;transition:opacity .5s var(--ease) .25s,scale .9s var(--spring) .25s}
.js .in .prop img{opacity:1;scale:1}
.js .rv{opacity:0;translate:0 28px;transition:opacity .7s var(--ease),translate .8s var(--ease)}
.js .rv.in{opacity:1;translate:0 0}
/* garantia: se o navegador segurar as transições, o que já entrou aparece por inteiro */
.settled .rv.in,.settled .card.in,.settled .plan.in,.settled .in .prop img,.settled .hero .ln>span,.settled .up,.settled .pop,.settled .fly-l,.settled .fly-r{transition:none!important}

/* ---------- celular e tablet ---------- */
@media (max-width:900px){
  .nav ul{display:none;position:absolute;top:64px;left:16px;right:16px;flex-direction:column;background:var(--chrome);border-radius:var(--r-card);padding:8px}
  .nav ul.on{display:flex}
  .nav-menu{display:inline-block}
  .nav nav{margin-left:auto;margin-right:0}
  .logo img{height:28px}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:96px;gap:8px}
  .hero-scene{max-width:440px;margin:0 auto}
  .split,.split.rev{grid-template-columns:1fr}
  .split.rev .phone{order:2}
  .phone{width:min(280px,78vw)}
  .feat-grid{grid-template-columns:1fr 1fr}
  .f-photo{grid-row:auto;min-height:220px}
  .plans{grid-template-columns:1fr}
  .f-cols{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .stage{padding:40px 12px}
  .card{padding:28px 20px}
  .hero h1{font-size:clamp(2.1rem,10.4vw,2.8rem)}
  .lead{font-size:17px}
  .cta-pair .btn{flex:1 1 100%}
  .feat-grid{grid-template-columns:1fr}
  .f-photo{min-height:200px;max-height:240px}
  .url-list li{font-size:15px;padding:14px 18px}
  .url-list li:nth-child(n){margin-left:0}
  .plan{padding:28px 24px}
  .prop-esmalte{right:-10px;top:-40px}
  .prop-barbeiro{display:none}
  .prop-loja{left:auto;right:-8px;top:-52px}
  .prop-burguer{right:-12px;top:-56px}
  .prop-placa{right:-8px;bottom:-30px}
  .prop-dona2{right:-6px;top:-70px}
  .prop-balao2{left:-8px;top:-44px}
  .prop-celular2{right:-8px;bottom:-40px}
  .f-last{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fl,.dot{animation:none}
  .js .hero .ln>span,.js .up,.js .pop,.js .fly-l,.js .fly-r,.js .card,.js .plan,.js .prop img,.js .rv{opacity:1;translate:0 0;scale:1;rotate:0deg;transition:none}
}
/* grade de recursos: fotos nas pontas, quatro recursos no meio */
@media (min-width:901px){
  .f-photo:first-child{grid-column:1;grid-row:1/3}
  .f-photo:last-child{grid-column:4;grid-row:1/3}
}
/* a bio do exemplo sempre renderiza como um celular de 375px, reduzida para caber na moldura */
.phone iframe{position:absolute;left:0;top:0;width:375px;height:calc(100% / var(--k,1));transform:scale(var(--k,1));transform-origin:0 0}
@media (max-width:560px){ .prop-dona2{width:80px;top:-34px;right:-4px} }
@media (max-width:900px){ .st-try .phone{order:2} }