/* Cores da marca e textura uniforme; sem reflexos metálicos fortes. */
body{position:relative;isolation:isolate;background:#020303}
body::before{display:none}
body::after{display:none}
.hub{background:linear-gradient(145deg,#b5d8e00b,#14202b38 50%,#a0bfc608);box-shadow:inset 0 1px 0 #e7f8ff24,0 26px 80px #0004}
.intro{padding-top:28px;overflow:hidden}
.intro::before{inset:0 -10px;background:linear-gradient(#0b131900 0%,#0b131926 40%,#0b1319cc 83%,#0b131900 100%)}
.ambient-scene{position:absolute;inset:2px -29px -2px;z-index:-2;pointer-events:none;background:linear-gradient(#070e1859 0%,#06101547 43%,#0b151cbd 78%,#0b151cfa 100%),url('assets/estadio-noturno.webp') center 48%/cover no-repeat;mask-image:linear-gradient(transparent,#000 13%,#000 78%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 13%,#000 78%,transparent);opacity:.92}
.metal-logo{filter:drop-shadow(0 3px 0 #061c0f99) drop-shadow(0 8px 16px #0005)}
.metal-logo::before{background:url('assets/textura-azhub.jpg') center 48%/cover no-repeat;opacity:.3;mix-blend-mode:soft-light;filter:grayscale(1) contrast(.7);animation:none}
.metal-logo::after{display:none;animation:none}
.intro-line{position:relative;text-shadow:0 2px 16px #030b10a6}
.intro-support{position:relative;color:#b8c6ce}
@media(max-width:420px){.ambient-scene{inset:2px -21px -2px}}
@media(max-width:340px){.ambient-scene{inset-inline:-17px}}
@media(prefers-reduced-motion:reduce){body::before,body::after,.ambient-scene{animation:none;will-change:auto;transform:none}}

/* Logo aprovado em relevo; somente tema escuro. */
:root{color-scheme:dark}
.metal-logo{aspect-ratio:1295/1214;filter:drop-shadow(0 6px 12px #0006)}
.metal-logo::before,.metal-logo::after{display:none;animation:none}

/* Iteração 5: serviços verdes, brilho discreto e entradas escalonadas. */
.intro{padding-top:12px}
.service-link{background:linear-gradient(125deg,#16894e66,#0b513b80 60%,#123f3599);border-color:#66d79855;box-shadow:inset 0 1px 0 #bdffcf26,0 8px 24px #0003}
.service-link::before{background:linear-gradient(90deg,transparent,#b4ffd44d,transparent)}
.service-link:hover{background:linear-gradient(125deg,#1b9d5a80,#12654980);border-color:#87e8b28c;box-shadow:inset 0 1px 0 #caffde40,0 12px 30px #0003}
.service-link .service-icon{color:#a2ecc0}
.service-link .service-text small,.service-link .arrow{color:#bfdacb}
.metal-logo::after{display:block;inset:0;mask:url('assets/logo-relevo-escovado.webp') center/100% 100% no-repeat;-webkit-mask:url('assets/logo-relevo-escovado.webp') center/100% 100% no-repeat;background:linear-gradient(112deg,transparent 40%,#ffffff0a 45%,#ffffffb3 49%,#ffffff0a 53%,transparent 58%);background-size:350% 100%;mix-blend-mode:screen;animation:logo-soft-shine 10s ease-in-out infinite;opacity:0}
@keyframes logo-soft-shine{0%,18%{background-position:100% center;opacity:0}26%{opacity:.23}48%{background-position:0% center;opacity:.23}58%,100%{background-position:0% center;opacity:0}}
.hub{animation:hub-enter .75s ease-out both}
.metal-logo,.intro-line,.intro-support,.section-heading,.service-link,footer{animation:content-enter .7s cubic-bezier(.22,1,.36,1) both}
.metal-logo{animation-delay:.1s}.intro-line{animation-delay:.2s}.intro-support{animation-delay:.3s}.section-heading{animation-delay:.38s}
.service-link:nth-child(1){animation-delay:.45s}.service-link:nth-child(2){animation-delay:.56s}.service-link:nth-child(3){animation-delay:.67s}footer{animation-delay:.78s}
@keyframes hub-enter{from{opacity:0}to{opacity:1}}
@keyframes content-enter{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hub,.metal-logo,.intro-line,.intro-support,.section-heading,.service-link,footer{animation:none;opacity:1;translate:none}.metal-logo::after{display:none;animation:none}}



/* Malha de pontos nítidos, renderizada na densidade real da tela. */
.dot-background{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 1px 1px,#b6c9bf27 .65px,transparent 1px) 8px 8px/16px 16px}
.hub{background:linear-gradient(145deg,#12201ce8,#0b1414e8 52%,#10191bec)}

/* Tipografia digital em destaque apenas nos títulos dos serviços. */
.service-text strong{font-family:Orbitron,Manrope,sans-serif;font-size:16px;line-height:1.4;font-weight:700;letter-spacing:.1px;color:#f2fff6}
.service-text small{margin-top:6px}
@media(max-width:420px){.service-text strong{font-size:15px}}
@media(max-width:340px){.service-text strong{font-size:13px}}

/* Cabeçalho Orbitron e setas diagonais maiores. */
.intro-line{font-family:Orbitron,Manrope,sans-serif;font-size:23px;line-height:1.5;letter-spacing:-.5px;font-weight:600}
.service-link>.arrow{width:27px;height:27px;stroke-width:1.8;color:#c1f6d5}
@media(max-width:420px){.intro-line{font-size:19px;letter-spacing:-.4px}.service-link>.arrow{width:24px;height:24px}}
@media(max-width:340px){.intro-line{font-size:16px}.service-link>.arrow{width:22px;height:22px}}

/* Crédito independente abaixo do painel principal. */
.developer-card{display:flex;align-items:center;justify-content:center;width:min(100%,484px);margin:18px auto 0;padding:14px 18px;text-align:center;border:1px solid #9bc6ad24;border-radius:16px;background:#0d1513bd;color:#acbeb5;transition:border-color .2s,background .2s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.developer-card:hover{border-color:#8accaa55;background:#14211ae0}
.developer-credit small{display:block;font-size:9px;line-height:1.6;color:#94a89b}
.developer-credit strong{display:block;font-size:12px;line-height:1.7;font-weight:700;letter-spacing:.1px;color:#c4d5ca}

/* Digitação executada uma vez na entrada, com espaço reservado. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.typing-sizer{visibility:hidden;display:block}
.typing-copy{position:absolute;inset:0;display:block}
.typing-cursor{display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.08em;background:#55dd8c;box-shadow:0 0 6px #55dd8c35;animation:typing-caret .7s steps(1,end) infinite}
.typing-finished .typing-cursor{animation:none}
.typing-cursor[hidden]{display:none}
@keyframes typing-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typing-cursor{display:none}}