/* =========================================================
   BACKGROUND
========================================================= */

.background {

  position:
    fixed;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  z-index:
    -10;

}


.background::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:

    linear-gradient(rgba(0, 200, 255, .045) 1px,
      transparent 1px),

    linear-gradient(90deg,
      rgba(0, 200, 255, .045) 1px,
      transparent 1px);

  background-size:
    70px 70px;

  mask-image:
    radial-gradient(circle at center,
      black 10%,
      transparent 80%);

  animation:
    gridMove 20s linear infinite;

}


.background::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:

    radial-gradient(circle at center,
      transparent 20%,
      rgba(0, 0, 0, .45) 100%);

}


/* =========================================================
   GLOW
========================================================= */

.background-glow {

  position:
    absolute;

  width:
    700px;

  height:
    700px;

  left:
    50%;

  top:
    45%;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  background:

    radial-gradient(circle,
      rgba(0, 190, 255, .13),
      rgba(0, 100, 255, .04) 45%,
      transparent 70%);

  filter:
    blur(25px);

  animation:
    glowPulse 6s ease-in-out infinite;

}


/* =========================================================
   RING
========================================================= */

.tech-ring {

  position:
    absolute;

  width:
    850px;

  height:
    850px;

  left:
    50%;

  top:
    43%;

  transform:
    translate(-50%, -50%);

  border:
    1px solid rgba(0, 200, 255, .07);

  border-radius:
    50%;

}


.tech-ring::before {

  content:
    "";

  position:
    absolute;

  inset:
    70px;

  border:
    1px dashed rgba(0, 200, 255, .08);

  border-radius:
    50%;

  animation:
    rotateRing 35s linear infinite;

}


.tech-ring::after {

  content:
    "";

  position:
    absolute;

  inset:
    160px;

  border:
    1px solid rgba(0, 200, 255, .06);

  border-radius:
    50%;

}


/* =========================================================
   CIRCUITOS
========================================================= */

.circuit {

  position:
    absolute;

  width:
    450px;

  height:
    200px;

  opacity:
    .35;

}


.circuit-left {

  left:
    -80px;

  top:
    45%;

}


.circuit-right {

  right:
    -80px;

  top:
    45%;

  transform:
    scaleX(-1);

}


.circuit span {

  position:
    absolute;

  display:
    block;

  height:
    1px;

  background:

    linear-gradient(90deg,
      transparent,
      var(--color-cyan),
      transparent);

  box-shadow:
    0 0 8px var(--color-cyan);

}


.circuit span:nth-child(1) {

  width:
    300px;

  top:
    50px;

  left:
    0;

}


.circuit span:nth-child(2) {

  width:
    220px;

  top:
    90px;

  left:
    80px;

  transform:
    rotate(-12deg);

}


.circuit span:nth-child(3) {

  width:
    150px;

  top:
    125px;

  left:
    180px;

  transform:
    rotate(8deg);

}


.circuit span:nth-child(4) {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  top:
    46px;

  left:
    290px;

  background:
    var(--color-cyan);

  box-shadow:
    0 0 15px var(--color-cyan);

}


/* =========================================================
   HEADER
========================================================= */

.header {

  position:
    fixed;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    var(--header-height);

  z-index:
    100;

  border-bottom:
    1px solid rgba(0, 200, 255, .05);

  background:
    rgba(2, 5, 9, .45);

  backdrop-filter:
    blur(16px);

}


.header-container {

  width:
    min(var(--max-width),
      calc(100% - 40px));

  height:
    100%;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.brand {

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    .18em;

  color:
    white;

}


.navigation {

  display:
    flex;

  align-items:
    center;

  gap:
    35px;

}


.navigation a {

  position:
    relative;

  font-size:
    11px;

  color:
    rgba(255, 255, 255, .55);

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

  transition:
    .3s ease;

}


.navigation a::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -8px;

  width:
    0;

  height:
    1px;

  background:
    var(--color-cyan);

  box-shadow:
    0 0 8px var(--color-cyan);

  transition:
    .3s ease;

}


