/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

  background:
    #121212;

  color:
    #e0e0e0;

  line-height:
    1.6;

  overflow-x:
    hidden;

  position:
    relative;

  color-scheme:
    dark;
}

body > * {
  position:
    relative;

  z-index:
    1;
}

img {
  max-width:
    100%;

  display:
    block;
}

button,
a {
  font:
    inherit;
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

.skip-link {
  position:
    absolute;

  left:
    -999px;

  top:
    16px;

  background:
    #4fc3f7;

  color:
    #121212;

  padding:
    0.65rem 1rem;

  border-radius:
    8px;

  font-weight:
    700;

  text-decoration:
    none;

  z-index:
    100;
}

.skip-link:focus {
  left:
    16px;
}

a:focus-visible,
button:focus-visible {
  outline:
    2px solid #4fc3f7;

  outline-offset:
    4px;
}


/* =========================================================
   FUNDO
========================================================= */

.particle-bg {
  position:
    fixed;

  inset:
    0;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    40px 40px,
    60px 60px;

  z-index:
    0;

  animation:
    moveParticles 60s linear infinite;

  pointer-events:
    none;
}

@keyframes moveParticles {

  to {
    background-position:
      200px 200px,
      -200px -200px;
  }

}


/* =========================================================
   CONTAINER
========================================================= */

.container {
  width:
    min(1120px, 90%);

  margin:
    0 auto;
}

.section {
  padding:
    5rem 0;
}


/* =========================================================
   IDIOMA
========================================================= */

.lang-toggle {
  display:
    inline-flex;

  gap:
    0.3rem;

  padding:
    0.2rem;

  border:
    1px solid rgba(79, 195, 247, 0.35);

  background:
    rgba(18, 18, 18, 0.85);

  backdrop-filter:
    blur(10px);

  border-radius:
    999px;

  position:
    fixed;

  top:
    20px;

  left:
    20px;

  z-index:
    50;
}

.lang-btn {
  border:
    none;

  background:
    transparent;

  color:
    #81d4fa;

  padding:
    0.4rem 0.8rem;

  border-radius:
    999px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    0.2s ease;
}

.lang-btn:hover {
  background:
    rgba(79, 195, 247, 0.12);
}

.lang-btn.is-active {
  background:
    #4fc3f7;

  color:
    #121212;
}


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

header {
  background:
    linear-gradient(
      135deg,
      #0b0b0b,
      #171717 55%,
      #003c4a
    );

  padding:
    6rem 0 5rem;

  box-shadow:
    0 0 50px rgba(0, 191, 255, 0.12);

  position:
    relative;

  overflow:
    hidden;
}

header::before {
  content:
    "";

  position:
    absolute;

  inset:
    -50%;

  background:
    radial-gradient(
      circle,
      rgba(79, 195, 247, 0.15),
      transparent 65%
    );

  animation:
    headerGlow 15s linear infinite;

  pointer-events:
    none;
}

@keyframes headerGlow {

  to {
    transform:
      rotate(360deg);
  }

}

.header-content {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    4rem;

  position:
    relative;

  z-index:
    2;
}

.hero-content {
  flex:
    1;

  max-width:
    700px;
}

.hero-label,
.section-label {
  display:
    inline-block;

  color:
    #4fc3f7;

  font-size:
    0.75rem;

  font-weight:
    800;

  letter-spacing:
    0.16em;

  margin-bottom:
    0.8rem;
}

h1 {
  font-size:
    clamp(2.5rem, 6vw, 4rem);

  line-height:
    1.1;

  color:
    #4fc3f7;

  text-shadow:
    0 0 18px rgba(79, 195, 247, 0.4);

  margin-bottom:
    0.8rem;
}

.hero-title {
  font-size:
    clamp(1.35rem, 3vw, 2rem);

  line-height:
    1.3;

  color:
    #f2f2f2;

  margin-bottom:
    1rem;
}

.hero-description {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    0.45rem;

  color:
    #9adff8;

  font-size:
    0.95rem;

  margin-bottom:
    1.5rem;
}

.hero-summary {
  max-width:
    620px;

  color:
    #d5d5d5;

  font-size:
    1.08rem;
}

.header-cta {
  display:
    flex;

  gap:
    0.8rem;

  flex-wrap:
    wrap;

  margin-top:
    2rem;
}


/* =========================================================
   BOTÕES
========================================================= */

.btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    46px;

  padding:
    0.7rem 1.3rem;

  border-radius:
    10px;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;

  cursor:
    pointer;
}

