/* Refinamento visual — mantém a base existente e adiciona profundidade, movimento e acabamento premium. */
:root{
  --glow-cyan:rgba(143,214,220,.24);
  --glow-purple:rgba(147,64,170,.24);
}

body{background:
  radial-gradient(circle at 50% -20%,rgba(68,72,152,.16),transparent 36%),
  var(--bg);
}

.cursor-glow{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(143,214,220,.10),rgba(147,64,170,.055) 34%,transparent 68%);
  filter:blur(14px);
  transition:opacity .35s ease;
}
.cursor-glow.active{opacity:1}

.ambient-a{animation:ambientFloatA 16s ease-in-out infinite alternate}
.ambient-b{animation:ambientFloatB 19s ease-in-out infinite alternate}
.grid-overlay{animation:gridDrift 24s linear infinite}

.site-header{
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.site-header.scrolled{
  background:rgba(8,11,21,.88);
  border-color:rgba(143,214,220,.15);
  box-shadow:0 18px 55px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.015) inset;
}
.brand-mark{position:relative;overflow:hidden}
.brand-mark:after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.42) 48%,transparent 60%);
  transform:translateX(-90%) rotate(8deg);
  animation:brandShine 6.5s ease-in-out infinite;
}

h1 em,h2 em{
  background-size:220% 220%;
  animation:gradientFlow 8s ease-in-out infinite;
}

.visual-shell{
  transition:transform .18s ease-out,border-color .35s ease,box-shadow .35s ease;
  will-change:transform;
}
.visual-shell:hover{
  border-color:rgba(143,214,220,.18);
  box-shadow:0 32px 100px rgba(0,0,0,.40),0 0 70px rgba(147,64,170,.08);
}
.visual-shell:after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  height:1px;
  top:-10%;
  background:linear-gradient(90deg,transparent,rgba(143,214,220,.72),rgba(177,127,191,.78),transparent);
  box-shadow:0 0 20px rgba(143,214,220,.38);
  animation:scanLine 8s ease-in-out infinite;
}
.visual-card{z-index:2}
.orb-one{animation:orbFloatOne 9s ease-in-out infinite alternate}
.orb-two{animation:orbFloatTwo 11s ease-in-out infinite alternate}
.card-top{animation:cardFloatTop 6.5s ease-in-out infinite}
.card-center{animation:cardFloatCenter 7.5s ease-in-out infinite}
.card-bottom{animation:cardFloatBottom 6.8s ease-in-out infinite}

.button.primary{position:relative;overflow:hidden}
.button.primary:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .65s ease;
}
.button.primary:hover:after{transform:translateX(120%)}

.service-card,.about-panel,.contact-panel{
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.service-card{
  isolation:isolate;
}
.service-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(143,214,220,.13),rgba(147,64,170,.06) 35%,transparent 68%);
  transition:opacity .3s ease;
}
.service-card:hover:before{opacity:1}
.service-card:hover{
  box-shadow:0 26px 70px rgba(0,0,0,.28),0 0 45px rgba(143,214,220,.035);
}

.about-panel,.contact-panel{position:relative;overflow:hidden}
.about-panel:before,.contact-panel:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.022) 48%,transparent 70%);
}
.about-numbers div{transition:transform .3s ease,border-color .3s ease,background .3s ease}
.about-numbers div:hover{transform:translateY(-4px);border-color:rgba(143,214,220,.2);background:rgba(12,18,34,.62)}

.reveal{filter:blur(5px)}
.reveal.visible{filter:blur(0)}

@keyframes ambientFloatA{to{transform:translate(-80px,90px) scale(1.12)}}
@keyframes ambientFloatB{to{transform:translate(100px,-70px) scale(.92)}}
@keyframes gridDrift{to{background-position:48px 48px}}
@keyframes brandShine{0%,70%{transform:translateX(-110%) rotate(8deg)}85%,100%{transform:translateX(110%) rotate(8deg)}}
@keyframes gradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes scanLine{0%,8%{top:-8%;opacity:0}18%{opacity:.75}72%{opacity:.45}82%,100%{top:108%;opacity:0}}
@keyframes orbFloatOne{to{transform:translate(-20px,26px) scale(1.06)}}
@keyframes orbFloatTwo{to{transform:translate(24px,-18px) scale(.94)}}
@keyframes cardFloatTop{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2.8deg) translateY(-8px)}}
@keyframes cardFloatCenter{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes cardFloatBottom{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1.8deg) translateY(-7px)}}

