/* =================== REV03.1 · ajustes do Jhonattan (áudio, 15/10) =================== */
/* lockup oficial: SVG BRAVA + COMPANY à direita, alinhado pela base */
.lockup{display:inline-flex;align-items:flex-end;gap:.34em;line-height:1;color:#fff}
.lockup .lg-b{height:1em;width:auto;display:block}
.lockup .co{font-family:var(--f-word);font-weight:300;font-size:.3em;letter-spacing:.42em;line-height:.74;color:currentColor;white-space:nowrap}
.lockup.sm{font-size:15px}
.lockup.md{font-size:20px}
.lockup.xl{font-size:clamp(40px,8.2vw,118px)}
.hero-lock{position:relative;z-index:3;margin:34px 0 30px;filter:drop-shadow(0 10px 40px rgba(90,176,255,.18))}
.hero-lock .co{color:#D9DCE3}
.hero .ttl{font-family:var(--f-head);font-weight:400;font-size:clamp(22px,3vw,40px);letter-spacing:-.02em;line-height:1.15;position:relative;z-index:3;color:#F5F5F7}
.hero .ttl .w{display:inline-block;will-change:filter,opacity}
.hero .p{font-weight:300}
@media(max-width:640px){.lockup.xl{font-size:13.5vw}.lockup.xl .co{letter-spacing:.3em}}

/* águia discreta em contorno */
.eagle-wrap{position:absolute;pointer-events:none;z-index:1;color:rgba(233,236,242,.12)}
.eagle-wrap .eagle{width:100%;height:auto;overflow:visible}
.eagle-wrap.r{right:-7vw;top:24%;width:min(44vw,620px);animation:glide 14s ease-in-out infinite}
.eagle-wrap.f{right:4vw;bottom:26px;width:240px;color:rgba(233,236,242,.06)}
@keyframes glide{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(-14px,-18px,0) rotate(1deg)}}
@media(max-width:760px){.eagle-wrap.r{width:86vw;right:-36vw;top:6%;opacity:.55}}

/* luzinhas vivas: fundo levemente desfocado, flutuando */
.fly .mote{display:block;width:var(--w);height:var(--w);border-radius:50%;background:radial-gradient(circle,var(--mc) 0%,color-mix(in srgb,var(--mc) 35%,transparent) 32%,transparent 70%)}

/* faixas claras */
.n5 .list3,.n4 .list3{border-color:var(--line-l)}
.n5 .list3 h3{color:var(--t-l)}
.n5 .list3 p{color:var(--m-l)}
.n5 .list3 .li{color:#2B2E35}
.n5 .list3 .n{color:var(--m-l2)}
.manifesto .q{font-weight:300;color:inherit}
.manifesto .q b{font-weight:700}
.list3 h3{font-weight:500}
.list3 p{font-weight:300}

/* modelo de negócio */
.m3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
@media(max-width:900px){.m3{grid-template-columns:1fr}}
.mc{position:relative;border-radius:var(--r-card);padding:34px 28px 30px;background:linear-gradient(180deg,#111114,#07070A);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden;transition:transform .45s var(--ease)}
.mc:hover{transform:translateY(-6px)}
.mc .ic{width:30px;height:30px;color:var(--light);filter:drop-shadow(0 0 10px rgba(30,144,255,.7))}
.mc .k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--m-d);margin-top:26px;font-weight:500}
.mc h3{font-family:var(--f-head);font-size:24px;font-weight:500;letter-spacing:-.02em;margin:10px 0}
.mc p{font-size:15px;color:#A9AAB4;font-weight:300}

/* sabre de luz contornando a borda */
.saber{position:absolute;inset:0;border-radius:inherit;padding:1.3px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--a),transparent 0 62%,color-mix(in srgb,var(--c,#5AB0FF) 40%,transparent) 74%,var(--c,#5AB0FF) 86%,#fff 89%,transparent 93%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s;animation:saber 3.2s linear infinite;animation-play-state:paused}
@keyframes saber{to{--a:360deg}}
.mc:hover .saber,.piano:hover .saber,.piano:focus-visible .saber{opacity:1;animation-play-state:running}
.ask{isolation:isolate}
.ask .saber{opacity:1;animation-play-state:running;animation-duration:5.5s;border-radius:20px}

/* números sobre o cinza */
.n3 .ring .trk{stroke:rgba(10,10,13,.22)}
.n3 .ring .k{color:#2E3138}
.ring .v{font-weight:500}

/* fluxo e registro em linguagem de gente */
.node .id{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;font-weight:500}
.node .t{font-family:var(--f-head);font-weight:500;font-size:14.5px}
.node .s{font-family:var(--f-body);font-size:11.5px;font-weight:300}
.log{font-family:var(--f-body);font-size:13px;font-weight:300}
.log .ln2 em{font-weight:500;font-style:normal}

/* dica de interação: mouse no computador, dedo no celular */
.hint{position:absolute;right:14px;bottom:14px;z-index:5;width:34px;height:34px;color:#E9ECF2;pointer-events:none;opacity:0;transition:opacity .5s}
.hint.on{opacity:1}
.hint svg{position:absolute;inset:0;width:26px;height:26px;margin:4px;animation:tap 1.8s var(--ease) infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.hint .ripple{position:absolute;left:4px;top:3px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--light);animation:rip 1.8s var(--ease) infinite}
.n4 .hint{color:#0A0A0D}
.hint .h-touch{display:none}
@media(hover:none){.hint .h-mouse{display:none}.hint .h-touch{display:block}}
@keyframes tap{0%,100%{transform:translate(0,0)}35%{transform:translate(-4px,-4px)}45%{transform:translate(-4px,-4px) scale(.88)}60%{transform:translate(-4px,-4px)}}
@keyframes rip{0%,40%{transform:scale(.2);opacity:0}48%{opacity:1}100%{transform:scale(2.6);opacity:0}}
.hubwrap .hint{right:4%;bottom:10%}
.ask .hint{right:-6px;bottom:-6px}

/* setores: nome, cargo, ferramentas e autonomia */
.sc{padding:18px 18px 16px;gap:12px 14px}
.sc .hd{padding-right:30px}
.sc .nm{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;font-weight:500;color:var(--m-d)}
.sc h4{font-family:var(--f-head);font-weight:500;font-size:15.5px;margin-top:4px;padding-right:0}
.sc .faz{grid-column:1/-1;font-size:13.5px;color:#B5B6BF;line-height:1.55;font-weight:300;margin-top:2px}
.meta{grid-column:1/-1;list-style:none;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line-d);padding-top:9px;margin-top:2px}
.meta li{font-size:11.5px;color:#8F909A;font-weight:300}
.meta b{font-weight:500;color:#C9CAD2;margin-right:8px;letter-spacing:.08em;text-transform:uppercase;font-size:9.5px}
.stevan .meta{border-color:rgba(255,255,255,.1);margin-top:12px}
.stevan h4{font-weight:500}
.stevan p{font-weight:300}
.sc .iso{top:14px;right:14px;width:30px;height:30px}

/* frentes: placa sólida atrás do texto + sabre no hover */
.piano{padding:0;min-height:0}
.piano .plate{position:relative;z-index:2;margin:10px;padding:22px 18px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(12,12,15,.94),rgba(6,6,8,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);display:flex;flex-direction:column;min-height:262px}
.piano h3{font-weight:500}
.piano p{font-weight:300}
.piano .go{font-family:var(--f-mono);font-weight:500}

/* método: foco em ordem com zoom */
.st6{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ruler.play .st6{opacity:.4}
.ruler.play .st6.on{opacity:1;transform:scale(1.07)}
.st6 h4{font-weight:500}
.st6 p{font-weight:300}
.st6 .k{font-family:var(--f-mono);font-weight:500}

/* marcas: logos + mosaico */
.logos{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;margin-top:60px;background:var(--line-l);border:1px solid var(--line-l);border-radius:18px;overflow:hidden}
.logos:empty{display:none}
.lg{background:var(--n4);height:112px;display:flex;align-items:center;justify-content:center;padding:26px;color:#15161A;transition:background .35s}
.lg svg,.lg img{max-width:100%;max-height:44px;width:auto;height:44px;opacity:.86;transition:opacity .35s,transform .35s var(--ease)}
.lg img{filter:grayscale(1) brightness(.15);object-fit:contain}
.lg:hover{background:#fff}.lg:hover svg,.lg:hover img{opacity:1;transform:scale(1.06)}
.gig{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:34px;font-family:var(--f-head);font-weight:500;font-size:clamp(17px,1.8vw,22px);color:#22252B}
.mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px 36px;margin-top:56px}
.cat h5{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--m-l2);border-bottom:1px solid var(--line-l);padding-bottom:10px;margin-bottom:12px}
.chips2{display:flex;flex-wrap:wrap;gap:6px 14px}
.chips2 span{font-size:14px;color:#2E3138;font-weight:400}
#marcas .note{color:var(--m-l2);font-family:var(--f-body);margin-top:44px;text-align:left}

/* contato sem números expostos */
.contact-info{color:#9C9DA7;font-weight:300}
.ask input{font-weight:300}
.ask .chip{font-family:var(--f-body);font-weight:400;letter-spacing:.04em;text-transform:none;font-size:12.5px}

/* rodapé */
footer{padding:84px 0 40px;overflow:hidden;position:relative}
.fg{grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:36px}
@media(max-width:900px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}
.fb p{margin-top:16px;max-width:34ch;line-height:1.6;font-weight:300}
.fb .mot{color:#C9CAD2;font-weight:400}
.fh{font-family:var(--f-mono);font-weight:500}
.legal{flex-direction:column;gap:6px;font-family:var(--f-body);font-weight:300;font-size:12px;letter-spacing:.02em}

/* águia abstrata (wireframe low-poly) voando no topo */
#aguia{position:absolute;right:-3vw;top:16%;width:min(50vw,720px);height:min(30vw,420px);z-index:1;pointer-events:none}
@media(max-width:760px){#aguia{width:96vw;height:56vw;right:-34vw;top:7%;opacity:.5}}

/* o fio vive numa camada do tamanho da tela (leve) */
#fio{position:fixed;inset:0;width:100%;height:100vh;z-index:1;pointer-events:none;overflow:visible}
#fio #fio-bead{fill:#CFE6FF;stroke:rgba(90,176,255,.45);stroke-width:5}

@media(max-width:1000px){.logos{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}}
.fecho .lbl{margin-top:40px}
#aguia{top:auto;bottom:16vh;right:1vw;width:min(34vw,520px);height:min(20vw,300px)}
@media(max-width:760px){#aguia{width:80vw;height:46vw;right:-24vw;bottom:auto;top:9%;opacity:.45}}

.pill{white-space:nowrap}
@media(max-width:480px){header.top .pill{font-size:9.5px;letter-spacing:.14em;padding:8px 12px!important}.lockup.sm{font-size:13px}}

/* =================== REV03.2 · clean, discreto e espaçado =================== */
:root{--sec:clamp(150px,17vw,260px)}
.lbl{font-size:10.5px;letter-spacing:.34em;color:#7C7D87}
.n3 .lbl,.n4 .lbl,.n5 .lbl{color:#5E626B}
#revoada{height:clamp(200px,26vw,340px);margin-top:20px}
.manifesto .q{margin-top:18px}
.list3{margin-top:90px}
/* menos brilho, mais leitura */
.piano::before{opacity:.26}
.piano:hover::before{opacity:.6}
.eco a::before{opacity:.16}
.eco a:hover::before{opacity:.45}
.mc{background:linear-gradient(180deg,#121215,#09090B)}
.mc .ic{filter:none;color:var(--light)}
#fio path{stroke-width:.9}
.anchor-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-shadow:0 0 0 3px rgba(90,176,255,.10),0 0 12px 1px rgba(30,144,255,.55)}
#fio .ghost{display:none}

/* fundador: carrossel com fotos que chegam voando e entram em foco */
.fgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
@media(max-width:900px){.fgrid{grid-template-columns:1fr}}
.carousel{position:relative;height:clamp(460px,46vw,640px);perspective:1600px;outline:none;cursor:grab;touch-action:pan-y}
.carousel:active{cursor:grabbing}
.ph{position:absolute;left:50%;top:46%;width:min(330px,64%);aspect-ratio:4/5;margin:0;border-radius:18px;overflow:hidden;transform-style:preserve-3d;will-change:transform,filter,opacity;
  transition:transform 1.4s var(--ease),opacity 1.4s var(--ease),filter 1.4s var(--ease);box-shadow:0 60px 90px -50px rgba(0,0,0,.95)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.ph.on::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(90,176,255,.9),transparent);animation:scan 3.4s var(--ease) infinite}
@keyframes scan{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(410px);opacity:0}}
.cv-ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:16px;font-size:10.5px;letter-spacing:.28em;color:#8D8D98}
.cv-bar{width:120px;height:1px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.cv-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--light)}
.carousel .hint{right:8%;bottom:14%}
.role{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--light);margin-top:16px;font-weight:500}
.ftext .h2{max-width:none}

/* setores: lista elegante; detalhes abrem no clique */
.crew{display:flex;flex-direction:column;gap:14px}
.rows{list-style:none;border-top:1px solid var(--line-d)}
.row details{border-bottom:1px solid var(--line-d)}
.row summary{list-style:none;display:grid;grid-template-columns:34px minmax(0,190px) 1fr 18px;gap:16px;align-items:center;padding:16px 4px;cursor:pointer}
.row summary::-webkit-details-marker{display:none}
.row .bot{width:34px;height:34px;opacity:.85}
.row .who{display:flex;flex-direction:column;gap:3px}
.row .nm{font-size:9.5px;letter-spacing:.22em;color:#6E6F79;font-weight:500}
.row .nmn{font-size:15px;font-weight:500;color:#F2F2F5}
.row .fz{font-size:13.5px;color:#9C9DA7;font-weight:300;line-height:1.5}
.row .plus{width:14px;height:14px;position:relative;opacity:.6}
.row .plus::before,.row .plus::after{content:"";position:absolute;background:#E9ECF2;left:6px;top:0;width:1.2px;height:14px;transition:transform .35s var(--ease)}
.row .plus::after{transform:rotate(90deg)}
.row details[open] .plus::before{transform:rotate(90deg)}
.row summary:hover .nmn{color:#fff}.row summary:hover .plus{opacity:1}
.row .more{display:flex;flex-wrap:wrap;gap:6px 26px;padding:0 4px 16px 54px;font-size:12.5px;color:#8F909A;font-weight:300}
.row .more b{font-weight:500;color:#C9CAD2;margin-right:8px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:700px){.row summary{grid-template-columns:30px 1fr 18px}.row .fz{grid-column:2/3}.row .more{padding-left:46px}}
.stevan{grid-template-columns:120px 1fr;padding:22px}
.stevan svg{width:120px;height:120px}
.mono-stage{height:500px}

/* marcas: todas as marcas recolhidas */
.todas{margin-top:34px}
.todas summary{cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#2E3138;font-weight:500;padding:10px 0;list-style:none}
.todas summary::-webkit-details-marker{display:none}
.todas summary::after{content:"+";font-size:16px;line-height:1;transition:transform .35s var(--ease)}
.todas[open] summary::after{transform:rotate(45deg)}
.todas .gig{margin-top:18px}

/* traços finos */
#fio path{stroke-width:.75}
.flow .ln{stroke-width:.8}
.flow .ln.on{stroke-width:1}
#hub .ed{stroke-width:.7}
#hub .ed.on{stroke-width:1.1}
#hub .pl-top,#hub .pl-side,#hub .pl-side2{stroke-width:.7}
.ring .trk{stroke-width:.7}
.ring .arc{stroke-width:1.6}

.mc{color:var(--t-d)}
.mc h3{color:#F5F5F7}