/* --- Contact Modal Form Layout --- */
.contact-form-grid {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.contact-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 220px;
  flex: 1 1 180px;
}
.contact-fields label {
  font-weight: 600;
  color: #00bcd4;
  margin-bottom: 0.2rem;
}
.contact-fields input {
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid #222;
  background: #181818;
  color: #fff;
  font-size: 1rem;
  transition: border 0.2s;
}
.contact-fields input:focus {
  border: 1.5px solid #00bcd4;
  outline: none;
}
.contact-message {
  display: flex;
  flex-direction: column;
  flex: 2 1 300px;
}
.contact-message label {
  font-weight: 600;
  color: #00bcd4;
  margin-bottom: 0.2rem;
}
.contact-message textarea {
  min-height: 120px;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid #222;
  background: #181818;
  color: #fff;
  font-size: 1rem;
  resize: vertical;
  transition: border 0.2s;
}
.contact-message textarea:focus {
  border: 1.5px solid #00bcd4;
  outline: none;
}
.contact-modal-content form .cta-button {
  margin-top: 0.5rem;
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 8px;
}
@media (max-width: 800px) {
  .contact-form-grid {
    flex-direction: column;
    gap: 1rem;
  }
  .contact-message {
    min-width: 0;
  }
}
#hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /* object-fit: cover; */
  z-index: -1;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
  background: #0a0a0a;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header & Navigation */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  z-index: 1000;
  padding: 1rem 0;
  transition: all 0.3s ease;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 32px 0 rgba(0, 188, 212, 0.12);
}

.header-scrolled {
  /* background: rgba(10, 10, 10, 0.98);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
  background: linear-gradient(90deg, #0a0a0a 60%, #00bcd4 100%);
  box-shadow: 0 20px 50px rgba(0, 187, 212, 0.308);
  backdrop-filter: blur(30px);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-img {
  text-shadow: 0 0 20px rgba(0, 188, 212, 0.3);
}

.logo img {
  width: 200px;
  height: 56px;
  filter: drop-shadow(0 0 10px rgba(0, 188, 212, 0.5));
  animation: logoGlow 3s ease-in-out infinite alternate;
}

.logo img,
.logo-text {
  filter: drop-shadow(0 0 12px #00bcd4);
  transition: filter 0.3s;
}
.logo img:hover,
.logo-text:hover {
  filter: drop-shadow(0 0 32px #00bcd4);
}

.logo-text {
  padding-top: 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: #00bcd4;
  text-shadow: 0 0 20px rgba(0, 188, 212, 0.3);
}

@keyframes logoGlow {
  0% {
    filter: drop-shadow(0 0 5px rgba(0, 188, 212, 0.5));
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(0, 188, 212, 0.8));
  }
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.nav-links a .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  background: rgba(0, 187, 212, 0.521);
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a:hover {
  color: #00bcd4;
  box-shadow: 0 2px 12px rgba(0, 188, 212, 0.3);
}

/* Hero Section */
.hero {
  height: 100vh;
  background: linear-gradient(
      135deg,
      rgba(10, 10, 10, 0.8) 0%,
      rgba(26, 26, 46, 0.9) 50%,
      rgba(22, 33, 62, 0.8) 100%
    ),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100%25" height="100%25" fill="url(%23grid)"/></svg>');
  background-attachment: fixed;
  background-size: cover, 50px 50px;
  background-position: center, center;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.menu-toggle {
  display: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1100;
}
.menu-toggle span {
  display: block;
  height: 4px;
  width: 100%;
  background: #00bcd4;
  margin: 8px 0;
  border-radius: 2px;
  transition: all 0.3s;
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 70px;
    right: -100vw;
    background: rgba(10, 10, 10, 0.98);
    flex-direction: column;
    gap: 2rem;
    width: 45vw; /* Diminuído */
    max-width: 320px; /* Opcional: limita em px */
    height: 100vh;
    transition: right 0.5s cubic-bezier(0.77, 0, 0.18, 1), background 0.5s;
    z-index: 1000;
    box-shadow: -8px 0 32px rgba(0, 188, 212, 0.18);
    border-left: 2px solid #00bcd4;
    /* Efeito de blur e cor */
    backdrop-filter: blur(16px) saturate(180%);
    background: linear-gradient(135deg, #0a0a0a 60%, #00bcd4 100%);
  }
  .nav-links.open {
    right: 0;
    animation: menuSlideIn 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    box-shadow: -8px 0 32px rgba(0, 188, 212, 0.28);
    background: linear-gradient(135deg, #0a0a0a 60%, #00bcd4 100%);
  }
  @keyframes menuSlideIn {
    from {
      right: -100vw;
      opacity: 0.2;
      filter: blur(8px);
    }
    to {
      right: 0;
      opacity: 1;
      filter: blur(0);
    }
  }
  .nav-links li {
    opacity: 0;
    transform: translateX(40px);
    animation: menuItemIn 0.6s forwards;
    animation-delay: calc(var(--i, 0) * 0.12s + 0.2s);
  }
  .nav-links.open li {
    opacity: 1;
    transform: translateX(0);
  }
  @keyframes menuItemIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .nav-links a {
    font-size: 1.3rem;
    color: #fff;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    background: linear-gradient(90deg, #00bcd4 0%, #0097a7 100%);
    background-size: 200% 200%;
    background-position: left;
    transition: background-position 0.4s, color 0.3s;
    box-shadow: 0 2px 12px rgba(0, 188, 212, 0.12);
  }
  .nav-links a:hover {
    background-position: right;
    color: #0a0a0a;
    box-shadow: 0 4px 24px rgba(0, 188, 212, 0.24);
  }

  .nav-links.open {
    right: 0;
  }
  .menu-toggle {
    display: block;
  }
}

/* @media (max-width: 768px) {
        .nav-links {
          position: fixed;
          top: 70px;
          right: -100vw;
          background: rgba(10, 10, 10, 0.98);
          flex-direction: column;
          gap: 2rem;
          width: 70vw;
          height: 100vh;
          transition: right 0.4s cubic-bezier(0.77, 0, 0.18, 1);
          z-index: 1000;
        }
        .nav-links.open {
          right: 0;
        }
        .menu-toggle {
          display: block;
        }
      } */

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* right: 0;
        bottom: 0; */
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.2);
  z-index: 1;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(102, 126, 234, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(118, 75, 162, 0.1) 0%,
      transparent 50%
    );
  animation: backgroundFloat 20s ease-in-out infinite;
}

@keyframes backgroundFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(1deg);
  }
}

