:root {
  --bg: #07111f;
  --bg-soft: #0d1726;

  --text: #f8fafc;
  --text-muted: #94a3b8;

  --accent: #7c5cff;
  --accent-2: #2dd4bf;

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.16);

  --shadow:
    0 20px 60px rgba(0, 0, 0, 0.35);

  --radius-lg: 28px;
  --radius-md: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
img,
svg,
video,
canvas {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(124, 92, 255, 0.15),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(45, 212, 191, 0.10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #050b14,
      #07111f 45%,
      #091426
    );

  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------------- NAVBAR ---------------- */

.site-header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 40px));
  z-index: 1000;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 18px;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);

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

  border-radius: 999px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.25);
}

.logo {
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.3rem;
}

.logo span {
  color: var(--accent-2);
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: 0.3s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.theme-toggle {
  width: 42px;
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);
  color: var(--text);

  cursor: pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.theme-toggle:hover {
  transform: rotate(12deg) scale(1.05);
  background: rgba(255, 255, 255, 0.13);
}
.theme-toggle {
  position: relative;

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

  padding: 0;
}

/* ---------------- HERO ---------------- */

.hero {
  min-height: 100vh;

  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 60px;

  width: min(1200px, calc(100% - 50px));
  margin: 0 auto;

  padding-top: 120px;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-intro {
  color: var(--accent-2);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero h1 {
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-bottom: 18px;
}

.hero h2 {
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

.hero h2 span {
  color: var(--text);
}

.hero-description {
  margin-top: 24px;
  max-width: 650px;

  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.hero-buttons {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------------- BUTTONS ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  padding: 0 18px;

  border-radius: 999px;

  text-decoration: none;
  font-weight: 700;

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

.primary-btn {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      #5b7cff
    );

  box-shadow:
    0 15px 35px rgba(124, 92, 255, 0.35);
}

.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 45px rgba(124, 92, 255, 0.45);
}

.secondary-btn {
  color: var(--text);

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);

  backdrop-filter: blur(14px);
}

.secondary-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---------------- HERO VISUAL ---------------- */

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-visual::before {
  content: "";
  position: absolute;

  width: 380px;
  height: 380px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(124, 92, 255, 0.30),
      rgba(45, 212, 191, 0.12),
      transparent 70%
    );

  filter: blur(20px);

  animation: glowFloat 8s ease-in-out infinite;
}

.portrait-glass {
  position: relative;

  width: min(430px, 100%);
  aspect-ratio: 0.82;

  border-radius: 42px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.035)
    );

  border: 1px solid rgba(255, 255, 255, 0.16);

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

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 30px 80px rgba(0, 0, 0, 0.40);

  overflow: hidden;
}

.portrait-glass::before {
  content: "";
  position: absolute;

  width: 180px;
  height: 180px;

  top: -50px;
  right: -40px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.16);

  filter: blur(10px);
}

.portrait-glass::after {
  content: "";
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.11) 45%,
      transparent 65%
    );

  transform: translateX(-120%);
  animation: glassShine 7s ease-in-out infinite;
}

/* ---------------- SECTIONS ---------------- */

.section {
  width: min(1100px, calc(100% - 50px));
  margin: 0 auto;
  padding: 120px 0;
}

.section > h2 {
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  margin-bottom: 30px;
  letter-spacing: -0.04em;
}

.section > p {
  color: var(--text-muted);
  max-width: 800px;
  line-height: 1.8;
}

/* ---------------- GLASS CARDS ---------------- */

.skills-grid,
.projects-grid {
  display: grid;
  gap: 22px;
  margin-top: 35px;
}

.skills-grid {
  grid-template-columns: repeat(3, 1fr);
}

.projects-grid {
  grid-template-columns: repeat(3, 1fr);
}

.skill-card,
.project-card,
.experience-card {
  position: relative;

  padding: 28px;

  border-radius: var(--radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.035)
    );

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

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

  box-shadow: var(--shadow);

  overflow: hidden;

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

.skill-card:hover,
.project-card:hover,
.experience-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.28);
}

.skill-card h3,
.project-card h3,
.experience-card h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.skill-card p,
.project-card p,
.experience-card p {
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------------- CONTACT ---------------- */

#contact {
  text-align: center;
}

#contact p {
  margin: 0 auto 28px;
}

/* ---------------- FOOTER ---------------- */

footer {
  text-align: center;
  padding: 40px 20px;

  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---------------- ANIMATIONS ---------------- */

@keyframes glowFloat {
  0%,
  100% {
    transform: translate(-10px, -10px) scale(1);
  }

  50% {
    transform: translate(20px, 20px) scale(1.08);
  }
}

@keyframes glassShine {
  0%,
  70% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

/* ---------------- RESPONSIVE START ---------------- */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 150px;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .nav-links {
    display: none;
  }

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

  .hero-visual {
    margin-top: 20px;
  }
}

/* =====================================================
   LIGHT MODE
===================================================== */

body.light-mode {
  --bg: #eef3f8;
  --bg-soft: #ffffff;

  --text: #111827;
  --text-muted: #667085;

  --accent: #6d5dfc;
  --accent-2: #0891b2;

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(17, 24, 39, 0.10);

  --shadow:
    0 20px 60px rgba(15, 23, 42, 0.10);

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(124, 92, 255, 0.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(45, 212, 191, 0.12),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #f8fafc,
      #eef3f8 45%,
      #e8eef6
    );
}


/* =====================================================
   LIGHT MODE - GLASS ELEMENTS
===================================================== */

body.light-mode .navbar {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(15, 23, 42, 0.09);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 30px rgba(15, 23, 42, 0.08);
}

body.light-mode .theme-toggle {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(15, 23, 42, 0.10);
}

body.light-mode .secondary-btn {
  background: rgba(255, 255, 255, 0.48);
  border-color: rgba(15, 23, 42, 0.10);
}

body.light-mode .portrait-glass,
body.light-mode .skill-card,
body.light-mode .project-card,
body.light-mode .experience-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.70),
      rgba(255, 255, 255, 0.38)
    );

  border-color: rgba(15, 23, 42, 0.08);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 25px 60px rgba(15, 23, 42, 0.09);
}


/* =====================================================
   SMOOTH THEME TRANSITIONS
===================================================== */

body,
.navbar,
.theme-toggle,
.skill-card,
.project-card,
.experience-card,
.portrait-glass,
.secondary-btn,
.nav-links a,
.logo,
.hero h2,
.hero-description,
.section > p,
footer {
  transition:
    background 0.45s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.45s ease;
}


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

