/* HOME */
.hero{min-height:100vh;min-height:100svh;display:grid;overflow:hidden;isolation:isolate}
.hero canvas.bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-in{display:flex;flex-direction:column;justify-content:flex-end;padding-top:130px;padding-bottom:clamp(40px,6vw,90px);gap:clamp(24px,3vw,44px);position:relative;min-height:100vh;min-height:100svh}
.hero-top{display:flex;justify-content:flex-end;align-items:flex-start;margin-bottom:auto}
.hero h1{max-width:12ch}
.hero-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.hero-bot .lead{color:#c8c8cc;max-width:36ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.stamp{position:relative;width:clamp(110px,11vw,170px);aspect-ratio:1;flex:none}
.stamp svg{position:absolute;inset:0;animation:spin 22s linear infinite}
.stamp text{fill:#f4f1ec;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em}
.stamp img{position:absolute;inset:34%;width:32%;height:32%;object-fit:contain}
@keyframes spin{to{transform:rotate(360deg)}}
.scrollcue{position:absolute;right:var(--pad);top:50%;writing-mode:vertical-rl;color:var(--steel-2);display:flex;gap:12px;align-items:center}
.scrollcue i{width:1px;height:70px;background:linear-gradient(var(--ember),transparent);animation:cue 2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){.scrollcue{display:none}}
.band{padding:22px 0;border-block:1px solid var(--line);background:var(--ink)}
.band .tr{color:#f4f1ec;font-weight:600;letter-spacing:-.02em}

/* manifesto */
.manifesto .wrap{text-align:center;display:grid;justify-items:center}
.manifesto .words{margin:26px auto 0;max-width:30ch;font-size:clamp(26px,3.3vw,54px);line-height:1.12;letter-spacing:-.03em;font-weight:600}
.manifesto .words .wd{opacity:.2;transition:opacity .2s}
.manifesto .words .wd.on{opacity:1}
.manifesto .words .wd.hl{color:var(--ember)}
.mf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(50px,7vw,100px);text-align:left;width:100%;max-width:1100px}
.mf-grid>div{border-top:2px solid var(--fg);padding-top:18px}
.mf-grid p{margin-top:10px;color:var(--muted);font-size:16px}
@media(max-width:800px){.mf-grid{grid-template-columns:1fr}}

/* dor */
.dor{padding-block:clamp(80px,10vw,160px);transition:background .8s var(--ease)}
.dor-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,70px)}
.dor-grid{display:grid;grid-template-columns:minmax(280px,.9fr) 1.3fr;gap:clamp(20px,3vw,50px);align-items:stretch}
.dor-list{list-style:none;display:grid;gap:8px;align-content:start}
.dor-list li button{width:100%;text-align:left;display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;font-weight:500;font-size:clamp(16px,1.25vw,20px);line-height:1.25;box-shadow:inset 0 0 0 1px var(--line);transition:background .4s var(--ease),transform .5s var(--ease),box-shadow .4s}
.dor-list li button span{font-family:var(--f-mono);font-size:11px;color:var(--steel-2);flex:none}
.dor-list li button:hover{transform:translateX(8px)}
.dor-list li button.on{background:var(--c);color:var(--ci,#0f0f11);box-shadow:none;transform:translateX(14px)}
.dor-list li button.on span{color:inherit;opacity:.7}
.dor-panel{position:relative;border-radius:32px;padding:clamp(26px,3.4vw,56px);display:flex;flex-direction:column;gap:20px;justify-content:flex-end;min-height:560px;overflow:hidden;background:var(--pbg,#222);transition:background .7s var(--ease)}
.dp-glow{position:absolute;width:70%;aspect-ratio:1;right:-15%;top:-25%;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 65%);opacity:.55;filter:blur(30px);transition:background .7s}
.dp-num{color:var(--c);position:relative}
.dp-title{position:relative;font-size:clamp(30px,3.6vw,60px);max-width:16ch}
.dp-desc{position:relative;color:#c8c8cc;max-width:50ch}
.dp-list{position:relative;list-style:none;display:grid;gap:8px}
.dp-list li{display:flex;gap:12px;align-items:flex-start}
.dp-list li::before{content:"";flex:none;width:10px;height:10px;margin-top:.5em;border-radius:50%;background:var(--c)}
.dor-panel .btn{align-self:flex-start;margin-top:10px;position:relative;background:var(--c);color:var(--ci,#0f0f11)}
.dor-panel .btn .ic{background:var(--ci,#0f0f11);color:var(--c)}
@media(max-width:900px){.dor-grid{grid-template-columns:1fr}.dor-panel{min-height:460px}}

/* serviços horizontais */
.svcs{overflow:hidden}
.svcs-pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,50px);padding-top:70px}
.svcs-head{display:grid;gap:14px}
.svcs-track{display:flex;gap:clamp(14px,1.6vw,26px);padding-inline:var(--pad);will-change:transform}
.sc{position:relative;flex:none;width:clamp(280px,29vw,430px);height:clamp(340px,50vh,520px);border-radius:28px;padding:clamp(22px,2vw,32px);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;background:var(--b);color:var(--t);transition:transform .6s var(--ease)}
.sc:hover{transform:translateY(-12px) rotate(-1deg)}
.sc .mono{position:absolute;top:24px;left:26px;opacity:.7}
.sc h3{font-size:clamp(26px,2.5vw,40px)}
.sc p{font-size:15px;opacity:.78;max-width:30ch}
.sc .mv{position:absolute;inset:0 0 38% 0;overflow:hidden}
.sc-feiras{--b:#16061f;--t:#fff}.sc-endo{--b:#ffe9d1;--t:#2b1608}.sc-redes{--b:#0b0820;--t:#fff}.sc-web{--b:#04101b;--t:#fff}
.sc-seg{--b:#020a05;--t:#d6ffe4}.sc-ia{--b:#07091f;--t:#fff}.sc-traf{--b:#0a0d05;--t:#f0ffd0}.sc-rep{--b:#1a140a;--t:#fff3d6}
/* 1 spot */
.sc-feiras .mv i{position:absolute;top:-10%;left:50%;width:46%;height:120%;background:linear-gradient(180deg,rgba(255,46,136,.7),transparent 80%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);transform-origin:50% 0;animation:sweep 4s ease-in-out infinite alternate}
.sc-feiras .mv i:nth-child(2){background:linear-gradient(180deg,rgba(122,44,255,.8),transparent 80%);animation-delay:-1.3s;animation-duration:5s}
.sc-feiras .mv i:nth-child(3){background:linear-gradient(180deg,rgba(251,95,26,.7),transparent 80%);animation-delay:-2.4s;animation-duration:3.4s}
@keyframes sweep{from{transform:translateX(-50%) rotate(-32deg)}to{transform:translateX(-50%) rotate(32deg)}}
/* 2 balões */
.sc-endo .mv i{position:absolute;bottom:-20px;width:64px;height:44px;border-radius:22px 22px 22px 4px;background:#ff7a45;animation:float 5s ease-in infinite}
.sc-endo .mv i:nth-child(1){left:14%}.sc-endo .mv i:nth-child(2){left:44%;background:#ffd166;animation-delay:-1.6s;width:84px}.sc-endo .mv i:nth-child(3){left:72%;background:#2b1608;animation-delay:-3.1s}
@keyframes float{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-260px) scale(1.05);opacity:0}}
/* 3 posts + curtidas */
.sc-redes .mv img{position:absolute;width:42%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px -12px #000;animation:fl 6s ease-in-out infinite}
.sc-redes .mv img:nth-child(1){left:8%;top:14%;transform:rotate(-8deg)}
.sc-redes .mv img:nth-child(2){left:30%;top:8%;transform:rotate(3deg);animation-delay:-2s;z-index:1}
.sc-redes .mv img:nth-child(3){left:52%;top:18%;transform:rotate(10deg);animation-delay:-4s}
.sc-redes .mv em{position:absolute;z-index:2;font-style:normal;font-weight:700;font-size:13px;padding:6px 12px;border-radius:99px;background:#25e3d0;color:#0b0820;animation:hrt 3.4s ease-in-out infinite}
.sc-redes .mv .hrt{left:12%;bottom:12%}.sc-redes .mv .cmt{right:10%;bottom:20%;background:#8f5bff;color:#fff;animation-delay:-1.7s}
@keyframes fl{50%{translate:0 -8px}}
@keyframes hrt{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* 4 código sendo escrito */
.sc-web .mv{display:grid;align-items:center;padding:0 22px}
.sc-web .code{font-family:var(--f-code);font-size:clamp(11px,.95vw,13.5px);line-height:1.75;color:#cfe8f7;white-space:nowrap}
.sc-web .code p{width:max-content;max-width:100%;clip-path:inset(0 100% 0 0)}
.sc-web .code b{font-weight:400}.sc-web .code .k{color:#7dffb3}.sc-web .code .f{color:#33c6ff}.sc-web .code .s{color:#ffd166}.sc-web .code .n{color:#ff8fb0}.sc-web .code .c{color:#5b7a8f}
.sc-web .code u{display:inline-block;width:7px;height:1.1em;background:#33c6ff;vertical-align:-.15em;margin-left:3px;animation:blk 1s steps(1) infinite;text-decoration:none}
.sc-web .code p{animation:ty 9s linear infinite}
.sc-web .code p:nth-child(1){animation-delay:0s}.sc-web .code p:nth-child(2){animation-delay:.9s}.sc-web .code p:nth-child(3){animation-delay:1.8s}.sc-web .code p:nth-child(4){animation-delay:2.7s}.sc-web .code p:nth-child(5){animation-delay:3.6s}.sc-web .code p:nth-child(6){animation-delay:4.5s}
@keyframes ty{0%{clip-path:inset(0 100% 0 0)}9%{clip-path:inset(0 0 0 0)}88%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes blk{50%{opacity:0}}
/* 5 radar */
.sc-seg .mv i{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px;border-radius:50%;background:conic-gradient(from 0deg,rgba(61,255,139,.55),transparent 28%);border:1px solid rgba(61,255,139,.4);animation:spin 3s linear infinite}
.sc-seg .mv b{position:absolute;width:9px;height:9px;border-radius:50%;background:#ff3b4d;box-shadow:0 0 16px #ff3b4d;animation:blip 3s infinite}
.sc-seg .mv b:nth-of-type(1){left:62%;top:30%}.sc-seg .mv b:nth-of-type(2){left:36%;top:64%;animation-delay:-1s}.sc-seg .mv b:nth-of-type(3){left:70%;top:62%;animation-delay:-2s}
@keyframes blip{0%,100%{opacity:0}40%{opacity:1}}
/* 6 sistema sob medida com IA */
.sc-ia .mv{display:grid;place-items:center}
.sc-ia .win{position:relative;width:76%;height:68%;border-radius:14px;background:#0e1236;box-shadow:inset 0 0 0 1px rgba(140,150,255,.35),0 20px 50px -20px #000;padding:34px 16px 14px;display:grid;gap:8px;align-content:start}
.sc-ia .win::before{content:"";position:absolute;left:12px;top:12px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:13px 0 #febc2e,26px 0 #28c840}
.sc-ia .win u{display:block;height:10px;width:55%;border-radius:5px;background:#6c7bff;text-decoration:none}
.sc-ia .win s{display:block;height:8px;border-radius:5px;background:rgba(140,150,255,.25);text-decoration:none}
.sc-ia .win s:nth-of-type(2){width:80%}.sc-ia .win s:nth-of-type(3){width:62%}
.sc-ia .win .bub{position:absolute;right:-10px;bottom:-14px;max-width:72%;padding:9px 12px;border-radius:12px 12px 2px 12px;background:#b8ff5a;color:#07091f;font-size:11.5px;font-weight:600;line-height:1.25;animation:fl 4s ease-in-out infinite}
/* 7 barras */
.sc-traf .mv i{position:absolute;bottom:0;width:11%;background:#c8ff2e;border-radius:6px 6px 0 0;animation:bar 3s ease-in-out infinite alternate;transform-origin:bottom}
.sc-traf .mv i:nth-child(1){left:12%;height:30%}.sc-traf .mv i:nth-child(2){left:28%;height:45%;animation-delay:-.4s}.sc-traf .mv i:nth-child(3){left:44%;height:60%;animation-delay:-.8s;background:#fb5f1a}.sc-traf .mv i:nth-child(4){left:60%;height:78%;animation-delay:-1.2s}.sc-traf .mv i:nth-child(5){left:76%;height:96%;animation-delay:-1.6s}
@keyframes bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
/* 8 estrelas */
.sc-rep .mv i{position:absolute;top:34%;width:13%;aspect-ratio:1;background:#e8b64a;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%);animation:star 4s ease-in-out infinite;opacity:.2}
.sc-rep .mv i:nth-child(1){left:9%}.sc-rep .mv i:nth-child(2){left:26%;animation-delay:.3s}.sc-rep .mv i:nth-child(3){left:43%;animation-delay:.6s}.sc-rep .mv i:nth-child(4){left:60%;animation-delay:.9s}.sc-rep .mv i:nth-child(5){left:77%;animation-delay:1.2s}
@keyframes star{0%,15%{opacity:.2;transform:scale(.8)}35%,80%{opacity:1;transform:scale(1.1)}100%{opacity:.2}}
.svcs-bar{margin:0 var(--pad);height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.svcs-bar i{display:block;height:100%;background:var(--ember);transform-origin:left;transform:scaleX(0)}

/* método */
.metodo .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,50px);margin-top:clamp(56px,8vw,110px)}
.steps-line{position:absolute;left:0;top:-30px;width:100%;height:60px;color:var(--ember);overflow:visible}
.st{padding-top:46px;position:relative}
.st b{font-size:clamp(70px,8vw,140px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--fg);display:block;margin-bottom:18px;transition:color .5s,-webkit-text-stroke-color .5s}
.st:hover b{color:var(--ember);-webkit-text-stroke-color:var(--ember)}
.st p{color:var(--muted);margin-top:8px}
@media(max-width:900px){.metodo .steps{grid-template-columns:1fr 1fr}.steps-line{display:none}}
@media(max-width:560px){.metodo .steps{grid-template-columns:1fr}}

/* portfólio */
.port{padding-block:clamp(80px,10vw,150px)}
.port-head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,70px)}
.pc2-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,36px)}
.pc2{position:relative;display:grid;gap:22px;padding:clamp(16px,1.6vw,24px);border-radius:30px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 18%,#17171a),#121214);box-shadow:inset 0 0 0 1px var(--line);transition:transform .6s var(--ease)}
.pc2:hover{transform:translateY(-8px)}
.browser{position:relative;border-radius:14px;overflow:hidden;background:#1b1b1f;box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(255,255,255,.1)}
.browser>i{display:block;height:28px;background:#232328;position:relative}
.browser>i::before{content:"";position:absolute;left:12px;top:10px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:13px 0 #febc2e,26px 0 #28c840}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pc2-b{display:grid;gap:10px;padding:4px 8px 8px;justify-items:start}
.pc2-b .mono{color:var(--c)}
.pc2-b p{color:#b8b8bd;max-width:46ch}
.pc2-b .tlink{color:var(--c)}
.tg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);padding:4px}
.tg button{position:relative;z-index:1;padding:8px 22px;border-radius:99px;font-weight:600;font-size:13px;color:var(--steel-2);transition:color .3s}
.tg button.on{color:#0f0f11}
.tg i{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--c);transition:transform .5s var(--ease)}
.tg.t i{transform:translateX(100%)}
.port-foot{padding-top:50px;display:flex;justify-content:center}
@media(max-width:900px){.pc2-grid{grid-template-columns:1fr}}

/* campanhas */
.camp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,60px)}
.camp-head h2{max-width:16ch;margin-top:12px}
.posts-row{padding-block:10px;--h:clamp(190px,26vw,380px)}
.posts-row .tr{gap:16px;align-items:center;padding-right:16px}
.posts-row .tr span{flex:none;display:block;width:calc(var(--h)*.8);height:var(--h)}
.posts-row .tr img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;border-radius:20px;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);transition:transform .6s var(--ease);background:#e8e2d8}
.posts-row .tr img:hover{transform:scale(1.04) rotate(-1.2deg)}
.posts-row .tr span::after{display:none}
.posts-row:hover .tr{animation-play-state:paused}
@media(max-width:700px){.posts-row{--h:clamp(170px,52vw,240px)}.posts-row .tr{gap:12px;padding-right:12px}}

/* blog teaser */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}
@media(max-width:700px){.hero-top .eyebrow{max-width:58%;line-height:1.4}.stamp{width:88px}}

.pc2 .tlink::before{content:"";position:absolute;inset:0;z-index:1;border-radius:30px}
.pc2 .tg{position:relative;z-index:2}
.pc2 .tg.t i,.pc2 .tg i{z-index:0}
.pc2{cursor:pointer}
