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

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

:root {
  --bg: #060914;
  --bg-soft: #0b1020;

  --text: #f5f7ff;
  --muted: #a9b1c6;

  --line: rgba(255,255,255,.10);

  --accent: #5ee7ff;
  --accent-2: #8b5cf6;

  --glass: rgba(255,255,255,.045);

  --whatsapp: #25d366;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(94,231,255,.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 25%,
      rgba(139,92,246,.12),
      transparent 30%
    ),
    var(--bg);

  color: var(--text);

  line-height: 1.6;

  overflow-x: hidden;
}

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: .15;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 85%
    );
}

a {
  color: inherit;
  text-decoration: none;
}


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

.header {
  position: fixed;

  z-index: 1000;

  top: 18px;
  left: 50%;

  width: min(1200px, 92%);

  transform: translateX(-50%);

  padding: 9px 12px 9px 14px;

  display: flex;
  align-items: center;

  background:
    rgba(8,12,27,.70);

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

  border-radius: 18px;

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 15px 50px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition: .3s ease;
}

.header.scrolled {
  top: 12px;

  background:
    rgba(6,9,20,.90);

  border-color:
    rgba(94,231,255,.16);

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    0 0 35px rgba(94,231,255,.04);
}


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

.logo {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

  font-family: Poppins, sans-serif;

  font-weight: 800;
}

.logo-symbol {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(94,231,255,.12),
      rgba(139,92,246,.12)
    );

  border:
    1px solid
    rgba(94,231,255,.25);

  overflow: hidden;

  transition: .3s ease;
}

.logo-symbol img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 5px;
}

.logo:hover .logo-symbol {
  transform: translateY(-2px);

  border-color:
    rgba(94,231,255,.55);

  box-shadow:
    0 0 25px
    rgba(94,231,255,.15);
}

.logo-name {
  color: var(--text);

  font-size: 12px;

  letter-spacing: .16em;

  white-space: nowrap;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
  display: flex;
  align-items: center;

  gap: 3px;

  margin-left: auto;

  padding: 4px;

  border-radius: 13px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    rgba(255,255,255,.045);
}

.nav a {
  display: flex;

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

  padding: 10px 13px;

  border-radius: 9px;

  color: #8f98ad;

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;

  transition: .25s ease;
}

.nav a:hover {
  color: white;

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

.nav a.active {
  color: #061018;

  background:
    var(--accent);

  box-shadow:
    0 5px 20px
    rgba(94,231,255,.15);
}


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

.menu-toggle {
  width: 44px;
  height: 44px;

  display: none;

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

  flex-direction: column;

  gap: 5px;

  margin-left: auto;

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

  border-radius: 11px;

  background:
    rgba(255,255,255,.035);

  cursor: pointer;
}

.menu-toggle span {
  width: 19px;
  height: 1.5px;

  border-radius: 10px;

  background: white;

  transition: .3s ease;
}

.menu-toggle.active span:nth-child(1) {
  transform:
    translateY(6.5px)
    rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform:
    translateY(-6.5px)
    rotate(-45deg);
}


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

.section {
  width: min(1180px, 90%);

  margin: auto;

  min-height: 100vh;

  padding: 130px 0 90px;
}


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

.hero {
  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items: center;

  gap: 40px;
}

.eyebrow {
  color: var(--accent);

  font-size: 12px;

  letter-spacing: 4px;

  font-weight: 800;

  margin-bottom: 18px;
}

.hero h1 {
  font:
    800
    clamp(55px, 8vw, 100px)
    /.95
    Poppins,
    sans-serif;

  letter-spacing: -5px;
}

.hero h1 span,
.section-heading h2 span {
  color: var(--accent);
}

.hero h2 {
  margin: 22px 0 18px;

  font:
    700
    clamp(23px, 3vw, 36px)
    /1.2
    Poppins,
    sans-serif;
}

.hero h2 span {
  color: #d8dded;
}

.caret {
  color: var(--accent) !important;

  animation:
    blink .7s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.hero-text {
  max-width: 650px;

  color: var(--muted);

  font-size: 17px;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 13px;

  margin: 32px 0 25px;
}

.btn {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 14px 22px;

  border-radius: 10px;

  border:
    1px solid transparent;

  font-weight: 700;

  font-size: 14px;

  cursor: pointer;

  transition: .3s;
}

.btn-primary {
  color: #031018;

  background:
    var(--accent);

  box-shadow:
    0 0 30px
    rgba(94,231,255,.18);
}

.btn-primary:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 35px
    rgba(94,231,255,.22);
}

.btn-outline {
  border-color:
    var(--line);

  color: white;

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

.btn-outline:hover {
  border-color:
    rgba(94,231,255,.5);

  color:
    var(--accent);
}


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

.quick-links {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 18px;

  color: #79829b;

  font-size: 13px;
}

.quick-links a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  transition: .25s ease;
}

.quick-links a svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-links a:hover {
  color: white;

  transform:
    translateY(-2px);
}


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

.hero-visual {
  position: relative;

  min-height: 610px;

  display: grid;

  place-items: center;

  overflow: visible;
}


/* =========================================================
   PROJECT CAROUSEL
========================================================= */

.project-carousel {
  position: relative;

  width: min(610px, 49vw);

  aspect-ratio: 1;

  perspective: 1200px;

  touch-action: pan-y;

  user-select: none;
  -webkit-user-select: none;

  outline: none;
}

.carousel-glow {
  position: absolute;

  width: 70%;
  height: 70%;

  left: 15%;
  top: 15%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(94,231,255,.13),
      transparent 65%
    );

  filter: blur(25px);

  pointer-events: none;
}


