/* Identidade compartilhada com a hero aprovada. */
:root{--bg:#070b14;--surface:#0b1420;--text:#eaf1f8;--muted:#93a4bc;--cyan:#45c6c8;--line:rgba(140,200,235,.14)}
body{background:var(--bg);font-family:Inter,system-ui,sans-serif;color:var(--text)}
h1,h2,h3{font-family:Sora,system-ui,sans-serif;font-weight:600;letter-spacing:-.045em}
.section-heading h2,.about-copy h2{font-size:clamp(32px,3.8vw,56px);line-height:1.13}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.section-heading>p,.about-copy>p,.service p,.project-info>p{color:var(--muted);line-height:1.85}
.about-lead{font-size:clamp(16px,1.6vw,20px)}
.about-copy strong{color:var(--text)}
.atmosphere:before{background:radial-gradient(ellipse 55% 60% at var(--light-x) 50%,#45c6c80b,transparent 75%)}
.ambient-grid{opacity:.12}
.webgl-ready .ambient-shade{background:linear-gradient(90deg,#070b1455,transparent 70%);opacity:.6}
#flow-canvas{filter:saturate(.7) brightness(.82)}
.about-section,.solutions-section,.case-section,.other-section,.contact-section{background:transparent;background-image:none;border-color:var(--line)}
.service{background:transparent;border-color:var(--line)}
.service h3,.tech-groups h3{font-size:17px;letter-spacing:-.02em}
.service>svg{stroke:var(--cyan)}
.service>span{color:#7095a6;font-size:11px}
.tech-groups article{background:#0b142066;border-color:var(--line);border-radius:12px}
.technology-list li{color:var(--text);font-size:13px}
.tech-symbol{background:#45c6c80c;border-color:#45c6c82b;color:var(--cyan)}
.project-card{background:#0b1420ed;border:1px solid var(--line);border-radius:16px;box-shadow:none}
.project-info h3{font-size:24px;letter-spacing:-.04em}
.project-info>p{font-size:13px}
.project-actions,.portfolio-toolbar,.footer-bottom{border-color:var(--line)}
.tags li,.image-category{background:#070b14dc;color:#a8c3d1;border-color:var(--line);font-family:'JetBrains Mono',monospace;font-size:9px}
.button{border-radius:999px;font-family:Inter,system-ui,sans-serif;font-size:13px;min-height:46px}
.button-primary{background:linear-gradient(120deg,#45c6c8,#2e9bd6);color:#06131e;border:1px solid #67d4d657;box-shadow:none}
.button-primary:hover{background:linear-gradient(120deg,#61d7d9,#43afe5);color:#06131e}
.button-outline{background:transparent;border:1px solid #8cc8eb3d;color:var(--text)}
.button-outline:hover{background:#45c6c80c;border-color:#45c6c866}
.filters button{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:12px}
.filters button.is-active{background:#45c6c814;border-color:#45c6c855;color:#7ee5e7}
.project-link,.case-link,.text-link{color:var(--cyan)}
.contact-section .section h2{font-size:clamp(30px,3.4vw,48px)}
.contact-details,.footer{color:var(--muted);font-size:11px}
.footer{padding-bottom:28px}
.scroll-progress{background:transparent}.scroll-progress i{background:linear-gradient(90deg,#45c6c8,#2e9bd6)}
.motion-hud,.flow-index{display:none}
#case-dialog{background:#0b1420;color:var(--text);border:1px solid var(--line);border-radius:18px}
#case-dialog::backdrop{background:#030710bb;backdrop-filter:blur(10px)}
.dialog-top,.dialog-story section{border-color:var(--line)}
/* Menu lateral inspirado na referência: marca à esquerda e botão circular. */
.header{background:#070b14d9;border:0;box-shadow:none;backdrop-filter:blur(18px);z-index:50}
.header .brand{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.7px}
.header .menu-toggle{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:46px;height:46px;border-radius:50%;border:1px solid #45c6c84d;background:#eaf1f8;color:#070b14;margin-left:auto}
.header .menu-toggle>span{width:18px;height:1px;background:currentColor;transition:transform .25s}
.header .menu-toggle[aria-expanded=true]{background:#45c6c8}
.header .menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(3.5px) rotate(45deg)}
.header .menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.header #navigation{position:fixed;top:calc(var(--header-height) + 10px);left:auto;right:20px;width:min(420px,calc(100vw - 40px));max-height:calc(100svh - var(--header-height) - 30px);overflow:auto;padding:35px;display:flex;flex-direction:column;align-items:stretch;gap:8px;border:1px solid #8cc8eb29;border-radius:22px;background:#0b1420f5;box-shadow:0 30px 80px #0008;backdrop-filter:blur(26px);opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none;transition:opacity .25s,transform .3s,visibility .25s}
.header #navigation.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.header #navigation>a{font:600 clamp(25px,3vw,36px)/1.3 Sora,system-ui,sans-serif;letter-spacing:-.04em;text-transform:none;color:var(--text);padding:7px 0}
.header #navigation>a:hover,.header #navigation>a[aria-current]{color:var(--cyan)}
.header #navigation>.nav-contact{margin:20px 0 0;padding:14px 22px;background:linear-gradient(120deg,#45c6c8,#2e9bd6);border:0;border-radius:999px;font:600 14px Inter,sans-serif;color:#06131e;text-align:center;letter-spacing:0}
/* O raio revela apenas a camada tecnológica sobre a silhueta. */
.actor{cursor:crosshair;outline-offset:8px}
.tech-vision{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;mask-image:radial-gradient(circle 145px at var(--scan-x,60.5%) var(--scan-y,60.5%),#000 25%,#000c 55%,transparent 100%);-webkit-mask-image:radial-gradient(circle 145px at var(--scan-x,60.5%) var(--scan-y,60.5%),#000 25%,#000c 55%,transparent 100%)}
.actor.is-tech .tech-vision{opacity:1}
.tech-vision>img{filter:grayscale(1) brightness(1.6) contrast(1.15);opacity:.7}
.tech-vision>svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 4px #22d3ee)}
.chest-mark{z-index:2;pointer-events:none}
.actor.is-tech .chest-mark{filter:drop-shadow(0 0 7px #22d3ee)}
.hover-instruction{font:10px/1.6 'JetBrains Mono',monospace;color:#7695a9;margin-top:20px;display:flex;align-items:center;gap:8px}
.hover-instruction:before{content:'+';color:#45c6c8;font-size:16px}
@media(max-width:700px){.header .brand{font-size:9px;letter-spacing:1px}.header #navigation{padding:26px;right:12px;width:calc(100vw - 24px)}.header #navigation>a{font-size:28px}.hover-instruction{font-size:8px;margin-top:12px}.section-heading h2,.about-copy h2{font-size:34px}.section-label{font-size:9px}.tech-vision{mask-image:radial-gradient(circle 180px at var(--scan-x,60.5%) var(--scan-y,60.5%),#000 35%,transparent 100%)}.service h3{font-size:16px}.project-info h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.tech-vision,.header #navigation{transition:none}}

/* Uma cena de cubos sobre a página, sem a antiga hero ao fundo. */
.atmosphere{display:none}
body>#flow-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;filter:none}
.about-section,.solutions-section,.contact-section,.tech-groups article{background-color:transparent;background-image:none}
.chest-mark{width:11%;aspect-ratio:1;transform:translate(-50%,-50%)}
.exact-chest-logo{display:block;width:100%;height:100%;background:#063647;mask:url('assets/jp-logo-original.png') center/175% no-repeat;-webkit-mask:url('assets/jp-logo-original.png') center/175% no-repeat}
.dialog-top{background:#0b1420f5}
#main>.flow-section:not(#inicio){position:relative;z-index:7}
@media(max-width:700px){.hover-instruction{display:none}}