.hero .hero-content {
  z-index: 2;
  position: relative;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1 {
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
  animation: textSlideIn 1.2s ease-out 0.3s both;
}

@keyframes textSlideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero .subtitle {
  font-size: 1.5rem;
  color: #a0a0a0;
  margin-bottom: 2rem;
  animation: textSlideIn 1.2s ease-out 0.6s both;
}

.cta-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 188, 212, 0.3);
  animation: buttonFloat 1.5s ease-out 0.9s both;
  position: relative;
  overflow: hidden;
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 188, 212, 0.4);
}

@keyframes buttonFloat {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Particles */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: rgba(0, 188, 212, 0.1);
  border-radius: 50%;
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Services Section */
.services {
  padding: 5rem 0;
  background: linear-gradient(rgba(15, 15, 15, 0.29), rgba(15, 15, 15, 0.9)),
    url("../img/photo-1461749280684-dccba630e2f6.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
}

.section-title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.section-title.animate {
  opacity: 1;
  transform: translateY(0);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.service-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  transform: translateY(50px);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  transition: all 0.5s ease;
  transform: translateX(-50%);
}

.service-card:hover::before {
  width: 100%;
}

.service-card.animate {
  opacity: 1;
  transform: translateY(0);
}

.service-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-card h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.service-card p {
  color: #a0a0a0;
  line-height: 1.6;
}

/* Philosophy Section */
.philosophy {
  padding: 5rem 0;
  background: linear-gradient(
    135deg,
    rgba(26, 26, 46, 0.9) 0%,
    rgba(22, 33, 62, 0.9) 100%
  );
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  /* url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="hexagon" x="0" y="0" width="60" height="52" patternUnits="userSpaceOnUse"><polygon points="30,2 52,15 52,37 30,50 8,37 8,15" fill="none" stroke="%2300bcd4" stroke-width="0.5" opacity="0.15"/></pattern></defs><rect width="100%25" height="100%25" fill="url(%23hexagon)"/></svg>');
        background-attachment: fixed;
        background-size: cover, 60px 52px;
        background-position: center, center; */
}

/* Stars Animation */
#stars,
#stars2,
#stars3 {
  position: absolute;
  top: -50px;
  left: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 4000px);
  z-index: 1;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 78px 68px #fff, 135px 90px #fff, 271px 127px #fff,
    409px 179px #fff, 590px 105px #fff, 128px 180px #fff, 302px 149px #fff,
    470px 192px #fff, 608px 173px #fff, 750px 114px #fff, 203px 188px #fff,
    392px 37px #fff, 578px 112px #fff, 712px 176px #fff, 869px 151px #fff,
    987px 142px #fff, 235px 104px #fff, 423px 110px #fff, 657px 151px #fff,
    787px 149px #fff, 165px 175px #fff, 433px 32px #fff, 665px 100px #fff,
    878px 184px #fff, 941px 173px #fff, 230px 26px #fff, 528px 140px #fff,
    704px 128px #fff, 827px 186px #fff, 919px 200px #fff, 169px 349px #fff,
    569px 354px #fff, 784px 389px #fff, 939px 305px #fff, 744px 329px #fff,
    288px 346px #fff, 547px 372px #fff, 769px 270px #fff, 818px 308px #fff,
    971px 397px #fff, 397px 390px #fff, 251px 369px #fff, 589px 328px #fff,
    786px 345px #fff, 844px 339px #fff, 485px 350px #fff, 696px 396px #fff,
    763px 394px #fff, 628px 366px #fff, 751px 327px #fff, 179px 572px #fff,
    333px 532px #fff, 565px 600px #fff, 678px 584px #fff, 841px 573px #fff,
    300px 526px #fff, 628px 640px #fff, 704px 628px #fff, 727px 686px #fff,
    819px 600px #fff, 269px 749px #fff, 469px 754px #fff, 684px 789px #fff,
    739px 705px #fff, 844px 729px #fff, 388px 746px #fff, 647px 772px #fff,
    869px 770px #fff, 918px 808px #fff, 771px 797px #fff, 497px 890px #fff,
    651px 869px #fff, 789px 828px #fff, 886px 845px #fff, 944px 839px #fff,
    285px 950px #fff, 596px 996px #fff, 763px 994px #fff, 928px 966px #fff,
    651px 927px #fff, 79px 1072px #fff, 333px 1032px #fff, 565px 1100px #fff,
    678px 1084px #fff, 841px 1073px #fff, 200px 1126px #fff, 528px 1140px #fff,
    704px 1128px #fff, 727px 1186px #fff, 819px 1100px #fff, 169px 1249px #fff,
    469px 1254px #fff, 684px 1289px #fff, 739px 1205px #fff, 844px 1229px #fff,
    288px 1246px #fff, 547px 1272px #fff, 769px 1270px #fff, 818px 1308px #fff,
    971px 1297px #fff;
  animation: animStar 50s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 78px 68px #fff, 135px 90px #fff, 271px 127px #fff,
    409px 179px #fff, 590px 105px #fff, 128px 180px #fff, 302px 149px #fff,
    470px 192px #fff, 608px 173px #fff, 750px 114px #fff, 203px 188px #fff,
    392px 37px #fff, 578px 112px #fff, 712px 176px #fff, 869px 151px #fff,
    987px 142px #fff, 235px 104px #fff, 423px 110px #fff, 657px 151px #fff,
    787px 149px #fff, 165px 175px #fff, 433px 32px #fff, 665px 100px #fff,
    878px 184px #fff, 941px 173px #fff, 230px 26px #fff, 528px 140px #fff,
    704px 128px #fff, 827px 186px #fff, 919px 200px #fff, 169px 349px #fff,
    569px 354px #fff, 784px 389px #fff, 939px 305px #fff, 744px 329px #fff,
    288px 346px #fff, 547px 372px #fff, 769px 270px #fff, 818px 308px #fff,
    971px 397px #fff, 397px 390px #fff, 251px 369px #fff, 589px 328px #fff,
    786px 345px #fff, 844px 339px #fff, 485px 350px #fff, 696px 396px #fff,
    763px 394px #fff, 628px 366px #fff, 751px 327px #fff, 179px 572px #fff,
    333px 532px #fff, 565px 600px #fff, 678px 584px #fff, 841px 573px #fff,
    300px 526px #fff, 628px 640px #fff, 704px 628px #fff, 727px 686px #fff,
    819px 600px #fff, 269px 749px #fff, 469px 754px #fff, 684px 789px #fff,
    739px 705px #fff, 844px 729px #fff, 388px 746px #fff, 647px 772px #fff,
    869px 770px #fff, 918px 808px #fff, 771px 797px #fff, 497px 890px #fff,
    651px 869px #fff, 789px 828px #fff, 886px 845px #fff, 944px 839px #fff,
    285px 950px #fff, 596px 996px #fff, 763px 994px #fff, 928px 966px #fff,
    651px 927px #fff, 79px 1072px #fff, 333px 1032px #fff, 565px 1100px #fff,
    678px 1084px #fff, 841px 1073px #fff, 200px 1126px #fff, 528px 1140px #fff,
    704px 1128px #fff, 727px 1186px #fff, 819px 1100px #fff, 169px 1249px #fff,
    469px 1254px #fff, 684px 1289px #fff, 739px 1205px #fff, 844px 1229px #fff,
    288px 1246px #fff, 547px 1272px #fff, 769px 1270px #fff, 818px 1308px #fff,
    971px 1297px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 179px 272px #fff, 359px 396px #fff, 542px 353px #fff,
    302px 443px #fff, 570px 154px #fff, 234px 485px #fff, 447px 302px #fff,
    693px 427px #fff, 563px 597px #fff, 669px 306px #fff, 424px 588px #fff,
    385px 578px #fff, 509px 695px #fff, 549px 403px #fff, 695px 544px #fff,
    798px 561px #fff, 692px 408px #fff, 645px 535px #fff, 799px 672px #fff,
    798px 655px #fff, 450px 772px #fff, 559px 796px #fff, 642px 753px #fff,
    502px 743px #fff, 670px 654px #fff, 334px 785px #fff, 547px 702px #fff,
    793px 727px #fff, 663px 797px #fff, 769px 706px #fff, 524px 888px #fff,
    485px 878px #fff, 609px 995px #fff, 649px 903px #fff, 795px 944px #fff,
    698px 961px #fff, 592px 908px #fff, 545px 935px #fff, 699px 972px #fff,
    698px 955px #fff, 350px 1072px #fff, 459px 1096px #fff, 542px 1053px #fff,
    402px 1043px #fff, 570px 854px #fff, 500px 1185px #fff, 447px 1102px #fff,
    693px 1127px #fff, 563px 1197px #fff, 669px 1106px #fff;
  animation: animStar 100s linear infinite;
}