/* =========================================================
   ORBIT RINGS
========================================================= */

.carousel-ring {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.ring-one {
  inset: 7%;

  border:
    1px solid
    rgba(94,231,255,.13);

  box-shadow:
    0 0 50px
    rgba(94,231,255,.04);
}

.ring-two {
  inset: 15%;

  border:
    1px dashed
    rgba(139,92,246,.20);

  transform:
    rotate(35deg);
}


/* =========================================================
   CENTER PROFILE
========================================================= */

.profile-center {
  position: absolute;

  z-index: 30;

  left: 50%;
  top: 50%;

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

  width: 275px;

  display: flex;

  flex-direction: column;

  align-items: center;
}


/* =========================================================
   PROFILE IMAGE
========================================================= */

.profile-photo-ring {
  position: relative;

  width: 210px;
  height: 210px;

  padding: 5px;

  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      var(--accent),
      rgba(94,231,255,.15),
      var(--accent-2),
      rgba(139,92,246,.12),
      var(--accent)
    );

  box-shadow:
    0 0 45px
    rgba(94,231,255,.18),

    0 20px 70px
    rgba(0,0,0,.45);

  animation:
    profileFloat 5s ease-in-out infinite;
}

@keyframes profileFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }
}


.profile-photo {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 50%;

  background:
    #0c1326;

  border:
    3px solid
    rgba(6,9,20,.9);
}

.profile-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition:
    transform .6s ease;
}

.profile-center:hover .profile-photo img {
  transform:
    scale(1.05);
}

.profile-photo-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(4,7,18,.82),
      transparent 52%
    );
}

.profile-name {
  position: absolute;

  z-index: 3;

  left: 0;
  right: 0;
  bottom: 18px;

  display: flex;

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

  gap: 5px;

  color: white;

  font:
    700
    11px
    Poppins;

  letter-spacing: 2px;
}

.profile-name strong {
  color: var(--accent);

  font-weight: 800;
}


/* =========================================================
   SELECTED PROJECT INFORMATION
========================================================= */

.selected-project {
  width: 255px;

  margin-top: 14px;

  padding: 12px 15px;

  text-align: center;

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

  border-radius: 15px;

  background:
    rgba(7,11,25,.72);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.28);

  transition:
    opacity .3s ease,
    transform .3s ease;
}

.selected-label {
  display: block;

  color: var(--accent);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 2px;
}