.reveal {
  opacity: 0;
  transform: translateY(45px);
  filter: blur(6px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* =====================================================
   STAGGERED CARD REVEALS
===================================================== */

.skills-grid .reveal:nth-child(2),
.projects-grid .reveal:nth-child(2) {
  transition-delay: 0.10s;
}

.skills-grid .reveal:nth-child(3),
.projects-grid .reveal:nth-child(3) {
  transition-delay: 0.20s;
}


/* =====================================================
   BETTER CARD HOVER DEPTH
===================================================== */

.skill-card,
.project-card,
.experience-card {
  transform-style: preserve-3d;
}

.skill-card:hover,
.project-card:hover,
.experience-card:hover {
  transform:
    translateY(-9px)
    scale(1.01);

  box-shadow:
    0 30px 75px rgba(0, 0, 0, 0.28);
}

body.light-mode .skill-card:hover,
body.light-mode .project-card:hover,
body.light-mode .experience-card:hover {
  box-shadow:
    0 30px 75px rgba(15, 23, 42, 0.13);
}


/* =====================================================
   NAVBAR LINK EFFECT
===================================================== */

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -7px;

  width: 0;
  height: 2px;

  transform: translateX(-50%);

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

  border-radius: 20px;

  transition: width 0.3s ease;
}

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


/* =====================================================
   SELECTION
===================================================== */

::selection {
  background: var(--accent);
  color: white;
}


/* =====================================================
   ACCESSIBILITY - REDUCED MOTION
===================================================== */

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

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* =====================================================
   MOUSE REACTIVE GLASS
===================================================== */

.navbar,
.skill-card,
.project-card,
.experience-card,
.portrait-glass {
  position: relative;
}

.navbar::before,
.skill-card::before,
.project-card::before,
.experience-card::before,
.portrait-glass::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.16),
      transparent 55%
    );

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;
}

.navbar:hover::before,
.skill-card:hover::before,
.project-card:hover::before,
.experience-card:hover::before,
.portrait-glass:hover::before {
  opacity: 1;
}


/* keep actual content above the glass highlight */

.navbar > *,
.skill-card > *,
.project-card > *,
.experience-card > *,
.portrait-glass > * {
  position: relative;
  z-index: 2;
}
/* =====================================================
   PREMIUM HERO VISUAL
===================================================== */

.hero-visual {
  min-height: 580px;
  perspective: 1200px;
}


/* ---------------- AMBIENT ORBS ---------------- */

.hero-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(3px);

  pointer-events: none;

  opacity: 0.8;
}

.orb-one {
  width: 220px;
  height: 220px;

  top: 5%;
  right: -5%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.28),
      rgba(124, 92, 255, 0.28) 25%,
      rgba(124, 92, 255, 0.06) 65%,
      transparent 75%
    );

  animation: orbOneMove 9s ease-in-out infinite;
}

.orb-two {
  width: 170px;
  height: 170px;

  bottom: 5%;
  left: -5%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.20),
      rgba(45, 212, 191, 0.24) 30%,
      transparent 70%
    );

  animation: orbTwoMove 11s ease-in-out infinite;
}


/* ---------------- PORTRAIT GLASS ---------------- */

.portrait-glass {
  isolation: isolate;

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

  transform-style: preserve-3d;

  transition:
    transform 0.18s ease-out,
    box-shadow 0.3s ease;
}

.portrait-placeholder {
  width: 78%;
  height: 82%;

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

  border-radius: 34px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(124, 92, 255, 0.18),
      transparent 48%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.01)
    );

  border: 1px solid rgba(255, 255, 255, 0.10);

  overflow: hidden;
}

.portrait-placeholder span {
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 900;

  letter-spacing: -0.08em;

  color: rgba(255, 255, 255, 0.12);

  user-select: none;
}


/* ---------------- STATUS CHIP ---------------- */

.portrait-info {
  position: absolute;

  left: 50%;
  bottom: 24px;

  transform: translateX(-50%) translateZ(45px);

  display: flex;
  align-items: center;
  gap: 9px;

  white-space: nowrap;

  padding: 11px 16px;

  border-radius: 999px;

  background: rgba(8, 15, 27, 0.62);

  border: 1px solid rgba(255, 255, 255, 0.14);

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

  color: rgba(255, 255, 255, 0.84);

  font-size: 0.78rem;
  font-weight: 600;

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

.status-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #2dd4bf;

  box-shadow:
    0 0 0 4px rgba(45, 212, 191, 0.11),
    0 0 15px rgba(45, 212, 191, 0.8);

  animation: statusPulse 2s ease-in-out infinite;
}


/* =====================================================
   FLOATING GLASS BADGES
===================================================== */

.floating-badge {
  position: absolute;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 11px 15px;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.045)
    );

  border: 1px solid rgba(255, 255, 255, 0.16);

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

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 15px 40px rgba(0, 0, 0, 0.24);

  color: var(--text);

  font-size: 0.82rem;
  font-weight: 650;

  pointer-events: none;
}

.floating-badge span {
  color: var(--accent-2);
}

.badge-java {
  top: 15%;
  left: -2%;

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

.badge-web {
  right: -7%;
  top: 39%;

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

.badge-code {
  left: 2%;
  bottom: 15%;

  animation: badgeFloatThree 7s ease-in-out infinite;
}


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

@keyframes orbOneMove {

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

  50% {
    transform: translate(-25px, 25px) scale(1.12);
  }
}

@keyframes orbTwoMove {

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

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

@keyframes badgeFloatOne {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-13px) rotate(1deg);
  }
}

@keyframes badgeFloatTwo {

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

  50% {
    transform: translateY(14px) rotate(-1deg);
  }
}

@keyframes badgeFloatThree {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}


/* =====================================================
   HERO LIGHT MODE
===================================================== */

body.light-mode .portrait-placeholder {
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(124, 92, 255, 0.12),
      transparent 48%
    ),
    rgba(255, 255, 255, 0.24);

  border-color: rgba(15, 23, 42, 0.07);
}

body.light-mode .portrait-placeholder span {
  color: rgba(15, 23, 42, 0.10);
}

body.light-mode .portrait-info {
  background: rgba(255, 255, 255, 0.58);

  border-color: rgba(15, 23, 42, 0.08);

  color: #344054;
}

body.light-mode .floating-badge {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0.35)
    );

  border-color: rgba(15, 23, 42, 0.08);

  box-shadow:
    0 15px 40px rgba(15, 23, 42, 0.10);
}


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

@media (max-width: 900px) {

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

  .portrait-glass {
    width: min(370px, 85vw);
  }

  .badge-java {
    left: 2%;
  }

  .badge-web {
    right: 0;
  }
}

