/* Krova — home cinematográfica. Usa os tokens de site.css. */
.home section{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--blue))}
.grad{background:linear-gradient(100deg,#fff 0%,var(--ice) 45%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.rv.in{opacity:1;transform:none}

/* ===== HERO ===== */
.h2o{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;align-items:center;overflow:hidden;padding:56px 0 72px}
#net{position:absolute;inset:0;width:100%;height:100%}
.h2o::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 55% at 72% 45%,rgba(47,107,255,.22),transparent 70%),
  radial-gradient(40% 40% at 10% 90%,rgba(169,200,255,.08),transparent 70%),
  linear-gradient(180deg,transparent 70%,var(--bg))}
.h2o .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%}
.h2o h1{font-size:clamp(42px,5.4vw,80px);line-height:1;font-weight:200;margin-bottom:26px}
.rot{display:inline-grid;vertical-align:baseline}
.rot.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
.rot span{grid-area:1/1;justify-self:start;background:linear-gradient(100deg,#fff 0%,var(--ice) 45%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;margin-bottom:-.12em;opacity:0;filter:blur(8px);transform:translateY(.18em);transition:opacity .6s ease,filter .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rot span.on{opacity:1;filter:none;transform:none}
.rot span.out{opacity:0;filter:blur(8px);transform:translateY(-.18em)}
.h2o .lead{margin-bottom:34px}
.h2o .q{font:300 clamp(20px,2vw,26px)/1.3 var(--display);color:#fff;margin:0 0 14px}

/* navegador que se constrói */
.bw{position:relative;border-radius:16px;background:rgba(20,21,25,.72);border:1px solid #2b3550;box-shadow:0 40px 120px -20px rgba(47,107,255,.35),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(12px);overflow:hidden;aspect-ratio:1.18}
.bw-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid #232a3d}
.bw-bar i{width:10px;height:10px;border-radius:50%;background:#2c3245}
.bw-bar i:nth-child(1){background:#ff5f57}.bw-bar i:nth-child(2){background:#febc2e}.bw-bar i:nth-child(3){background:#28c840}
.bw-url{margin-left:12px;flex:1;height:22px;border-radius:6px;background:#10131b;font:500 12px/22px var(--body);color:var(--muted);padding:0 10px;white-space:nowrap;overflow:hidden}
.bw-body{display:grid;grid-template-columns:.9fr 1.1fr;height:calc(100% - 38px)}
.code{padding:16px 14px;font:500 11.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7d8597;border-right:1px solid #232a3d;overflow:hidden;white-space:pre}
.code .k{color:#8fb3ff}.code .s{color:#5fd39a}.code .t{color:#ff9bd2}.code .c{color:#4a5266}
.code .cur{display:inline-block;width:7px;height:13px;background:var(--blue);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.prev{position:relative;padding:14px;display:flex;flex-direction:column;gap:10px}
.prev>*{opacity:0;transform:scale(.96);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.prev>.on{opacity:1;transform:none}
.p-nav{display:flex;justify-content:space-between;align-items:center;height:16px}
.p-nav b{width:46px;height:8px;border-radius:4px;background:#fff}
.p-nav span{display:flex;gap:6px}.p-nav span i{width:18px;height:6px;border-radius:3px;background:#3a4258}
.p-hero{height:28%;border-radius:10px;background:linear-gradient(120deg,#2F6BFF,#7aa7ff 60%,#c9dbff);position:relative;overflow:hidden}
.p-hero::before{content:"";position:absolute;left:10%;top:28%;width:48%;height:12%;border-radius:4px;background:rgba(255,255,255,.95)}
.p-hero::after{content:"";position:absolute;left:10%;top:52%;width:26%;height:14%;border-radius:20px;background:#0B0B0D}
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.p-grid i{border-radius:8px;background:#1d2130;position:relative;overflow:hidden}
.p-grid i::before{content:"";position:absolute;inset:8px 8px 34% 8px;border-radius:6px;background:linear-gradient(160deg,#2a3350,#3b4a75)}
.p-grid i::after{content:"";position:absolute;left:8px;right:30%;bottom:16%;height:6px;border-radius:3px;background:#4a5577}
.p-bar{height:26px;border-radius:8px;background:#1d2130;display:flex;align-items:center;gap:8px;padding:0 10px;font:600 10.5px var(--body);color:var(--ice)}
.p-bar::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(95,211,154,.18)}
.toast{position:absolute;right:14px;bottom:52px;left:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;color:#0B0B0D;font:600 12px/1.25 var(--body);box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(16px);transition:.5s cubic-bezier(.2,.8,.2,1)}
.toast.on{opacity:1;transform:none}
.toast em{display:block;font-style:normal;font-weight:500;color:#5b6170;font-size:11px}
.toast b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--blue);color:#fff;font-size:15px}
.demo{position:absolute;top:13px;right:14px;font:600 10px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#6b7386}
.scroll-hint{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid #3a4258;border-radius:12px}
.scroll-hint::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ice);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:960px){.h2o .wrap{grid-template-columns:1fr}.bw{max-width:560px}.scroll-hint{display:none}}
@media (max-width:520px){.bw{aspect-ratio:.95}.bw-body{grid-template-columns:1fr}.code{display:none}}

/* ===== MARQUEE ===== */
.mq{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#0d0e12}
.mq-track{display:flex;gap:56px;width:max-content;animation:mq 38s linear infinite}
.mq span{font:200 clamp(26px,3vw,40px)/1 var(--display);color:#5e6577;white-space:nowrap;display:flex;align-items:center;gap:56px}
.mq span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== PROBLEMAS (spotlight) ===== */
.prob{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.spot{position:relative;border-radius:18px;background:var(--panel);border:1px solid var(--line);padding:28px 24px 26px;overflow:hidden;text-decoration:none;color:var(--text);display:flex;flex-direction:column;min-height:260px;transition:border-color .3s,transform .3s}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),rgba(47,107,255,.22),transparent 45%);opacity:0;transition:opacity .35s}
.spot:hover{border-color:#3b4f85;transform:translateY(-4px);color:var(--text)}
.spot:hover::before{opacity:1}
.spot>*{position:relative}
.spot svg{width:34px;height:34px;stroke:var(--ice);fill:none;stroke-width:1.4;margin-bottom:auto}
.spot q{display:block;font:300 22px/1.25 var(--display);quotes:none;margin:28px 0 12px}
.spot small{color:var(--muted);font-size:14.5px;line-height:1.5}
.spot .go{margin-top:16px;font:600 14px var(--body);color:var(--ice)}
@media (max-width:960px){.prob{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.prob{grid-template-columns:1fr}.spot{min-height:0}}

/* ===== CONSTRUÇÃO NO SCROLL ===== */
.build{padding:clamp(56px,7vw,96px) 0}
.build-stick{display:flex;align-items:center}
.build-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;width:100%}
.stages{list-style:none;margin:28px 0 0;padding:0;border-left:1px solid var(--line)}
.stages li{cursor:pointer;padding:10px 0 10px 22px;color:#59607a;font:300 clamp(20px,2vw,26px)/1.2 var(--display);position:relative;transition:color .4s}
.stages li small{display:block;font:400 14.5px/1.5 var(--body);color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .5s,margin .5s}
.stages li.on{color:#fff}
.stages li.on small{max-height:80px;opacity:1;margin-top:6px}
.stages li.on::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--blue);box-shadow:0 0 18px var(--blue)}
.bar-prog{height:2px;background:var(--line);margin-top:26px;border-radius:2px;overflow:hidden}
.bar-prog i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--blue),var(--ice))}
.bar-prog i.run{transition:transform var(--dur,3.2s) linear}
.stage-site{width:100%;max-width:640px;justify-self:end}

.stage-site{position:relative;aspect-ratio:1.45;border-radius:18px;border:1px solid #2b3550;background:#0f1117;overflow:hidden;box-shadow:0 50px 120px -30px rgba(47,107,255,.3)}
.ss-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #232a3d;background:#12141b}
.ss-bar i{width:9px;height:9px;border-radius:50%;background:#2c3245}
.ss-bar span{margin-left:10px;font:500 12px var(--body);color:var(--muted)}
.ss{position:absolute;inset:34px 0 0 0;padding:18px;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
/* fase 0: esqueleto (linhas tracejadas) */
.ss .wf{border:1px dashed #384160;border-radius:10px;transition:all .6s cubic-bezier(.2,.8,.2,1)}
.ss-top{display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 12px}
.ss-top b{width:70px;height:12px;border-radius:4px;background:#2a3044;transition:.6s}
.ss-top span{display:flex;gap:10px}.ss-top span i{width:34px;height:8px;border-radius:4px;background:#2a3044;transition:.6s}
.ss-mid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.ss-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:22px;gap:10px}
.ss-hero i{display:block;height:14px;width:80%;border-radius:4px;background:#2a3044;transition:.6s}
.ss-hero i:nth-child(2){width:55%}
.ss-hero em{display:block;width:40%;height:28px;border-radius:20px;background:#2a3044;margin-top:8px;transition:.6s}
.ss-prods{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}
.ss-prods i{border-radius:8px;background:#1a1e2b;transition:.6s;position:relative;overflow:hidden}
.ss-low{display:flex;gap:10px;height:44px;align-items:center;padding:0 12px}
.ss-low i{flex:1;height:10px;border-radius:5px;background:#2a3044;transition:.6s}
/* fase 1: marca */
.stage-site[data-s="1"] .wf,.stage-site[data-s="2"] .wf,.stage-site[data-s="3"] .wf,.stage-site[data-s="4"] .wf{border-style:solid;border-color:#262c3d}
.stage-site:not([data-s="0"]) .ss-top b{background:#fff;width:84px}
.stage-site:not([data-s="0"]) .ss-hero{background:linear-gradient(125deg,#1b3fa8,#2F6BFF 45%,#8fb3ff);border-color:transparent}
.stage-site:not([data-s="0"]) .ss-hero i{background:rgba(255,255,255,.92)}
.stage-site:not([data-s="0"]) .ss-hero em{background:#0B0B0D}
/* fase 2: loja */
.stage-site[data-s="2"] .ss-prods i,.stage-site[data-s="3"] .ss-prods i,.stage-site[data-s="4"] .ss-prods i{background:linear-gradient(160deg,#232a40,#33416b)}
.stage-site[data-s="2"] .ss-prods i::after,.stage-site[data-s="3"] .ss-prods i::after,.stage-site[data-s="4"] .ss-prods i::after{content:"R$ 189";white-space:nowrap;position:absolute;left:8px;bottom:6px;font:700 10px var(--body);color:#fff;background:rgba(11,11,13,.6);padding:2px 6px;border-radius:5px}
.stage-site[data-s="2"] .ss-low i:last-child,.stage-site[data-s="3"] .ss-low i:last-child,.stage-site[data-s="4"] .ss-low i:last-child{background:var(--blue);height:26px;border-radius:13px;flex:.6}
/* fase 3: integrações */
.links{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
.stage-site[data-s="3"] .links,.stage-site[data-s="4"] .links{opacity:1}
.links path{fill:none;stroke:var(--ice);stroke-width:1.2;stroke-dasharray:4 6;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.badges{position:absolute;top:50px;right:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;opacity:0;transform:translateX(20px);transition:.6s}
.stage-site[data-s="3"] .badges,.stage-site[data-s="4"] .badges{opacity:1;transform:none}
.badges span{font:600 11px var(--body);padding:5px 10px;border-radius:999px;background:#151a27;border:1px solid #33456f;color:var(--ice)}
/* fase 4: vendas */
.sales{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:6px}
.sales div{display:flex;align-items:center;gap:8px;background:#fff;color:#0B0B0D;border-radius:10px;padding:7px 11px;font:600 11.5px var(--body);box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(14px);transition:.5s cubic-bezier(.2,.8,.2,1)}
.sales div::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stage-site[data-s="4"] .sales div{opacity:1;transform:none}
.stage-site[data-s="4"] .sales div:nth-child(2){transition-delay:.25s}
.stage-site[data-s="4"] .sales div:nth-child(3){transition-delay:.5s}
@media (max-width:960px){
  .build-grid{grid-template-columns:1fr;gap:22px}
  .build-grid h2{font-size:30px}
  .stages{display:none}
  .stage-site{aspect-ratio:1.05}
  .stage-cap{display:block!important}
}
.stage-cap{display:none;font:300 22px/1.3 var(--display);color:var(--ice);margin:6px 0 0}
@media (max-width:560px){.badges span{font-size:9.5px;padding:3px 8px}.sales div{font-size:10px;padding:5px 9px}.stage-site[data-s] .ss-prods i::after{font-size:8.5px}}

/* ===== SOLUÇÕES (bento) ===== */
.fast{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin-bottom:14px}
.offer{position:relative;border-radius:20px;padding:30px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.offer.hot{background:linear-gradient(150deg,#1a3fae 0%,#2F6BFF 55%,#6f9bff 100%);border-color:transparent}
.offer.hot::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 0 30px rgba(255,255,255,.05),0 0 0 60px rgba(255,255,255,.03)}
.offer .tag{align-self:flex-start;font:600 12px var(--body);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;margin-bottom:18px}
.offer h3{font-size:28px;margin-bottom:10px}
.offer p{color:#D9DCE2;font-size:15.5px}
.offer.hot p,.offer.hot li{color:rgba(255,255,255,.9)}
.offer ul{margin:4px 0 24px;padding:0;list-style:none;font-size:14.5px;color:var(--muted)}
.offer li{padding:5px 0 5px 22px;position:relative}
.offer li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:1.5px;background:var(--ice)}
.offer.hot li::before{background:#fff}
.offer .pr{margin-top:auto;display:flex;align-items:baseline;gap:10px;font:200 46px/1 var(--display)}
.offer .pr small{font:500 13px var(--body);color:var(--muted)}
.offer.hot .pr small{color:rgba(255,255,255,.8)}
.car-head{display:flex;align-items:center;justify-content:space-between;margin:40px 0 16px}
.car-t{margin:0;font:600 14px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.car-nav{display:flex;gap:8px}
.car-b{width:44px;height:44px;border-radius:50%;border:1px solid #33456f;background:transparent;color:#fff;font-size:18px;cursor:pointer;transition:.2s}
.car-b:hover{background:var(--blue);border-color:var(--blue)}
.car-b:disabled{opacity:.3;cursor:default;background:transparent;border-color:#33456f}
.bento{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px)/4);gap:14px;overflow-x:auto;scrollbar-width:none;padding:6px 0 8px;margin:-6px 0 0;-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.bento::-webkit-scrollbar{display:none}

.bento .spot{min-height:270px}
.bento .spot h3{font-size:21px;margin:22px 0 8px}
.bento .spot p{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.bento .spot .meta{margin-top:auto;display:flex;justify-content:space-between;font:500 13px var(--body);color:#6b7386}
.bento .spot .meta b{color:var(--ice);font-weight:600}
.bento .new{position:absolute;top:24px;right:22px;font:600 11px var(--body);padding:3px 9px;border-radius:999px;background:var(--blue);color:#fff}
@media (max-width:960px){.fast{grid-template-columns:1fr}.bento{grid-auto-columns:calc((100% - 14px)/2.15)}}
@media (max-width:560px){.bento{grid-auto-columns:84%}}

/* ===== HUB VIVO ===== */
.hubv{background:radial-gradient(70% 60% at 50% 40%,#0f1c4a 0%,var(--bg) 70%);overflow:hidden}
.hubv .sec-head{margin-bottom:24px}
.flow{width:100%;height:auto;display:block}
.flow .wire{fill:none;stroke:#26335a;stroke-width:1.2}
.flow .lbl{fill:#D9DCE2;font:500 15px var(--body)}
.flow .lbl.s{fill:var(--muted);font-size:13px}
.flow .nd{fill:#121729;stroke:#33456f}
.flow .pk{fill:var(--ice)}
.flow .pk2{fill:var(--ok)}
.flow .core-r{fill:none;stroke:var(--blue);stroke-width:1;opacity:.6;transform-origin:500px 230px;animation:ring 3s ease-out infinite}
.flow .core-r.b{animation-delay:1.5s}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(2.3);opacity:0}}
.hub-low{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;margin-top:40px}
.feat2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feat2 div{padding:20px;border-radius:16px;background:rgba(20,21,25,.7);border:1px solid #26324f}
.feat2 b{display:block;margin-bottom:4px}
.feat2 span{color:var(--muted);font-size:14.5px}
.phone{justify-self:center;width:270px;border-radius:38px;padding:12px;background:#0b0c10;border:1px solid #2b3550;box-shadow:0 40px 100px -20px rgba(47,107,255,.45)}
.phone-in{border-radius:28px;background:#17212b;height:440px;padding:16px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;position:relative}
.ph-top{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #22303d;color:#fff;font:600 13px var(--body)}
.ph-top i{width:30px;height:30px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font:600 13px var(--display);font-style:normal;color:#fff}
.ph-top small{display:block;font-weight:400;color:#7f93a6;font-size:11px}
.msg{align-self:flex-start;max-width:92%;background:#182533;border:1px solid #22303d;border-radius:14px 14px 14px 4px;padding:10px 12px;color:#e6edf3;font:400 12.5px/1.45 var(--body);opacity:0;transform:translateY(10px);transition:.5s}
.msg b{color:#fff}
.msg.on{opacity:1;transform:none}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;transition:.5s}
.btns.on{opacity:1}
.btns span{text-align:center;padding:9px;border-radius:10px;background:#22303d;color:#8cc4ff;font:600 12px var(--body)}
.btns span.ok{background:#2F6BFF;color:#fff}
.btns.tap span.ok{animation:tap .4s}
@keyframes tap{50%{transform:scale(.92)}}
.msg.done{align-self:flex-end;background:#2b5278;border-color:#2b5278;border-radius:14px 14px 4px 14px}
@media (max-width:960px){.hub-low{grid-template-columns:1fr}.feat2{grid-template-columns:1fr}}

/* ===== NÚMEROS ===== */
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nums div{padding:34px 24px;border-right:1px solid var(--line)}
.nums div:last-child{border-right:0}
.numsec{padding-top:0}
.nums-t{margin:0 0 18px;font:600 14px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nums b{display:block;white-space:nowrap;font:200 clamp(44px,5vw,72px)/1 var(--display);margin-bottom:12px}
.nums span{display:block;color:var(--muted);font-size:15px;line-height:1.5;max-width:26ch}
@media (max-width:860px){.nums{grid-template-columns:1fr 1fr}.nums div:nth-child(2){border-right:0}.nums div{border-bottom:1px solid var(--line)}}

/* ===== CASES ===== */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs{position:relative;border-radius:22px;padding:30px 28px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out,border-color .3s}
.cs:hover{border-color:#3b4f85}
.cs .glow{position:absolute;left:-20%;right:-20%;top:-60%;height:120%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.32;pointer-events:none}
.cs>*{position:relative}
.cs .mono{font:200 64px/1 var(--display);color:#fff;opacity:.95;margin-bottom:18px;letter-spacing:-.02em;height:64px;display:flex;align-items:center}
.cs .mono img{max-height:56px;max-width:230px;width:auto;height:auto;object-fit:contain}
.cs .mono.has span{display:none}
.cs h3{font-size:28px;margin-bottom:6px}
.cs .where{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.cs .result{color:#E6E8EC;font-size:15.5px}
.cs .tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 22px;padding:0;list-style:none}
.cs .tags li{font-size:12.5px;padding:5px 10px;border-radius:999px;border:1px solid #33456f;color:#D9DCE2}
.cs a.site{margin-top:auto;font:600 14px var(--body);text-decoration:none}
@media (max-width:960px){.cases{grid-template-columns:1fr}}

/* ===== PROJETOS ===== */
.proj2{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.pj{position:relative;border-radius:20px;padding:28px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;gap:4px;isolation:isolate}
.pj::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--blue) 85%,var(--ice) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;z-index:-1}
.pj::after{content:"";position:absolute;inset:1px;border-radius:19px;background:var(--panel);z-index:-2}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.pj h3{font-size:30px;margin-bottom:10px}
.pj p{color:#D9DCE2;font-size:15.5px}
.pj .status{margin-top:auto;padding-top:14px}
@media (max-width:960px){.proj2{grid-template-columns:1fr}.pj{min-height:0}}
.conc{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.conc div{flex:1 1 280px;padding:18px 20px;border-radius:14px;border:1px dashed #333a4d}
.conc b{font:400 19px var(--display);display:block;margin-bottom:2px}
.conc span{font-size:14px;color:var(--muted)}

/* ===== PROCESSO ===== */
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0;padding:0}
.tl::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:1px;background:var(--line)}
.tl::after{content:"";position:absolute;left:28px;top:28px;height:2px;margin-top:-.5px;width:calc((100% - 56px)*var(--tp,0));background:linear-gradient(90deg,var(--blue),var(--ice));box-shadow:0 0 14px var(--blue);transition:width 1s cubic-bezier(.4,0,.2,1)}
.tl li{position:relative}
.tl .n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid #33456f;font:300 22px var(--display);color:var(--ice);margin-bottom:22px;position:relative;z-index:1;transition:.4s}
.tl li.on .n{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 8px rgba(47,107,255,.15);transition-delay:.7s}
.tl b{display:block;font-size:19px;margin-bottom:6px}
.tl span{color:var(--muted);font-size:15px}
@media (max-width:860px){.tl{grid-template-columns:1fr;gap:28px}.tl::before{left:28px;right:auto;top:28px;bottom:28px;width:1px;height:auto}.tl::after{display:none}.tl li{display:grid;grid-template-columns:56px 1fr;gap:0 20px}.tl .n{margin:0;grid-row:span 2}}

/* ===== FAQ 2 colunas ===== */
.faq2{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq2 .faq{max-width:none}
@media (max-width:860px){.faq2{grid-template-columns:1fr;gap:24px}}

/* ===== CTA ===== */
.cta{padding-top:0}
.cta-box{position:relative;border-radius:28px;overflow:hidden;padding:clamp(48px,8vw,96px) clamp(28px,6vw,80px);background:#0a1230;isolation:isolate}
.cta-box .mesh{position:absolute;inset:-30%;z-index:-1;background:
  radial-gradient(30% 40% at 20% 30%,#2F6BFF,transparent 70%),
  radial-gradient(30% 40% at 80% 70%,#7aa7ff,transparent 70%),
  radial-gradient(25% 35% at 60% 20%,#1a2f8a,transparent 70%);filter:blur(30px);animation:mesh 14s ease-in-out infinite alternate}
@keyframes mesh{to{transform:rotate(25deg) scale(1.15)}}
.cta-box h2{font-size:clamp(40px,6vw,84px);max-width:12ch;margin-bottom:22px}
.cta-box .lead{color:#E6ECFF;margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-box .btn-primary{background:#fff;color:#0B0B0D}
.cta-box .btn-primary:hover{background:var(--ice);color:#0B0B0D}
.cta-box .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.contact2{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.2);font-size:15px}
.contact2 a{color:#fff;text-decoration:none}
.contact2 span{color:rgba(255,255,255,.65);margin-right:8px}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .mq-track,.pj::before,.cta-box .mesh,.flow .core-r,.links path{animation:none}
  .build{height:auto;padding:80px 0}.build-stick{position:static;height:auto}
}
.flow.fv{display:none;max-width:420px;margin:0 auto}
@media (max-width:700px){.flow.fh{display:none}.flow.fv{display:block}}

.gon-btn{align-self:flex-start;margin-top:14px;display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;background:linear-gradient(100deg,#ff7a1a 0%,#ff2d2d 45%,#ff3d8b 100%);color:#fff;font:400 11px/1 "Michroma",var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 8px 26px -8px rgba(255,45,45,.7);transition:transform .2s,box-shadow .2s}
.gon-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(255,61,139,.8)}

.bento .spot.sos{background:linear-gradient(150deg,#1a3fae 0%,#2F6BFF 55%,#6f9bff 100%);border-color:transparent}
.bento .spot.sos::before{display:none}
.bento .spot.sos p,.bento .spot.sos .meta span{color:rgba(255,255,255,.88)}
.bento .spot.sos .meta b{color:#fff}
.bento .spot.sos svg{stroke:#fff}
.bento .spot.sos .tag{position:absolute;top:24px;right:20px;font:600 11px var(--body);padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff}
.bento .spot .meta b{font-size:15px}

/* ===== v8: fluxo vertical (mobile) ===== */
.flow.fv .pill{fill:#121729;stroke:#33456f}
.flow.fv .pill.box{fill:rgba(18,23,41,.92)}
.flow.fv .lbl.c{text-anchor:middle;font-size:14px}
.flow.fv .lbl.s.c{font-size:12px}

/* ===== v8: ajustes só do mobile (até 560px); desktop intocado ===== */
.feat2 em{font:inherit;color:inherit}
.feat2 .dup{display:none}
@media (max-width:560px){.feat2 .dup{display:block}}
@media (max-width:560px){
  /* topo: título, navegador, pergunta e botões na primeira tela */
  .h2o{min-height:0;align-items:flex-start;padding:30px 0 44px}
  .h2o .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .h2o .wrap>div:first-child{display:contents}
  .h2o .eyebrow{order:1;font-size:10.5px;letter-spacing:.14em;white-space:nowrap;margin-bottom:14px}
  .h2o .eyebrow::before{display:none}
  .h2o h1{order:2;font-size:44px;margin-bottom:20px}
  .h2o .bw{order:3;aspect-ratio:auto;height:210px;width:100%;max-width:none;margin-bottom:24px}
  .h2o .bw-bar{height:30px}.h2o .bw-bar i{width:8px;height:8px}
  .h2o .bw-body{height:calc(100% - 30px)}
  .h2o .q{order:4;font-size:20px;margin-bottom:18px}
  .h2o .lead{display:none}
  .h2o .hero-ctas{order:5;margin-bottom:18px;flex-wrap:nowrap;gap:8px}
  .h2o .hero-ctas .btn{flex:1;justify-content:center;padding-left:10px;padding-right:10px;font-size:14px;white-space:nowrap}
  .h2o .facts{order:6;flex-direction:column;align-items:center;gap:5px;font-size:12.5px}
  .h2o .facts li::before{width:4px;height:4px}

  /* serviços: dois cards por vez, mesmo loop */
  .bento{grid-auto-columns:calc((100% - 14px)/2.12);gap:10px}
  .bento .spot{min-height:236px;padding:16px 14px 14px;border-radius:16px}
  .bento .spot svg{width:26px;height:26px}
  .bento .spot h3{font-size:16px;line-height:1.2;margin:14px 0 6px}
  .bento .spot p{font-size:12.5px;line-height:1.45;margin:0 0 10px}
  .bento .spot .meta{flex-direction:column;align-items:flex-start;gap:2px;font-size:11.5px}
  .bento .spot .meta b{font-size:14px}
  .bento .new,.bento .spot.sos .tag{position:static;align-self:flex-start;margin-bottom:12px;font-size:10px;padding:2px 8px;white-space:nowrap}

  /* Krova Hub: diferenciais em carrossel, um card por vez, mesmo loop dos serviços */
  .feat2{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:86%;gap:12px;overflow-x:auto;scrollbar-width:none}
  .feat2::-webkit-scrollbar{display:none}
  .feat2 div{min-height:132px}
  .hub-low{gap:32px;margin-top:28px}
  .hub-low>div{min-width:0}
  .hub-low p[style]{margin-top:20px!important}
  .hub-low .btn{width:100%;justify-content:center}

  /* GONAIR: botão na largura do card, pulsando no ritmo do coração */
  .gon-btn{align-self:stretch;justify-content:center;padding:16px;font-size:12.5px;margin-top:18px;animation:gonP 1.6s ease-out infinite}
  .gon-btn:active{transform:scale(.98)}
}
@keyframes gonP{
  0%{box-shadow:0 8px 26px -8px rgba(255,45,45,.7),0 0 0 0 rgba(255,61,90,.55)}
  14%{box-shadow:0 8px 26px -8px rgba(255,45,45,.7),0 0 0 7px rgba(255,61,90,.0)}
  15%{box-shadow:0 8px 26px -8px rgba(255,45,45,.7),0 0 0 0 rgba(255,61,90,.45)}
  34%{box-shadow:0 8px 26px -8px rgba(255,45,45,.7),0 0 0 11px rgba(255,61,90,0)}
  100%{box-shadow:0 8px 26px -8px rgba(255,45,45,.7),0 0 0 0 rgba(255,61,90,0)}
}
@media (prefers-reduced-motion:reduce){.gon-btn{animation:none}}