.selected-project h3 {
  margin-top: 4px;

  font:
    700
    16px
    Poppins;

  line-height: 1.2;
}

.selected-project p {
  margin-top: 5px;

  color: #9da7bd;

  font-size: 9px;

  line-height: 1.4;
}

.selected-meta {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 9px;

  padding-top: 8px;

  border-top:
    1px solid
    rgba(255,255,255,.07);

  color: #68738c;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.3px;
}

.selected-meta span:first-child {
  color: var(--accent);
}


/* =========================================================
   PROJECT ORBIT
========================================================= */

.project-orbit {
  position: absolute;

  inset: 0;

  z-index: 10;
}


/* =========================================================
   PROJECT CARDS
========================================================= */

.project-card {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 125px;
  height: 150px;

  padding: 5px;

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

  border-radius: 18px;

  background:
    rgba(10,15,32,.78);

  backdrop-filter:
    blur(13px);

  -webkit-backdrop-filter:
    blur(13px);

  color: white;

  cursor: pointer;

  overflow: hidden;

  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    opacity .6s ease,
    filter .6s ease,
    border-color .3s ease,
    box-shadow .3s ease;

  will-change:
    transform,
    opacity;
}

.project-card:hover {
  border-color:
    rgba(94,231,255,.55);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.35),

    0 0 30px
    rgba(94,231,255,.10);
}

.project-image {
  position: absolute;

  inset: 5px;

  border-radius: 13px;

  overflow: hidden;

  background-size: cover;

  background-position: center;
}

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

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.13),
      transparent 28%
    );
}

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

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(3,6,17,.95),
      transparent 65%
    );
}
/* =========================================
   PROJECT ORBIT ICONS
========================================= */

.project-icon {
  position: absolute;

  left: 50%;
  top: 39%;

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

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

  z-index: 5;

  border-radius: 17px;

  background: rgba(5, 12, 25, 0.62);

  border: 1px solid rgba(94, 231, 255, 0.22);

  color: var(--accent);

  box-shadow:
    inset 0 0 20px rgba(94, 231, 255, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.30);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    width 0.35s ease,
    height 0.35s ease,
    color 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;

  animation: iconFloat 3.6s ease-in-out infinite;
}

.project-icon svg {
  width: 31px;
  height: 31px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.65;

  stroke-linecap: round;
  stroke-linejoin: round;

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


/* Hover */

.project-card:hover .project-icon {
  border-color: rgba(94, 231, 255, 0.55);

  background: rgba(94, 231, 255, 0.08);

  box-shadow:
    0 0 25px rgba(94, 231, 255, 0.16);
}

.project-card:hover .project-icon svg {
  transform: scale(1.08);
}


/* Selected / Active Project */

.project-card.active .project-icon {
  width: 64px;
  height: 64px;

  color: #baf7ff;

  border-color: rgba(94, 231, 255, 0.82);

  background: rgba(94, 231, 255, 0.10);

  box-shadow:
    0 0 12px rgba(94, 231, 255, 0.18),
    0 0 35px rgba(94, 231, 255, 0.20),
    inset 0 0 20px rgba(94, 231, 255, 0.08);

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

.project-card.active .project-icon svg {
  transform: scale(1.08);

  filter:
    drop-shadow(
      0 0 8px
      rgba(94, 231, 255, 0.55)
    );
}


/* =========================================
   ICON ANIMATIONS
========================================= */

@keyframes iconFloat {

  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -3px;
  }

}

@keyframes activeIconFloat {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  50% {
    transform:
      translate(-50%, -53%)
      scale(1.035);
  }

}


/* =========================================
   MOBILE ICON SIZE
========================================= */

@media (max-width: 600px) {

  .project-icon {
    width: 43px;
    height: 43px;

    border-radius: 13px;
  }

  .project-icon svg {
    width: 23px;
    height: 23px;
  }

  .project-card.active .project-icon {
    width: 48px;
    height: 48px;
  }

}

/* =========================================================
   PLACEHOLDER PROJECT VISUALS
========================================================= */

.project-image-1 {
  background:
    linear-gradient(
      135deg,
      #0e7490,
      #172554 50%,
      #312e81
    );
}

.project-image-2 {
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #1e1b4b 50%,
      #0f766e
    );
}