#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 179px 272px #fff, 359px 396px #fff, 542px 353px #fff,
    302px 443px #fff, 570px 154px #fff, 234px 485px #fff, 447px 302px #fff,
    693px 427px #fff, 563px 597px #fff, 669px 306px #fff, 424px 588px #fff,
    385px 578px #fff, 509px 695px #fff, 549px 403px #fff, 695px 544px #fff,
    798px 561px #fff, 692px 408px #fff, 645px 535px #fff, 799px 672px #fff,
    798px 655px #fff, 450px 772px #fff, 559px 796px #fff, 642px 753px #fff,
    502px 743px #fff, 670px 654px #fff, 334px 785px #fff, 547px 702px #fff,
    793px 727px #fff, 663px 797px #fff, 769px 706px #fff, 524px 888px #fff,
    485px 878px #fff, 609px 995px #fff, 649px 903px #fff, 795px 944px #fff,
    698px 961px #fff, 592px 908px #fff, 545px 935px #fff, 699px 972px #fff,
    698px 955px #fff, 350px 1072px #fff, 459px 1096px #fff, 542px 1053px #fff,
    402px 1043px #fff, 570px 854px #fff, 500px 1185px #fff, 447px 1102px #fff,
    693px 1127px #fff, 563px 1197px #fff, 669px 1106px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 285px 432px #fff, 398px 568px #fff, 508px 410px #fff,
    622px 544px #fff, 684px 783px #fff, 554px 679px #fff, 323px 785px #fff,
    563px 647px #fff, 538px 896px #fff, 437px 896px #fff, 576px 629px #fff,
    652px 784px #fff, 694px 637px #fff, 524px 773px #fff, 695px 604px #fff,
    485px 832px #fff, 598px 868px #fff, 608px 810px #fff, 722px 844px #fff,
    784px 883px #fff, 654px 979px #fff, 423px 985px #fff, 663px 947px #fff,
    738px 996px #fff, 537px 996px #fff, 750px 1029px #fff, 552px 1084px #fff,
    794px 1037px #fff, 624px 1073px #fff, 795px 1004px #fff, 600px 1132px #fff,
    498px 1168px #fff, 708px 1110px #fff, 822px 1144px #fff, 884px 1183px #fff,
    800px 1179px #fff, 523px 1185px #fff, 763px 1147px #fff, 838px 1196px #fff,
    637px 1196px #fff;
  animation: animStar 150s linear infinite;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 285px 432px #fff, 398px 568px #fff, 508px 410px #fff,
    622px 544px #fff, 684px 783px #fff, 554px 679px #fff, 323px 785px #fff,
    563px 647px #fff, 538px 896px #fff, 437px 896px #fff, 576px 629px #fff,
    652px 784px #fff, 694px 637px #fff, 524px 773px #fff, 695px 604px #fff,
    485px 832px #fff, 598px 868px #fff, 608px 810px #fff, 722px 844px #fff,
    784px 883px #fff, 654px 979px #fff, 423px 985px #fff, 663px 947px #fff,
    738px 996px #fff, 537px 996px #fff, 750px 1029px #fff, 552px 1084px #fff,
    794px 1037px #fff, 624px 1073px #fff, 795px 1004px #fff, 600px 1132px #fff,
    498px 1168px #fff, 708px 1110px #fff, 822px 1144px #fff, 884px 1183px #fff,
    800px 1179px #fff, 523px 1185px #fff, 763px 1147px #fff, 838px 1196px #fff,
    637px 1196px #fff, 185px 132px #fff, 98px 168px #fff, 108px 110px #fff,
    122px 144px #fff, 184 173px #fff, 395px 104px #fff, 500px 132px #fff,
    398px 168px #fff, 408px 110px #fff, 422px 144px #fff, 484px 183px #fff,
    600px 179px #fff, 323px 185px #fff, 463px 147px #fff, 438px 196px #fff,
    337px 196px #fff;
  animation: animStar 150s linear infinite;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 185px 132px #fff, 98px 168px #fff, 108px 110px #fff,
    122px 144px #fff, 184px 183px #fff, 154px 179px #fff, 23px 185px #fff,
    163px 147px #fff, 138px 196px #fff, 37px 196px #fff, 176px 129px #fff,
    152px 184px #fff, 194px 137px #fff, 124px 173px #fff, 195px 104px #fff,
    285px 132px #fff, 198px 168px #fff, 208px 110px #fff, 222px 144px #fff,
    284px 183px #fff, 354px 179px #fff, 123px 185px #fff, 263px 147px #fff,
    238px 196px #fff, 137px 196px #fff, 450px 129px #fff, 252px 184px #fff,
    394px 137px #fff, 324px 173px #fff, 395px 104px #fff, 500px 132px #fff,
    398px 168px #fff, 408px 110px #fff, 422px 144px #fff, 484px 183px #fff,
    600px 179px #fff, 323px 185px #fff, 463px 147px #fff, 438px 196px #fff,
    337px 196px #fff;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.philosophy-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.philosophy-text {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease;
}