.navigation a:hover {

  color:
    white;

}


.navigation a:hover::after {

  width:
    100%;

}


.header-button {

  padding:
    11px 18px;

  border:
    1px solid var(--border);

  color:
    var(--color-cyan);

  font-size:
    10px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

  transition:
    .3s ease;

}


.header-button:hover {

  border-color:
    var(--color-cyan);

  background:
    rgba(0, 200, 255, .08);

  box-shadow:
    var(--shadow-cyan);

}


.menu-button {

  display:
    none;

  width:
    35px;

  height:
    35px;

  border:
    0;

  background:
    transparent;

}


.menu-button span {

  display:
    block;

  width:
    22px;

  height:
    1px;

  margin:
    5px auto;

  background:
    var(--color-cyan);

}


/* =========================================================
   HERO
========================================================= */

.hero {

  min-height:
    100vh;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  padding:
    120px 20px 80px;

}


.hero-content {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

}


/* =========================================================
   LOGO SKAYTECH
========================================================= */

.logo-wrapper {
  position: relative;
  width: min(1050px, 90vw);
  max-width: 100%;
  overflow: visible;
}

.logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.logo-glow {

  position:
    absolute;

  inset:
    25% 5%;

  border-radius:
    50%;

  background:
    rgba(0, 190, 255, .18);

  filter:
    blur(65px);

  z-index:
    -1;

  animation:
    logoGlow 4s ease-in-out infinite;

}



.hero-subtitle {

  margin-top:
    -15px;

  color:
    rgba(220, 245, 255, .75);

  font-size:
    12px;

  letter-spacing:
    .55em;

  text-transform:
    uppercase;

  animation:
    fadeUp 1s .4s both;

}


.hero-line {

  width:
    300px;

  max-width:
    60vw;

  height:
    1px;

  margin-top:
    25px;

  background:

    linear-gradient(90deg,
      transparent,
      var(--color-cyan),
      transparent);

  box-shadow:
    0 0 12px rgba(0, 200, 255, .7);

  animation:
    lineAppear 1.4s .6s both;

}


.hero-description {

  max-width:
    550px;

  margin-top:
    25px;

  color:
    rgba(220, 240, 250, .55);

  font-size:
    15px;

  line-height:
    1.8;

  animation:
    fadeUp 1s .7s both;

}


.hero-actions {

  display:
    flex;

  gap:
    15px;

  margin-top:
    35px;

  animation:
    fadeUp 1s .9s both;

}


/* =========================================================
   SCROLL
========================================================= */

.scroll-indicator {

  position:
    absolute;

  bottom:
    25px;

  left:
    50%;

  transform:
    translateX(-50%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    10px;

  color:
    rgba(255, 255, 255, .3);

  font-size:
    8px;

  letter-spacing:
    .3em;

  text-transform:
    uppercase;

}


.scroll-indicator i {

  display:
    block;

  width:
    1px;

  height:
    45px;

  background:

    linear-gradient(to bottom,
      var(--color-cyan),
      transparent);

  animation:
    scrollLine 2s infinite;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

  max-width:
    700px;

}


.section-heading h2 {

  margin-top:
    20px;

  font-size:
    clamp(36px,
      5vw,
      65px);

  line-height:
    1.05;

  font-weight:
    400;

  letter-spacing:
    -.04em;

}


.section-heading h2 strong {

  color:
    var(--color-cyan);

  font-weight:
    500;

}


.section-heading p {

  margin-top:
    25px;

  max-width:
    600px;

  color:
    var(--color-text-muted);

  line-height:
    1.8;

}


/* =========================================================
   SERVIÇOS
========================================================= */

.services-section {

  background:

    linear-gradient(180deg,
      transparent,
      rgba(0, 100, 150, .035),
      transparent);

}


.service-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    15px;

  margin-top:
    80px;

}