.btn:hover {
  transform:
    translateY(-2px);
}

.btn-primary {
  background:
    #4fc3f7;

  color:
    #121212;
}

.btn-primary:hover {
  background:
    #29b6f6;
}

.btn-secondary {
  border:
    1px solid rgba(79, 195, 247, 0.8);

  color:
    #4fc3f7;

  background:
    rgba(79, 195, 247, 0.03);
}

.btn-secondary:hover {
  background:
    rgba(79, 195, 247, 0.1);

  border-color:
    #4fc3f7;
}


/* =========================================================
   FOTO
========================================================= */

.profile-area {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    1rem;

  flex-shrink:
    0;
}

.profile-frame {
  width:
    230px;

  height:
    230px;

  padding:
    5px;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #4fc3f7,
      #00bcd4
    );

  box-shadow:
    0 0 30px rgba(79, 195, 247, 0.45);

  animation:
    profilePulse 6s ease-in-out infinite;
}

.profile-pic {
  width:
    100%;

  height:
    100%;

  border-radius:
    50%;

  object-fit:
    cover;

  background:
    #1a1a1a;
}

.profile-status {
  padding:
    0.4rem 0.8rem;

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

  border-radius:
    999px;

  background:
    rgba(0, 255, 200, 0.05);

  color:
    #86e8d1;

  font-size:
    0.75rem;

  font-weight:
    600;
}

@keyframes profilePulse {

  50% {
    box-shadow:
      0 0 40px rgba(79, 195, 247, 0.7);
  }

}


/* =========================================================
   SEÇÕES
========================================================= */

.section-heading {
  text-align:
    center;

  max-width:
    760px;

  margin:
    0 auto 3rem;
}

.section-heading h2 {
  color:
    #81d4fa;

  font-size:
    clamp(1.8rem, 4vw, 2.5rem);

  line-height:
    1.2;

  margin-bottom:
    1rem;
}

.section-heading > p {
  color:
    #bdbdbd;

  font-size:
    1rem;
}


/* =========================================================
   SOBRE
========================================================= */

.about-content {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(280px, 0.8fr);

  gap:
    3rem;

  align-items:
    start;
}

.about-main {
  color:
    #d5d5d5;
}

.about-main p {
  margin-bottom:
    1.2rem;

  font-size:
    1.02rem;
}

.about-main p:last-child {
  margin-bottom:
    0;
}

.about-highlights {
  display:
    grid;

  gap:
    1rem;
}

.highlight-card {
  display:
    flex;

  gap:
    1rem;

  padding:
    1.2rem;

  border:
    1px solid #292929;

  border-radius:
    12px;

  background:
    rgba(30, 30, 30, 0.7);

  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.highlight-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(79, 195, 247, 0.5);
}

.highlight-number {
  color:
    #4fc3f7;

  font-weight:
    800;

  font-size:
    0.85rem;
}

.highlight-card h3 {
  color:
    #f2f2f2;

  font-size:
    1rem;

  margin-bottom:
    0.2rem;
}

.highlight-card p {
  color:
    #aaa;

  font-size:
    0.85rem;
}


/* =========================================================
   PROJETOS
========================================================= */

.projects-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    2rem;
}

.project-card {
  overflow:
    hidden;

  border:
    1px solid #2a2a2a;

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      #1c1c1c,
      #171717
    );

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.3);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

  content-visibility:
    auto;

  contain-intrinsic-size:
    500px 600px;
}

.project-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(79, 195, 247, 0.45);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.45);
}

.project-card.featured {
  border-color:
    rgba(0, 255, 200, 0.45);

  box-shadow:
    0 0 30px rgba(0, 255, 200, 0.08);
}


/* =========================================================
   IMAGEM DO PROJETO
========================================================= */

.project-image {
  height:
    250px;

  position:
    relative;

  overflow:
    hidden;

  background:
    #101010;
}

.project-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.project-card:hover .project-image img {
  transform:
    scale(1.04);

  filter:
    brightness(0.8);
}

.project-image::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      to bottom,
      transparent 50%,
      rgba(0, 0, 0, 0.65)
    );

  pointer-events:
    none;
}


/* =========================================================
   BADGE DESTAQUE
========================================================= */