.project-image-3 {
  background:
    linear-gradient(
      135deg,
      #0891b2,
      #164e63 50%,
      #312e81
    );
}

.project-image-4 {
  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #172554 55%,
      #581c87
    );
}

.project-image-5 {
  background:
    linear-gradient(
      135deg,
      #0f766e,
      #134e4a 50%,
      #1e3a8a
    );
}

.project-image-6 {
  background:
    linear-gradient(
      135deg,
      #9333ea,
      #1e1b4b 55%,
      #0369a1
    );
}


/* =========================================================
   PROJECT TEXT
========================================================= */

.project-mini-info {
  position: absolute;

  z-index: 3;

  left: 13px;
  right: 13px;
  bottom: 12px;

  display: flex;

  flex-direction: column;

  text-align: left;
}

.project-mini-info small {
  color: var(--accent);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 2px;
}

.project-mini-info strong {
  margin-top: 2px;

  font:
    600
    11px
    Poppins;
}


/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.carousel-controls {
  position: absolute;

  z-index: 50;

  left: 50%;
  bottom: -1%;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 7px 9px;

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

  border-radius: 999px;

  background:
    rgba(6,9,20,.75);

  backdrop-filter:
    blur(15px);
}

.carousel-controls button {
  width: 29px;
  height: 29px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  color: white;

  background:
    rgba(255,255,255,.05);

  cursor: pointer;

  transition: .25s ease;
}

.carousel-controls button:hover {
  color: #031018;

  background:
    var(--accent);

  transform:
    scale(1.08);
}

.carousel-controls span {
  color: #737d96;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 2px;
}


/* =========================================================
   GENERAL SECTION HEADINGS
========================================================= */

.section-heading {
  margin-bottom: 50px;
}

.section-heading h2 {
  font:
    800
    clamp(38px, 6vw, 68px)
    /1.05
    Poppins,
    sans-serif;

  letter-spacing: -2px;
}

.glass {
  background:
    var(--glass);

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

  backdrop-filter:
    blur(15px);
}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {
  display: grid;

  grid-template-columns:
    1.25fr .75fr;

  gap: 25px;
}

.about-card {
  padding: 35px;

  border-radius: 18px;
}

.about-card p {
  color: var(--muted);

  margin-bottom: 20px;

  font-size: 16px;
}

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

.stats-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 12px;
}

.stat {
  padding: 25px;

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

  border-radius: 15px;

  background:
    rgba(255,255,255,.025);

  transition: .3s ease;
}

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

  border-color:
    rgba(94,231,255,.25);
}

.stat strong {
  color: var(--accent);

  font:
    700
    13px
    Poppins;
}

.stat span {
  display: block;

  margin-top: 25px;

  font-weight: 700;
}


/* =========================================================
   SKILLS / ACHIEVEMENTS
========================================================= */

.skills-grid,
.achievement-grid {
  display: grid;

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

  gap: 18px;
}

.skill-card,
.achievement {
  padding: 30px;

  border-radius: 18px;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    );

  transition: .3s;
}

.skill-card:hover,
.achievement:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(94,231,255,.3);
}

.skill-icon {
  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background:
    rgba(94,231,255,.08);

  color:
    var(--accent);

  margin-bottom: 22px;

  transition: .3s ease;
}

.skill-card:hover .skill-icon {
  background:
    rgba(94,231,255,.13);

  transform:
    translateY(-2px);
}

.skill-icon svg {
  width: 27px;
  height: 27px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.skill-card h3,
.achievement h3 {
  font:
    700
    23px
    Poppins;

  margin-bottom: 9px;
}

.skill-card p,
.achievement p {
  color: var(--muted);

  font-size: 14px;
}

.skill-line {
  height: 4px;

  margin-top: 25px;

  border-radius: 10px;

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

  overflow: hidden;
}

.skill-line span {
  display: block;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-2)
    );
}