.service-card {

  min-height:
    320px;

  position:
    relative;

  padding:
    30px;

  border:
    1px solid var(--border);

  background:
    rgba(5, 15, 23, .5);

  backdrop-filter:
    blur(10px);

  overflow:
    hidden;

  transition:
    .4s ease;

}


.service-card::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    100%;

  height:
    1px;

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

  transform:
    translateX(-100%);

  transition:
    .6s ease;

}


.service-card:hover {

  border-color:
    var(--border-hover);

  transform:
    translateY(-8px);

  box-shadow:
    var(--shadow-cyan);

}


.service-card:hover::before {

  transform:
    translateX(100%);

}


.service-number {

  color:
    var(--color-cyan);

  font-size:
    11px;

  letter-spacing:
    .15em;

}


.service-card h3 {

  margin-top:
    80px;

  font-size:
    24px;

  font-weight:
    500;

}


.service-card p {

  margin-top:
    15px;

  color:
    var(--color-text-muted);

  font-size:
    13px;

  line-height:
    1.7;

}


.service-arrow {

  position:
    absolute;

  right:
    25px;

  bottom:
    20px;

  color:
    var(--color-cyan);

  font-size:
    22px;

  transition:
    .3s ease;

}


.service-card:hover .service-arrow {

  transform:
    translateX(6px);

}


/* =========================================================
   TECNOLOGIA
========================================================= */

.technology-content {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  align-items:
    center;

  gap:
    100px;

}


.technology-orbit {

  width:
    min(500px,
      80vw);

  aspect-ratio:
    1;

  position:
    relative;

  margin:
    auto;

}


.orbit-ring {

  position:
    absolute;

  inset:
    0;

  border:
    1px solid rgba(0, 200, 255, .1);

  border-radius:
    50%;

}


.ring-1 {

  animation:
    rotateRing 20s linear infinite;

}


.ring-2 {

  inset:
    15%;

  border-style:
    dashed;

  animation:
    rotateRingReverse 15s linear infinite;

}


.ring-3 {

  inset:
    30%;

  animation:
    rotateRing 12s linear infinite;

}


.orbit-core {

  position:
    absolute;

  inset:
    40%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--color-cyan);

  border-radius:
    50%;

  background:
    rgba(0, 100, 150, .1);

  box-shadow:
    0 0 50px rgba(0, 200, 255, .2);

}


.orbit-core span {

  color:
    var(--color-cyan);

  font-weight:
    800;

  letter-spacing:
    .1em;

}


.technology-text h2 {

  margin-top:
    20px;

  font-size:
    clamp(40px,
      5vw,
      70px);

  line-height:
    1;

  font-weight:
    400;

}


.technology-text h2 strong {

  color:
    var(--color-cyan);

}


.technology-text p {

  margin-top:
    30px;

  max-width:
    500px;

  color:
    var(--color-text-muted);

  line-height:
    1.8;

}