.featured-badge {
  position:
    absolute;

  top:
    16px;

  left:
    16px;

  z-index:
    3;

  background:
    linear-gradient(
      135deg,
      #00ffc8,
      #00bfa6
    );

  color:
    #00110d;

  font-size:
    0.7rem;

  font-weight:
    800;

  padding:
    0.4rem 0.75rem;

  border-radius:
    999px;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


/* =========================================================
   CONTEÚDO DOS PROJETOS
========================================================= */

.project-content {
  padding:
    1.5rem;
}

.project-category {
  display:
    block;

  color:
    #4fc3f7;

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.13em;

  margin-bottom:
    0.45rem;
}

.project-content h3 {
  color:
    #f4f4f4;

  font-size:
    1.35rem;

  line-height:
    1.25;

  margin-bottom:
    0.55rem;
}

.project-tech {
  color:
    #a8def2;

  font-size:
    0.85rem;

  font-weight:
    600;

  margin-bottom:
    1rem;
}

.project-badges {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    0.4rem;

  margin-bottom:
    1rem;
}

.project-badges span {
  padding:
    0.3rem 0.6rem;

  border:
    1px solid rgba(79, 195, 247, 0.25);

  border-radius:
    999px;

  background:
    rgba(79, 195, 247, 0.07);

  color:
    #9adcf3;

  font-size:
    0.7rem;

  white-space:
    nowrap;
}

.project-description {
  color:
    #c8c8c8;

  font-size:
    0.92rem;

  line-height:
    1.55;

  margin-bottom:
    1.2rem;
}


/* =========================================================
   IMPACTO
========================================================= */

.project-impact {
  display:
    grid;

  gap:
    0.55rem;

  margin-bottom:
    1.3rem;
}

.project-impact div {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    0.55rem;

  color:
    #bfcfd4;

  font-size:
    0.82rem;
}

.project-impact strong {
  color:
    #4fc3f7;

  flex-shrink:
    0;
}


/* =========================================================
   LINKS
========================================================= */

.project-links {
  padding-top:
    0.9rem;

  border-top:
    1px solid #292929;
}

.project-links a {
  color:
    #ffeb3b;

  font-size:
    0.9rem;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    color 0.2s ease;
}

.project-links a:hover {
  color:
    #fff176;

  text-decoration:
    underline;
}


/* =========================================================
   PROJETOS OCULTOS
========================================================= */

.hidden-project {
  display:
    none;
}

.hidden-project.is-visible {
  display:
    block;
}


/* =========================================================
   BOTÃO PROJETOS
========================================================= */

.center {
  display:
    flex;

  justify-content:
    center;

  margin-top:
    2.5rem;
}

#toggle-projects {
  border:
    1px solid rgba(79, 195, 247, 0.5);

  background:
    rgba(79, 195, 247, 0.08);

  color:
    #4fc3f7;

  padding:
    0.75rem 1.6rem;

  border-radius:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    0.25s ease;
}

#toggle-projects:hover {
  background:
    #4fc3f7;

  color:
    #121212;

  transform:
    translateY(-2px);
}


/* =========================================================
   TECNOLOGIAS
========================================================= */

.tech-icons {
  display:
    grid;

  grid-template-columns:
    repeat(6, minmax(90px, 1fr));

  gap:
    1.2rem;

  max-width:
    900px;

  margin:
    0 auto;
}

.tech-item {
  min-height:
    120px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.6rem;

  border:
    1px solid #292929;

  border-radius:
    12px;

  background:
    rgba(30, 30, 30, 0.55);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.tech-item:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(79, 195, 247, 0.45);

  background:
    rgba(79, 195, 247, 0.05);
}

.tech-item i {
  font-size:
    2.8rem;
}

.tech-item span {
  color:
    #d6d6d6;

  font-size:
    0.8rem;

  font-weight:
    600;
}


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

.contact-section {
  padding-bottom:
    6rem;
}

.contact-items {
  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    0.8rem;
}

.contact-items a {
  min-width:
    130px;

  text-align:
    center;

  padding:
    0.75rem 1.2rem;

  border:
    1px solid #303030;

  border-radius:
    10px;

  background:
    #1c1c1c;

  color:
    #e0e0e0;

  text-decoration:
    none;

  font-weight:
    600;

  transition:
    0.25s ease;
}

.contact-items a:hover {
  border-color:
    #4fc3f7;

  color:
    #4fc3f7;

  transform:
    translateY(-2px);
}


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

footer {
  padding:
    2rem 1rem;

  text-align:
    center;

  background:
    #181818;

  border-top:
    1px solid #252525;

  color:
    #858585;

  font-size:
    0.85rem;
}


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

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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

  .particle-bg {
    animation:
      none;
  }

}