@media (max-width: 520px) {

  .floating-badge {
    padding: 9px 12px;
    font-size: 0.72rem;
  }

  .badge-java {
    top: 12%;
    left: -1%;
  }

  .badge-web {
    right: -1%;
  }
/* =====================================================
   MOBILE PERFORMANCE OPTIMIZATION
===================================================== */

@media (max-width: 768px) {

  /* Reduce expensive glass rendering */

  .navbar,
  .skill-card,
  .project-card,
  .experience-card,
  .portrait-glass,
  .floating-badge,
  .portrait-info,
  .secondary-btn {

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


  /* Remove expensive blur during scroll reveal */

  .reveal {
    filter: none;

    transform: translateY(25px);

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


  /* Lighter shadows */

  .skill-card,
  .project-card,
  .experience-card,
  .portrait-glass {

    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.18);
  }


  /* Disable mouse-following glow on touch devices */

  .navbar::before,
  .skill-card::before,
  .project-card::before,
  .experience-card::before,
  .portrait-glass::before {

    display: none;
  }


  /* Reduce ambient background rendering */

  .hero-orb {
    filter: blur(8px);
    opacity: 0.45;
  }


  /* Slow / simplify continuous animations */

  .orb-one,
  .orb-two {
    animation: none;
  }


  .floating-badge {
    animation-duration: 8s;
  }


  /* Remove expensive card hover transformations */

  .skill-card:hover,
  .project-card:hover,
  .experience-card:hover {

    transform: none;
  }


  /* Faster theme transitions */

  body,
  .navbar,
  .skill-card,
  .project-card,
  .experience-card,
  .portrait-glass {

    transition-duration: 0.25s;
  }
}
  .badge-code {
    bottom: 12%;
  }
}
/* =====================================================
   MOBILE NAVBAR SIZE FIX
===================================================== */

@media (max-width: 768px) {

  .site-header {
    width: calc(100% - 24px);
    top: 12px;
  }

  .navbar {
    width: 100%;
    height: 64px;
    min-height: 64px;

    padding: 0 12px 0 18px;

    flex-wrap: nowrap;
    flex-shrink: 0;

    /* prevents mobile browser rendering differences */
    contain: layout;
  }

  .logo {
    flex-shrink: 0;

    line-height: 1;
    white-space: nowrap;
  }

  .theme-toggle {
    width: 42px;
    min-width: 42px;

    height: 42px;
    min-height: 42px;

    flex: 0 0 42px;

    padding: 0;
    margin: 0;

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

    font-size: 19px;
    line-height: 1;

    appearance: none;
    -webkit-appearance: none;
  }
}
/* =====================================================
   HERO PARALLAX SUPPORT
===================================================== */

#heroVisual {
  transform-style: preserve-3d;
}

.portrait-glass {
  will-change: transform;
}

.floating-badge {
  transform-style: preserve-3d;
}

.badge-java {
  translate: 0 0 25px;
}

.badge-web {
  translate: 0 0 40px;
}

.badge-code {
  translate: 0 0 20px;
}

@media (max-width: 900px) {
  .portrait-glass {
    transform: none !important;
  }
}
/* =====================================================
   PORTRAIT INNER GLASS FRAME
===================================================== */

.portrait-frame {
  width: 78%;
  height: 82%;

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

  border-radius: 34px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.025)
    );

  border: 1px solid rgba(255, 255, 255, 0.12);

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

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 45px rgba(0, 0, 0, 0.20);

  overflow: hidden;

  position: relative;
  z-index: 2;
}


/* =====================================================
   PORTRAIT IMAGE
===================================================== */

.portrait-image {
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  display: block;
}


/* keep status floating above everything */

.portrait-info {
  z-index: 5;
}
/* =====================================================
   THEME ICONS
===================================================== */

.theme-toggle {
  overflow: hidden;
}

.theme-icon {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.moon-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.sun-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-60deg) scale(0.55);
}

body.light-mode .moon-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(60deg) scale(0.55);
}

body.light-mode .sun-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.nav-links a.active {
  color: var(--text);
}

.nav-links a.active::after {
  width: 100%;
}
/* =====================================================
   HERO ENTRANCE
===================================================== */

.hero-content > * {
  opacity: 0;
  transform: translateY(28px);

  animation: heroReveal 0.8s forwards;
}

.hero-content > *:nth-child(1) {
  animation-delay: 0.10s;
}

.hero-content > *:nth-child(2) {
  animation-delay: 0.20s;
}

.hero-content > *:nth-child(3) {
  animation-delay: 0.32s;
}

.hero-content > *:nth-child(4) {
  animation-delay: 0.44s;
}

.hero-content > *:nth-child(5) {
  animation-delay: 0.56s;
}

.hero-visual {
  opacity: 0;

  animation:
    heroVisualReveal 1s 0.35s forwards;
}

@keyframes heroReveal {

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroVisualReveal {

  from {
    opacity: 0;
    transform: translateY(35px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* =====================================================
   ABOUT SECTION
===================================================== */

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

.section-label {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--accent-2);

  font-size: 0.85rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-heading h2 {
  font-size: clamp(2.8rem, 5vw, 4.8rem);

  letter-spacing: -0.05em;
  line-height: 1;
}


/* ---------------- ABOUT GRID ---------------- */

.about-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(240px, 0.7fr);

  gap: 22px;
}


/* reusable glass */

.glass-panel {
  position: relative;

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.035)
    );

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

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

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 20px 55px rgba(0, 0, 0, 0.22);
}


/* ---------------- MAIN ABOUT CARD ---------------- */

.about-main {
  padding: clamp(28px, 5vw, 52px);

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 360px;
}

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

  font-size: 1rem;
  line-height: 1.9;

  max-width: 720px;
}

.about-main p + p {
  margin-top: 18px;
}

.about-main .about-lead {
  color: var(--text);

  font-size: clamp(1.25rem, 2vw, 1.65rem);

  line-height: 1.55;

  font-weight: 600;
}


/* ---------------- ABOUT SIDE ---------------- */

.about-side {
  display: grid;
  gap: 18px;
}

.about-stat {
  min-height: 108px;

  padding: 22px;

  display: flex;
  flex-direction: column;

  justify-content: center;

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

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

  border-color: rgba(255, 255, 255, 0.25);
}

.stat-number {
  font-size: 1.6rem;
  font-weight: 800;

  color: var(--text);

  margin-bottom: 6px;
}

.stat-label {
  color: var(--text-muted);

  font-size: 0.88rem;
}


/* subtle glass highlight */

.about-main::before,
.about-stat::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.10),
      transparent 58%
    );

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;
}

.about-main:hover::before,
.about-stat:hover::before {
  opacity: 1;
}