.philosophy-text.animate {
  opacity: 1;
  transform: translateX(0);
}

.philosophy-text h2 {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

.philosophy-item {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 15px;
  border-left: 4px solid;
  border-image: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%) 1;
  transition: all 0.3s ease;
}

.philosophy-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(10px);
}

.philosophy-item h4 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.philosophy-item p {
  color: #a0a0a0;
  line-height: 1.6;
}

.philosophy-visual {
  position: relative;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease;
}

.philosophy-visual.animate {
  opacity: 1;
  transform: translateX(0);
}

.code-window {
  background: #1e1e1e;
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.code-header {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.code-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red {
  background: #ff5f56;
}
.dot-yellow {
  background: #ffbd2e;
}
.dot-green {
  background: #27ca3f;
}

.code-content {
  font-family: "Courier New", monospace;
  color: #a0a0a0;
  line-height: 1.6;
}

/* ...PORTFOLIO.. */

#portfolio {
  position: relative;
  z-index: 1;
  --s: 100px; /* control the size */
  --c1: #c3ccaf;
  --c2: #67434f;

  --_s: calc(2 * var(--s)) calc(2 * var(--s));
  --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
  --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
  background: calc(0.9 * var(--s)) calc(0.9 * var(--s)) / var(--_p),
    calc(-0.1 * var(--s)) calc(-0.1 * var(--s)) / var(--_p),
    calc(0.7 * var(--s)) calc(0.7 * var(--s)) / var(--_g),
    calc(-0.3 * var(--s)) calc(-0.3 * var(--s)) / var(--_g),
    conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0 /
      var(--s) var(--s);
  animation: m 3s infinite;
}
@keyframes m {
  0% {
    background-position: calc(0.9 * var(--s)) calc(0.9 * var(--s)),
      calc(-0.1 * var(--s)) calc(-0.1 * var(--s)),
      calc(0.7 * var(--s)) calc(0.7 * var(--s)),
      calc(-0.3 * var(--s)) calc(-0.3 * var(--s)), 0 0;
  }
  25% {
    background-position: calc(1.9 * var(--s)) calc(0.9 * var(--s)),
      calc(-1.1 * var(--s)) calc(-0.1 * var(--s)),
      calc(1.7 * var(--s)) calc(0.7 * var(--s)),
      calc(-1.3 * var(--s)) calc(-0.3 * var(--s)), 0 0;
  }
  50% {
    background-position: calc(1.9 * var(--s)) calc(-0.1 * var(--s)),
      calc(-1.1 * var(--s)) calc(0.9 * var(--s)),
      calc(1.7 * var(--s)) calc(-0.3 * var(--s)),
      calc(-1.3 * var(--s)) calc(0.7 * var(--s)), 0 0;
  }
  75% {
    background-position: calc(2.9 * var(--s)) calc(-0.1 * var(--s)),
      calc(-2.1 * var(--s)) calc(0.9 * var(--s)),
      calc(2.7 * var(--s)) calc(-0.3 * var(--s)),
      calc(-2.3 * var(--s)) calc(0.7 * var(--s)), 0 0;
  }
  100% {
    background-position: calc(2.9 * var(--s)) calc(-1.1 * var(--s)),
      calc(-2.1 * var(--s)) calc(1.9 * var(--s)),
      calc(2.7 * var(--s)) calc(-1.3 * var(--s)),
      calc(-2.3 * var(--s)) calc(1.7 * var(--s)), 0 0;
  }
}

#portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.73); /* Overlay escuro e transparente */
  z-index: 2;
  pointer-events: none; /* Permite interação com o conteúdo */
}