/* Cabeçalho com Logo Oficial */
.header-brand{position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:0}
.header-brand-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:56px;border-radius:50%;background:radial-gradient(ellipse,rgba(143,214,220,.24) 0%,rgba(147,64,170,.18) 45%,rgba(68,72,152,.05) 70%,transparent 78%);filter:blur(12px);pointer-events:none;opacity:.75;animation:headerHaloPulse 6s ease-in-out infinite alternate;transition:opacity .4s ease,transform .4s ease}
.header-logo{position:relative;z-index:1;display:block;height:clamp(40px,4.5vw,46px);width:auto;aspect-ratio:742/671;object-fit:contain;filter:drop-shadow(0 0 8px rgba(143,214,220,.24)) drop-shadow(0 0 16px rgba(147,64,170,.18));animation:headerLogoFloat 5.5s ease-in-out infinite;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;will-change:transform,filter}
.header-brand:hover .header-logo{transform:translateY(-2px) scale(1.045);filter:drop-shadow(0 0 16px rgba(143,214,220,.65)) drop-shadow(0 0 28px rgba(177,127,191,.48)) brightness(1.1)}
.header-brand:hover .header-brand-halo{transform:translate(-50%,-50%) scale(1.18);opacity:1;filter:blur(14px)}
@keyframes headerLogoFloat{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 8px rgba(143,214,220,.24)) drop-shadow(0 0 16px rgba(147,64,170,.18)) brightness(1)}
  50%{transform:translateY(-2px) scale(1.02);filter:drop-shadow(0 0 13px rgba(143,214,220,.42)) drop-shadow(0 0 22px rgba(177,127,191,.3)) brightness(1.06)}
}
@keyframes headerHaloPulse{
  0%{transform:translate(-50%,-50%) scale(.92);opacity:.6}
  100%{transform:translate(-50%,-50%) scale(1.08);opacity:.9}
}