/* ---------------- LIGHT MODE ---------------- */

body.light-mode .glass-panel {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.74),
      rgba(255, 255, 255, 0.38)
    );

  border-color: rgba(15, 23, 42, 0.08);

  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.08);
}


/* ---------------- MOBILE ---------------- */

@media (max-width: 800px) {

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

  .about-side {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-main {
    min-height: auto;
  }

}

@media (max-width: 560px) {

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

  .about-stat {
    min-height: 90px;
  }

}
/* =====================================================
   SKILLS SECTION
===================================================== */

.skills-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.skill-group {
  padding: 30px;
  min-height: 210px;

  overflow: hidden;

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

.skill-group:hover {
  transform: translateY(-6px);

  border-color: rgba(255, 255, 255, 0.24);

  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.24);
}

.skill-group-header {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 24px;
}

.skill-group-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

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

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

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(124, 92, 255, 0.22),
      rgba(45, 212, 191, 0.10)
    );

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: var(--accent-2);

  font-size: 0.9rem;
  font-weight: 800;
}


/* ---------------- TECH CHIPS ---------------- */

.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-chip {
  position: relative;

  padding: 9px 13px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  color: var(--text-muted);

  font-size: 0.82rem;
  font-weight: 600;

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

.tech-chip:hover {
  transform: translateY(-2px);

  color: var(--text);

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

  border-color: rgba(255, 255, 255, 0.20);
}


/* ---------------- MOUSE GLOW ---------------- */

.skill-group::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(124, 92, 255, 0.13),
      transparent 58%
    );

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;
}

.skill-group:hover::before {
  opacity: 1;
}


/* keep content above glow */

.skill-group > * {
  position: relative;
  z-index: 2;
}


/* ---------------- LIGHT MODE ---------------- */

body.light-mode .tech-chip {
  background: rgba(255, 255, 255, 0.48);

  border-color: rgba(15, 23, 42, 0.08);

  color: #667085;
}

body.light-mode .tech-chip:hover {
  background: rgba(255, 255, 255, 0.75);

  color: #111827;

  border-color: rgba(15, 23, 42, 0.12);
}


/* ---------------- MOBILE ---------------- */

@media (max-width: 768px) {

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

  .skill-group {
    min-height: auto;

    padding: 24px;

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

  .skill-group::before {
    display: none;
  }

  .skill-group:hover {
    transform: none;
  }
}
.skill-group-wide {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .skill-group-wide {
    grid-column: auto;
  }
}
/* =====================================================
   PROJECTS SHOWCASE
===================================================== */

.projects-showcase {
  display: grid;
  gap: 28px;
}

.project-feature {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;

  min-height: 420px;

  padding: 18px;

  overflow: hidden;

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

.project-feature:hover {
  transform: translateY(-7px);

  border-color: rgba(255, 255, 255, 0.24);

  box-shadow:
    0 30px 75px rgba(0, 0, 0, 0.28);
}


/* ---------------- IMAGE AREA ---------------- */

.project-image {
  min-height: 380px;

  border-radius: 22px;

  overflow: hidden;

  position: relative;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(124, 92, 255, 0.25),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02)
    );

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

.project-image-placeholder {
  width: 100%;
  height: 100%;

  min-height: 380px;

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

.project-image-placeholder span {
  color: rgba(255, 255, 255, 0.14);

  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 900;

  letter-spacing: -0.05em;
}


/* ---------------- PROJECT CONTENT ---------------- */

.project-content {
  padding: clamp(24px, 4vw, 42px);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 18px;
}

.project-number {
  color: var(--accent-2);

  font-weight: 800;
  font-size: 0.85rem;

  letter-spacing: 0.12em;
}

.project-status {
  padding: 7px 11px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  color: var(--text-muted);

  font-size: 0.72rem;
  font-weight: 600;
}

.project-content h3 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);

  letter-spacing: -0.04em;

  margin-bottom: 18px;
}

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

  line-height: 1.8;

  max-width: 580px;
}


/* ---------------- TECH TAGS ---------------- */

.project-tech {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 24px;
}

.project-tech span {
  padding: 8px 11px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.055);

  border: 1px solid rgba(255, 255, 255, 0.09);

  color: var(--text-muted);

  font-size: 0.76rem;
}


/* ---------------- PROJECT LINKS ---------------- */

.project-links {
  display: flex;
  gap: 12px;

  margin-top: 30px;
}

.project-link {
  text-decoration: none;

  padding: 11px 16px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      #5b7cff
    );

  color: white;

  font-size: 0.82rem;
  font-weight: 700;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.project-link:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 28px rgba(124, 92, 255, 0.3);
}

.secondary-project-link {
  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: var(--text);
}


/* ---------------- LIGHT MODE ---------------- */

body.light-mode .project-status,
body.light-mode .project-tech span,
body.light-mode .secondary-project-link {
  background: rgba(255, 255, 255, 0.5);

  border-color: rgba(15, 23, 42, 0.08);
}


/* ---------------- MOBILE ---------------- */

@media (max-width: 800px) {

  .project-feature {
    grid-template-columns: 1fr;

    min-height: auto;

    padding: 14px;
  }

  .project-image,
  .project-image-placeholder {
    min-height: 240px;
  }

  .project-feature:hover {
    transform: none;
  }

  .project-content {
    padding: 24px 10px 16px;
  }
}
/* =====================================================
   EXPERIENCE TIMELINE
===================================================== */

.experience-timeline {
  position: relative;

  display: grid;
  gap: 24px;

  padding-left: 34px;
}


/* vertical timeline */

.experience-timeline::before {
  content: "";

  position: absolute;

  left: 9px;
  top: 18px;
  bottom: 18px;

  width: 2px;

  background:
    linear-gradient(
      to bottom,
      var(--accent),
      var(--accent-2),
      rgba(255, 255, 255, 0.08)
    );

  border-radius: 999px;
}


/* ---------------- TIMELINE ITEM ---------------- */

.timeline-item {
  position: relative;

  padding: 30px;

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

.timeline-item:hover {
  transform: translateX(6px);

  border-color: rgba(255, 255, 255, 0.24);

  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.24);
}


/* ---------------- MARKER ---------------- */

.timeline-marker {
  position: absolute;

  left: -34px;
  top: 34px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

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

  border: 4px solid var(--bg);

  box-shadow:
    0 0 0 4px rgba(124, 92, 255, 0.10),
    0 0 20px rgba(124, 92, 255, 0.45);
}


/* ---------------- HEADER ---------------- */

.timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 8px;
}

.timeline-type {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--accent-2);

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timeline-header h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);

  letter-spacing: -0.025em;
}

