@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-tight-400.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-tight-700.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400.woff2) format('woff2')}
/* Layout: uma tela branca. Logo ao centro, 6 frentes em hexágono, serviços ramificando de cada frente; rede em canvas acompanha o movimento. Tema claro fixo por escolha. */
:root{
  --white:#fff; --carbon:#18181b; --zinc:#71717a; --mist:#e4e4e7; --fog:#f4f4f5; --coral:#ea4e1b;
  --sans:'Inter Tight',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--white);color:var(--carbon);font-family:var(--sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
.stage{position:relative;flex:1;min-height:0;overflow:hidden}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Logo */
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;text-decoration:none;color:var(--carbon);display:block}
.mark{position:relative;display:block;border-radius:50%}
.mark img{position:relative;z-index:1;display:block;width:clamp(120px,11vw,168px);height:auto;aspect-ratio:1;animation:logoIn 1s cubic-bezier(.2,1.35,.35,1) both;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.logo:hover .mark img{transform:scale(1.03)}
.wave{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--coral);opacity:0;animation:wave 4.8s cubic-bezier(.15,.6,.3,1) 1.8s infinite;pointer-events:none}
.wave.w2{animation-delay:3.4s}
.logo .cap{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--zinc);background:var(--white);padding:2px 8px;animation:revealC .8s ease-out 1s both}
@keyframes revealC{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes logoIn{from{opacity:0;transform:scale(.55) rotate(-24deg)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes wave{0%{opacity:.45;transform:scale(1)}70%{opacity:0;transform:scale(1.75)}100%{opacity:0;transform:scale(1.75)}}
@keyframes flIn{from{opacity:0}}

/* Nós */
.fl{position:absolute;left:0;top:0;z-index:1;will-change:transform;outline:none;animation:reveal .8s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--dl,0s)}
@keyframes reveal{from{clip-path:circle(0% at 0 0)}to{clip-path:circle(150% at 0 0)}}
.fl .in{display:grid;justify-items:center;gap:6px;transform:translate(-50%,-50%);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.fl .t{white-space:nowrap;background:var(--white)}
.p{cursor:default}
.p .t{font-size:clamp(22px,2.1vw,32px);letter-spacing:-.025em;padding:2px 10px}
.p .d{font-size:12px;line-height:1.35;color:var(--zinc);max-width:220px;text-align:center;background:var(--white);padding:2px 6px;border-radius:4px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.l .t{font-size:13px;letter-spacing:-.01em;color:#3f3f46;border:1px solid var(--mist);border-radius:9999px;padding:6px 13px;transition:border-color .25s,color .25s}
.l{cursor:default}

.stage.hovering .fl:not(.hot) .in{opacity:.25}
.fl.hot{z-index:3}
.fl.on .in{transform:translate(-50%,-50%) scale(1.06)}
.fl.on .d{opacity:1;transform:none}
.fl.hot.l .t{border-color:var(--carbon);color:var(--carbon)}
.fl.on.l .t{border-color:var(--coral)}
.fl:focus-visible .t{outline:2px solid var(--coral);outline-offset:4px;border-radius:9999px}

@media (prefers-reduced-motion:reduce){.mark img,.fl,.logo .cap,.wa{animation:none!important}.wave{display:none}}
/* Sem JavaScript: os nós viram uma lista legível em volta do logo */
html:not(.js) .stage{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:24px;overflow:auto}
html:not(.js) .logo{position:static;transform:none;width:100%;display:flex;justify-content:center;margin-bottom:36px}
html:not(.js) .fl{position:static;animation:none;clip-path:none}
html:not(.js) .fl .in{transform:none}
html:not(.js) .p{width:100%;text-align:center;margin-top:10px}
html:not(.js) .wave{display:none}
html:not(.js) .p .d{opacity:1;transform:none}

/* WhatsApp */
.wa{animation-name:revealW!important;position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:20px;z-index:5;display:flex;align-items:center;gap:9px;background:var(--coral);color:#18181b;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:-.01em;border-radius:9999px;padding:11px 18px 11px 13px;box-shadow:0 6px 20px rgba(234,78,27,.28);transition:transform .2s,box-shadow .2s;animation:flIn .6s ease-out 2.4s both}
.wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(234,78,27,.34)}
.wa svg{width:22px;height:22px;flex:none}
.wa:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
@keyframes revealW{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
/* Barra de serviços (SEO) */
.bar{flex:none;border-top:1px solid var(--fog);padding-block:9px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:max(9px,env(safe-area-inset-bottom,0px));display:flex;align-items:baseline;gap:4px 18px;flex-wrap:wrap;justify-content:center;font-size:12px;line-height:1.5;color:var(--zinc)}
.bar h1,.bar h2{font-size:12px;font-weight:400;margin:0;color:var(--zinc);display:inline}
.bar h2{color:#52525b}
.bar ul{list-style:none;margin:0;padding:0;display:inline}
.bar li{display:inline}
.bar li::before{content:", "}.bar li:first-child::before{content:": "}
.bar .grp{display:inline;white-space:normal}
.bar .grp+.grp::before{content:"·";padding-right:14px;color:var(--mist)}
.bar a{color:inherit;text-decoration:none}.bar a:hover{color:var(--carbon)}

@media (max-width:640px){
  .mark img{width:104px}
  .logo .cap{font-size:12px;letter-spacing:.08em}
  .p .t{font-size:20px}
  .bar{justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;font-size:12px}.bar::-webkit-scrollbar{display:none}.bar h1,.bar h2{font-size:12px}.bar .grp,.bar h1{white-space:nowrap;flex:none}
  .logo .cap{text-align:center;line-height:1.5}.logo .cap .sep{display:none}.logo .cap span{display:block}
  .wa{padding:13px;bottom:16px;right:max(16px,env(safe-area-inset-right,0px))}.wa span{display:none}
}