:root{
color-scheme:light only;
--pink:#FC2481;--orange:#FE7B2B;
--ink:#050B14;--ink-2:#0F1A28;
--slate:#5A6675;--slate-2:#94A0AE;
--line:rgba(5,11,20,.07);--line-2:rgba(5,11,20,.13);
--bg:#FFFFFF;--bg-soft:#FAFBFC;--bg-soft-2:#F2F5F8;
--grad:linear-gradient(135deg,#FC2481 0%,#FE7B2B 100%);
--grad-soft:linear-gradient(135deg,rgba(252,36,129,.05),rgba(254,123,43,.05));
--s-xs:0 1px 2px rgba(5,11,20,.04);
--s-sm:0 1px 3px rgba(5,11,20,.04),0 4px 12px rgba(5,11,20,.04);
--s-md:0 2px 6px rgba(5,11,20,.05),0 12px 28px rgba(5,11,20,.06);
--s-lg:0 4px 12px rgba(5,11,20,.06),0 24px 48px rgba(5,11,20,.07);
--s-grad:0 4px 12px rgba(252,36,129,.16),0 8px 20px rgba(254,123,43,.10);
--s-grad-h:0 8px 22px rgba(252,36,129,.26),0 14px 32px rgba(254,123,43,.16);
--r-xs:6px;--r-sm:10px;--r:14px;--r-lg:20px;--r-pill:999px;
--ease:cubic-bezier(.22,.61,.36,1);
--spring:cubic-bezier(.34,1.3,.64,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#FFFFFF !important;color-scheme:light only;overflow-x:hidden}
body{font-family:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink);background:#FFFFFF !important;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-size:16px;font-weight:400;position:relative}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:multiply}
::selection{background:var(--pink);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;border:2px solid #fff}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-right:.04em}
.eyebrow{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--ink)}
.on-grad .eyebrow{color:rgba(255,255,255,.85)}
.on-grad .eyebrow::before{background:#fff}
.container{max-width:1160px;margin:0 auto;padding:0 2rem;position:relative;z-index:3}
.sec{padding:7rem 2rem;position:relative;z-index:2;overflow:hidden}
@media(max-width:700px){.sec{padding:4.5rem 1.25rem}.container{padding:0 1.25rem}}
.bg-soft{background:var(--bg-soft)}
.bg-grad{background:var(--grad);color:#fff;position:relative;overflow:hidden}
.bg-grad::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 20% 0%,rgba(255,255,255,.20),transparent 60%),radial-gradient(ellipse 40% 50% at 100% 100%,rgba(0,0,0,.10),transparent 60%);pointer-events:none;z-index:1}
.bg-grad>*{position:relative;z-index:2}
/* TOP NAV */
.nav-wrap{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.nav-wrap.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.92)}
nav{max-width:1160px;margin:0 auto;height:72px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-logo img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:2.4rem;align-items:center;flex:1;justify-content:center}
.nav-links a:not(.nav-cta){font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:.92rem;color:var(--ink);text-decoration:none;transition:color .2s;position:relative}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--ink);transition:width .3s var(--ease)}
.nav-links a:not(.nav-cta):hover{color:var(--pink)}
.nav-links a:not(.nav-cta):hover::after{width:100%;background:var(--pink)}
.nav-cta{background:var(--grad);color:#fff;padding:.7rem 1.4rem;border-radius:var(--r-pill);font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.86rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:transform .25s var(--spring),box-shadow .25s;flex-shrink:0;box-shadow:var(--s-grad);position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s var(--ease);pointer-events:none}
.nav-cta:hover::before{transform:translateX(100%)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--s-grad-h)}
@media(max-width:900px){nav{padding:0 1.25rem;height:64px}.nav-logo img{height:26px}.nav-links a:not(.nav-cta){display:none}.nav-links{justify-content:flex-end}.nav-cta{padding:.55rem 1.1rem;font-size:.78rem}}
/* BOTTOM NAV — app bar mobile */
.bottom-nav{
position:fixed;
bottom:calc(.45rem + env(safe-area-inset-bottom,0px));
left:50%;
transform:translateX(-50%);
z-index:99;
background:rgba(5,11,20,.92);
backdrop-filter:saturate(180%) blur(30px);
-webkit-backdrop-filter:saturate(180%) blur(30px);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-pill);
padding:.4rem;
display:none;
gap:.15rem;
align-items:center;
box-shadow:0 12px 40px rgba(5,11,20,.30),0 4px 12px rgba(5,11,20,.16);
width:max-content;
max-width:calc(100vw - 1.5rem);
animation:dockFloat 4.5s ease-in-out infinite;
}
/* Float sutil do dock (inspirado no dock-two) — preserva o translateX(-50%) do centramento */
@keyframes dockFloat{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-3px)}
}
@media(max-width:960px){.bottom-nav{display:flex}body{padding-bottom:5.5rem}}
.bottom-nav-item{
display:flex;
flex-direction:column;
align-items:center;
gap:.18rem;
padding:.55rem .65rem;
border-radius:var(--r-pill);
cursor:pointer;
text-decoration:none;
color:rgba(255,255,255,.6);
transition:color .2s,background .2s,transform .2s var(--spring);
min-width:54px;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
}
.bottom-nav-item:hover{color:#fff;transform:translateY(-2px)}
.bottom-nav-item.active{color:#fff}
.bottom-nav-item:active{transform:scale(.9)}
.bottom-nav-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav-item-lbl{font-weight:600;font-size:.6rem;letter-spacing:-.005em}
.bottom-nav-item.cta{
background:var(--grad);
color:#fff;
padding:.55rem .9rem;
margin:0 .1rem;
box-shadow:0 4px 12px rgba(252,36,129,.34);
}
.bottom-nav-item.cta:hover{transform:scale(1.05)}
.bottom-nav-item.cta .bottom-nav-item-lbl{font-weight:700}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.8rem;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.94rem;border:none;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;transition:transform .25s var(--spring),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap;letter-spacing:-.005em}
.btn-grad{background:var(--grad);color:#fff;box-shadow:var(--s-grad);position:relative;overflow:hidden}
.btn-grad::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s var(--ease);pointer-events:none}
.btn-grad:hover::before{transform:translateX(100%)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:var(--s-grad-h)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--s-xs)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:var(--s-sm)}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.24)}
.btn-cta-pulse{background:var(--grad);color:#fff;padding:1.2rem 2.4rem;font-size:1.04rem;font-weight:700;box-shadow:0 6px 18px rgba(252,36,129,.32),0 12px 30px rgba(254,123,43,.18);position:relative;overflow:hidden}
.btn-cta-pulse::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s var(--ease)}
.btn-cta-pulse:hover::before{transform:translateX(100%)}
.btn-cta-pulse:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(252,36,129,.42),0 18px 40px rgba(254,123,43,.24)}
.btn-cta-pulse svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* HERO */
.hero{padding:5rem 2rem 6rem;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:1;display:none}
.hero-bg::before{content:'';position:absolute;top:-150px;right:-200px;width:680px;height:680px;background:radial-gradient(circle,rgba(252,36,129,.10) 0%,transparent 60%);filter:blur(20px)}
.hero-bg::after{content:'';position:absolute;bottom:-100px;left:-150px;width:540px;height:540px;background:radial-gradient(circle,rgba(254,123,43,.08) 0%,transparent 60%);filter:blur(20px)}
/* HERO BACKGROUND PHOTO (desktop full-bleed + parallax) — a foto é a estrela.
Ocupa a zona da headline (topo do hero) e funde p/ branco antes do showcase. */
.hero-bgphoto{position:absolute;top:0;left:0;right:0;height:min(760px,88vh);z-index:0;overflow:hidden;pointer-events:none}
.hero-bgphoto img{
position:absolute;
/* cobre 100% da largura (sem faixa lateral) + overscan vertical p/ o parallax */
top:-24%;left:0;right:0;width:100%;height:158%;max-width:none;
object-fit:cover;
object-position:76% 28%; /* [27] sobe um pouco o enquadramento p/ valorizar o rosto */
will-change:transform;
}
/* KEN BURNS — zoom lento e contínuo nas fotos da hero (usa 'scale' p/ não brigar com o parallax/translate) */
@media(prefers-reduced-motion: no-preference){
.hero-bgphoto img{transform-origin:76% 28%;animation:heroKenBurns 20s ease-in-out .2s infinite alternate}
.hero-poster-photo{transform-origin:50% 24%;animation:heroKenBurns 20s ease-in-out .2s infinite alternate}
}
/* zoom in/out contínuo, perceptível, sempre overfill (margens seguras) */
@keyframes heroKenBurns{from{scale:1.04}to{scale:1.20}}
/* SCRIM — escurece p/ texto branco legível, mais forte à esquerda; funde p/ branco no rodapé */
.hero-bgphoto::after{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:
/* escurecimento à esquerda p/ legibilidade do texto (suave) */
linear-gradient(90deg,rgba(5,9,18,.92) 0%,rgba(5,9,18,.70) 22%,rgba(5,9,18,.32) 44%,rgba(5,9,18,0) 60%),
/* base uniformiza p/ navy e funde em branco no rodapé — transição definida, sem smudge */
linear-gradient(180deg,rgba(5,9,18,0) 52%,rgba(5,9,18,.55) 78%,rgba(5,9,18,.78) 90%,#FFFFFF 100%);
}
/* AURORA BACKDROP — acento contido: blobs de gradiente da marca deslizando devagar atrás do conteúdo */
.hero-aurora{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.20;mix-blend-mode:screen;mask-image:radial-gradient(ellipse 120% 100% at 50% 35%,#000 55%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 120% 100% at 50% 35%,#000 55%,transparent 100%)}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:multiply;will-change:transform,opacity}
.aurora-blob.ab1{top:-12%;left:-6%;width:46vw;max-width:680px;height:46vw;max-height:680px;background:radial-gradient(circle at 35% 35%,rgba(252,36,129,.30),rgba(252,36,129,0) 68%);animation:auroraDrift1 26s ease-in-out infinite}
.aurora-blob.ab2{top:8%;right:-10%;width:42vw;max-width:620px;height:42vw;max-height:620px;background:radial-gradient(circle at 60% 40%,rgba(254,123,43,.28),rgba(254,123,43,0) 68%);animation:auroraDrift2 32s ease-in-out infinite}
.aurora-blob.ab3{bottom:-18%;left:38%;width:40vw;max-width:560px;height:40vw;max-height:560px;background:radial-gradient(circle at 50% 50%,rgba(252,36,129,.18),rgba(254,123,43,.14) 45%,rgba(254,123,43,0) 70%);animation:auroraDrift3 38s ease-in-out infinite}
@keyframes auroraDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8%,6%,0) scale(1.12)}}
@keyframes auroraDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-7%,5%,0) scale(.92)}}
@keyframes auroraDrift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5%,-8%,0) scale(1.15)}}
@media(max-width:960px){.hero-aurora{display:none}}
/* HERO GRID — agora overlay sobre a foto de fundo (texto à esquerda) */
.hero-grid{max-width:1240px;margin:0 auto;position:relative;z-index:3;min-height:clamp(420px,62vh,640px);display:flex;align-items:center}
.hero-grid::after{display:none}
.hero-visual{display:none} /* foto vira fundo; frame antigo removido */
@media(max-width:960px){.hero{padding:2.5rem 1.25rem 3rem}.hero-grid{min-height:0;display:block}.hero-visual{align-items:center}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:1.6rem;padding:.5rem .95rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.28)}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px rgba(252,36,129,.22)}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.15rem,7vw,5.3rem);line-height:.94;letter-spacing:-.05em;color:#fff;margin-bottom:1.8rem;display:flex;flex-direction:column;gap:.04em;text-shadow:0 2px 24px rgba(0,0,0,.42),0 1px 4px rgba(0,0,0,.36)}
.hero h1 .ln{display:block}
.hero h1 .ln-3{font-family:'Space Grotesk',sans-serif;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-right:.05em;text-shadow:none;filter:drop-shadow(0 2px 16px rgba(252,36,129,.35))}
.hero-lead{font-size:1.2rem;color:rgba(255,255,255,.86);max-width:560px;margin-bottom:2.4rem;line-height:1.62;font-weight:400;text-shadow:0 1px 14px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4)}
.hero-lead strong{color:#fff;font-weight:600}
.hero-ctas{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
@media(max-width:560px){
.hero-ctas{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
.hero-ctas .btn{justify-content:center;width:100%;padding:1.1rem 1.4rem;font-size:.95rem}
}
.hero-left{padding-top:.5rem;max-width:620px;position:relative;z-index:3}
/* HERO VISUAL — IMAGEM TOP-RIGHT + PHONE MOCKUP */
.hero-visual{
position:relative;
display:flex;
flex-direction:column;
gap:1.6rem;
align-items:stretch;
min-width:0;
width:100%;
}
/* FOTO HERO — frame premium no split direito */
.hero-photo{
position:relative;
width:100%;
aspect-ratio:4/5;
max-height:560px;
border-radius:20px;
overflow:hidden;
margin:0;
background:#0A0A0A;
box-shadow:0 30px 60px rgba(5,11,20,.16),0 12px 28px rgba(252,36,129,.07);
isolation:isolate;
}
/* Ring com gradiente da marca */
.hero-photo::after{
content:'';
position:absolute;
inset:0;
border-radius:20px;
padding:1.5px;
background:linear-gradient(150deg,rgba(252,36,129,.55),rgba(254,123,43,.35) 45%,rgba(252,36,129,.12) 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
mask-composite:exclude;
pointer-events:none;
z-index:3;
}
.hero-photo>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:68% 30%;
z-index:0;
}
.hero-photo-glow{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(252,36,129,.16),transparent 60%),linear-gradient(180deg,transparent 55%,rgba(7,8,10,.32) 100%);
}
@media(max-width:960px){.hero-photo{max-height:none;aspect-ratio:4/5;max-width:440px;margin:0 auto}}
.hero-image-block{
position:relative;
width:100%;
aspect-ratio:4/3;
border-radius:var(--r-lg);
overflow:hidden;
border:1.5px dashed var(--line-2);
background:linear-gradient(135deg,rgba(252,36,129,.10),rgba(254,123,43,.10)),repeating-linear-gradient(45deg,transparent 0,transparent 12px,rgba(5,11,20,.02) 12px,rgba(5,11,20,.02) 13px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:2rem 1.5rem;
text-align:center;
color:var(--slate);
transition:border-color .25s;
}
.hero-image-block:hover{border-color:rgba(252,36,129,.4)}
.hero-image-block::before{content:'';position:absolute;top:8px;left:8px;width:14px;height:14px;border-top:1.5px solid var(--pink);border-left:1.5px solid var(--pink);border-radius:2px 0 0 0}
.hero-image-block::after{content:'';position:absolute;bottom:8px;right:8px;width:14px;height:14px;border-bottom:1.5px solid var(--orange);border-right:1.5px solid var(--orange);border-radius:0 0 2px 0}
.img-ph-icon{width:42px;height:42px;margin-bottom:.7rem;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--s-sm)}
.img-ph-icon svg{width:20px;height:20px;stroke:url(#g1);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.img-ph-tag{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);font-weight:600;margin-bottom:.45rem}
.img-ph-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.4rem;letter-spacing:-.015em;line-height:1.2;max-width:320px}
.img-ph-desc{font-size:.82rem;color:var(--slate);line-height:1.5;max-width:320px;font-style:italic}
/* PHONE MOCKUP — painel em formato de celular */
@media(max-width:960px){.phone-row{flex-direction:column;gap:1rem;align-items:center;justify-content:center}}
.phone-mock{
width:300px;
height:620px;
max-width:100%;
background:linear-gradient(160deg,#0F1A24 0%,#070D14 100%);
border-radius:42px;
padding:9px;
position:relative;
box-shadow:0 30px 60px rgba(5,11,20,.18),0 12px 24px rgba(252,36,129,.06),inset 0 1px 0 rgba(255,255,255,.08);
flex-shrink:0;
}
@media(max-width:960px){.phone-mock{margin-left:auto;margin-right:auto;display:block}}
@media(max-width:500px){.phone-mock{width:min(280px,calc(100vw - 4rem));height:580px}}
@media(max-width:380px){.phone-mock{width:min(240px,calc(100vw - 3rem));height:520px}}
.phone-mock-screen{
background:#fff;
border-radius:34px;
width:100%;height:100%;
overflow:hidden;
display:flex;
flex-direction:column;
position:relative;
}
.phone-mock-notch{
position:absolute;
top:8px;left:50%;
transform:translateX(-50%);
width:84px;height:22px;
background:#070D14;
border-radius:14px;
z-index:10;
}
.phone-mock-status{
display:flex;
justify-content:space-between;
align-items:center;
padding:.85rem 1.4rem .25rem;
margin-top:.4rem;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-weight:700;
font-size:.6rem;
color:var(--ink);
letter-spacing:-.01em;
}
.phone-mock-status-icons{display:flex;gap:.25rem;align-items:center}
.phone-mock-status-icons svg{width:11px;height:11px;fill:var(--ink)}
/* App header dentro do phone com a logo da TT */
.phone-app-head{
padding:.7rem 1rem .7rem;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
}
.phone-app-logo{display:flex;align-items:center}
.phone-app-logo img{height:18px;width:auto;display:block}
.phone-app-tag{
font-family:'JetBrains Mono',monospace;
font-size:.5rem;
letter-spacing:.1em;
text-transform:uppercase;
color:#1FA050;
background:rgba(37,211,102,.10);
padding:.18rem .42rem;
border-radius:var(--r-pill);
font-weight:600;
display:inline-flex;
align-items:center;
gap:.25rem;
}
.phone-app-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:#1FA050;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.phone-app-body{
flex:1;
min-height:0;
padding:.85rem .85rem .5rem;
display:flex;
flex-direction:column;
gap:.55rem;
background:#fff;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:thin;
scrollbar-color:rgba(5,11,20,.18) transparent;
}
.phone-app-body::-webkit-scrollbar{width:3px}
.phone-app-body::-webkit-scrollbar-track{background:transparent}
.phone-app-body::-webkit-scrollbar-thumb{background:rgba(5,11,20,.18);border-radius:99px}
.phone-app-body::-webkit-scrollbar-thumb:hover{background:rgba(252,36,129,.4)}
.phone-greeting{
padding:.2rem .15rem;
margin-bottom:.15rem;
}
.phone-greeting-lbl{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:.18rem}
.phone-greeting-name{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.88rem;letter-spacing:-.02em;color:var(--ink)}
/* Hero card — receita destaque */
.phone-stat-hero{
background:var(--ink);
color:#fff;
border-radius:12px;
padding:.7rem .8rem;
position:relative;
overflow:hidden;
}
.phone-stat-hero::before{content:'';position:absolute;top:0;right:0;width:70%;height:90%;background:radial-gradient(circle at 80% 30%,rgba(252,36,129,.4),transparent 60%);filter:blur(8px)}
.phone-stat-hero-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem;position:relative}
.phone-stat-hero-lbl{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:500}
.phone-stat-hero-trend{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:#FE7B2B;font-weight:600;display:inline-flex;align-items:center;gap:.15rem}
.phone-stat-hero-val{
font-family:'Space Grotesk',sans-serif;
font-weight:800;
font-size:1.4rem;
letter-spacing:-.025em;
line-height:1;
position:relative;
background:linear-gradient(135deg,#fff,rgba(255,255,255,.78));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
white-space:nowrap;
margin-bottom:.1rem;
}
/* Stats em grid */
.phone-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.phone-stat{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:9px;
padding:.55rem .6rem;
}
.phone-stat-lbl{font-family:'JetBrains Mono',monospace;font-size:.45rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:.18rem}
.phone-stat-val{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-.025em;line-height:1;color:var(--ink);white-space:nowrap}
.phone-stat-val.pink{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* Mini chart */
.phone-chart{
background:linear-gradient(180deg,rgba(252,36,129,.04),transparent);
border:1px solid var(--line);
border-radius:9px;
padding:.5rem .55rem .35rem;
height:60px;
position:relative;
overflow:hidden;
}
.phone-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem;position:relative;z-index:2}
.phone-chart-lbl{font-family:'JetBrains Mono',monospace;font-size:.45rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:500}
.phone-chart-val{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.55rem;color:var(--ink);letter-spacing:-.01em}
.phone-chart-svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:42px}
/* Activity feed */
.phone-feed{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:9px;
padding:.5rem .6rem;
}
.phone-feed-title{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:.4rem}
.phone-feed-item{display:flex;align-items:center;gap:.45rem;padding:.26rem 0;font-size:.64rem;color:var(--ink);font-weight:500;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif}
.phone-feed-dot{width:6px;height:6px;border-radius:50%;background:var(--grad);flex-shrink:0}
.phone-feed-dot.pink{background:#FC2481;box-shadow:0 0 0 2px rgba(252,36,129,.12)}
.phone-feed-dot.orange{background:#FE7B2B;box-shadow:0 0 0 2px rgba(254,123,43,.14)}
.phone-feed-dot.purple{background:#C9477E;box-shadow:0 0 0 2px rgba(201,71,126,.16)}
.phone-feed-time{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--slate);font-weight:600}
/* App tab bar do produto */
.phone-tabbar{
display:flex;
justify-content:space-around;
align-items:center;
border-top:1px solid var(--line);
background:#fff;
padding:.5rem .4rem .7rem;
margin-top:auto;
}
.phone-tabbar-item{
display:flex;
flex-direction:column;
align-items:center;
gap:.2rem;
flex:1;
padding:.2rem;
}
.phone-tabbar-item svg{width:14px;height:14px;stroke:var(--slate-2);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.phone-tabbar-item.active svg{stroke:url(#g1)}
.phone-tabbar-item-lbl{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.42rem;color:var(--slate-2);letter-spacing:-.005em}
.phone-tabbar-item.active .phone-tabbar-item-lbl{color:var(--pink)}
/* ACCESS LEVELS */
.access-block{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--s-md);padding:1.4rem 1.6rem 1.6rem;position:relative;margin-top:0}
.access-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.access-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;color:var(--ink);letter-spacing:-.015em;display:inline-flex;align-items:center;gap:.5rem}
.access-title::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--grad)}
.access-tag{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:500}
.access-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem;margin-bottom:1rem}
.access-tab{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.65rem .25rem;border-radius:var(--r-sm);cursor:pointer;transition:background .2s,transform .2s var(--spring);position:relative;background:var(--bg-soft);border:1px solid transparent}
.access-tab:hover{background:var(--bg-soft-2)}
.access-tab.active{background:#fff;border-color:rgba(252,36,129,.25);box-shadow:0 4px 12px rgba(252,36,129,.10)}
.access-tab-circle{width:34px;height:34px;border-radius:10px;background:var(--bg-soft-2);display:flex;align-items:center;justify-content:center;position:relative;transition:background .25s}
.access-tab.active .access-tab-circle{background:var(--grad);box-shadow:var(--s-grad);animation:tabPop .4s var(--spring)}
@keyframes tabPop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.access-tab-circle svg{width:16px;height:16px;stroke:var(--slate);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.access-tab.active .access-tab-circle svg{stroke:#fff}
.access-tab-lbl{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.62rem;color:var(--slate);letter-spacing:-.005em;text-align:center;line-height:1.1}
.access-tab.active .access-tab-lbl{color:var(--ink)}
.access-list{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:.9rem 1rem;min-height:180px;position:relative}
.access-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.access-list-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;color:var(--ink);letter-spacing:-.015em}
.access-list-meta{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;color:var(--slate);font-weight:500;text-transform:uppercase}
.access-list-meta strong{color:var(--pink);font-weight:600}
.access-list-items{display:flex;flex-direction:column;gap:.42rem}
.access-item{display:flex;align-items:center;gap:.65rem;padding:.42rem .5rem;border-radius:6px;font-size:.88rem;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-weight:500;transition:background .2s;opacity:0;transform:translateX(-12px) scale(.92);animation:accessCascade .45s var(--ease) forwards}
@keyframes accessCascade{to{opacity:1;transform:translateX(0) scale(1)}}
.access-item:nth-child(1){animation-delay:.05s}
.access-item:nth-child(2){animation-delay:.11s}
.access-item:nth-child(3){animation-delay:.17s}
.access-item:nth-child(4){animation-delay:.23s}
.access-item:nth-child(5){animation-delay:.29s}
.access-item:nth-child(6){animation-delay:.35s}
.access-eye{transform:scale(0);animation:eyePop .35s var(--spring) forwards;animation-delay:inherit}
.access-item:nth-child(1) .access-eye{animation-delay:.15s}
.access-item:nth-child(2) .access-eye{animation-delay:.21s}
.access-item:nth-child(3) .access-eye{animation-delay:.27s}
.access-item:nth-child(4) .access-eye{animation-delay:.33s}
.access-item:nth-child(5) .access-eye{animation-delay:.39s}
.access-item:nth-child(6) .access-eye{animation-delay:.45s}
@keyframes eyePop{to{transform:scale(1)}}
.access-item.see{color:var(--ink)}
.access-item.hide{color:var(--slate-2);text-decoration:line-through;text-decoration-color:rgba(148,160,174,.5)}
.access-eye{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.access-eye svg{width:13px;height:13px;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.access-item.see .access-eye{background:var(--grad);box-shadow:0 2px 6px rgba(252,36,129,.22)}
.access-item.see .access-eye svg{stroke:#fff}
.access-item.hide .access-eye{background:rgba(148,160,174,.18)}
.access-item.hide .access-eye svg{stroke:var(--slate-2)}
@media(max-width:700px){.access-tabs{grid-template-columns:repeat(3,1fr);gap:.4rem}.access-tab{padding:.55rem .25rem}}
@media(max-width:480px){.access-tabs{grid-template-columns:repeat(3,1fr);gap:.3rem}.access-tab{padding:.5rem .2rem}.access-tab-circle{width:30px;height:30px}.access-tab-lbl{font-size:.58rem}}
/* PHONE INTERACTIVE — múltiplas telas */
.phone-screen{display:none;flex-direction:column;gap:.55rem;animation:phoneFadeIn .4s var(--ease)}
.phone-screen.active{display:flex}
@keyframes phoneFadeIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
/* PIE chart (Atividades) */
.phone-pie-block{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:9px;
padding:.6rem;
display:flex;
align-items:center;
gap:.6rem;
}
.phone-pie-wrap{
position:relative;
width:60px;
height:60px;
flex-shrink:0;
}
.phone-pie-svg{
width:100%;
height:100%;
transition:opacity .4s;
}
.phone-screen.active .phone-pie-svg circle:nth-child(2){
animation:pieFill 1.2s var(--ease) forwards;
stroke-dashoffset:201;
}
@keyframes pieFill{
to{stroke-dashoffset:60}
}
.phone-pie-center{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
text-align:center;
}
.phone-pie-num{
font-family:'Space Grotesk',sans-serif;
font-weight:800;
font-size:.78rem;
color:var(--ink);
letter-spacing:-.02em;
line-height:1;
}
.phone-pie-lbl{
font-family:'JetBrains Mono',monospace;
font-size:.4rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--slate);
margin-top:.1rem;
font-weight:500;
}
.phone-pie-legend{
flex:1;
display:flex;
flex-direction:column;
gap:.22rem;
}
.phone-pie-leg-item{
display:flex;
align-items:center;
gap:.4rem;
font-size:.55rem;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-weight:500;
color:var(--ink);
}
.phone-pie-leg-item strong{
margin-left:auto;
font-family:'JetBrains Mono',monospace;
font-weight:600;
color:var(--slate);
}
.phone-pie-leg-dot{
width:6px;
height:6px;
border-radius:50%;
flex-shrink:0;
}
.phone-pie-leg-dot.pink{background:#FC2481}
.phone-pie-leg-dot.orange{background:#FE7B2B}
.phone-pie-leg-dot.purple{background:#C9477E}
/* BARS chart (Pedidos) */
.phone-bars-block{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:9px;
padding:.55rem .6rem;
}
.phone-bars-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.45rem;
}
.phone-bars{
display:flex;
align-items:flex-end;
justify-content:space-between;
height:54px;
gap:.18rem;
}
.phone-bar-col{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:.2rem;
height:100%;
}
.phone-bar{
width:100%;
background:var(--line-2);
border-radius:3px 3px 1px 1px;
display:block;
transition:background .3s;
}
.phone-screen.active .phone-bar{
animation:barRise .8s var(--ease) backwards;
}
.phone-bar-col:nth-child(1) .phone-bar{animation-delay:.05s}
.phone-bar-col:nth-child(2) .phone-bar{animation-delay:.1s}
.phone-bar-col:nth-child(3) .phone-bar{animation-delay:.15s}
.phone-bar-col:nth-child(4) .phone-bar{animation-delay:.2s}
.phone-bar-col:nth-child(5) .phone-bar{animation-delay:.25s}
.phone-bar-col:nth-child(6) .phone-bar{animation-delay:.3s}
.phone-bar-col:nth-child(7) .phone-bar{animation-delay:.35s}
@keyframes barRise{
from{height:0 !important}
}
.phone-bar.active{
background:var(--grad);
box-shadow:0 0 8px rgba(252,36,129,.3);
}
.phone-bar-lbl{
font-family:'JetBrains Mono',monospace;
font-size:.42rem;
color:var(--slate);
font-weight:500;
}
/* IA cards */
.phone-ai-card{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:9px;
padding:.55rem .65rem;
display:flex;
flex-direction:column;
gap:.22rem;
position:relative;
border-left:2px solid;
border-image:linear-gradient(180deg,#FC2481,#FE7B2B) 1;
}
.phone-ai-icon{
position:absolute;
top:.55rem;
right:.65rem;
width:18px;
height:18px;
border-radius:5px;
background:var(--grad);
display:flex;
align-items:center;
justify-content:center;
}
.phone-ai-icon svg{
width:10px;
height:10px;
fill:#fff;
stroke:#fff;
stroke-width:1.5;
}
.phone-ai-title{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.65rem;
color:var(--ink);
letter-spacing:-.015em;
padding-right:1.2rem;
}
.phone-ai-text{
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-size:.55rem;
color:var(--slate);
line-height:1.4;
}
/* Tabbar 6 cols */
.phone-tabbar{
padding:.4rem .25rem .6rem;
}
.phone-tabbar-item{
flex:1;
min-width:0;
cursor:pointer;
transition:transform .2s var(--spring);
}
.phone-tabbar-item:hover{transform:translateY(-1px)}
.phone-tabbar-item-lbl{font-size:.4rem !important}
.phone-tabbar-item svg{width:13px !important;height:13px !important}
/* Showcase do mockup — notebook + celular lado a lado, largura total */
.phone-showcase{position:relative;z-index:3;max-width:1240px;margin:4.5rem auto 0;padding:3rem 2rem 0}
.phone-showcase::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(420px,70%);height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 30%,rgba(252,36,129,.22) 50%,var(--line-2) 70%,transparent)}
/* Layout 2 colunas: notebook (esq) + celular (dir) */
.showcase-grid{
display:grid;
grid-template-columns:1.45fr .85fr;
gap:2.4rem;
align-items:center;
/* perspectiva também no pai como fallback; o JS aplica perspective() por device */
perspective:1400px;
perspective-origin:50% 20%;
}
/* transição suave do transform 3D dirigido por scroll (sem animar a cada frame) */
.device-stage[data-scroll3d]{transition:transform .12s linear;transform-origin:50% 90%}
@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr;gap:3rem;justify-items:center}}
@media(max-width:960px){.phone-showcase{margin-top:3rem;padding:2.2rem 1.1rem 0}}
/* Cada device num "stage" que recebe o transform 3D dirigido por scroll */
.device-stage{
position:relative;
width:100%;
display:flex;
justify-content:center;
transform-style:preserve-3d;
will-change:transform;
}
.device-stage.nb-stage{justify-content:flex-start}
@media(max-width:1080px){.device-stage.nb-stage{justify-content:center}}
/* Hint discreto acima do celular */
.phone-row{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.phone-hint{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:.4rem;
font-family:'JetBrains Mono',monospace;
font-size:.66rem;
color:var(--slate);
letter-spacing:.04em;
max-width:13rem;
line-height:1.55;
animation:hintFloat 3.5s ease-in-out infinite;
}
@keyframes hintFloat{
0%,100%{opacity:.7;transform:translateY(0)}
50%{opacity:1;transform:translateY(-4px)}
}
.phone-hint strong{color:var(--ink);font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.74rem;letter-spacing:0;margin-bottom:.1rem}
@keyframes hintPulse{0%,100%{opacity:.7}50%{opacity:1}}
.hint-pulse-dot{
position:relative;
width:34px;
height:34px;
border-radius:50%;
background:var(--grad);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:.55rem;
box-shadow:0 4px 14px rgba(252,36,129,.32);
}
.hint-pulse-dot svg{
width:16px;
height:16px;
stroke:#fff;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}
.hint-pulse-ring{
position:absolute;
inset:0;
border-radius:50%;
border:2px solid #FC2481;
animation:hintRing 2s ease-out infinite;
}
@keyframes hintRing{
0%{transform:scale(1);opacity:.7}
100%{transform:scale(1.8);opacity:0}
}
.phone-hint strong{
color:var(--ink);
font-weight:700;
font-family:'Space Grotesk',sans-serif;
font-size:.82rem;
letter-spacing:-.01em;
margin-bottom:.15rem;
}
/* ===== NOTEBOOK MOCKUP (CSS) — painel desktop da TicketTop ===== */
.nb-mock{position:relative;width:100%;max-width:680px}
.nb-screen{
position:relative;
background:linear-gradient(160deg,#0F1A24 0%,#070D14 100%);
border-radius:16px 16px 6px 6px;
padding:11px 11px 12px;
box-shadow:0 30px 60px rgba(5,11,20,.20),0 12px 24px rgba(252,36,129,.07),inset 0 1px 0 rgba(255,255,255,.08);
}
.nb-screen::before{ /* webcam */
content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
width:5px;height:5px;border-radius:50%;background:#0a0f16;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.nb-display{
position:relative;
background:var(--bg-soft);
border-radius:8px;
overflow:hidden;
aspect-ratio:16/10;
display:flex;flex-direction:column;
}
/* base/teclado do notebook */
.nb-base{
position:relative;
width:114%;
margin:0 -7% 0;
height:15px;
background:linear-gradient(180deg,#1a2531 0%,#0c131c 60%,#070d14 100%);
border-radius:0 0 13px 13px;
box-shadow:0 22px 34px rgba(5,11,20,.26);
}
.nb-base::before{ /* notch do trackpad */
content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
width:88px;height:5px;background:linear-gradient(180deg,#0a0f16,#11202d);border-radius:0 0 7px 7px;
}
/* ---- Conteúdo do painel desktop (wide) ---- */
.nbd{display:flex;flex-direction:column;height:100%;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;background:var(--bg-soft)}
.nbd-top{display:flex;align-items:center;justify-content:space-between;padding:.55rem .8rem;border-bottom:1px solid var(--line);background:#fff}
.nbd-brand{display:flex;align-items:center;gap:.5rem}
.nbd-brand img{height:14px;width:auto;display:block}
.nbd-brand-sep{width:1px;height:13px;background:var(--line-2)}
.nbd-brand-page{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.62rem;color:var(--ink);letter-spacing:-.01em}
.nbd-top-right{display:flex;align-items:center;gap:.45rem}
.nbd-live{display:inline-flex;align-items:center;gap:.28rem;font-family:'JetBrains Mono',monospace;font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;color:#1FA050;background:rgba(37,211,102,.10);padding:.18rem .42rem;border-radius:var(--r-pill);font-weight:600}
.nbd-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#1FA050;animation:pulse 2s ease-in-out infinite}
.nbd-avatar{width:18px;height:18px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.5rem;color:#fff}
.nbd-body{flex:1;min-height:0;display:grid;grid-template-columns:38px 1fr;overflow:hidden}
/* sidebar */
.nbd-side{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.6rem 0}
.nbd-side-i{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--slate-2)}
.nbd-side-i svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nbd-side-i.on{background:var(--grad);color:#fff;box-shadow:0 3px 8px rgba(252,36,129,.3)}
.nbd-main{padding:.6rem .7rem;overflow:hidden;display:flex;flex-direction:column;gap:.5rem}
.nbd-head-row{display:flex;align-items:flex-end;justify-content:space-between}
.nbd-greet-lbl{font-family:'JetBrains Mono',monospace;font-size:.44rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:.12rem}
.nbd-greet-name{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.82rem;letter-spacing:-.02em;color:var(--ink);line-height:1}
.nbd-chips{display:flex;gap:.3rem}
.nbd-chip{font-family:'JetBrains Mono',monospace;font-size:.44rem;letter-spacing:.04em;color:var(--slate);background:#fff;border:1px solid var(--line-2);padding:.2rem .4rem;border-radius:var(--r-pill)}
.nbd-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Abas interativas do painel notebook */
.nbd-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);padding-bottom:.02rem;position:relative}
.nbd-tab{font-family:'DM Sans',sans-serif;font-weight:600;font-size:.55rem;letter-spacing:-.005em;color:var(--slate);background:none;border:0;padding:.28rem .5rem;border-radius:6px 6px 0 0;cursor:pointer;position:relative;transition:color .2s var(--ease),background .2s var(--ease);white-space:nowrap}
.nbd-tab:hover{color:var(--ink);background:rgba(252,36,129,.05)}
.nbd-tab::after{content:'';position:absolute;left:.5rem;right:.5rem;bottom:-1px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease)}
.nbd-tab.active{color:var(--ink)}
.nbd-tab.active::after{transform:scaleX(1)}
.nbd-tab:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.nbd-panel{display:none;flex-direction:column;gap:.5rem;flex:1;min-height:0}
.nbd-panel.active{display:flex;animation:nbdPanelIn .42s var(--ease)}
@keyframes nbdPanelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.nbd-panel.active{animation:none}.nbd-tab::after{transition:none}}
/* KPIs */
.nbd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.nbd-kpi{background:#fff;border:1px solid var(--line);border-radius:9px;padding:.48rem .55rem;position:relative;overflow:hidden}
.nbd-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--grad)}
.nbd-kpi.dark{background:var(--ink);border-color:transparent}
.nbd-kpi.dark::before{background:var(--grad)}
.nbd-kpi-lbl{font-family:'JetBrains Mono',monospace;font-size:.42rem;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:.2rem}
.nbd-kpi.dark .nbd-kpi-lbl{color:rgba(255,255,255,.65)}
.nbd-kpi-val{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.92rem;letter-spacing:-.025em;line-height:1;color:var(--ink)}
.nbd-kpi.dark .nbd-kpi-val{background:linear-gradient(135deg,#fff,rgba(255,255,255,.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nbd-kpi-trend{font-family:'JetBrains Mono',monospace;font-size:.42rem;font-weight:600;margin-top:.15rem;display:inline-flex;align-items:center;gap:.12rem}
.nbd-kpi-trend.up{color:#1FA050}
.nbd-kpi-trend.pink{color:#FE7B2B}
/* Linha gráfico + lista */
.nbd-row2{display:grid;grid-template-columns:1.55fr 1fr;gap:.45rem;flex:1;min-height:0}
.nbd-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:.5rem .55rem;display:flex;flex-direction:column;min-height:0}
.nbd-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}
.nbd-card-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.56rem;color:var(--ink);letter-spacing:-.01em}
.nbd-card-sub{font-family:'JetBrains Mono',monospace;font-size:.42rem;color:var(--slate)}
/* gráfico area ao vivo (SVG) */
.nbd-chart{flex:1;min-height:0;position:relative}
.nbd-chart svg{width:100%;height:100%;display:block}
.nbd-chart-legend{position:absolute;top:0;right:0;display:flex;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.4rem;color:var(--slate)}
.nbd-chart-legend i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:.2rem;vertical-align:middle}
/* lista/tabela */
.nbd-list{display:flex;flex-direction:column;gap:.28rem;overflow:hidden}
.nbd-li{display:flex;align-items:center;gap:.42rem}
.nbd-li-rank{width:13px;height:13px;border-radius:4px;background:var(--bg-soft-2);color:var(--slate);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.46rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nbd-li:first-child .nbd-li-rank{background:var(--grad);color:#fff}
.nbd-li-name{font-size:.5rem;font-weight:600;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nbd-li-bar{height:3px;border-radius:2px;background:var(--bg-soft-2);width:34%;position:relative;overflow:hidden;flex-shrink:0}
.nbd-li-bar>span{position:absolute;inset:0;border-radius:2px;background:var(--grad)}
.nbd-li-val{font-family:'JetBrains Mono',monospace;font-size:.44rem;color:var(--slate);font-weight:600;flex-shrink:0;width:30px;text-align:right}
@media(max-width:1080px){
.nb-mock{max-width:560px}
}
/* ===== NOTEBOOK DASHBOARD — REFLUXO MOBILE (≤700px) =====
No mobile o painel wide não cabe em 16/10 sem virar microtexto.
Solução: soltar o aspect-ratio (cresce em altura), empilhar grids,
subir o piso tipográfico e tornar as abas tocáveis/roláveis. */
@media(max-width:700px){
.nb-mock{max-width:100%}
/* deixa o display crescer verticalmente em vez de espremer tudo */
.nb-display{aspect-ratio:auto;min-height:520px}
/* esconde a sidebar de ícones (decorativa) p/ ganhar largura */
.nbd-body{grid-template-columns:1fr}
.nbd-side{display:none}
.nbd-main{padding:.85rem .8rem;gap:.7rem;overflow:visible}
/* topo do painel um pouco maior */
.nbd-brand img{height:16px}
.nbd-brand-page{font-size:.72rem}
.nbd-live{font-size:.56rem;padding:.22rem .5rem}
.nbd-greet-lbl{font-size:.58rem}
.nbd-greet-name{font-size:1rem}
.nbd-chip{font-size:.56rem;padding:.26rem .5rem}
/* ABAS — tap target ≥40px, com scroll horizontal se não couberem */
.nbd-tabs{gap:.2rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
.nbd-tabs::-webkit-scrollbar{display:none}
.nbd-tab{font-size:.78rem;min-height:40px;padding:.55rem .7rem;display:inline-flex;align-items:center;flex:0 0 auto}
.nbd-tab::after{left:.7rem;right:.7rem}
/* KPIs em 2 colunas, legíveis */
.nbd-kpis{grid-template-columns:repeat(2,1fr);gap:.55rem}
.nbd-kpi{padding:.7rem .75rem}
.nbd-kpi-lbl{font-size:.6rem;margin-bottom:.3rem}
.nbd-kpi-val{font-size:1.3rem}
.nbd-kpi-trend{font-size:.58rem;margin-top:.25rem}
/* gráfico em cima, lista embaixo (1 coluna) */
.nbd-row2{grid-template-columns:1fr;gap:.6rem}
.nbd-card{padding:.7rem .75rem}
.nbd-chart{min-height:130px}
.nbd-card-title{font-size:.82rem}
.nbd-card-sub{font-size:.6rem}
.nbd-chart-legend{font-size:.58rem}
/* lista/ranking legível */
.nbd-list{gap:.45rem}
.nbd-li-rank{width:18px;height:18px;font-size:.62rem;border-radius:5px}
.nbd-li-name{font-size:.78rem}
.nbd-li-bar{height:4px;width:26%}
.nbd-li-val{font-size:.62rem;width:auto;min-width:34px}
}
/* RANKING (Atividades) */
.phone-rank{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:9px;
padding:.5rem .6rem;
}
.phone-rank-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.4rem;
padding-bottom:.3rem;
border-bottom:1px solid var(--line);
}
.phone-rank-title{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.62rem;
color:var(--ink);
letter-spacing:-.01em;
}
.phone-rank-tag{
font-family:'JetBrains Mono',monospace;
font-size:.42rem;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--slate);
font-weight:500;
background:var(--bg-soft-2);
padding:.1rem .3rem;
border-radius:3px;
}
.phone-rank-item{
display:flex;
align-items:center;
gap:.45rem;
padding:.22rem 0;
font-size:.58rem;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
}
.phone-rank-pos{
width:14px;
height:14px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:'JetBrains Mono',monospace;
font-weight:700;
font-size:.5rem;
color:#fff;
flex-shrink:0;
}
.phone-rank-pos.gold{background:linear-gradient(135deg,#FFD700,#FFA500)}
.phone-rank-pos.silver{background:linear-gradient(135deg,#C0C0C0,#909090)}
.phone-rank-pos.bronze{background:linear-gradient(135deg,#CD7F32,#8B4513)}
.phone-rank-name{
flex:1;
color:var(--ink);
font-weight:500;
}
.phone-rank-val{
font-family:'JetBrains Mono',monospace;
font-weight:600;
font-size:.55rem;
color:var(--slate);
white-space:nowrap;
}
/* ORDERS (Pedidos) */
.phone-orders{
display:flex;
flex-direction:column;
gap:.4rem;
}
.phone-orders-title{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.62rem;
color:var(--ink);
letter-spacing:-.01em;
margin-bottom:.05rem;
}
.phone-order{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:8px;
padding:.45rem .55rem;
display:flex;
flex-direction:column;
gap:.18rem;
}
.phone-order-row{
display:flex;
justify-content:space-between;
align-items:center;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-size:.55rem;
}
.phone-order-name{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.62rem;
color:var(--ink);
}
.phone-order-time{
font-family:'JetBrains Mono',monospace;
font-size:.5rem;
color:var(--slate);
font-weight:500;
}
.phone-order-cpf{
font-family:'JetBrains Mono',monospace;
font-size:.5rem;
color:var(--slate);
letter-spacing:.02em;
}
.phone-order-tag{
font-family:'JetBrains Mono',monospace;
font-size:.42rem;
letter-spacing:.06em;
text-transform:uppercase;
font-weight:600;
padding:.08rem .3rem;
border-radius:3px;
color:#fff;
}
.phone-order-tag.pink{background:#FC2481}
.phone-order-tag.orange{background:#FE7B2B}
.phone-order-tag.purple{background:#C9477E}
.phone-order-id{
font-family:'JetBrains Mono',monospace;
font-size:.5rem;
color:var(--slate);
font-weight:500;
}
.phone-order-val{
font-family:'Space Grotesk',sans-serif;
font-weight:800;
font-size:.62rem;
color:var(--ink);
letter-spacing:-.01em;
white-space:nowrap;
}
/* WITHDRAW (Extrato) */
.phone-withdraw{
background:linear-gradient(135deg,rgba(252,36,129,.04),rgba(254,123,43,.04));
border:1px solid rgba(252,36,129,.18);
border-radius:9px;
padding:.55rem .6rem;
}
.phone-withdraw-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.35rem;
}
.phone-withdraw-lbl{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.62rem;
color:var(--ink);
}
.phone-withdraw-bank{
font-family:'JetBrains Mono',monospace;
font-size:.42rem;
color:var(--slate);
letter-spacing:.02em;
}
.phone-withdraw-input{
display:flex;
align-items:baseline;
gap:.25rem;
padding:.3rem 0 .35rem;
border-bottom:1px solid var(--line);
margin-bottom:.4rem;
}
.phone-withdraw-currency{
font-family:'Space Grotesk',sans-serif;
font-weight:600;
font-size:.65rem;
color:var(--slate);
}
.phone-withdraw-val{
font-family:'Space Grotesk',sans-serif;
font-weight:800;
font-size:1rem;
color:var(--ink);
letter-spacing:-.025em;
line-height:1;
}
.phone-withdraw-cursor{
display:inline-block;
color:var(--pink);
font-weight:300;
animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.phone-withdraw-btn{
width:100%;
background:var(--grad);
color:#fff;
border:none;
border-radius:6px;
padding:.4rem;
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.6rem;
letter-spacing:.02em;
cursor:pointer;
box-shadow:0 4px 12px rgba(252,36,129,.22);
}
/* CHAT IA */
.phone-chat{
display:flex;
flex-direction:column;
gap:.35rem;
padding:.1rem 0;
}
.phone-chat-msg{
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-size:.58rem;
line-height:1.45;
padding:.4rem .55rem;
border-radius:8px;
max-width:85%;
}
.phone-chat-msg.user{
align-self:flex-end;
background:var(--grad);
color:#fff;
border-bottom-right-radius:2px;
font-weight:500;
}
.phone-chat-msg.ai{
align-self:flex-start;
background:var(--bg-soft);
border:1px solid var(--line);
color:var(--ink);
border-bottom-left-radius:2px;
display:flex;
flex-direction:column;
gap:.2rem;
}
.phone-chat-msg.ai strong{
color:var(--pink);
font-weight:700;
}
.phone-chat-ai-head{
display:flex;
align-items:center;
gap:.3rem;
font-family:'JetBrains Mono',monospace;
font-size:.4rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--slate);
font-weight:600;
}
.phone-chat-ai-dot{
width:5px;
height:5px;
border-radius:50%;
background:var(--grad);
box-shadow:0 0 4px rgba(252,36,129,.5);
}
.phone-chat-typing{
align-self:flex-start;
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:8px;
border-bottom-left-radius:2px;
padding:.45rem .6rem;
display:flex;
gap:.18rem;
}
.phone-chat-typing span{
width:5px;
height:5px;
border-radius:50%;
background:var(--slate-2);
animation:typing 1.4s ease-in-out infinite;
}
.phone-chat-typing span:nth-child(2){animation-delay:.2s}
.phone-chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{
0%,60%,100%{opacity:.3;transform:translateY(0)}
30%{opacity:1;transform:translateY(-3px)}
}
.phone-chat-input{
display:flex;
align-items:center;
gap:.4rem;
padding:.35rem .5rem;
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:20px;
margin-top:.2rem;
}
.phone-chat-placeholder{
flex:1;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-size:.55rem;
color:var(--slate);
}
.phone-chat-send{
width:18px;
height:18px;
border-radius:50%;
background:var(--grad);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.phone-chat-send svg{
width:9px;
height:9px;
stroke:#fff;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}
/* ALERT (Bar) */
.phone-alert{
display:flex;
gap:.45rem;
background:rgba(254,123,43,.08);
border:1px solid rgba(254,123,43,.32);
border-left:2px solid #FE7B2B;
border-radius:8px;
padding:.45rem .55rem;
align-items:flex-start;
}
.phone-alert-ico{
width:18px;
height:18px;
border-radius:50%;
background:#FE7B2B;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.phone-alert-ico svg{
width:11px;
height:11px;
stroke:#fff;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}
.phone-alert-body{flex:1}
.phone-alert-title{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.6rem;
color:#FE7B2B;
letter-spacing:-.01em;
margin-bottom:.1rem;
}
.phone-alert-text{
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-size:.55rem;
color:var(--ink);
line-height:1.4;
}
.phone-alert-text strong{font-weight:700;color:#FE7B2B}
/* STOCK (Bar) */
.phone-stock{
display:flex;
flex-direction:column;
gap:.4rem;
}
.phone-stock-title{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.62rem;
color:var(--ink);
letter-spacing:-.01em;
}
.phone-stock-item{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:8px;
padding:.4rem .55rem;
display:flex;
flex-direction:column;
gap:.2rem;
}
.phone-stock-row{
display:flex;
justify-content:space-between;
align-items:center;
}
.phone-stock-name{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.6rem;
color:var(--ink);
}
.phone-stock-sold{
font-family:'JetBrains Mono',monospace;
font-size:.5rem;
color:var(--slate);
font-weight:500;
}
.phone-stock-bar-wrap{
width:100%;
height:3px;
background:var(--bg-soft-2);
border-radius:2px;
overflow:hidden;
}
.phone-stock-bar{
height:100%;
background:linear-gradient(90deg,#10b981,#34d399);
border-radius:2px;
transition:width .8s var(--ease);
}
.phone-stock-bar.critical{
background:linear-gradient(90deg,#FE7B2B,#FC2481);
animation:stockPulse 1.5s ease-in-out infinite;
}
@keyframes stockPulse{
50%{box-shadow:0 0 6px rgba(252,36,129,.5)}
}
.phone-stock-foot{
display:flex;
justify-content:space-between;
font-family:'JetBrains Mono',monospace;
font-size:.45rem;
}
.phone-stock-rest{
color:var(--slate);
font-weight:500;
}
.phone-stock-rest.critical{
color:#FE7B2B;
font-weight:700;
}
.phone-stock-price{
color:var(--ink);
font-weight:600;
}
@media(max-width:560px){
.access-head{flex-direction:column;align-items:flex-start;gap:.4rem}
.access-head-meta{font-size:.6rem}
}
/* PRODUCT IMAGE ROW — imagem full-width após product-grid */
.product-image-row{max-width:1160px;margin:5rem auto 0;padding:0 2rem;position:relative;z-index:2}
.product-image-frame{
width:100%;
aspect-ratio:16/8;
background:linear-gradient(135deg,rgba(252,36,129,.06),rgba(254,123,43,.06));
border:1px solid rgba(252,36,129,.16);
border-radius:var(--r-lg);
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.product-image-frame::before,
.product-image-frame::after{
content:'';
position:absolute;
width:18px;height:18px;
border-color:rgba(252,36,129,.36);
border-style:solid;
border-width:0;
}
.product-image-frame::before{top:1rem;left:1rem;border-top-width:2px;border-left-width:2px}
.product-image-frame::after{bottom:1rem;right:1rem;border-bottom-width:2px;border-right-width:2px}
.product-image-placeholder{text-align:center;padding:2rem;max-width:520px}
.product-image-icon{
width:54px;height:54px;
border-radius:14px;
background:rgba(252,36,129,.10);
border:1px solid rgba(252,36,129,.22);
display:flex;align-items:center;justify-content:center;
margin:0 auto 1.1rem;
}
.product-image-icon svg{width:24px;height:24px;stroke:var(--pink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.product-image-tag{
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--pink);
font-weight:700;
margin-bottom:.5rem;
}
.product-image-desc{
font-family:'Space Grotesk',sans-serif;
font-size:1.04rem;
font-weight:600;
color:var(--ink);
line-height:1.45;
letter-spacing:-.01em;
}
@media(max-width:960px){.product-image-row{padding:0 1.25rem;margin-top:3.5rem}.product-image-frame{aspect-ratio:4/3}}
@media(max-width:560px){.product-image-tag{font-size:.6rem;letter-spacing:.12em}.product-image-desc{font-size:.82rem;line-height:1.4}.product-image-placeholder{padding:1.5rem}.product-image-icon{width:42px;height:42px}}
/* PRODUCT STACK — substitui placeholder por cards de capacidades */
.product-mockup{display:flex;align-items:center;justify-content:center;width:100%}
.product-stack{display:flex;flex-direction:column;gap:.9rem;width:100%;max-width:420px}
.product-stack-card{
background:#fff;
border:1px solid var(--line);
border-radius:var(--r-lg);
padding:1rem 1.2rem;
box-shadow:var(--s-sm);
display:flex;
align-items:center;
justify-content:space-between;
gap:.8rem;
transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.product-stack-card:hover{transform:translateY(-2px);box-shadow:var(--s-md);border-color:var(--line-2)}
.product-stack-card.highlight{
border-color:rgba(252,36,129,.25);
box-shadow:0 6px 24px rgba(252,36,129,.10),var(--s-sm);
position:relative;
}
.product-stack-card.highlight::before{display:none}
.product-stack-row{display:flex;align-items:center;gap:.85rem;min-width:0;flex:1}
.product-stack-icon{
width:38px;height:38px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:var(--s-sm);
}
.product-stack-icon svg{
width:18px;height:18px;
stroke:#fff;stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}
.product-stack-lbl{
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:.92rem;
color:var(--ink);
letter-spacing:-.02em;
margin-bottom:.12rem;
}
.product-stack-val{
font-size:.74rem;
color:var(--slate);
line-height:1.4;
}
.product-stack-tag{
font-family:'JetBrains Mono',monospace;
font-size:.55rem;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--pink);
font-weight:600;
background:rgba(252,36,129,.08);
padding:.32rem .55rem;
border-radius:5px;
white-space:nowrap;
flex-shrink:0;
}
@media(max-width:700px){.product-stack{max-width:100%}.product-stack-tag{display:none}}
/* ACCESS BLOCK ROW (full-width abaixo do hero-grid) */
.access-block-row{max-width:1240px;margin:3rem auto 0;padding:0 2rem}
@media(max-width:960px){.access-block-row{padding:0 1.25rem;margin-top:2rem}}
/* Soft reveal — fade + slide curto, mais sutil */
.reveal-soft{opacity:0;transform:translateY(28px);transition:opacity 1.2s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1)}
.reveal-soft.soft-in{opacity:1;transform:none}
/* Para títulos: aparecem com um leve blur cinematográfico */
.s-title{transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s}
.reveal:not(.vis) .s-title{filter:blur(4px)}
.reveal.vis .s-title{filter:blur(0)}
/* SCROLL PROGRESS BAR */
.scroll-progress{
position:fixed;
top:0;left:0;
height:3px;
width:0%;
background:var(--grad);
z-index:9999;
transition:width .12s ease-out;
pointer-events:none;
box-shadow:0 2px 8px rgba(252,36,129,.25);
}
/* STAGGERED REVEAL — para grupos */
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal-stagger.vis > *{opacity:1;transform:none}
.reveal-stagger.vis > *:nth-child(1){transition-delay:.04s}
.reveal-stagger.vis > *:nth-child(2){transition-delay:.10s}
.reveal-stagger.vis > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.vis > *:nth-child(4){transition-delay:.22s}
.reveal-stagger.vis > *:nth-child(5){transition-delay:.28s}
.reveal-stagger.vis > *:nth-child(6){transition-delay:.34s}
/* Hover sutil em cards interativos */
.product-feature{transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.product-feature:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(5,11,20,.06);border-color:rgba(252,36,129,.2)}
/* Magnetic effect nos botões grandes */
.btn-grad{transition:transform .25s var(--spring),box-shadow .3s,filter .3s}
.btn-grad:hover{transform:translateY(-1px) scale(1.015);filter:brightness(1.05)}
.btn-grad:active{transform:translateY(0) scale(.98)}
/* Number counter glow ao animar */
@keyframes counterGlow{
0%,100%{filter:drop-shadow(0 0 0 rgba(252,36,129,0))}
50%{filter:drop-shadow(0 0 12px rgba(252,36,129,.35))}
}
.kpi-num.animating{animation:counterGlow 1.8s ease-in-out}
/* ==================== HERO POSTER MOBILE ==================== */
/* Em desktop fica escondido. Em mobile ocupa primeira tela inteira (100vh)
estilo Jesko Jets: imagem cinematográfica + texto sobreposto no rodapé */
.hero-poster{display:none}
@media(max-width:960px){
/* Esconder hero-grid em mobile — o poster substitui */
.hero{padding:0;background:#050B14}
.hero-bg{display:none}
.hero-bgphoto{display:none}
.hero-aurora{display:none}
.hero-grid{display:none}
.hero-poster{
display:flex;
flex-direction:column;
position:relative;
width:100%;
min-height:100vh;
min-height:100svh;
min-height:100dvh;
overflow:hidden;
background:#050B14;
}
/* Placeholder de imagem ocupa toda a área, fica em FUNDO */
.hero-poster-img{
position:absolute;
inset:0;
z-index:1;
background:
radial-gradient(ellipse 80% 60% at 30% 25%, rgba(252,36,129,.55), transparent 65%),
radial-gradient(ellipse 70% 55% at 75% 30%, rgba(254,123,43,.42), transparent 60%),
radial-gradient(ellipse 100% 70% at 50% 100%, rgba(5,11,20,.95), transparent 50%),
linear-gradient(180deg, #1a0d20 0%, #2a1410 45%, #050B14 100%);
overflow:hidden;
}
/* Shimmer/light pass animado */
.hero-poster-shimmer{
position:absolute;inset:-50%;
background:linear-gradient(115deg,
transparent 35%,
rgba(255,255,255,.05) 48%,
rgba(255,255,255,.10) 50%,
rgba(255,255,255,.05) 52%,
transparent 65%);
animation:shimmer 9s ease-in-out infinite;
pointer-events:none;
}
@keyframes shimmer{
0%,100%{transform:translateX(-30%) translateY(-10%) rotate(0deg);opacity:.7}
50%{transform:translateX(30%) translateY(10%) rotate(0deg);opacity:1}
}
/* Grain/noise overlay */
.hero-poster-grain{
position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
opacity:.10;
mix-blend-mode:overlay;
pointer-events:none;
}
/* Tag indicando que é placeholder para imagem futura */
.hero-poster-tag{
position:absolute;
top:1rem;right:1rem;
z-index:3;
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.35rem .65rem;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
border-radius:99px;
font-family:'JetBrains Mono',monospace;
font-size:.55rem;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(255,255,255,.7);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
/* Content sobreposto, alinhado ao rodapé da imagem como Jesko */
.hero-poster-content{
position:relative;
z-index:4;
margin-top:auto;
padding:2.5rem 1.25rem calc(7rem + env(safe-area-inset-bottom));
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:1.1rem;
}
.hero-poster-eyebrow{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.4rem .9rem;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
border-radius:99px;
color:rgba(255,255,255,.85);
font-family:'JetBrains Mono',monospace;
font-size:.62rem;
letter-spacing:.16em;
text-transform:uppercase;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.hero-poster-eyebrow .dot{
width:6px;height:6px;
background:#FC2481;
border-radius:50%;
box-shadow:0 0 8px rgba(252,36,129,.7);
animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{
0%,100%{transform:scale(1);opacity:1}
50%{transform:scale(1.4);opacity:.7}
}
.hero-poster-title,
.hero-poster-title .ln,
.hero-poster-title .ln-1,
.hero-poster-title .ln-2{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
.hero-poster-title{
font-family:'Space Grotesk',sans-serif;
font-weight:800;
font-size:clamp(1.85rem,8.2vw,3.5rem);
line-height:.96;
letter-spacing:-.03em;
margin:0;
text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero-poster-title .ln{display:block}
.hero-poster-title .ln-3{
background:linear-gradient(135deg,#FC2481 0%,#FE7B2B 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent !important;
background-clip:text;
color:transparent !important;
font-family:'Space Grotesk',sans-serif;
font-weight:800;
}
.hero-poster-lead{
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
font-size:1rem;
line-height:1.55;
color:rgba(255,255,255,.85);
max-width:360px;
margin:0;
font-weight:400;
}
.hero-poster-ctas{
display:flex;
flex-direction:column;
gap:.7rem;
width:100%;
max-width:320px;
margin-top:.4rem;
}
.hero-poster-ctas .btn{
width:100%;
justify-content:center;
padding:1.1rem 1.5rem;
font-size:.95rem;
}
.btn-ghost-light{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
padding:1.1rem 1.5rem;
border-radius:99px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.22);
color:#fff;
font-family:'Space Grotesk',sans-serif;
font-weight:600;
font-size:.95rem;
text-decoration:none;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:background .25s,border-color .25s,transform .25s;
}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.btn-ghost-light:active{transform:scale(.98)}
.hero-poster-scroll-hint{
display:flex;
flex-direction:column;
align-items:center;
gap:.6rem;
margin-top:1.2rem;
}
.scroll-hint-label{
font-family:'JetBrains Mono',monospace;
font-size:.58rem;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(255,255,255,.55);
}
.scroll-hint-line{
width:1px;
height:28px;
background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
animation:scrollLineSlide 2.4s ease-in-out infinite;
transform-origin:top;
}
@keyframes scrollLineSlide{
0%{transform:scaleY(0);opacity:0}
30%{opacity:1}
100%{transform:scaleY(1);opacity:0}
}
/* ===== ANIMAÇÃO DE ABERTURA — BLUR CINEMATOGRÁFICO ===== */
.hero-poster-img{
animation:posterImgEnter 1.8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes posterImgEnter{
0%{
opacity:0;
filter:blur(40px) saturate(.6);
transform:scale(1.08);
}
100%{
opacity:1;
filter:blur(0) saturate(1);
transform:scale(1);
}
}
.hero-poster-eyebrow,
.hero-poster-title .ln,
.hero-poster-lead,
.hero-poster-ctas,
.hero-poster-scroll-hint{
opacity:0;
filter:blur(8px);
transform:translateY(20px);
animation:posterTextEnter 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-poster-eyebrow{animation-delay:.45s}
.hero-poster-title .ln-1{animation-delay:.6s}
.hero-poster-title .ln-2{animation-delay:.75s}
.hero-poster-title .ln-3{animation-delay:.9s}
.hero-poster-lead{animation-delay:1.1s}
.hero-poster-ctas{animation-delay:1.3s}
.hero-poster-scroll-hint{animation-delay:1.5s}
@keyframes posterTextEnter{
to{opacity:1;filter:blur(0);transform:translateY(0)}
}
/* ===== SCROLL PARALLAX / FADE-OUT ===== */
/* Background image faz parallax discreto (efeito moderno) */
.hero-poster-img{
will-change:transform,filter,opacity;
}
.hero-poster-content{
will-change:transform,opacity;
}
}
/* HERO EVENT IMAGE — horizontal HD entre access e KPIs */
.hero-event-image{max-width:1240px;margin:3.5rem auto 0;padding:0 2rem;position:relative;z-index:2}
.event-img-frame{
width:100%;
aspect-ratio:16/8;
background:linear-gradient(135deg,rgba(252,36,129,.08),rgba(254,123,43,.08));
border:1px solid rgba(252,36,129,.18);
border-radius:var(--r-lg);
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.event-img-frame::before,
.event-img-frame::after{
content:'';
position:absolute;
width:18px;height:18px;
border-color:rgba(252,36,129,.4);
border-style:solid;
border-width:0;
}
.event-img-frame::before{top:1rem;left:1rem;border-top-width:2px;border-left-width:2px}
.event-img-frame::after{bottom:1rem;right:1rem;border-bottom-width:2px;border-right-width:2px}
.event-img-placeholder{text-align:center;padding:2rem;max-width:480px}
.event-img-icon{
width:54px;height:54px;
border-radius:14px;
background:rgba(252,36,129,.12);
border:1px solid rgba(252,36,129,.22);
display:flex;align-items:center;justify-content:center;
margin:0 auto 1.1rem;
}
.event-img-icon svg{width:24px;height:24px;stroke:var(--pink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.event-img-tag{
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--pink);
font-weight:700;
margin-bottom:.5rem;
}
.event-img-desc{
font-family:'Space Grotesk',sans-serif;
font-size:1.04rem;
font-weight:600;
color:var(--ink);
line-height:1.45;
letter-spacing:-.01em;
}
@media(max-width:960px){.hero-event-image{padding:0 1.25rem;margin-top:2.5rem}.event-img-frame{aspect-ratio:16/9}}
@media(max-width:700px){.event-img-desc{font-size:.78rem}.event-img-tag{font-size:.6rem;letter-spacing:.12em}.event-img-frame::before,.event-img-frame::after{width:12px;height:12px}.event-img-placeholder{padding:1.5rem}.event-img-icon{width:42px;height:42px}}
/* HERO KPIS */
.hero-kpis{max-width:1160px;margin:5rem auto 0;padding:2.4rem 2rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.kpi-num{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:2.4rem;letter-spacing:-.038em;line-height:1;margin-bottom:.5rem;color:var(--ink)}
.kpi-num.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kpi-lbl{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.05em;color:var(--slate);line-height:1.4;font-weight:500}
@media(max-width:700px){.hero-kpis{grid-template-columns:repeat(2,1fr);gap:1.8rem 1.2rem;padding:1.8rem 1.25rem 0;margin-top:3rem}.kpi-num{font-size:1.85rem}.kpi-lbl{font-size:.74rem}}
/* MARQUEE */
.marquee-section{padding:3.2rem 0 3.6rem;background:linear-gradient(180deg,#FAFAFA 0%,#F5F5F7 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;user-select:none;cursor:grab;touch-action:pan-y}
.marquee-section:active{cursor:grabbing}
.marquee-label{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:600;margin-bottom:1.6rem;padding:0 1.5rem}
.marquee-section::before,.marquee-section::after{content:'';position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none}
.marquee-section::before{left:0;background:linear-gradient(90deg,#F5F5F7 0%,rgba(245,245,247,0) 100%)}
.marquee-section::after{right:0;background:linear-gradient(-90deg,#F5F5F7 0%,rgba(245,245,247,0) 100%)}
.marquee{display:flex;align-items:center;gap:3.8rem;width:max-content;will-change:transform;padding-left:0}
/* Cada logo ocupa uma CÉLULA de largura fixa (footprint igual) e é dimensionado
por max-height balanceada por logo, p/ massa óptica parecida (wordmarks largos
não dominam; marcas compactas não somem) */
.marquee-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:40px;width:128px}
.marquee-logo img{max-height:30px;max-width:118px;width:auto;height:auto;object-fit:contain;display:block;pointer-events:none;
filter:grayscale(1) brightness(.55) contrast(1.05);opacity:.55;
transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}
.marquee-section:hover .marquee-logo img{opacity:.4}
.marquee-logo:hover img{filter:grayscale(1) brightness(.95) contrast(1.05);opacity:1;transform:translateY(-2px) scale(1.04)}
/* Normalização óptica por logo (altura proporcional inversa à largura do wordmark) */
.marquee-logo img[src*="richardrasmussen"]{max-height:21px}
.marquee-logo img[src*="escape"]{max-height:23px}
.marquee-logo img[src*="vici"]{max-height:26px}
.marquee-logo img[src*="dinastiahub"]{max-height:29px}
.marquee-logo img[src*="colonial"]{max-height:30px}
.marquee-logo img[src*="gianegiovani"]{max-height:34px}
.marquee-logo img[src*="cbeventos"]{max-height:33px}
.marquee-dot{font-size:.5rem;color:var(--slate-2);opacity:.4;flex-shrink:0;pointer-events:none}
@media(max-width:700px){.marquee{gap:2.2rem}.marquee-logo{height:36px;width:104px}.marquee-logo img{max-width:96px}.marquee-section:hover .marquee-logo img{opacity:.55}}
/* SECTION HEADING */
.s-head{max-width:760px;margin-bottom:4rem}
.s-head.center{margin-left:auto;margin-right:auto;text-align:center}
.s-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(1.95rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.032em;color:var(--ink);margin-bottom:1rem;display:flex;flex-direction:column;gap:.05em}
.s-title .ln{display:block}
.s-title .grad-text{font-family:'Space Grotesk',sans-serif;font-weight:800;letter-spacing:-.025em}
.on-grad .s-title{color:#fff}
.on-grad .s-title .grad-text{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.78) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.s-desc{font-size:1.15rem;color:var(--slate);line-height:1.65;max-width:600px;font-weight:400}
.on-grad .s-desc{color:rgba(255,255,255,.94);text-shadow:0 1px 8px rgba(0,0,0,.30)}
.s-head.center .s-desc{margin-left:auto;margin-right:auto}
/* MANIFESTO gradient */
.manifesto-strip{padding:7rem 2rem;text-align:center;background:var(--grad);color:#fff;position:relative;overflow:hidden}
.manifesto-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 25% 0%,rgba(255,255,255,.20),transparent 60%),radial-gradient(ellipse 40% 50% at 90% 100%,rgba(0,0,0,.14),transparent 60%);pointer-events:none}
.manifesto-h{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.18;letter-spacing:-.03em;max-width:840px;margin:0 auto;position:relative;z-index:2;color:#fff}
.manifesto-h .ital{font-family:'Space Grotesk',sans-serif;font-weight:800;letter-spacing:-.025em}
.manifesto-h .underline-w{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.75) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.manifesto-glow{position:absolute;top:calc(50% - min(280px,40vw));left:50%;width:min(560px,80vw);height:min(560px,80vw);margin-left:calc(min(560px,80vw) / -2);background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 62%);border-radius:50%;z-index:1;pointer-events:none}
@media(max-width:700px){.manifesto-strip{padding:5rem 1.25rem}}
/* COMPARE */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:800px){.compare-grid{grid-template-columns:1fr}}
.compare-col{border-radius:var(--r-lg);padding:2.4rem 2rem;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.compare-col:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(5,11,20,.06)}
.compare-col.before{background:var(--bg-soft)}
.compare-col.after{background:#fff;box-shadow:var(--s-md)}
.compare-col.after::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.compare-tag{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);font-weight:600;margin-bottom:1.2rem;display:block}
.compare-col.after .compare-tag{color:var(--pink)}
.compare-col h3{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.025em;color:var(--ink);margin-bottom:1.6rem;line-height:1.15}
.compare-col .point{display:flex;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--line);align-items:flex-start}
.compare-col .point:last-child{border-bottom:none}
.compare-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.compare-col.before .compare-ico{background:rgba(5,11,20,.06)}
.compare-col.before .compare-ico svg{stroke:var(--slate)}
.compare-col.after .compare-ico{background:var(--grad);box-shadow:var(--s-grad)}
.compare-col.after .compare-ico svg{stroke:#fff}
.compare-ico svg{width:12px;height:12px;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.compare-col .point-text{font-size:1.04rem;color:var(--ink);line-height:1.55;font-weight:500}
.compare-col.before .point-text{color:var(--slate)}
.compare-col .point strong{font-weight:700}
/* PRODUCT */
.product-section{padding:7rem 2rem;background:var(--bg-soft);position:relative;overflow:hidden}
@media(max-width:700px){.product-section{padding:4.5rem 1.25rem}}
.product-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:center}
@media(max-width:960px){.product-grid{grid-template-columns:1fr;gap:3rem}}
.product-features{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.feat{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--s-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.feat:hover{transform:translateX(4px);box-shadow:var(--s-sm);border-color:rgba(252,36,129,.22)}
.feat-ico{width:42px;height:42px;border-radius:10px;background:var(--bg-soft-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.feat-ico::before{content:'';position:absolute;inset:-8px;background:radial-gradient(circle,rgba(252,36,129,.14),transparent 70%);border-radius:50%;filter:blur(6px);z-index:-1}
.feat-ico svg{width:20px;height:20px;stroke:url(#g1);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feat-text h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink);margin-bottom:.3rem;letter-spacing:-.015em}
.feat-text p{font-size:.98rem;color:var(--slate);line-height:1.55}
.product-mockup{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
.product-img-ph{aspect-ratio:4/3;width:100%;max-width:540px;border-radius:var(--r-lg);border:1.5px dashed var(--line-2);background:linear-gradient(135deg,rgba(252,36,129,.10),rgba(254,123,43,.10)),repeating-linear-gradient(45deg,transparent 0,transparent 12px,rgba(5,11,20,.02) 12px,rgba(5,11,20,.02) 13px);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;text-align:center;color:var(--slate)}
.product-img-ph::before{content:'';position:absolute;top:8px;left:8px;width:14px;height:14px;border-top:1.5px solid var(--pink);border-left:1.5px solid var(--pink);border-radius:2px 0 0 0}
.product-img-ph::after{content:'';position:absolute;bottom:8px;right:8px;width:14px;height:14px;border-bottom:1.5px solid var(--orange);border-right:1.5px solid var(--orange);border-radius:0 0 2px 0}
/* CASES */
.cases-section{overflow:hidden}
.cases-carousel{position:relative;margin:0 -2rem;padding:1rem 2rem 2rem;overflow:hidden;user-select:none;cursor:grab;touch-action:pan-y}
.cases-carousel:active{cursor:grabbing}
.cases-carousel::before,.cases-carousel::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:3;pointer-events:none}
.cases-carousel::before{left:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(255,255,255,0) 100%)}
.cases-carousel::after{right:0;background:linear-gradient(-90deg,var(--bg) 0%,rgba(255,255,255,0) 100%)}
.cases-track{display:flex;align-items:flex-start;gap:1.4rem;width:max-content;will-change:transform;user-select:none}
/* Cards overlay (estilo componente drag-cases-carousel): mídia preenche o card, texto sobreposto no rodapé */
.case-card{flex:0 0 320px;aspect-ratio:4/5;background:#0A0A0A;border:1px solid rgba(252,36,129,.15);border-radius:var(--r-lg);padding:0;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;display:block;overflow:hidden}
@media(max-width:960px){.case-card{flex:0 0 290px}}
@media(max-width:700px){.case-card{flex:0 0 260px}.cases-carousel{margin:0 -1.25rem;padding:1rem 1.25rem 2rem}}
@media(max-width:380px){.case-card{flex:0 0 230px}}
.case-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--s-md);border-color:rgba(252,36,129,.4)}
.case-card-img{position:absolute;inset:0;width:100%;height:100%;background:#0A0A0A;border:none;display:block;padding:0;overflow:hidden}
.case-card-img>video,.case-card-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none;filter:contrast(1.04) saturate(1.06)}
/* Overlay de gradiente escuro no rodapé (.ov do componente) */
.case-card-img::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 42%,rgba(7,8,10,.55) 70%,rgba(7,8,10,.95) 100%)}
/* Fotos reais nos frames de imagem (assets/fotos) */
.event-img-frame>img.frame-photo,.product-image-frame>img.frame-photo{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover;object-position:center;transform-origin:center;z-index:0}
.event-img-frame::before,.event-img-frame::after,.product-image-frame::before,.product-image-frame::after{z-index:2}
.hero-poster-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;z-index:0}
.hero-poster-img::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,11,20,0) 0%,rgba(5,11,20,0) 42%,rgba(5,11,20,.40) 58%,rgba(5,11,20,.80) 80%,rgba(5,11,20,.96) 94%,rgba(5,11,20,.98) 100%),radial-gradient(ellipse 130% 42% at 50% 104%,rgba(252,36,129,.20),transparent 62%)}
/* Taller poster viewports (tablet ~768): the bottom-anchored content rises
into the brighter mid-photo, so pull the scrim's dark band up to keep the
eyebrow + lead legible without dulling the phone (≤560) framing. */
@media(min-width:600px) and (max-width:960px){
.hero-poster-img::after{background:linear-gradient(180deg,rgba(5,11,20,0) 0%,rgba(5,11,20,0) 30%,rgba(5,11,20,.42) 50%,rgba(5,11,20,.82) 76%,rgba(5,11,20,.96) 92%,rgba(5,11,20,.98) 100%),radial-gradient(ellipse 130% 42% at 50% 104%,rgba(252,36,129,.20),transparent 62%)}
}
.hero-poster-img .hero-poster-shimmer,.hero-poster-img .hero-poster-grain{z-index:2}
.hero-poster-content .hero-poster-title,.hero-poster-content .hero-poster-lead,.hero-poster-content .hero-poster-eyebrow{text-shadow:0 1px 18px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
/* Texto sobreposto no rodapé-esquerdo da mídia (.ct do componente) */
.case-card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.25rem 1.2rem;display:flex;flex-direction:column;align-items:flex-start}
.case-card-body>*{position:relative;z-index:1}
.case-loc{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem;color:rgba(255,255,255,.95);text-shadow:0 1px 8px rgba(0,0,0,.55)}
.case-card h3{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.32rem;letter-spacing:-.02em;color:#fff;margin-bottom:.35rem;line-height:1.05}
.case-card p{font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.48;margin-bottom:0}
.case-metric{padding-top:1.4rem;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between}
.case-metric-val{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.6rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.025em;line-height:1}
.case-metric-lbl{font-family:'JetBrains Mono',monospace;font-size:.76rem;text-transform:uppercase;color:var(--slate);letter-spacing:.05em;font-weight:500}
.quotes-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3rem}
@media(max-width:800px){.quotes-grid{grid-template-columns:1fr}}
.quote{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem 2rem 1.6rem;box-shadow:var(--s-sm);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.quote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.quote.q2::before{background:linear-gradient(135deg,#FE7B2B,#FC2481)}
.quote::after{content:'';position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.quote:hover{transform:translateY(-3px);box-shadow:var(--s-md);border-color:rgba(252,36,129,.18)}
.quote:hover::after{opacity:1}
.quote-mark{position:absolute;top:.5rem;right:1.1rem;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:4.5rem;line-height:1;color:var(--pink);opacity:.10;pointer-events:none;user-select:none}
.quote blockquote{position:relative;z-index:1}
.quote p{font-size:1.12rem;color:var(--ink);line-height:1.55;margin-bottom:1.3rem;font-weight:500;letter-spacing:-.01em}
.quote-foot{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem}
.quote-avatar{position:relative;width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.quote-avatar-ring{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,#FC2481,#FE7B2B,#FC2481);padding:2px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);animation:avatarSpin 18s linear infinite}
.quote-avatar-mono{position:relative;width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;color:#fff;letter-spacing:-.02em;box-shadow:0 4px 12px rgba(252,36,129,.28)}
.quote.q2 .quote-avatar-mono{background:linear-gradient(135deg,#FE7B2B,#FC2481)}
@keyframes avatarSpin{to{transform:rotate(360deg)}}
.quote .who{font-family:'JetBrains Mono',monospace;font-size:.78rem;text-transform:uppercase;color:var(--slate);letter-spacing:.08em;font-weight:500;line-height:1.3}
/* Reveal em stagger ao entrar viewport */
.quotes-grid .quote{opacity:0;transform:translateY(22px) scale(.98)}
.quotes-grid.vis .quote{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--qd,0ms)}
@media (prefers-reduced-motion: reduce){
.quote-avatar-ring{animation:none}
.quotes-grid .quote{opacity:1 !important;transform:none !important}
}
/* STEPS gradient */
.steps-section{position:relative;overflow:hidden}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative;z-index:2}
@media(max-width:900px){.steps-grid{grid-template-columns:1fr}}
.steps-section .step{position:relative;padding:2rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);backdrop-filter:blur(10px);transition:transform .3s var(--ease),background .3s var(--ease);overflow:hidden}
.steps-section .step::before{content:attr(data-num);position:absolute;top:.4rem;right:.8rem;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:5rem;color:rgba(255,255,255,.10);line-height:1;letter-spacing:-.05em;z-index:0;pointer-events:none}
.steps-section .step>*{position:relative;z-index:1}
.steps-section .step:hover{transform:translateY(-4px);background:rgba(255,255,255,.16)}
.steps-section .step-num{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:.8rem;opacity:.9}
.steps-section .step h3{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.025em;color:#fff;margin-bottom:.6rem;line-height:1.15}
.steps-section .step p{font-size:1.04rem;color:rgba(255,255,255,.88);line-height:1.6}
/* TIMELINE — Como funciona */
.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;z-index:2;padding-top:2rem}
@media(max-width:900px){.timeline{grid-template-columns:1fr;gap:0;padding-left:2rem}}
.timeline-line{position:absolute;top:42px;left:8.33%;right:8.33%;height:3px;background:rgba(255,255,255,.18);border-radius:2px;z-index:0;overflow:hidden}
.timeline-line-fill{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.65) 100%);border-radius:2px;transition:width 1.6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(255,255,255,.5)}
@media(max-width:900px){
.timeline-line{top:0;left:18px;right:auto;bottom:0;width:3px;height:auto}
.timeline-line-fill{width:100%;height:0;left:0;top:0;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.65) 100%);transition:height 1.6s cubic-bezier(.4,0,.2,1)}
}
.timeline-step{position:relative;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);z-index:1}
.timeline-step.vis{opacity:1;transform:none}
@media(max-width:900px){.timeline-step{text-align:left;padding-left:3rem;margin-bottom:2.4rem}.timeline-step:last-child{margin-bottom:0}}
.timeline-duration{
font-family:'JetBrains Mono',monospace;
font-size:.62rem;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(255,255,255,.7);
font-weight:600;
margin-bottom:.85rem;
padding:.32rem .7rem;
border:1px solid rgba(255,255,255,.22);
border-radius:99px;
display:inline-block;
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
transition:all .5s var(--ease);
}
.timeline-step.active .timeline-duration{
border-color:rgba(255,255,255,.5);
background:rgba(255,255,255,.18);
color:#fff;
}
.timeline-marker{
width:72px;height:72px;
border-radius:50%;
background:rgba(255,255,255,.10);
border:2px solid rgba(255,255,255,.22);
display:flex;align-items:center;justify-content:center;
margin:0 auto 1.5rem;
position:relative;
z-index:2;
backdrop-filter:blur(12px);
transition:background .5s,border-color .5s,transform .5s var(--spring),box-shadow .5s;
}
.timeline-marker svg{
width:26px;
height:26px;
stroke:rgba(255,255,255,.7);
stroke-width:1.8;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
transition:stroke .5s;
}
.timeline-step.active .timeline-marker svg{stroke:#FC2481;stroke-width:2.2}
@media(max-width:900px){.timeline-marker{position:absolute;left:-13px;top:0;margin:0;width:38px;height:38px}}
@media(max-width:900px){.timeline-duration{margin-bottom:.6rem}.timeline-marker{width:48px;height:48px}.timeline-marker svg{width:18px;height:18px}}
.timeline-step.active .timeline-marker{
background:#fff;
border-color:#fff;
box-shadow:0 0 0 8px rgba(255,255,255,.16),0 0 36px rgba(255,255,255,.42);
transform:scale(1.08);
}
.timeline-content{position:relative}
.timeline-num{
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(255,255,255,.92);
font-weight:600;
margin-bottom:.7rem;
text-shadow:0 1px 8px rgba(0,0,0,.32);
}
.timeline-content h3{
font-family:'Space Grotesk',sans-serif;
font-weight:800;
font-size:1.5rem;
letter-spacing:-.025em;
color:#fff;
margin-bottom:.7rem;
line-height:1.1;
text-shadow:0 1px 10px rgba(0,0,0,.30);
}
.timeline-content p{
font-size:1.04rem;
color:rgba(255,255,255,.94);
line-height:1.55;
max-width:300px;
margin:0 auto;
text-shadow:0 1px 8px rgba(0,0,0,.34);
}
@media(max-width:900px){.timeline-content p{margin:0;max-width:none}}
.timeline-confetti{
position:absolute;
top:-30px;left:50%;
transform:translateX(-50%);
width:280px;height:200px;
pointer-events:none;
z-index:5;
}
@media(max-width:900px){.timeline-confetti{left:0;transform:none;width:100%;top:-40px}}
/* FAQ */
.faq{margin-top:1.5rem;max-width:780px;margin-left:auto;margin-right:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:.7rem;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--s-sm);border-color:rgba(252,36,129,.18)}
.faq summary{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.12rem;letter-spacing:-.015em;color:var(--ink);cursor:pointer;list-style:none;display:flex;align-items:center;gap:1rem;padding:1.3rem 1.6rem;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:24px;height:24px;border-radius:50%;background:var(--bg-soft-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:auto;transition:transform .35s var(--spring),background .3s}
.faq summary .plus svg{width:11px;height:11px;stroke:var(--ink);stroke-width:2.6;fill:none;stroke-linecap:round}
.faq details[open] summary{color:var(--pink)}
.faq details[open] .plus{background:var(--grad);transform:rotate(45deg)}
.faq details[open] .plus svg{stroke:#fff}
.faq details p{font-size:1.05rem;color:var(--slate);padding:0 1.6rem 1.4rem 1.6rem;line-height:1.7}
/* CTA FINAL */
.cta-final{padding:8rem 2rem;text-align:center;color:#fff;position:relative;overflow:hidden;background:var(--ink)}
.cta-final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(252,36,129,.22),transparent 60%),radial-gradient(ellipse 50% 60% at 50% 100%,rgba(254,123,43,.18),transparent 60%);z-index:1}
.cta-final-inner{position:relative;z-index:3;max-width:720px;margin:0 auto}
.cta-final h2{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1.4rem;line-height:1.04;letter-spacing:-.035em}
.cta-final h2 .grad-text{font-family:'Space Grotesk',sans-serif;font-weight:800;letter-spacing:-.025em}
.cta-final p{color:rgba(255,255,255,.78);font-size:1.1rem;max-width:480px;margin:0 auto 2.4rem;line-height:1.6}
.cta-note{color:rgba(255,255,255,.6);font-size:.92rem;margin-top:1.6rem;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
@media(max-width:700px){.cta-final{padding:5rem 1.25rem 6rem}}
/* FOOTER */
footer{padding:3rem 2rem 5rem;background:var(--ink);color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.06);font-size:.92rem}
@media(max-width:960px){footer{padding-bottom:7rem}}
.foot-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr;text-align:center;gap:1.6rem}}
.foot-brand{display:flex;align-items:center;gap:1.2rem}
.foot-brand img{height:30px;filter:brightness(0) invert(1);opacity:.85}
.foot-tag{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.foot-social{display:flex;gap:.7rem;align-items:center;justify-content:flex-end}
@media(max-width:700px){.foot-social{justify-content:center}}
.foot-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .25s var(--spring),background .25s,border-color .25s}
.foot-social a:hover{background:var(--grad);border-color:transparent;transform:translateY(-2px)}
.foot-social a svg{width:16px;height:16px;fill:#fff;transition:fill .25s}
.foot-copy{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-top:1.6rem;text-align:center}
/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);filter:blur(4px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.reveal.vis{opacity:1;transform:none;filter:blur(0)}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero-left>*{opacity:0;animation:fadeUp .7s var(--ease) forwards}
.hero-left>*:nth-child(1){animation-delay:.05s}
.hero-left>*:nth-child(2){animation-delay:.12s}
.hero-left>*:nth-child(3){animation-delay:.20s}
.hero-left>*:nth-child(4){animation-delay:.28s}
.hero-left>*:nth-child(5){animation-delay:.36s}
.hero-left>*:nth-child(6){animation-delay:.44s}
.hero-visual{opacity:0;animation:fadeUp 1s .25s var(--ease) forwards}
/* ===== A11Y & POLISH (squad review) ===== */
/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300}
.skip-link:focus{left:1rem;top:1rem;background:#fff;color:var(--ink);padding:.7rem 1.1rem;border-radius:var(--r-sm);box-shadow:var(--s-md);font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.9rem;text-decoration:none}
/* Foco visível por teclado (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.access-tab:focus-visible,.phone-tabbar-item:focus-visible,.btn:focus-visible,.nav-cta:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.bottom-nav-item:focus-visible,.on-grad a:focus-visible,.foot-social a:focus-visible{outline:2px solid #fff;outline-offset:2px}
section:focus{outline:none}
/* Scrollbar (Firefox) — harmoniza com o webkit já estilizado */
html{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* Fallback quando backdrop-filter não é suportado */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav-wrap{background:rgba(255,255,255,.97)}
.nav-wrap.scrolled{background:#fff}
}
/* Feedback de :active no CTA pulsante e na nav-cta (consistência com .btn-grad) */
.btn-cta-pulse:active{transform:translateY(-1px) scale(.985)}
.nav-cta:active{transform:translateY(0) scale(.98)}
/* Tabs de acesso: 3 colunas já a partir do tablet (evita labels espremidos) */
@media(max-width:960px){.access-tabs{grid-template-columns:repeat(3,1fr)}}
/* CURSOR PERSONALIZADO — dot + ring (apenas ponteiro fino) */
/* Sem mix-blend em elemento fixed (trava o scroll em alguns browsers) — branco + contorno escuro p/ contraste no fundo claro */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:9998;opacity:0;transition:opacity .3s var(--ease)}
.cur-ready .cur-dot,.cur-ready .cur-ring{opacity:1}
.cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#fff;box-shadow:0 0 0 1.5px rgba(5,11,20,.45),0 1px 6px rgba(5,11,20,.25);will-change:transform}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(5,11,20,.30),inset 0 0 0 1px rgba(5,11,20,.16);will-change:transform;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),opacity .3s var(--ease)}
.cur-ring.hover{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:#fff;background:rgba(255,255,255,.06)}
.cur-ring.drag{width:46px;height:46px;margin:-23px 0 0 -23px;background:rgba(255,255,255,.14);border-color:#fff}
@media (pointer:fine){
body.cur-on{cursor:none}
body.cur-on a,body.cur-on button,body.cur-on .case-card,body.cur-on .marquee-logo,body.cur-on .nbd-tab,body.cur-on summary,body.cur-on .access-tab,body.cur-on .phone-tabbar-item{cursor:none}
/* inputs/textareas mantêm cursor nativo */
body.cur-on input,body.cur-on textarea,body.cur-on select{cursor:auto}
}
@media (pointer:coarse){.cur-dot,.cur-ring{display:none}}
/* Redução de movimento (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
html{scroll-behavior:auto !important}
.reveal,.reveal-soft,.reveal-stagger > *{opacity:1 !important;transform:none !important;filter:none !important}
.reveal:not(.vis) .s-title{filter:none !important}
.aurora-blob{animation:none !important;transform:none !important}
/* Cursor custom desligado sob reduced-motion: restaura ponteiro nativo, não esconde */
body.cur-on,
body.cur-on a,body.cur-on button,body.cur-on .case-card,body.cur-on .marquee-logo,
body.cur-on .nbd-tab,body.cur-on summary,body.cur-on .access-tab,body.cur-on .phone-tabbar-item{cursor:auto !important}
.cur-dot,.cur-ring{display:none !important}
}
/* ===== Design refinements (review pass: hints, finger-tap affordances,
clickable notebook sidebar, hero scrim/aurora + text-position hooks) ===== */
/* Hint único centralizado acima dos dois mockups */.showcase-hint{display:flex;align-items:center;justify-content:center;gap:.7rem;width:max-content;max-width:92%;margin:0 auto 2.6rem;padding:.55rem 1.05rem .55rem .6rem;background:linear-gradient(180deg,rgba(252,36,129,.06),rgba(252,36,129,.03));border:1px solid rgba(252,36,129,.18);border-radius:var(--r-pill);box-shadow:0 6px 22px rgba(252,36,129,.07);text-align:left}.showcase-hint-dot{position:relative;width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--grad);box-shadow:0 4px 14px rgba(252,36,129,.32)}.showcase-hint-dot svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1;animation:fingerTap 2.4s ease-in-out infinite}.showcase-hint-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--pink);animation:hintRing 2.4s ease-out infinite}@keyframes hintRing{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.8);opacity:0}}.showcase-hint-txt{display:flex;flex-direction:column;line-height:1.25;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-size:.78rem;color:var(--slate);font-weight:500}.showcase-hint-txt strong{color:var(--ink);font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.84rem;letter-spacing:-.01em}@media(max-width:560px){.showcase-hint{gap:.55rem;padding:.5rem .85rem .5rem .55rem}.showcase-hint-txt{font-size:.72rem}.showcase-hint-txt strong{font-size:.78rem}}@media(prefers-reduced-motion:reduce){.showcase-hint-dot svg,.showcase-hint-ring{animation:none}}/* Affordance: convida a clicar nos perfis de acesso */.access-hint{display:flex;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.02em;color:var(--slate);margin:-.1rem 0 .95rem;line-height:1.4}.access-hint svg{width:16px;height:16px;stroke:var(--pink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;animation:fingerTap 2.3s ease-in-out infinite}/* Hint de navegacao no painel notebook (espelha o do celular) */.nbd-nav-hint{display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);background:rgba(252,36,129,.07);border:1px solid rgba(252,36,129,.16);border-radius:var(--r-pill);padding:.18rem .55rem;margin-bottom:.4rem;width:max-content}.nbd-nav-hint svg{width:11px;height:11px;stroke:var(--pink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;animation:fingerTap 2.4s ease-in-out infinite}.nbd-tab.active::after{animation:nbdActiveGlow 2.6s ease-in-out infinite}@keyframes nbdActiveGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 4px rgba(252,36,129,.55))}}@media(max-width:560px){.nbd-nav-hint{font-size:.46rem}}/* Finger tap no hint do celular */.hint-pulse-dot{animation:fingerTap 2.4s ease-in-out infinite}@keyframes fingerTap{0%,16%,100%{transform:translateY(0) scale(1)}8%{transform:translateY(3px) scale(.9)}}@media(prefers-reduced-motion:reduce){.hint-pulse-dot,.access-hint svg,.nbd-nav-hint svg,.nbd-tab.active::after{animation:none}}/* Sidebar do notebook clicavel */.nbd-side-i{border:0;background:transparent;padding:0;cursor:pointer;font:inherit;transition:background .2s,color .2s,transform .2s var(--spring)}.nbd-side-i:hover{background:var(--bg-soft-2);color:var(--ink);transform:scale(1.12)}.nbd-side-i.on:hover{color:#fff;background:var(--grad)}.nbd-side-i:focus-visible{outline:2px solid var(--pink);outline-offset:1px}.nbd-side-gear svg{transition:transform .5s var(--ease)}.nbd-side-gear.spin svg{transform:scale(1.25)}/* Scrim da hero controlavel via Tweaks */.hero-bgphoto::after{opacity:var(--tt-scrim,1)}.hero-poster-img::after{opacity:var(--tt-scrim,1)}.hero-aurora{opacity:var(--tt-aurora,.2)}.nbd-brand-logo{height:13px;width:auto;display:block}/* Posição do texto da hero por dispositivo (Tweaks) — desktop move .hero-left; mobile/tablet movem o conteúdo do poster */.hero-left{translate:calc(var(--ttxd,0)*1px) calc(var(--ttyd,0)*1px)}@media(max-width:960px){.hero-poster-content{translate:calc(var(--ttxt,0)*1px) calc(var(--ttyt,0)*1px)}}@media(max-width:560px){.hero-poster-content{translate:calc(var(--ttxm,0)*1px) calc(var(--ttym,0)*1px)}}/* Correção: o padding inline (edição direta) do .hero vale só no desktop; no poster mobile quebra o full-bleed */@media(max-width:960px){.hero{padding:0 !important}}/* Poster acompanha a paleta dos Tweaks */.hero-poster-title .ln-3{background:var(--grad);-webkit-background-clip:text;background-clip:text}.hero-poster-eyebrow .dot{background:var(--pink);box-shadow:0 0 8px var(--pink)}/* Tablet (561–960): poster mais generoso — lead maior, CTAs lado a lado */@media(min-width:561px) and (max-width:960px){.hero-poster-lead{max-width:520px;font-size:1.12rem}.hero-poster-title{font-size:clamp(2.6rem,6vw,3.9rem)}.hero-poster-ctas{flex-direction:row;max-width:560px;justify-content:center}.hero-poster-ctas .btn{width:auto;flex:0 1 auto;padding:1.1rem 2rem}.hero-poster-content{padding-bottom:calc(8rem + env(safe-area-inset-bottom));gap:1.3rem}}/* Correção: dimensões inline (edição direta) do CTA final valem só no desktop */@media(max-width:960px){.cta-final-inner{width:auto !important;height:auto !important;padding:0 !important}.cta-final h2{width:auto !important;height:auto !important;font-size:clamp(1.8rem,6.5vw,3rem) !important;letter-spacing:-.035em !important;line-height:1.08 !important}}/* Botão do CTA final segue o padrão mobile dos CTAs da hero: full-width, centrado, com quebra */@media(max-width:560px){.cta-final .btn-cta-pulse{white-space:normal;text-align:center;width:100%;max-width:340px;padding:1.05rem 1.3rem;font-size:.95rem;justify-content:center;line-height:1.3}}
/* ════════════════════════════════════════════════════════════════
PREMIUM REFINEMENT LAYER — TicketTop (UX/UI polish pass)
Additive & reduced-motion-safe. The approved design renders
underneath; this layer only elevates the finish:
smooth-scroll runtime · spotlight cards · living gradient ·
blueprint texture · nav muting · FAQ motion · type balance ·
hero trust row · accessible cases controls · footer seam.
════════════════════════════════════════════════════════════════ */
/* --- Lenis smooth-scroll runtime (vendored: js/lib/lenis.min.js) --- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
/* --- Anchor targets clear the sticky nav (with or without Lenis) --- */
#conteudo,#topo,#produto,#cases,#como,#faq,#marqueeSection{scroll-margin-top:90px}
/* --- Typographic finish: balanced headings, tidy body rags --- */
h1,h2,h3,h4,.s-title,.hero h1,.hero-poster-title,.manifesto-h,.cta-final h2,
.timeline-content h3,.case-card h3,.compare-col h3,.feat-text h4{text-wrap:balance}
.s-desc,.hero-lead,.hero-poster-lead,.feat-text p,.compare-col .point-text,
.faq details p,.timeline-content p,.case-card p,.cta-final p{text-wrap:pretty}
/* --- Nav links: muted "fog" tone that brightens on hover (Linear-style) --- */
.nav-links a:not(.nav-cta){color:var(--slate);font-weight:500}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
/* --- Living brand gradient on the hero headline accent (slow, subtle sheen) --- */
@media (prefers-reduced-motion:no-preference){
.hero h1 .ln-3,.hero-poster-title .ln-3{
background-image:linear-gradient(100deg,#FC2481 0%,#FE7B2B 38%,#FFAE6B 50%,#FE7B2B 62%,#FC2481 100%);
background-size:220% 100%;
-webkit-background-clip:text;background-clip:text;
animation:ttGradSheen 7.5s ease-in-out infinite;
}
@keyframes ttGradSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
}
/* --- Spotlight cards: cursor-tracked brand glow (fine pointer only) --- */
.card-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
background:radial-gradient(340px circle at var(--mx,50%) var(--my,-20%),rgba(252,36,129,.13),rgba(254,123,43,.06) 42%,transparent 64%);
transition:opacity .4s var(--ease)}
.has-glow{position:relative}
.has-glow>*:not(.card-glow){position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
.has-glow:hover .card-glow{opacity:1}
.has-glow.feat:hover,.has-glow.product-stack-card:hover{border-color:rgba(252,36,129,.32)}
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.card-glow{display:none}}
/* --- Blueprint grid texture on colored/dark bands (premium tech wallpaper) --- */
.manifesto-strip::after,.steps-section::after,.cta-final::after{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:42px 42px;
-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 0%,#000 28%,transparent 78%);
mask-image:radial-gradient(ellipse 85% 75% at 50% 0%,#000 28%,transparent 78%);
}
.cta-final::after{z-index:2}
/* --- Hero trust row: social proof in the first viewport, beside the CTA --- */
.hero-trust{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-top:1.7rem}
.hero-trust-item{display:inline-flex;align-items:center;gap:.42rem;font-family:'JetBrains Mono',monospace;
font-size:.74rem;letter-spacing:.03em;color:rgba(255,255,255,.84);font-weight:500;
text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hero-trust-item strong{color:#fff;font-weight:700}
.hero-trust-item svg{width:14px;height:14px;stroke:#FE7B2B;stroke-width:2.4;fill:none;
stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(254,123,43,.5))}
.hero-trust-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.34);flex-shrink:0}
@media(max-width:560px){.hero-trust{gap:.6rem}.hero-trust-item{font-size:.68rem}.hero-trust-sep{display:none}}
/* --- FAQ: native smooth accordion (Chromium slides; others snap, fully usable) --- */
:root{interpolate-size:allow-keywords}
.faq details::details-content{
block-size:0;overflow:hidden;opacity:0;
transition:block-size .42s var(--ease),opacity .3s var(--ease),content-visibility .42s allow-discrete;
}
.faq details[open]::details-content{block-size:auto;opacity:1}
/* --- Accessible cases carousel controls --- */
.cases-controls-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
margin:-.4rem 0 1.5rem;flex-wrap:wrap}
.cases-hint{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--slate);font-weight:500;display:inline-flex;align-items:center;gap:.5rem}
.cases-hint svg{width:15px;height:15px;stroke:var(--pink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cases-controls{display:flex;align-items:center;gap:.6rem}
.cases-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink);
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--s-xs);
transition:transform .25s var(--spring),box-shadow .25s,border-color .25s,background .25s,color .25s}
.cases-btn:hover{transform:translateY(-2px);box-shadow:var(--s-sm);border-color:transparent;background:var(--grad);color:#fff}
.cases-btn:active{transform:translateY(0) scale(.94)}
.cases-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.cases-btn{width:38px;height:38px}.cases-controls-row{margin-bottom:1.1rem}}
/* --- Footer seam: faint pink→orange hairline closes the gradient story --- */
footer{position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(252,36,129,.55) 28%,rgba(254,123,43,.55) 72%,transparent)}
/* ── Animated border-beam: a light traveling the highlighted card edge ──
One restrained accent (per research: border-beam on 1 hero card max). */
@property --tt-beam{syntax:'';inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
.product-stack-card.highlight{position:relative}
.product-stack-card.highlight::after{
content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
background:conic-gradient(from var(--tt-beam),transparent 0 68%,#FC2481 84%,#FFAE6B 92%,#FE7B2B 98%,transparent 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
animation:ttBeam 4.2s linear infinite;
}
@keyframes ttBeam{to{--tt-beam:360deg}}
}
/* ── Magnetic buttons: the JS writes the cursor pull into --mx/--my; we
compose that offset with the existing hover-lift and :active press-scale
so all three motions stack instead of clobbering each other. Defaults to
0,0 so non-magnetic states (touch, reduced-motion) are unaffected. The
--spring transition cushions the pull into a springy lean. ── */
.btn-grad,.btn-cta-pulse,.nav-cta{will-change:transform}
@media (hover:hover) and (pointer:fine){
.btn-grad,.btn-cta-pulse,.nav-cta{transform:translate(var(--mx,0),var(--my,0))}
/* hover = magnetic offset + lift (+ scale on .btn-grad) */
.btn-grad:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 1px)) scale(1.015)}
.btn-cta-pulse:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 3px))}
.nav-cta:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 2px))}
/* active = magnetic offset + press-scale (overrides hover while pressed) */
.btn-grad:active{transform:translate(var(--mx,0),var(--my,0)) scale(.98)}
.btn-cta-pulse:active{transform:translate(var(--mx,0),calc(var(--my,0) - 1px)) scale(.985)}
.nav-cta:active{transform:translate(var(--mx,0),var(--my,0)) scale(.98)}
}
@media (prefers-reduced-motion:reduce){
.btn-grad,.btn-cta-pulse,.nav-cta{transform:none}
}
/* ── FIX (poster ln-3 reveal): on the mobile/tablet poster, "Seu dinheiro."
needs the entry reveal (posterTextEnter) AND keeps the brand sheen
(ttGradSheen). The earlier sheen rule used the `animation` shorthand and
overwrote the reveal, leaving the line stuck at opacity:0 / translateY(20px)
on every poster width. Higher-specificity selector + both animations so it
wins over the sheen rule regardless of source order. Reveal first, sheen
starts after it lands. ── */
@media (prefers-reduced-motion:no-preference) and (max-width:960px){
.hero-poster .hero-poster-title .ln-3{
animation:posterTextEnter 1.1s cubic-bezier(.22,1,.36,1) .9s forwards,
ttGradSheen 7.5s ease-in-out 2.1s infinite;
}
}
/* ============================================================
REFINO — ajustes solicitados via comentários do preview Vercel
(branch refino-identidade-tipografia). Bloco aditivo: vem por
último, portanto vence em igualdade de especificidade.
============================================================ */
/* [6/7] Mobile: remover o notebook (PC) — só o celular permanece.
Também elimina o overflow/“bug visual” do nb-mock no topo. */
@media(max-width:960px){
.device-stage.nb-stage{display:none !important}
.showcase-grid{grid-template-columns:1fr;justify-items:center}
.showcase-hint{display:none} /* falava em “dois mockups” */
}
/* [5] KPIs do hero no mobile: afastar os rótulos da margem da tela. */
@media(max-width:700px){
.hero-kpis{padding-left:1.6rem;padding-right:1.6rem;column-gap:1.5rem}
.hero-kpis>div{padding-right:.35rem}
}
/* [8] Hero poster (mobile): subir um pouco a mulher no enquadramento. */
.hero-poster-photo{object-position:50% 30%}
@media(prefers-reduced-motion:no-preference){
.hero-poster-photo{transform-origin:50% 30%}
}
/* [9] Hero poster (mobile): blocar melhor o texto e subir o conjunto. */
@media(max-width:960px){
.hero-poster-content{
gap:.8rem;
padding-bottom:calc(8.5rem + env(safe-area-inset-bottom));
}
.hero-poster-title{line-height:1.0}
}
/* [3/4] Compare: títulos e tags maiores, subtextos com mais peso. */
.compare-col h3{font-size:1.78rem}
.compare-tag{font-size:.84rem;font-weight:700}
.compare-col.after .compare-tag{color:var(--pink)}
.compare-col .point-text{font-size:1.08rem;font-weight:600}
@media(max-width:560px){.compare-col h3{font-size:1.55rem}}
/* [17/18] Marquee: logos com mais presença (ref. escala horizontal). */
.marquee-logo{width:152px;height:46px}
.marquee-logo img{max-width:140px;max-height:36px}
.marquee-logo img[src*="gianegiovani"]{max-height:46px}
.marquee-logo img[src*="dinastiahub"]{max-height:39px}
.marquee-logo img[src*="cbeventos"]{max-height:41px}
.marquee-logo img[src*="colonial"]{max-height:38px}
@media(max-width:700px){
.marquee-logo{width:124px;height:40px}
.marquee-logo img{max-width:112px}
.marquee-logo img[src*="gianegiovani"]{max-height:40px}
}
/* [10/11] Dashboards (notebook + celular) mais fluidos: sombras suaves,
raios maiores e micro-hover nos cards. */
.nbd-kpi,.nbd-card{box-shadow:0 1px 2px rgba(5,11,20,.04),0 8px 20px -12px rgba(5,11,20,.16);border-radius:12px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nbd-card:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(5,11,20,.05),0 16px 32px -16px rgba(252,36,129,.22)}
.nbd-kpi.dark{box-shadow:0 10px 24px -12px rgba(252,36,129,.45)}
.phone-feed,.phone-chart,.phone-stat-hero,.phone-stat,.phone-stock-item,.phone-rank,.phone-orders .phone-order{box-shadow:0 4px 14px -8px rgba(5,11,20,.16)}
/* [23] Timeline: “barrinha” de progresso mais sofisticada. */
.timeline-line{height:4px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.timeline-line-fill{background:linear-gradient(90deg,#fff,rgba(255,255,255,.82));box-shadow:0 0 18px rgba(255,255,255,.6),0 0 5px rgba(255,255,255,.9)}
@media(max-width:900px){.timeline-line{width:4px;height:auto}}
/* [2] Steps (bg-grad): grade sutil em parallax sobre o degradê. */
.steps-section{position:relative}
.steps-section .timeline-grid{
position:absolute;inset:-12% 0;z-index:0;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 40%,#000 28%,transparent 76%);
mask-image:radial-gradient(ellipse 78% 70% at 50% 40%,#000 28%,transparent 76%);
opacity:.65;will-change:transform;
}
.steps-section .container{position:relative;z-index:2}
/* [12/13/14] Ícones interativos maiores + magnéticos + pulso “clicável”. */
.phone-tabbar-item svg{width:16px !important;height:16px !important}
.phone-tabbar-item-lbl{font-size:.46rem !important}
.nbd-side-i{width:24px;height:24px;border-radius:7px}
.nbd-side-i svg{width:15px;height:15px}
.access-tab-circle{width:38px;height:38px}
.access-tab-circle svg{width:18px;height:18px}
@media(max-width:480px){.access-tab-circle{width:34px;height:34px}}
/* magnético: deslocamento suave escrito por JS em --mx/--my */
@media (hover:hover) and (pointer:fine){
.phone-tabbar-item{transform:translate(var(--mx,0),var(--my,0))}
.phone-tabbar-item:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 1px))}
.nbd-side-i{transform:translate(var(--mx,0),var(--my,0))}
.access-tab{transform:translate(var(--mx,0),var(--my,0))}
}
/* pulso até o primeiro toque (mostra que é clicável) */
@keyframes ttClickPulse{
0%,100%{box-shadow:0 0 0 0 rgba(252,36,129,0)}
50%{box-shadow:0 0 0 5px rgba(252,36,129,.16)}
}
@media (prefers-reduced-motion:no-preference){
.tt-pulse-hint{animation:ttClickPulse 2.2s ease-in-out infinite}
}
/* [19] Cases: zoom magnético respondendo ao cursor. */
.case-card-img>video,.case-card-img>img{transition:transform .45s var(--ease); will-change:transform;}
@media (hover:hover) and (pointer:fine){
.case-card:hover .case-card-img>video,.case-card:hover .case-card-img>img{
transform:scale(1.12) translate(var(--mx,0),var(--my,0));
}
}
/* [25/26] Fotos emolduradas: zoom leve magnético ao cursor. */
.event-img-frame,.product-image-frame{transition:transform .45s var(--ease)}
.event-img-frame>img.frame-photo,.product-image-frame>img.frame-photo{transition:transform .45s var(--ease); will-change:transform;}
@media (hover:hover) and (pointer:fine){
.event-img-frame:hover,.product-image-frame:hover{transform:scale(1.035)}
.event-img-frame:hover>img.frame-photo,.product-image-frame:hover>img.frame-photo{
transform:scale(1.08) translate(var(--mx,0),var(--my,0));
}
}
/* [20] CTA final: grade + luz magenta que segue o mouse. */
.cta-final{--gx:50%;--gy:28%}
.cta-final .cta-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:48px 48px;
-webkit-mask-image:radial-gradient(circle 300px at var(--gx) var(--gy),#000,transparent 72%);
mask-image:radial-gradient(circle 300px at var(--gx) var(--gy),#000,transparent 72%);
}
.cta-final .cta-light{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
background:radial-gradient(circle 340px at var(--gx) var(--gy),rgba(252,36,129,.32),rgba(254,123,43,.10) 42%,transparent 70%);
}
@media (hover:hover) and (pointer:fine){
.cta-final:hover .cta-light{opacity:1}
}
/* [1] CTA final h2: evita quebra ruim no ponto final / órfãos no mobile estreito. */
.cta-final h2{text-wrap:pretty}
@media(max-width:560px){.cta-final h2{font-size:1.9rem;letter-spacing:-.02em;line-height:1.08}}
/* [15/16] Molduras de dispositivo mais realistas — só o frame; o conteúdo
interativo (abas/telas) permanece intacto dentro da tela. */
/* iPhone: aro titânio, brilho de borda, botões laterais, ilha dinâmica c/ câmera */
.phone-mock{
background:linear-gradient(155deg,#394452 0%,#161f2a 24%,#0a121b 62%,#060c14 100%);
box-shadow:0 44px 84px -22px rgba(5,11,20,.5),0 14px 26px rgba(252,36,129,.06),
inset 0 0 0 1.5px rgba(255,255,255,.10),inset 0 2px 1px rgba(255,255,255,.20),inset 0 -3px 7px rgba(0,0,0,.55);
}
.phone-mock-screen{box-shadow:inset 0 0 0 2px #05080d}
.phone-mock-notch::after{content:'';position:absolute;right:13px;top:50%;transform:translateY(-50%);
width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1c2b3a,#05080d 70%);
box-shadow:inset 0 0 0 1px rgba(120,160,200,.22)}
.phone-mock::after{content:'';position:absolute;right:-2px;top:150px;width:3px;height:62px;border-radius:0 3px 3px 0;
background:linear-gradient(180deg,#2b3a49,#0c131c);box-shadow:1px 0 2px rgba(0,0,0,.4)}
.phone-mock::before{content:'';position:absolute;left:-2px;top:118px;width:3px;height:34px;border-radius:3px 0 0 3px;
background:linear-gradient(180deg,#2b3a49,#0c131c);box-shadow:-1px 0 2px rgba(0,0,0,.4)}
@media(max-width:500px){.phone-mock::before,.phone-mock::after{top:118px}}
/* MacBook: borda de alumínio na tampa, gap preto e base em cunha */
.nb-screen{
background:linear-gradient(160deg,#222e3b 0%,#0e1822 28%,#070d14 100%);
box-shadow:0 40px 72px -22px rgba(5,11,20,.45),0 12px 24px rgba(252,36,129,.06),
inset 0 0 0 1px rgba(255,255,255,.09),inset 0 2px 1px rgba(255,255,255,.16);
}
.nb-display{box-shadow:inset 0 0 0 2px #05080d}
.nb-base{height:16px;background:linear-gradient(180deg,#2a3744 0%,#15212c 45%,#0a121b 100%);
box-shadow:0 24px 38px -10px rgba(5,11,20,.4),inset 0 1px 0 rgba(255,255,255,.18)}
.nb-base::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
width:26%;height:4px;background:linear-gradient(180deg,#0a121b,#05080d);border-radius:0 0 8px 8px}
/* [aviso] descola o "Os dois mockups são interativos" da hero (desktop) */
@media(min-width:961px){.phone-showcase{margin-top:8rem}}
/* [logos] padronização óptica do marquee — alturas convergentes (28–38px) no
lugar do range antigo 21–46px; largura-limite evita wordmarks dominarem. */
.marquee-logo{width:160px;height:64px}
.marquee-logo img{max-width:150px;max-height:34px}
.marquee-logo img[src*="richardrasmussen"]{max-height:30px;max-width:165px}
.marquee-logo img[src*="escape"]{max-height:28px}
.marquee-logo img[src*="vici"]{max-height:30px}
.marquee-logo img[src*="colonial"]{max-height:44px}
.marquee-logo img[src*="dinastiahub"]{max-height:63px;max-width:175px}
.marquee-logo img[src*="cbeventos"]{max-height:76px}
.marquee-logo img[src*="gianegiovani"]{max-height:38px}
@media(max-width:700px){.marquee-logo{width:130px;height:56px}.marquee-logo img{max-width:118px;max-height:30px}.marquee-logo img[src*="dinastiahub"]{max-height:52px;max-width:150px}.marquee-logo img[src*="colonial"]{max-height:39px}.marquee-logo img[src*="cbeventos"]{max-height:62px}}
/* [D] Top setores com gráfico donut (mesmo padrão do donut do celular) */
.nbd-setores{display:flex;align-items:center;gap:1rem;padding-top:.2rem}
.nbd-donut{position:relative;width:94px;height:94px;flex-shrink:0}
.nbd-donut svg{width:100%;height:100%;display:block}
.nbd-donut circle{transition:stroke-dashoffset .8s var(--ease)}
.nbd-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.nbd-donut-c b{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.8rem;color:var(--ink);letter-spacing:-.02em}
.nbd-donut-c span{font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-top:3px}
.nbd-donut-legend{flex:1;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.nbd-leg{display:flex;align-items:center;gap:.55rem;font-size:.74rem}
.nbd-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 3px rgba(5,11,20,.18)}
.nbd-leg-nm{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif}
.nbd-leg-vl{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink);font-size:.76rem;flex-shrink:0}
@media(max-width:560px){.nbd-donut{width:78px;height:78px}.nbd-leg{font-size:.68rem}}
/* [B] Magnético sutil em TODOS os botões (secundários incluídos). O JS escreve
--mx/--my; a transform compõe com o lift/active de cada botão. */
@media (hover:hover) and (pointer:fine){
.btn-ghost,.btn-ghost-light,.cases-btn{will-change:transform;transform:translate(var(--mx,0),var(--my,0))}
.btn-ghost:hover,.btn-ghost-light:hover,.cases-btn:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 2px))}
.btn-ghost:active,.btn-ghost-light:active,.cases-btn:active{transform:translate(var(--mx,0),var(--my,0)) scale(.97)}
}
@media (prefers-reduced-motion:reduce){.btn-ghost,.btn-ghost-light,.cases-btn{transform:none}}
/* [Como funciona] Timeline elevado: cada passo num card "glass" (estética
próxima da referência shadcn, adaptada ao stack vanilla), marcador com pop
no hover. Reveal + linha que preenche no scroll já existentes permanecem. */
.timeline-content{
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.20);
border-radius:18px;
padding:1.35rem 1.2rem 1.5rem;
margin-top:1rem;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
box-shadow:0 14px 34px -16px rgba(5,11,20,.4),inset 0 1px 0 rgba(255,255,255,.20);
transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.timeline-step:hover .timeline-content{
transform:translateY(-5px);
background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.09));
box-shadow:0 22px 46px -16px rgba(5,11,20,.5),inset 0 1px 0 rgba(255,255,255,.28);
}
.timeline-step:hover .timeline-marker{transform:scale(1.07)}
/* [timeline] linha alinhada ao CENTRO dos ícones (vertical ≤900); marcadores
opacos por cima (z-index) quebram a linha → gap entre os ícones (ref). */
.timeline-marker{z-index:2}
@media(max-width:900px){.timeline-line{left:41px}.timeline-line-fill{left:0}}
/* [KPIs] centraliza, divisórias sutis entre stats e respiro p/ a seção abaixo. */
.hero-kpis{text-align:center;margin-bottom:2rem}
.hero-kpis>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;padding:.1rem 1.2rem}
.hero-kpis>div+div::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:56%;background:rgba(5,11,20,.10)}
@media(max-width:700px){.hero-kpis{margin-bottom:1rem}.hero-kpis>div{padding:.1rem .5rem}.hero-kpis>div+div::before{display:none}}
/* [hero mobile] nova arte = show lotado (magenta/laranja escuros). Enquadra
palco + galera; o scrim inferior forte garante a legibilidade do texto. */
.hero-poster-photo{object-position:50% 44%}
@media(prefers-reduced-motion:no-preference){.hero-poster-photo{transform-origin:50% 44%}}
@media(max-width:900px){.timeline-content{margin-top:0}}
@media(prefers-reduced-motion:reduce){
.timeline-content,.timeline-step:hover .timeline-content,.timeline-step:hover .timeline-marker{transition:none;transform:none}
}