.achievement span {
  color: var(--accent);

  font:
    800
    12px
    Poppins;

  letter-spacing: 2px;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline {
  position: relative;

  max-width: 900px;

  margin: auto;

  padding-left: 35px;
}

.timeline::before {
  content: "";

  position: absolute;

  left: 7px;
  top: 0;
  bottom: 0;

  width: 1px;

  background:
    linear-gradient(
      var(--accent),
      transparent
    );
}

.timeline-item {
  position: relative;

  margin-bottom: 25px;
}

.timeline-dot {
  position: absolute;

  left: -34px;
  top: 30px;

  width: 16px;
  height: 16px;

  border:
    3px solid
    var(--accent);

  border-radius: 50%;

  background:
    var(--bg);

  box-shadow:
    0 0 18px
    rgba(94,231,255,.35);
}

.timeline-content {
  padding: 28px;

  border-radius: 18px;
}

.timeline-meta {
  color: var(--accent);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;
}

.timeline-content h3 {
  font:
    700
    25px
    Poppins;

  margin: 8px 0 3px;
}

.timeline-content h4 {
  color: #d2d7e6;

  font-size: 13px;

  margin-bottom: 14px;
}

.timeline-content p {
  color: var(--muted);

  font-size: 14px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
  min-height: auto;

  padding-bottom: 120px;
}

.contact-grid {
  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 20px;
}

.contact-info,
.contact-form {
  padding: 30px;

  border-radius: 18px;
}

.contact-info h3 {
  font:
    700
    25px
    Poppins;

  margin-bottom: 25px;
}

.contact-info > a,
.contact-info > div {
  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 0;

  border-bottom:
    1px solid
    var(--line);
}

.contact-info > div {
  cursor: default;
}

.contact-icon {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 10px;

  background:
    rgba(94,231,255,.07);

  color:
    var(--accent);
}

.contact-icon svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.whatsapp-icon {
  color:
    var(--whatsapp);

  background:
    rgba(37,211,102,.08);
}

.contact-info small {
  display: block;

  color: var(--accent);

  font-size: 9px;

  letter-spacing: 2px;

  font-weight: 800;
}

.contact-info strong {
  display: block;

  margin-top: 4px;

  font-size: 14px;
}

.contact-info > a:hover strong {
  color:
    var(--accent);
}

.contact-info .cv-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--accent);

  border-bottom: 0;

  font-weight: 700;

  padding-top: 22px;
}


/* =========================================================
   FORM
========================================================= */

.contact-form label {
  display: block;

  color: #dfe4f0;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 18px;
}

.contact-form input,
.contact-form textarea {
  display: block;

  width: 100%;

  margin-top: 8px;

  padding: 14px 15px;

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

  border-radius: 10px;

  outline: none;

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

  color: white;

  font: inherit;

  resize: vertical;

  transition: .25s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color:
    rgba(94,231,255,.5);

  box-shadow:
    0 0 0 3px
    rgba(94,231,255,.04);
}

.form-note {
  margin-top: 13px;

  color:
    var(--accent);

  font-size: 13px;
}

.form-note.error {
  color:
    #ff7b8a;
}


/* =========================================================
   FLOATING CONTACT
========================================================= */

.floating-contact {
  position: fixed;

  z-index: 90;

  right: 24px;
  bottom: 24px;

  display: flex;

  flex-direction: column;

  gap: 12px;
}

.floating-contact a {
  width: 58px;
  height: 58px;

  display: grid;

  place-items: center;

  border-radius: 50%;

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

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.30);

  transition: .25s ease;
}

.floating-contact a svg {
  width: 28px;
  height: 28px;

  fill: currentColor;
}

.floating-whatsapp {
  color: white;

  background:
    rgba(37,211,102,.88);

  box-shadow:
    0 0 25px
    rgba(37,211,102,.25);
}

.floating-whatsapp:hover {
  transform:
    translateY(-4px)
    scale(1.06);
}

.floating-phone {
  color: #031018;

  background:
    var(--accent);

  box-shadow:
    0 0 25px
    rgba(94,231,255,.25);
}