/* Garante que o conteúdo fique acima do overlay */
#portfolio .container,
#portfolio .portfolio-grid,
#portfolio .portfolio-card {
  position: relative;
  z-index: 3;
}
.font-color {
  color: #fff;
}
.portfolio-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}
.portfolio-card {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 3px 15px rgba(0 188 212 / 48%);
  transition: transform 0.3s;
}
.portfolio-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 48px rgba(0, 188, 212, 0.18);
}
.portfolio-btn {
  background: linear-gradient(90deg, #00bcd4, #0097a7);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 12px rgba(0, 188, 212, 0.12);
}
.portfolio-btn:hover {
  background: linear-gradient(90deg, #0097a7, #00bcd4);
  box-shadow: 0 4px 24px rgba(0, 188, 212, 0.24);
}
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
}
.color-text {
  text-align: center;
  color: #fff;
}
.modal-content {
  background: #181818;
  border-radius: 16px;
  padding: 2rem;
  max-width: 1200px;
  width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 188, 212, 0.18);
  position: relative;
  animation: modalIn 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.close {
  position: absolute;
  top: -4rem;
  right: -2rem;
  font-size: 4rem;
  color: #00bcd4;
  cursor: pointer;
  transition: color 0.3s;
}
.close:hover {
  color: #fff;
}

.code-line {
  margin-bottom: 0.5rem;
  animation: typewriter 3s steps(40) infinite;
}

@keyframes typewriter {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/* CTA Section */
.final-cta {
  padding: 5rem 0;
  background: linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.9)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><linearGradient id="tech" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%2300bcd4;stop-opacity:0.05"/><stop offset="50%25" style="stop-color:%2300bcd4;stop-opacity:0.1"/><stop offset="100%25" style="stop-color:%2300bcd4;stop-opacity:0.05"/></linearGradient></defs><rect width="100%25" height="100%25" fill="url(%23tech)"/><g stroke="%2300bcd4" stroke-width="1" opacity="0.1" fill="none"><rect x="100" y="100" width="200" height="100" rx="10"/><rect x="400" y="200" width="150" height="80" rx="8"/><rect x="650" y="150" width="180" height="120" rx="12"/><line x1="300" y1="150" x2="400" y2="240"/><line x1="550" y1="240" x2="650" y2="210"/></g></svg>');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.final-cta h2 {
  color: #fff;
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.final-cta p {
  color: #a0a0a0;
  font-size: 1.2rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer */
footer {
  background: #050505;
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer p {
  color: #666;
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  /* .nav-links {
          display: none;
        } */

  .services-grid {
    grid-template-columns: 1fr;
  }

  .philosophy-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }
}

/* Scroll animations */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade-in.animate {
  opacity: 1;
  transform: translateY(0);
}