.timeline-date {
  flex-shrink: 0;

  padding: 7px 11px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  color: var(--text-muted);

  font-size: 0.74rem;
  font-weight: 700;
}


/* ---------------- CONTENT ---------------- */

.timeline-place {
  color: var(--text);

  font-size: 0.9rem;
  font-weight: 600;

  margin-bottom: 15px;
}

.timeline-description {
  color: var(--text-muted);

  line-height: 1.8;

  max-width: 800px;
}


/* ---------------- GLOW ---------------- */

.timeline-item::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(124, 92, 255, 0.11),
      transparent 60%
    );

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;
}

.timeline-item:hover::before {
  opacity: 1;
}

.timeline-item > * {
  position: relative;
  z-index: 2;
}


/* ---------------- LIGHT MODE ---------------- */

body.light-mode .timeline-marker {
  border-color: #eef3f8;
}

body.light-mode .timeline-date {
  background: rgba(255, 255, 255, 0.55);

  border-color: rgba(15, 23, 42, 0.08);
}


/* ---------------- MOBILE ---------------- */

@media (max-width: 768px) {

  .experience-timeline {
    padding-left: 25px;
  }

  .experience-timeline::before {
    left: 6px;
  }

  .timeline-marker {
    left: -28px;

    width: 15px;
    height: 15px;

    border-width: 3px;
  }

  .timeline-item {
    padding: 24px;
  }

  .timeline-item:hover {
    transform: none;
  }

  .timeline-item::before {
    display: none;
  }

  .timeline-header {
    flex-direction: column;
    gap: 10px;
  }
}
/* =====================================================
   CONTACT SECTION
===================================================== */

.contact-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: 24px;

  align-items: stretch;
}


/* ---------------- LEFT SIDE ---------------- */

.contact-info {
  display: flex;
  flex-direction: column;

  gap: 26px;
}

.contact-intro p {
  color: var(--text-muted);

  line-height: 1.8;

  font-size: 1.05rem;

  max-width: 520px;
}


/* ---------------- CONTACT CARDS ---------------- */

.contact-cards {
  display: grid;

  gap: 14px;
}

.contact-card {
  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 16px;

  padding: 18px;

  text-decoration: none;

  color: var(--text);

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

.contact-card:hover {
  transform: translateX(6px);

  border-color: rgba(255, 255, 255, 0.24);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.20);
}

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

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

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(124, 92, 255, 0.20),
      rgba(45, 212, 191, 0.09)
    );

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: var(--accent-2);

  font-size: 0.9rem;
  font-weight: 800;
}

.contact-card div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.contact-label {
  color: var(--text-muted);

  font-size: 0.74rem;

  text-transform: uppercase;

  letter-spacing: 0.10em;
}

.contact-card strong {
  font-size: 0.92rem;
}

.contact-arrow {
  color: var(--text-muted);

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

.contact-card:hover .contact-arrow {
  transform: translate(3px, -3px);

  color: var(--accent-2);
}


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

.contact-form {
  padding: clamp(24px, 4vw, 38px);
}

.form-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;
}

.form-group {
  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 18px;
}

.form-group label {
  color: var(--text-muted);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;

  border: 1px solid rgba(255, 255, 255, 0.10);

  outline: none;

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.045);

  color: var(--text);

  padding: 14px 15px;

  font: inherit;

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

.form-group textarea {
  resize: vertical;

  min-height: 150px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);

  opacity: 0.65;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color:
    rgba(124, 92, 255, 0.65);

  background:
    rgba(255, 255, 255, 0.07);

  box-shadow:
    0 0 0 4px
    rgba(124, 92, 255, 0.10);
}


/* ---------------- SEND BUTTON ---------------- */

.send-button {
  width: 100%;

  min-height: 52px;

  display: flex;

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

  gap: 10px;

  border: none;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      #5b7cff
    );

  color: white;

  font-size: 0.9rem;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.send-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 15px 35px
    rgba(124, 92, 255, 0.35);
}

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

  text-align: center;

  color: var(--text-muted);

  font-size: 0.72rem;
}


/* =====================================================
   CONTACT LIGHT MODE
===================================================== */

body.light-mode .form-group input,
body.light-mode .form-group textarea {
  background:
    rgba(255, 255, 255, 0.45);

  border-color:
    rgba(15, 23, 42, 0.08);
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
  background:
    rgba(255, 255, 255, 0.75);
}


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