.floating-phone:hover {
  transform:
    translateY(-4px)
    scale(1.06);
}


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

footer {
  padding: 25px 5%;

  text-align: center;

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

  color:
    #6f7890;

  font-size: 12px;
}


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

.cursor-glow {
  position: fixed;

  z-index: 0;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(94,231,255,.06),
      transparent 65%
    );

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


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    .7s ease;
}

.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}


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

@media (max-width: 1100px) {

  .header {
    width: 94%;
  }

  .nav a {
    padding:
      9px 10px;

    font-size: 11px;
  }

  .hero {
    gap: 10px;
  }

  .project-carousel {
    width:
      min(560px, 51vw);
  }

  .profile-center {
    transform:
      translate(-50%, -50%)
      scale(.91);
  }

  .project-card {
    width: 110px;
    height: 135px;
  }

}


/* =========================================================
   MOBILE NAV + HERO
========================================================= */

@media (max-width: 850px) {

  .header {
    top: 12px;

    width: 92%;

    padding:
      8px 8px 8px 12px;

    border-radius: 16px;
  }

  .menu-toggle {
    display: flex;
  }

  .nav {
    position: absolute;

    top:
      calc(100% + 10px);

    left: 0;
    right: 0;

    width: 100%;

    margin: 0;

    padding: 8px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-8px)
      scale(.98);

    transform-origin:
      top;

    background:
      rgba(7,11,25,.94);

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

    border-radius: 15px;

    backdrop-filter:
      blur(22px);

    transition: .25s ease;
  }

  .nav.open {
    opacity: 1;

    visibility: visible;

    transform:
      translateY(0)
      scale(1);
  }

  .nav a {
    width: 100%;

    padding:
      13px 14px;

    justify-content:
      flex-start;

    font-size: 13px;
  }

  .nav a.active {
    background:
      rgba(94,231,255,.12);

    color:
      var(--accent);

    box-shadow: none;
  }


  .hero {
    grid-template-columns: 1fr;

    text-align: center;

    padding-top: 120px;

    gap: 0;
  }

  .hero-text {
    margin: auto;
  }

  .hero-buttons,
  .quick-links {
    justify-content: center;
  }

  .hero-visual {
    min-height: 590px;

    margin-top: 0;
  }

  .project-carousel {
    width:
      min(600px, 94vw);
  }


  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

}


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

@media (max-width: 600px) {

  .section {
    width: 90%;

    padding-top: 105px;
  }

  .hero h1 {
    letter-spacing: -3px;
  }

  .hero-visual {
    min-height: 500px;
  }

  .project-carousel {
    width: 100%;
  }

  .profile-center {
    width: 220px;
  }

  .profile-photo-ring {
    width: 170px;
    height: 170px;
  }

  .selected-project {
    width: 205px;

    padding:
      10px 12px;
  }

  .selected-project h3 {
    font-size: 14px;
  }

  .selected-project p {
    font-size: 8px;
  }

  .project-card {
    width: 88px;
    height: 112px;

    border-radius: 14px;
  }

  .project-image {
    inset: 4px;

    border-radius: 10px;
  }

  .project-mini-info {
    left: 9px;
    right: 9px;
    bottom: 9px;
  }

  .project-mini-info strong {
    font-size: 8px;
  }

  .project-mini-info small {
    font-size: 6px;
  }

  .carousel-controls {
    bottom: 0;
  }

  .skills-grid,
  .achievement-grid {
    grid-template-columns: 1fr;
  }

  .about-card,
  .skill-card,
  .achievement,
  .contact-info,
  .contact-form {
    padding: 22px;
  }

  .floating-contact {
    right: 16px;
    bottom: 16px;
  }

  .floating-contact a {
    width: 54px;
    height: 54px;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

  .hero-visual {
    min-height: 455px;
  }

  .profile-center {
    transform:
      translate(-50%, -50%)
      scale(.91);
  }

  .project-card {
    width: 78px;
    height: 100px;
  }

  .project-carousel {
    transform:
      scale(.96);
  }

}