/* Rodapé com Logo Oficial e Contatos */
.footer{flex-wrap:wrap;gap:18px 24px}
.footer-logo-link{display:inline-flex;align-items:center;text-decoration:none;line-height:0;transition:transform .3s ease,opacity .3s ease}
.footer-logo-link:hover{transform:translateY(-1.5px)}
.footer-logo{display:block;height:clamp(26px,2.8vw,32px);width:auto;aspect-ratio:966/251;object-fit:contain;filter:drop-shadow(0 0 10px rgba(143,214,220,.24)) drop-shadow(0 0 18px rgba(177,127,191,.18));animation:footerGlow 5s ease-in-out infinite alternate;transition:filter .35s ease,transform .35s ease;will-change:filter}
.footer-logo-link:hover .footer-logo{filter:drop-shadow(0 0 14px rgba(143,214,220,.55)) drop-shadow(0 0 26px rgba(177,127,191,.4)) brightness(1.08)}
.footer-contacts{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-contact-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#cbd1e4;
  font-size:.80rem;
  font-weight:500;
  text-decoration:none;
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.footer-contact-link:hover{
  color:#fff;
  border-color:rgba(143,214,220,.35);
  background:rgba(255,255,255,.06);
  transform:translateY(-1.5px);
  box-shadow:0 4px 16px rgba(0,0,0,.25),0 0 16px rgba(143,214,220,.16);
}
.footer-contact-icon{flex-shrink:0;color:var(--cyan);transition:transform .25s ease,color .25s ease}
.footer-contact-link:hover .footer-contact-icon{color:#fff;transform:scale(1.08)}
.footer a.back-to-top{transition:color .25s ease,transform .25s ease}
.footer a.back-to-top:hover{color:#fff;transform:translateY(-1px)}
@keyframes footerGlow{
  0%{filter:drop-shadow(0 0 8px rgba(143,214,220,.2)) drop-shadow(0 0 14px rgba(177,127,191,.14))}
  100%{filter:drop-shadow(0 0 13px rgba(143,214,220,.38)) drop-shadow(0 0 22px rgba(177,127,191,.28))}
}

@media (max-width:640px){
  h1 em,h2 em{
    padding-right:.04em;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  .cursor-glow{display:none}
  .header-logo{height:36px}
  .header-brand-halo{width:58px;height:44px}
  .footer{gap:18px;padding:32px 0 40px}
  .footer-contacts{gap:8px 10px;width:100%}
  .footer-contact-link{padding:7px 11px;font-size:.78rem}
  .footer-logo{height:25px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .visual-shell{transform:none!important}
  .cursor-glow{display:none}
  .signal-card-logo,.signal-logo-wrap,.signal-halo{animation:none!important;transform:none!important;transition:none!important}
  .signal-symbol-wrap,.signal-text-wrap{animation:none!important;transform:translate(-50%,-50%)!important;transition:none!important}
  .footer-contact-link,.footer-contact-icon{animation:none!important;transition:none!important;transform:none!important}
  .footer-logo{animation:none!important;transition:none!important}
  .footer-logo-link{transition:none!important;transform:none!important}
  .header-logo,.header-brand-halo{animation:none!important;transform:none!important;transition:none!important}
}

/* =========================================================
   CARD 01 | LÁPIS FAZENDO UM RABISCO
   ========================================================= */

.service-card:nth-child(1) .icon {
  display: none !important;
}

.service-card:nth-child(1) {
  padding-top: 26px;
}

.service-hero-illustration--pencil {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  pointer-events: none;
}

.pencil-hero-svg {
  width: min(180px, 72%);
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 0 14px rgba(143, 214, 220, .10))
    drop-shadow(0 0 30px rgba(160, 122, 209, .08));
}

/* Rabisco */

.pencil-scribble,
.pencil-scribble-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pencil-scribble {
  stroke: url(#pencilGradient);
  stroke-width: 3.2;
  opacity: .88;
  filter: url(#pencilGlow);

  stroke-dasharray: 100;
  stroke-dashoffset: 100;

  animation: pencilScribbleDraw 4.6s ease-in-out infinite;
}

.pencil-scribble-highlight {
  stroke: rgba(255, 255, 255, .72);
  stroke-width: 1.15;
  opacity: 0;

  stroke-dasharray: 16 84;
  stroke-dashoffset: 100;

  animation: pencilHighlight 4.6s linear infinite;
}

/* Lápis */

.pencil-group {
  filter: url(#pencilGlow);
}

.pencil-body {
  fill: rgba(14, 18, 34, .92);
  stroke: url(#pencilGradient);
  stroke-width: 1.6;
}

.pencil-wood {
  fill: rgba(210, 186, 152, .95);
  stroke: url(#pencilGradient);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.pencil-tip {
  fill: rgba(143, 214, 220, .95);
  stroke: rgba(255,255,255,.30);
  stroke-width: .8;
  stroke-linejoin: round;
}

.pencil-eraser {
  fill: rgba(199, 93, 226, .22);
  stroke: url(#pencilGradient);
  stroke-width: 1.2;
}

.pencil-metal {
  fill: rgba(143, 214, 220, .18);
  stroke: rgba(143, 214, 220, .35);
  stroke-width: .8;
}

/* Hover */

.service-card:nth-child(1):hover .pencil-hero-svg,
.service-card:nth-child(1):focus-within .pencil-hero-svg {
  filter:
    drop-shadow(0 0 18px rgba(143, 214, 220, .18))
    drop-shadow(0 0 36px rgba(177, 127, 191, .16));
}

/* Animações */

@keyframes pencilScribbleDraw {
  0%,
  8% {
    stroke-dashoffset: 100;
    opacity: .25;
  }

  24%,
  82% {
    stroke-dashoffset: 0;
    opacity: .92;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: .92;
  }
}

@keyframes pencilHighlight {
  0%,
  24% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  36%,
  78% {
    opacity: .95;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -30;
  }
}

/* Responsivo */

@media (max-width: 768px) {
  .service-hero-illustration--pencil {
    margin-bottom: 18px;
  }

  .pencil-hero-svg {
    width: min(158px, 68%);
  }
}

/* Redução de movimento */

@media (prefers-reduced-motion: reduce) {
  .pencil-scribble,
  .pencil-scribble-highlight {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .pencil-scribble-highlight {
    opacity: .45 !important;
  }

  .pencil-group animateMotion {
    display: none;
  }

  .pencil-group {
    transform: translate(206px, 58px) rotate(-10deg);
  }
}

/* =========================================================
   CARD 02
   Dispositivos conectados
   ========================================================= */

.service-card:nth-child(2) {
  padding-top: 26px;
}

.service-hero-illustration--devices {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  pointer-events: none;
}

.devices-hero-svg {
  width: min(180px, 72%);
  height: auto;
  overflow: visible;

  filter:
    drop-shadow(0 0 14px rgba(143, 214, 220, .10))
    drop-shadow(0 0 30px rgba(157, 123, 210, .08));
}

/* DISPOSITIVOS */

.device-frame,
.device-base {
  fill: rgba(14, 18, 34, .88);
  stroke: url(#devicesGradient);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.device-screen {
  fill: rgba(143, 214, 220, .045);
  stroke: rgba(143, 214, 220, .30);
  stroke-width: 1;
}

.device-detail,
.device-content-dot {
  fill: #8FD6DC;
  filter: url(#devicesGlow);
}

/* CONEXÕES */

.device-connection {
  fill: none;
  stroke: url(#devicesGradient);
  stroke-width: 1.4;
  stroke-linecap: round;

  stroke-dasharray: 5 6;

  opacity: .42;

  animation:
    deviceConnectionPulse 3.8s ease-in-out infinite;
}

.device-connection--right {
  animation-delay: .4s;
}

.device-connection--bottom {
  animation-delay: .8s;
}

/* PULSOS VIAJANDO */

.device-signal {
  fill: #8FD6DC;

  filter: url(#devicesGlow);

  opacity: .95;
}

/* NOTEBOOK */

.device--laptop {
  transform-box: fill-box;
  transform-origin: center;

  animation:
    laptopGlow 4.4s ease-in-out infinite;
}

/* CELULAR */

.device--phone {
  transform-box: fill-box;
  transform-origin: center;

  animation:
    deviceFloatLeft 4.8s ease-in-out infinite;
}

/* TABLET */

.device--tablet {
  transform-box: fill-box;
  transform-origin: center;

  animation:
    deviceFloatRight 5.2s ease-in-out infinite;
}

/* DISPOSITIVO INFERIOR */

.device--terminal {
  transform-box: fill-box;
  transform-origin: center;

  animation:
    deviceBottomPulse 4.6s ease-in-out infinite;
}

/* NÚCLEO */

.device-hub-ring {
  fill: none;
  stroke: #B17FBF;
  stroke-width: 1.5;

  transform-box: fill-box;
  transform-origin: center;

  opacity: .45;

  animation:
    deviceHubRing 2.8s ease-out infinite;
}

.device-hub-core {
  fill: #8FD6DC;

  filter: url(#devicesGlow);

  animation:
    deviceHubCore 2.8s ease-in-out infinite;
}

/* =========================================================
   HOVER
   ========================================================= */

.service-card:nth-child(2):hover .devices-hero-svg,
.service-card:nth-child(2):focus-within .devices-hero-svg {
  filter:
    drop-shadow(0 0 18px rgba(143, 214, 220, .18))
    drop-shadow(0 0 36px rgba(177, 127, 191, .16));
}

.service-card:nth-child(2):hover .device-connection {
  opacity: .72;
}

/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes deviceConnectionPulse {
  0%,
  100% {
    opacity: .28;
  }

  50% {
    opacity: .72;
  }
}

@keyframes laptopGlow {
  0%,
  100% {
    opacity: .88;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes deviceFloatLeft {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-2px, -4px);
  }
}

@keyframes deviceFloatRight {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(3px, -3px);
  }
}

@keyframes deviceBottomPulse {
  0%,
  100% {
    opacity: .72;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(2px);
  }
}

@keyframes deviceHubRing {
  0% {
    opacity: .65;
    transform: scale(.6);
  }

  70% {
    opacity: 0;
    transform: scale(2.2);
  }

  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes deviceHubCore {
  0%,
  100% {
    transform: scale(.85);
    opacity: .75;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .service-hero-illustration--devices {
    margin-bottom: 18px;
  }

  .devices-hero-svg {
    width: min(160px, 68%);
  }
}

/* =========================================================
   REDUZIR MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .device,
  .device-connection,
  .device-hub-ring,
  .device-hub-core {
    animation: none !important;
  }

  .device-connection {
    opacity: .55 !important;
  }

  .device-hub-ring {
    opacity: .45 !important;
    transform: none !important;
  }

  .device-hub-core {
    opacity: 1 !important;
    transform: none !important;
  }

  .device-signal {
    display: none;
  }
}

/* =========================================================
   CARD 03
   WWW + Internet + presença digital
   ========================================================= */

.service-card:nth-child(3) {
  padding-top: 26px;
}

.service-hero-illustration--web {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  pointer-events: none;
}

.web-hero-svg {
  width: min(180px, 72%);
  height: auto;
  overflow: visible;

  filter:
    drop-shadow(0 0 14px rgba(143, 214, 220, .10))
    drop-shadow(0 0 30px rgba(162, 122, 210, .08));
}


/* =========================================================
   GLOBO
   ========================================================= */

.web-globe-line {
  fill: none;
  stroke: url(#webGradient);
  stroke-width: 1.5;
  stroke-linecap: round;

  stroke-dasharray: 380;
  stroke-dashoffset: 380;

  opacity: .55;

  animation:
    webGlobeDraw 5.6s ease-in-out infinite;
}

.web-globe-outline {
  stroke-width: 2;
  opacity: .82;
}

.web-meridian--1 {
  animation-delay: .10s;
}

.web-meridian--2 {
  animation-delay: .20s;
}

.web-latitude--1 {
  animation-delay: .30s;
}

.web-latitude--2 {
  animation-delay: .40s;
}

.web-equator {
  animation-delay: .50s;
}


/* =========================================================
   WWW
   ========================================================= */

.web-www {
  fill: url(#webGradient);

  font-size: 23px;
  font-weight: 800;
  letter-spacing: 2px;

  opacity: .88;

  filter: url(#webGlow);

  animation:
    webWWWGlow 3.5s ease-in-out infinite;
}


/* =========================================================
   PONTOS DA REDE
   ========================================================= */

.web-node {
  fill: #8FD6DC;

  opacity: .45;

  transform-box: fill-box;
  transform-origin: center;

  filter: url(#webGlow);

  animation:
    webNodePulse 3.2s ease-in-out infinite;
}

.web-node--2 {
  fill: #B17FBF;
  animation-delay: .5s;
}

.web-node--3 {
  fill: #C65CE2;
  animation-delay: 1s;
}

.web-node--4 {
  animation-delay: 1.5s;
}


/* =========================================================
   ÓRBITAS EXTERNAS
   ========================================================= */

.web-orbit {
  fill: none;

  stroke: url(#webGradient);
  stroke-width: 1.25;
  stroke-linecap: round;

  stroke-dasharray: 4 7;

  opacity: .30;

  animation:
    webOrbitGlow 4s ease-in-out infinite;
}

.web-orbit--reverse {
  animation-delay: .8s;
}


/* =========================================================
   PACOTES / TRÁFEGO DA INTERNET
   ========================================================= */

.web-packet {
  fill: #8FD6DC;

  opacity: .95;

  filter: url(#webGlow);
}

.web-packet--2 {
  fill: #C65CE2;
}


/* =========================================================
   PULSO CENTRAL
   ========================================================= */

.web-center-pulse {
  fill: none;

  stroke: #B17FBF;
  stroke-width: 1.4;

  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  animation:
    webCenterPulse 3s ease-out infinite;
}


/* =========================================================
   HOVER
   ========================================================= */

.service-card:nth-child(3):hover .web-hero-svg,
.service-card:nth-child(3):focus-within .web-hero-svg {
  filter:
    drop-shadow(0 0 18px rgba(143, 214, 220, .20))
    drop-shadow(0 0 38px rgba(177, 127, 191, .18));
}

.service-card:nth-child(3):hover .web-globe-line {
  opacity: .90;
}

.service-card:nth-child(3):hover .web-www {
  opacity: 1;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes webGlobeDraw {

  0%,
  8% {
    stroke-dashoffset: 380;
    opacity: .08;
  }

  26% {
    stroke-dashoffset: 0;
    opacity: .78;
  }

  82% {
    stroke-dashoffset: 0;
    opacity: .78;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: .42;
  }

}


@keyframes webWWWGlow {

  0%,
  100% {
    opacity: .65;
  }

  50% {
    opacity: 1;
  }

}


@keyframes webNodePulse {

  0%,
  100% {
    opacity: .35;
    transform: scale(.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.35);
  }

}


@keyframes webOrbitGlow {

  0%,
  100% {
    opacity: .18;
  }

  50% {
    opacity: .58;
  }

}


@keyframes webCenterPulse {

  0% {
    opacity: .55;
    transform: scale(.55);
  }

  70% {
    opacity: 0;
    transform: scale(2);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 768px) {

  .service-hero-illustration--web {
    margin-bottom: 18px;
  }

  .web-hero-svg {
    width: min(158px, 68%);
  }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .web-globe-line,
  .web-www,
  .web-node,
  .web-orbit,
  .web-center-pulse {
    animation: none !important;
  }

  .web-globe-line {
    stroke-dashoffset: 0 !important;
    opacity: .72 !important;
  }

  .web-www {
    opacity: 1 !important;
  }

  .web-node {
    opacity: .8 !important;
    transform: none !important;
  }

  .web-orbit {
    opacity: .3 !important;
  }

  .web-center-pulse {
    display: none;
  }

  .web-packet {
    display: none;
  }

}

/* =========================================================
   CARD 04 | DUAS ENGRENAGENS
   ========================================================= */

.service-card:nth-child(4) .icon {
  display: none !important;
}

.service-card:nth-child(4) {
  padding-top: 26px;
}

.service-hero-illustration--gears {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  pointer-events: none;
}

.gears-hero-svg {
  width: min(180px, 72%);
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 0 14px rgba(143, 214, 220, .10))
    drop-shadow(0 0 28px rgba(160, 122, 209, .08));
}

.gear {
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#gearGlow);
}

.gear-ring,
.gear-tooth {
  fill: rgba(14, 18, 34, .92);
  stroke: url(#gearGradient);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.gear-hole {
  fill: rgba(143, 214, 220, .10);
  stroke: rgba(143, 214, 220, .35);
  stroke-width: 1.2;
}

.gear--large {
  animation: gearRotateLarge 12s linear infinite;
}

.gear--small {
  animation: gearRotateSmall 9s linear infinite;
}

.service-card:nth-child(4):hover .gears-hero-svg,
.service-card:nth-child(4):focus-within .gears-hero-svg {
  filter:
    drop-shadow(0 0 18px rgba(143, 214, 220, .18))
    drop-shadow(0 0 36px rgba(177, 127, 191, .16));
}

@keyframes gearRotateLarge {
  from {
    transform: translate(104px, 92px) rotate(0deg);
  }
  to {
    transform: translate(104px, 92px) rotate(360deg);
  }
}

@keyframes gearRotateSmall {
  from {
    transform: translate(150px, 54px) rotate(360deg);
  }
  to {
    transform: translate(150px, 54px) rotate(0deg);
  }
}

@media (max-width: 768px) {
  .service-hero-illustration--gears {
    margin-bottom: 18px;
  }

  .gears-hero-svg {
    width: min(160px, 68%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gear--large,
  .gear--small {
    animation: none !important;
  }
}

/* =========================================================
   CARD 05 | ONDA SONORA ANIMADA
   ========================================================= */

.service-card:nth-child(5) .icon {
  display: none !important;
}

.service-card:nth-child(5) {
  padding-top: 26px;
}

.service-hero-illustration--audio {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  pointer-events: none;
}

.audio-hero-svg {
  width: min(190px, 76%);
  height: auto;
  overflow: visible;

  filter:
    drop-shadow(0 0 14px rgba(143, 214, 220, .10))
    drop-shadow(0 0 30px rgba(177, 127, 191, .08));
}


/* =========================================================
   BARRAS
   ========================================================= */

.audio-bar {
  fill: url(#audioGradient);

  transform-box: fill-box;
  transform-origin: center;

  opacity: .84;

  filter: url(#audioGlow);
}

.audio-bar--1 {
  animation: audioWaveA 1.55s ease-in-out infinite;
}

.audio-bar--2 {
  animation: audioWaveB 1.35s ease-in-out infinite;
}

.audio-bar--3 {
  animation: audioWaveC 1.7s ease-in-out infinite;
}

.audio-bar--4 {
  animation: audioWaveD 1.3s ease-in-out infinite;
}

.audio-bar--5 {
  animation: audioWaveB 1.6s ease-in-out infinite;
}

.audio-bar--6 {
  animation: audioWaveCenter 1.4s ease-in-out infinite;
}

.audio-bar--7 {
  animation: audioWaveC 1.55s ease-in-out infinite;
}

.audio-bar--8 {
  animation: audioWaveD 1.25s ease-in-out infinite;
}

.audio-bar--9 {
  animation: audioWaveA 1.7s ease-in-out infinite;
}

.audio-bar--10 {
  animation: audioWaveB 1.4s ease-in-out infinite;
}

.audio-bar--11 {
  animation: audioWaveC 1.6s ease-in-out infinite;
}


/* =========================================================
   LINHA DE BRILHO
   ========================================================= */

.audio-glow-line {
  fill: none;

  stroke: rgba(255, 255, 255, .55);
  stroke-width: 1.3;
  stroke-linecap: round;

  path-length: 100;

  stroke-dasharray: 18 82;
  stroke-dashoffset: 100;

  opacity: .50;

  filter: url(#audioGlow);

  animation: audioGlowTravel 4s linear infinite;
}


/* =========================================================
   HOVER
   ========================================================= */

.service-card:nth-child(5):hover .audio-hero-svg,
.service-card:nth-child(5):focus-within .audio-hero-svg {
  filter:
    drop-shadow(0 0 18px rgba(143, 214, 220, .20))
    drop-shadow(0 0 38px rgba(177, 127, 191, .18));
}

.service-card:nth-child(5):hover .audio-bar {
  opacity: 1;
}


/* =========================================================
   MOVIMENTO DA ONDA
   ========================================================= */

@keyframes audioWaveA {
  0%,
  100% {
    transform: scaleY(.55);
  }

  50% {
    transform: scaleY(1.25);
  }
}

@keyframes audioWaveB {
  0%,
  100% {
    transform: scaleY(.80);
  }

  50% {
    transform: scaleY(1.45);
  }
}

@keyframes audioWaveC {
  0%,
  100% {
    transform: scaleY(.65);
  }

  40% {
    transform: scaleY(1.18);
  }

  70% {
    transform: scaleY(.90);
  }
}

@keyframes audioWaveD {
  0%,
  100% {
    transform: scaleY(.72);
  }

  35% {
    transform: scaleY(1.35);
  }

  65% {
    transform: scaleY(.82);
  }
}

@keyframes audioWaveCenter {
  0%,
  100% {
    transform: scaleY(.70);
  }

  50% {
    transform: scaleY(1.18);
  }
}


/* =========================================================
   BRILHO PERCORRENDO A ONDA
   ========================================================= */

@keyframes audioGlowTravel {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: -100;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .service-hero-illustration--audio {
    margin-bottom: 18px;
  }

  .audio-hero-svg {
    width: min(165px, 70%);
  }
}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .audio-bar,
  .audio-glow-line {
    animation: none !important;
  }

  .audio-bar {
    transform: none !important;
    opacity: .9 !important;
  }

  .audio-glow-line {
    opacity: .35 !important;
  }
}

/* =========================================================
   ALINHAMENTO DOS ÍCONES DOS CARDS DE SERVIÇOS
   Todos os textos começam na mesma altura
   ========================================================= */

.service-grid--five .service-hero-illustration {
  width: 100%;
  height: 125px !important;
  min-height: 125px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 20px !important;

  flex-shrink: 0;
}

/* Mantém cada SVG centralizado dentro da mesma área */
.service-grid--five .service-hero-illustration svg {
  display: block;
  max-height: 105px;
  margin: 0 auto;
}

/* Padroniza também o espaço superior dos cinco cards */
.service-grid--five > .service-card {
  padding-top: 26px;
}

/* =========================================================
   DA IDEIA AO PROJETO
   Mantém a animação visual fixa durante a troca dos textos
   ========================================================= */

.journey-slide {
  transform: none !important;
  filter: none !important;

  transition:
    opacity .55s ease,
    visibility .55s ease !important;
}


/* Reserva uma área fixa para o conteúdo textual */

.journey-slide > div:first-child {
  padding-right: 255px;
}


/* A animação ocupa sempre exatamente o mesmo lugar */

.journey-visual {
  position: absolute !important;

  top: 50% !important;
  right: 34px !important;

  width: 230px !important;
  height: 230px !important;
  min-height: 230px !important;

  display: grid !important;
  place-items: center !important;

  transform: translateY(-50%) !important;

  margin: 0 !important;
}


/* Garante que todas as órbitas tenham exatamente
   o mesmo ponto central */

.journey-orbit {
  position: relative;

  width: 190px !important;
  height: 190px !important;

  flex: 0 0 190px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 860px) and (min-width: 641px) {

  .journey-slide > div:first-child {
    padding-right: 235px;
  }

  .journey-visual {
    right: 24px !important;

    width: 210px !important;
    height: 210px !important;
    min-height: 210px !important;
  }

  .journey-orbit {
    width: 170px !important;
    height: 170px !important;
  }
}


/* =========================================================
   MOBILE
   A ilustração também fica presa em uma posição fixa
   ========================================================= */

@media (max-width: 640px) {

  .journey-slide {
    display: block !important;
    padding: 28px 22px !important;
  }

  .journey-slide > div:first-child {
    padding-right: 0;
    padding-bottom: 190px;
  }

  .journey-visual {
    top: auto !important;

    left: 50% !important;
    right: auto !important;
    bottom: 20px !important;

    width: 170px !important;
    height: 170px !important;
    min-height: 170px !important;

    transform: translateX(-50%) !important;
  }

  .journey-orbit {
    width: 145px !important;
    height: 145px !important;
  }
}

/* =========================================================
   HERO | SHOWCASE DE PROJETOS
   ========================================================= */

.project-showcase {
  position: relative;
  width: min(100%, 485px);
  aspect-ratio: 0.82;
  margin: 0 auto;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;

  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(177,127,191,.22),
      transparent 38%
    ),
    rgba(10,14,28,.92);

  box-shadow:
    0 32px 90px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.project-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(143,214,220,.05),
      transparent 35%,
      rgba(177,127,191,.07)
    );
}

.project-showcase__screen {
  position: absolute;
  inset: 28px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;

  background: rgba(5,8,18,.86);
}

.project-showcase__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: 0;
  transform: scale(.965);

  transition:
    opacity .75s ease,
    transform 1s cubic-bezier(.2,.8,.2,1);

  background: #090d19;
}

.project-showcase__image.is-active {
  opacity: 1;
  transform: scale(1);
}

.project-showcase__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(5,7,16,.86) 0%,
      rgba(5,7,16,.16) 36%,
      transparent 62%
    );
}

.project-showcase__info {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;

  z-index: 4;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.project-showcase__label {
  color: var(--cyan);

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.project-showcase__info strong {
  color: #fff;

  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.2;

  text-shadow: 0 2px 15px rgba(0,0,0,.38);
}

.project-showcase__progress {
  position: absolute;
  left: 52px;
  right: 52px;
  bottom: 13px;

  z-index: 6;

  height: 2px;
  overflow: hidden;

  border-radius: 999px;

  background: rgba(255,255,255,.09);
}

.project-showcase__progress span {
  display: block;

  width: 100%;
  height: 100%;

  transform: scaleX(0);
  transform-origin: left center;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--purple)
    );

  animation: projectShowcaseProgress 5s linear infinite;
}

@keyframes projectShowcaseProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (max-width: 640px) {
  .project-showcase {
    width: min(100%, 410px);
    border-radius: 28px;
  }

  .project-showcase__screen {
    inset: 18px;
    border-radius: 21px;
  }

  .project-showcase__info {
    left: 18px;
    right: 18px;
    bottom: 19px;
  }

  .project-showcase__progress {
    left: 36px;
    right: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-showcase__image,
  .project-showcase__progress span {
    transition: none !important;
    animation: none !important;
  }

  .project-showcase__progress span {
    transform: scaleX(1);
  }
}