.text-link {

  display:
    inline-flex;

  gap:
    15px;

  margin-top:
    35px;

  color:
    var(--color-cyan);

  font-size:
    12px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.text-link span {

  transition:
    .3s ease;

}


.text-link:hover span {

  transform:
    translateX(6px);

}


/* =========================================================
   CONTATO
========================================================= */

.contact-section {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.contact-box {

  width:
    min(900px,
      92vw);

  padding:
    100px 50px;

  text-align:
    center;

  border:
    1px solid var(--border);

  background:
    rgba(4, 15, 24, .55);

  backdrop-filter:
    blur(15px);

  box-shadow:
    inset 0 0 80px rgba(0, 200, 255, .025);

}


.contact-box h2 {

  margin-top:
    20px;

  font-size:
    clamp(40px,
      6vw,
      75px);

  line-height:
    1;

  font-weight:
    400;

}


.contact-box h2 strong {

  color:
    var(--color-cyan);

}


.contact-box p {

  margin:
    25px auto 35px;

  color:
    var(--color-text-muted);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

  border-top:
    1px solid rgba(0, 200, 255, .08);

}


.footer-container {

  width:
    min(var(--max-width),
      calc(100% - 40px));

  min-height:
    80px;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  color:
    rgba(255, 255, 255, .3);

  font-size:
    9px;

  letter-spacing:
    .2em;

}


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

@keyframes logoEntrance {

  from {

    opacity:
      0;

    transform:
      translateY(40px) scale(.94);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0) scale(1);

  }

}


@keyframes fadeUp {

  from {

    opacity:
      0;

    transform:
      translateY(25px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


@keyframes lineAppear {

  from {

    opacity:
      0;

    transform:
      scaleX(0);

  }

  to {

    opacity:
      1;

    transform:
      scaleX(1);

  }

}


@keyframes glowPulse {

  0%,
  100% {

    opacity:
      .5;

    transform:
      translate(-50%, -50%) scale(.95);

  }

  50% {

    opacity:
      1;

    transform:
      translate(-50%, -50%) scale(1.08);

  }

}


@keyframes logoGlow {

  0%,
  100% {

    opacity:
      .35;

  }

  50% {

    opacity:
      .8;

  }

}


@keyframes gridMove {

  from {

    background-position:
      0 0,
      0 0;

  }

  to {

    background-position:
      70px 70px,
      70px 70px;

  }

}


@keyframes rotateRing {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}


@keyframes rotateRingReverse {

  from {

    transform:
      rotate(360deg);

  }

  to {

    transform:
      rotate(0deg);

  }

}


@keyframes scrollLine {

  0% {

    opacity:
      0;

    transform:
      scaleY(.3);

    transform-origin:
      top;

  }

  50% {

    opacity:
      1;

    transform:
      scaleY(1);

  }

  100% {

    opacity:
      0;

    transform:
      scaleY(.3);

    transform-origin:
      bottom;

  }

}

/* =========================================================
   MASCOTE SKAYTECH
========================================================= */

.mascot-wrapper {

  position: relative;

  width: 150px;

  height: 150px;

  margin: 10px auto 0;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 2;

  animation:
    mascotFloat 4s ease-in-out infinite;

}


.mascot {

  position: relative;

  width: 130px;

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(0 0 10px rgba(39, 127, 157, .45)) drop-shadow(0 0 30px rgba(39, 127, 157, .20));

  transition:
    transform .4s ease,
    filter .4s ease;

}


.mascot-glow {

  position: absolute;

  width: 90px;

  height: 90px;

  border-radius: 50%;

  background:
    rgba(39, 127, 157, .18);

  filter:
    blur(35px);

  animation:
    mascotGlow 3s ease-in-out infinite;

  z-index: -1;

}


.mascot-wrapper:hover .mascot {

  transform:
    scale(1.08) rotate(-2deg);

  filter:
    drop-shadow(0 0 15px rgba(39, 127, 157, .65)) drop-shadow(0 0 40px rgba(39, 127, 157, .30));

}


/* =========================================================
   ANIMAÇÕES DO MASCOTE
========================================================= */

@keyframes mascotFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-8px);

  }

}


@keyframes mascotGlow {

  0%,
  100% {

    opacity: .45;

    transform:
      scale(.9);

  }

  50% {

    opacity: .8;

    transform:
      scale(1.15);

  }

}

.mascot-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: mascotFloat 4s ease-in-out infinite;
}

.mascot {
  position: relative;
  width: 130px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(39, 127, 157, 0.45)) drop-shadow(0 0 30px rgba(39, 127, 157, 0.20));
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

.mascot-glow {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(39, 127, 157, 0.18);
  filter: blur(35px);
  animation: mascotGlow 3s ease-in-out infinite;
  z-index: -1;
}