@media (max-width: 800px) {

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

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-card:hover {
    transform: none;
  }

  .contact-form {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
/* =====================================================
   CONTACT FORM STATUS
===================================================== */

.form-status {
  min-height: 20px;

  margin-top: 14px;

  text-align: center;

  font-size: 0.8rem;
  font-weight: 600;

  opacity: 0;

  transform: translateY(5px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.form-status.success,
.form-status.error {
  opacity: 1;
  transform: translateY(0);
}

.form-status.success {
  color: #2dd4bf;
}

.form-status.error {
  color: #fb7185;
}

.send-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}
/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.menu-toggle {
  display: none;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 4px;

  cursor: pointer;

  padding: 0;
}

.menu-toggle span {
  width: 18px;
  height: 2px;

  background: var(--text);

  border-radius: 999px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


/* hamburger -> X */

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

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

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


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

@media (max-width: 900px) {

  .menu-toggle {
    display: flex;
  }

  .navbar {
    position: relative;
  }

  .nav-links {
    position: absolute;

    top: calc(100% + 12px);
    left: 0;

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 14px;

    border-radius: 22px;

    background:
      rgba(7, 17, 31, 0.92);

    border:
      1px solid rgba(255, 255, 255, 0.12);

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

    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.28);

    opacity: 0;

    transform:
      translateY(-10px)
      scale(0.98);

    pointer-events: none;

    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  .nav-links.active {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    pointer-events: auto;
  }

  .nav-links a {
    width: 100%;

    padding: 13px 14px;

    border-radius: 12px;

    font-size: 0.95rem;
  }

  .nav-links a:hover {
    background:
      rgba(255, 255, 255, 0.06);
  }

  .nav-links a::after {
    display: none;
  }

  body.light-mode .nav-links {
    background:
      rgba(248, 250, 252, 0.94);

    border-color:
      rgba(15, 23, 42, 0.08);

    box-shadow:
      0 20px 50px rgba(15, 23, 42, 0.10);
  }
}
.project-screenshot {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: top center;

  display: block;

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

.project-feature:hover .project-screenshot {
  transform: scale(1.035);
}

@media (max-width: 768px) {
  .project-screenshot {
    object-fit: cover;
  }

  .project-feature:hover .project-screenshot {
    transform: none;
  }
}
/* =====================================================
   3D ORBITING PROJECT ENTRANCE
===================================================== */

.projects-showcase {
  perspective: 1400px;
  perspective-origin: 50% 35%;
}

.project-orbit {
  opacity: 0;

  transform-style: preserve-3d;

  /* starting state before JS activates it */
  transform:
    translate3d(0, -150px, -180px)
    rotateX(28deg)
    rotateY(-18deg)
    rotateZ(-8deg)
    scale(0.88);

  will-change: transform, opacity;
}


/* -----------------------------------------------------
   DIFFERENT ENTRY DIRECTIONS
----------------------------------------------------- */

.project-orbit:nth-child(1) {
  --orbit-start-x: -120px;
  --orbit-mid-x: 70px;

  --orbit-rotate-y: -22deg;
  --orbit-rotate-z: -9deg;

  --orbit-delay: 0s;
}

.project-orbit:nth-child(2) {
  --orbit-start-x: 130px;
  --orbit-mid-x: -75px;

  --orbit-rotate-y: 24deg;
  --orbit-rotate-z: 10deg;

  --orbit-delay: 0.10s;
}

.project-orbit:nth-child(3) {
  --orbit-start-x: -100px;
  --orbit-mid-x: 65px;

  --orbit-rotate-y: -20deg;
  --orbit-rotate-z: -8deg;

  --orbit-delay: 0.20s;
}


/* -----------------------------------------------------
   ACTIVATE ENTRANCE
----------------------------------------------------- */

.project-orbit.project-entered {
  animation:
    projectOrbitEntrance
    1.35s
    cubic-bezier(0.16, 1, 0.30, 1)
    var(--orbit-delay)
    forwards;
}


/* -----------------------------------------------------
   ORBIT / LANDING ANIMATION
----------------------------------------------------- */

@keyframes projectOrbitEntrance {

  0% {
    opacity: 0;

    transform:
      translate3d(
        var(--orbit-start-x),
        -190px,
        -220px
      )
      rotateX(36deg)
      rotateY(var(--orbit-rotate-y))
      rotateZ(var(--orbit-rotate-z))
      scale(0.82);
  }


  28% {
    opacity: 0.72;

    transform:
      translate3d(
        var(--orbit-mid-x),
        -115px,
        -100px
      )
      rotateX(20deg)
      rotateY(12deg)
      rotateZ(5deg)
      scale(0.90);
  }


  55% {
    opacity: 1;

    transform:
      translate3d(
        calc(var(--orbit-mid-x) * -0.35),
        -45px,
        25px
      )
      rotateX(-7deg)
      rotateY(-7deg)
      rotateZ(-2deg)
      scale(1.025);
  }


  76% {
    transform:
      translate3d(
        10px,
        8px,
        12px
      )
      rotateX(2deg)
      rotateY(3deg)
      rotateZ(0.6deg)
      scale(0.995);
  }


  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotateX(0deg)
      rotateY(0deg)
      rotateZ(0deg)
      scale(1);
  }
}


/* =====================================================
   SUBTLE FLOAT AFTER LANDING
===================================================== */

.project-orbit.project-settled {
  opacity: 1;

  animation:
    projectIdleFloat
    7s
    ease-in-out
    infinite;

  will-change: transform;
}


/* give each project slightly different rhythm */

.project-orbit.project-settled:nth-child(2) {
  animation-delay: -2.1s;
}

.project-orbit.project-settled:nth-child(3) {
  animation-delay: -4.2s;
}


@keyframes projectIdleFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotateX(0deg)
      rotateY(0deg);
  }

  33% {
    transform:
      translate3d(-3px, -5px, 5px)
      rotateX(0.25deg)
      rotateY(-0.35deg);
  }

  66% {
    transform:
      translate3d(3px, -2px, 8px)
      rotateX(-0.2deg)
      rotateY(0.4deg);
  }
}


/* pause idle movement while interacting */

@media (hover: hover) and (pointer: fine) {

  .project-orbit.project-settled:hover {
    animation-play-state: paused;
  }
}
/* =====================================================
   MOBILE PROJECT MOTION
===================================================== */

@media (max-width: 768px) {

  .projects-showcase {
    perspective: none;
  }

  .project-orbit {
    opacity: 0;

    transform:
      translateY(35px)
      scale(0.98);

    will-change: opacity, transform;
  }

  .project-orbit.project-entered {
    animation:
      mobileProjectEntrance
      0.55s
      ease
      forwards;
  }


  @keyframes mobileProjectEntrance {

    from {
      opacity: 0;

      transform:
        translateY(35px)
        scale(0.98);
    }

    to {
      opacity: 1;

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


  .project-orbit.project-settled {
    opacity: 1;

    transform: none;

    animation: none;

    will-change: auto;
  }
}
/* =====================================================
   3D SKILLS DECK ENTRANCE
===================================================== */

.skills-layout {
  perspective: 1300px;
  perspective-origin: 50% 40%;
}

.skill-deck {
  opacity: 1;
  transform: none;
  transform-style: preserve-3d;
}

.skill-deck.skill-waiting {
  opacity: 0;
  will-change: transform, opacity;
}

/* individual starting positions */

.skill-deck:nth-child(1).skill-waiting {
  transform:
    translate3d(-160px, -80px, -180px)
    rotateX(18deg)
    rotateY(-28deg)
    rotateZ(-10deg)
    scale(0.82);
}

.skill-deck:nth-child(2).skill-waiting {
  transform:
    translate3d(150px, -100px, -160px)
    rotateX(20deg)
    rotateY(26deg)
    rotateZ(9deg)
    scale(0.84);
}

.skill-deck:nth-child(3).skill-waiting {
  transform:
    translate3d(-130px, 90px, -190px)
    rotateX(-16deg)
    rotateY(-22deg)
    rotateZ(8deg)
    scale(0.83);
}

.skill-deck:nth-child(4).skill-waiting {
  transform:
    translate3d(140px, 80px, -170px)
    rotateX(-18deg)
    rotateY(24deg)
    rotateZ(-8deg)
    scale(0.84);
}

.skill-deck:nth-child(5).skill-waiting {
  transform:
    translate3d(0, 140px, -230px)
    rotateX(-24deg)
    rotateY(0deg)
    rotateZ(5deg)
    scale(0.80);
}


/* entrance */

.skill-deck.skill-entered {
  animation:
    skillDeckEntrance
    1.05s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

@keyframes skillDeckEntrance {

  0% {
    opacity: 0;
  }

  45% {
    opacity: 1;

    transform:
      translate3d(0, -12px, 25px)
      rotateX(-4deg)
      rotateY(4deg)
      rotateZ(-1deg)
      scale(1.025);
  }

  75% {
    transform:
      translate3d(0, 5px, 8px)
      rotateX(1deg)
      rotateY(-1deg)
      rotateZ(0.3deg)
      scale(0.995);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotateX(0)
      rotateY(0)
      rotateZ(0)
      scale(1);
  }
}


/* stagger */

.skill-deck:nth-child(1) {
  animation-delay: 0s;
}

.skill-deck:nth-child(2) {
  animation-delay: 0.08s;
}

.skill-deck:nth-child(3) {
  animation-delay: 0.16s;
}

.skill-deck:nth-child(4) {
  animation-delay: 0.24s;
}

.skill-deck:nth-child(5) {
  animation-delay: 0.32s;
}


/* =====================================================
   MOBILE SKILLS MOTION
===================================================== */

@media (max-width: 768px) {

  .skills-layout {
    perspective: none;
  }

  .skill-deck.skill-waiting {
    opacity: 0;

    transform:
      translateY(24px)
      scale(0.985);
  }

  .skill-deck.skill-entered {
    animation:
      mobileSkillEntrance
      0.45s
      ease
      forwards;
  }

  @keyframes mobileSkillEntrance {

    from {
      opacity: 0;

      transform:
        translateY(24px)
        scale(0.985);
    }

    to {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }
  }
}
/* =====================================================
   ABOUT ASSEMBLY ANIMATION
===================================================== */

.about-layout {
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.about-core,
.about-fragment {
  transform-style: preserve-3d;

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

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.about-fragment:hover {
  transform: translateY(-7px) scale(1.02);
}


/* ---------------- CORE CARD ---------------- */

.about-core.about-waiting {
  opacity: 0;

  transform:
    translate3d(0, 70px, -240px)
    rotateX(18deg)
    scale(0.88);

  will-change: transform, opacity;
}

.about-core.about-entered {
  animation:
    aboutCoreEntrance
    1.1s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

@keyframes aboutCoreEntrance {

  0% {
    opacity: 0;

    transform:
      translate3d(0, 70px, -240px)
      rotateX(18deg)
      scale(0.88);
  }

  55% {
    opacity: 1;

    transform:
      translate3d(0, -10px, 30px)
      rotateX(-4deg)
      scale(1.025);
  }

  78% {
    transform:
      translate3d(0, 4px, 8px)
      rotateX(1deg)
      scale(0.995);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotateX(0)
      scale(1);
  }
}


/* ---------------- SMALL CARDS ---------------- */

.about-fragment.about-waiting {
  opacity: 0;
  will-change: transform, opacity;
}

.about-fragment:nth-child(1).about-waiting {
  transform:
    translate3d(-120px, -60px, -170px)
    rotateY(-28deg)
    rotateZ(-8deg)
    scale(0.82);
}

.about-fragment:nth-child(2).about-waiting {
  transform:
    translate3d(130px, 0, -190px)
    rotateY(26deg)
    rotateZ(7deg)
    scale(0.82);
}

.about-fragment:nth-child(3).about-waiting {
  transform:
    translate3d(-80px, 80px, -180px)
    rotateX(-18deg)
    rotateZ(9deg)
    scale(0.84);
}


.about-fragment.about-entered {
  animation:
    aboutFragmentEntrance
    0.95s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.about-fragment:nth-child(1) {
  animation-delay: 0.12s;
}

.about-fragment:nth-child(2) {
  animation-delay: 0.22s;
}

.about-fragment:nth-child(3) {
  animation-delay: 0.32s;
}


@keyframes aboutFragmentEntrance {

  0% {
    opacity: 0;
  }

  55% {
    opacity: 1;

    transform:
      translate3d(0, -6px, 22px)
      rotateX(-2deg)
      rotateY(3deg)
      rotateZ(-1deg)
      scale(1.03);
  }

  78% {
    transform:
      translate3d(0, 3px, 6px)
      rotateX(1deg)
      rotateY(-1deg)
      rotateZ(0.4deg)
      scale(0.995);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotateX(0)
      rotateY(0)
      rotateZ(0)
      scale(1);
  }
}


/* =====================================================
   MOBILE ABOUT MOTION
===================================================== */

@media (max-width: 768px) {

  .about-layout {
    perspective: none;
  }

  .about-core.about-waiting,
  .about-fragment.about-waiting {
    opacity: 0;

    transform:
      translateY(24px)
      scale(0.985);
  }

  .about-core.about-entered,
  .about-fragment.about-entered {
    animation:
      mobileAboutEntrance
      0.45s
      ease
      forwards;
  }

  @keyframes mobileAboutEntrance {

    from {
      opacity: 0;

      transform:
        translateY(24px)
        scale(0.985);
    }

    to {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }
  }
}
@media (max-width: 768px) {

  .site-header {
    left: 12px;
    right: 12px;

    width: auto;
    max-width: none;

    transform: none;
  }

  .navbar {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {

  .hero,
  .section,
  .about-layout,
  .skills-layout,
  .projects-showcase,
  .experience-timeline,
  .contact-layout {
    max-width: 100%;
  }

  .glass-panel,
  .project-feature,
  .skill-group,
  .about-main,
  .about-stat,
  .timeline-item,
  .contact-form,
  .contact-card {
    min-width: 0;
  }
}
/* =====================================================
   EXPERIENCE TIMELINE SWEEP
===================================================== */

.experience-timeline {
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.timeline-sweep {
  opacity: 1;
  transform: none;
  transform-style: preserve-3d;
}

/* hidden starting state */

.timeline-sweep.timeline-waiting {
  opacity: 0;
  will-change: transform, opacity;
}

/* alternate directions */

.timeline-sweep:nth-child(1).timeline-waiting {
  transform:
    translate3d(-150px, 20px, -160px)
    rotateY(-22deg)
    rotateZ(-4deg)
    scale(0.9);
}

.timeline-sweep:nth-child(2).timeline-waiting {
  transform:
    translate3d(150px, 25px, -170px)
    rotateY(22deg)
    rotateZ(4deg)
    scale(0.9);
}

.timeline-sweep:nth-child(3).timeline-waiting {
  transform:
    translate3d(-140px, 25px, -160px)
    rotateY(-20deg)
    rotateZ(-3deg)
    scale(0.9);
}

/* entrance */

.timeline-sweep.timeline-entered {
  animation:
    timelineSweepEntrance
    1.05s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.timeline-sweep:nth-child(1) {
  animation-delay: 0s;
}

.timeline-sweep:nth-child(2) {
  animation-delay: 0.12s;
}

.timeline-sweep:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes timelineSweepEntrance {

  0% {
    opacity: 0;
  }

  48% {
    opacity: 1;

    transform:
      translate3d(10px, -5px, 25px)
      rotateY(-3deg)
      rotateZ(0.8deg)
      scale(1.02);
  }

  75% {
    transform:
      translate3d(-3px, 3px, 6px)
      rotateY(1deg)
      rotateZ(-0.3deg)
      scale(0.995);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotateY(0)
      rotateZ(0)
      scale(1);
  }
}

/* marker pulse when card arrives */

.timeline-sweep.timeline-entered .timeline-marker {
  animation:
    timelineMarkerPulse
    0.75s
    ease
    0.35s
    both;
}

@keyframes timelineMarkerPulse {

  0% {
    transform: scale(0.75);
    opacity: 0.4;
  }

  55% {
    transform: scale(1.3);
    opacity: 1;

    box-shadow:
      0 0 0 8px rgba(124, 92, 255, 0.10),
      0 0 30px rgba(124, 92, 255, 0.70);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* =====================================================
   MOBILE EXPERIENCE MOTION
===================================================== */

@media (max-width: 768px) {

  .experience-timeline {
    perspective: none;
  }

  .timeline-sweep.timeline-waiting {
    opacity: 0;

    transform:
      translateY(26px)
      scale(0.985);
  }

  .timeline-sweep.timeline-entered {
    animation:
      mobileTimelineEntrance
      0.45s
      ease
      forwards;
  }

  @keyframes mobileTimelineEntrance {

    from {
      opacity: 0;

      transform:
        translateY(26px)
        scale(0.985);
    }

    to {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }
  }
}
/* =====================================================
   CONTACT MOTION
===================================================== */

.contact-layout {
  perspective: 1400px;
}

.contact-drift,
.contact-form-depth {
  transform-style: preserve-3d;
}


/* ---------------- CONTACT CARDS ---------------- */

.contact-drift.contact-waiting {
  opacity: 0;

  transform:
    translate3d(-110px, 20px, -120px)
    rotateY(-16deg)
    rotateZ(-3deg)
    scale(0.92);

  will-change: transform, opacity;
}

.contact-drift.contact-entered {
  animation:
    contactCardEntrance
    0.9s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.contact-drift:nth-child(1) {
  animation-delay: 0s;
}

.contact-drift:nth-child(2) {
  animation-delay: 0.12s;
}

.contact-drift:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes contactCardEntrance {

  0% {
    opacity: 0;
  }

  55% {
    opacity: 1;

    transform:
      translate3d(8px, -4px, 18px)
      rotateY(2deg)
      rotateZ(0.5deg)
      scale(1.02);
  }

  80% {
    transform:
      translate3d(-2px, 2px, 5px)
      rotateY(-0.6deg)
      rotateZ(-0.2deg)
      scale(0.997);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotateY(0)
      rotateZ(0)
      scale(1);
  }
}


/* ---------------- FORM DEPTH ---------------- */

.contact-form-depth.contact-waiting {
  opacity: 0;

  transform:
    translate3d(80px, 45px, -220px)
    rotateX(12deg)
    rotateY(16deg)
    scale(0.88);

  will-change: transform, opacity;
}

.contact-form-depth.contact-entered {
  animation:
    contactFormEntrance
    1.1s
    cubic-bezier(0.16, 1, 0.3, 1)
    0.15s
    forwards;
}

@keyframes contactFormEntrance {

  0% {
    opacity: 0;
  }

  55% {
    opacity: 1;

    transform:
      translate3d(-6px, -8px, 25px)
      rotateX(-2deg)
      rotateY(-3deg)
      scale(1.02);
  }

  78% {
    transform:
      translate3d(2px, 3px, 6px)
      rotateX(0.7deg)
      rotateY(0.8deg)
      scale(0.996);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotateX(0)
      rotateY(0)
      scale(1);
  }
}


/* =====================================================
   MOBILE CONTACT MOTION
===================================================== */

@media (max-width: 768px) {

  .contact-layout {
    perspective: none;
  }

  .contact-drift.contact-waiting,
  .contact-form-depth.contact-waiting {
    opacity: 0;

    transform:
      translateY(24px)
      scale(0.985);
  }

  .contact-drift.contact-entered,
  .contact-form-depth.contact-entered {
    animation:
      mobileContactEntrance
      0.45s
      ease
      forwards;
  }

  @keyframes mobileContactEntrance {

    from {
      opacity: 0;

      transform:
        translateY(24px)
        scale(0.985);
    }

    to {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }
  }
}
.project-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
/* =====================================================
   PROJECT INTERACTIVE DEPTH
===================================================== */

.project-feature {
    --mouse-x: 0;
    --mouse-y: 0;
}

.project-feature .project-image {
    overflow: hidden;
    transform:
        translate3d(
            calc(var(--mouse-x) * -4px),
            calc(var(--mouse-y) * -4px),
            0
        );
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-feature .project-image img {
    transform:
        scale(1.01)
        translate3d(
            calc(var(--mouse-x) * 7px),
            calc(var(--mouse-y) * 7px),
            0
        );
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.45s ease;
}

.project-feature .project-content {
    transform:
        translate3d(
            calc(var(--mouse-x) * 2px),
            calc(var(--mouse-y) * 2px),
            0
        );
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* subtle image enhancement */

.project-feature:hover .project-image img {
    transform:
        scale(1.04)
        translate3d(
            calc(var(--mouse-x) * 7px),
            calc(var(--mouse-y) * 7px),
            0
        );
}


/* no cursor tracking on touch devices */

@media (hover: none), (max-width: 768px) {

    .project-feature .project-image,
    .project-feature .project-image img,
    .project-feature .project-content {
        transform: none;
    }

    .project-feature:hover .project-image img {
        transform: scale(1.01);
    }
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  color: var(--text);

  font-weight: 800;
  font-size: 1.4rem;
}

.logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;

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

.logo:hover img {
  transform: rotate(-8deg) scale(1.08);
}
/* ---------------- FOOTER ---------------- */

.site-footer {
    width: min(1200px, calc(100% - 50px));
    margin: 80px auto 0;
    padding: 35px 0 30px;

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

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 25px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.footer-brand div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-brand strong {
    color: var(--text);
    font-size: 1rem;
}

.footer-brand span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;

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

.footer-links a:hover {
    color: var(--text);
    transform: translateY(-2px);
}

.footer-copy {
    grid-column: 1 / -1;

    margin: 0;
    padding-top: 20px;

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

    color: var(--text-muted);
    font-size: 0.78rem;
}
@media (max-width: 700px) {

    .site-footer {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 14px;
    }

    .footer-copy {
        grid-column: auto;
    }

}