.hero {
  min-height: 100vh;
  /* Reverted to 100vh to reduce gap */
  display: flex;
  padding-top: 120px;
  padding-bottom: 50px;
  /* Consistent padding top and bottom */
  position: relative;
  overflow: hidden;
  background-color: var(--bg-primary);
}

/* Light sweep effect */
.hero::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.05) 60%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(30deg) translateY(-100%);
  animation: lightSweep 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  pointer-events: none;
  z-index: 2; /* Over canvas but under content */
  opacity: 0.7;
}

@keyframes lightSweep {
  0%, 70% { transform: rotate(30deg) translateY(-100%) translateX(-150%); }
  100% { transform: rotate(30deg) translateY(100%) translateX(150%); }
}

.hero .container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--spacing-5xl);
  align-items: center;
  position: relative;
  z-index: 1;
  margin: auto auto;
  /* Centers the container vertically while preventing top/bottom clipping */
}

.hero-greeting {
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-content h1 {
  font-size: 3.2rem;
  line-height: 1.15;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  letter-spacing: -0.04em;
}

.hero-title-highlight {
  display: inline;
  color: var(--accent-primary);
}

.hero-roles {
  font-size: 1.03rem;
  font-weight: 800;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.hero-description {
  font-size: 1.2rem;
  max-width: 500px;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin-bottom: var(--spacing-xl);
  color: var(--text-secondary);
}

.hero-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-2xl);
}

.hero-cta-row {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* ── Hero Visual Container ── */
.hero-visual {
  position: relative;
  width: 100%;
  height: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  background: radial-gradient(ellipse at center,
      rgba(212, 175, 55, 0.15) 0%,
      rgba(212, 175, 55, 0.05) 45%,
      transparent 70%);
  filter: blur(60px);
  border-radius: 50%;
  z-index: 1;
  animation: heroGlowPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroGlowPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05) rotate(10deg);
  }
}


.rotating-gold-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;

  background:
    conic-gradient(from 0deg,
      rgba(212, 175, 55, 0.9) 0deg,
      rgba(212, 175, 55, 0.2) 40deg,
      rgba(212, 175, 55, 0.9) 80deg,
      rgba(212, 175, 55, 0.2) 140deg,
      rgba(212, 175, 55, 0.9) 200deg,
      rgba(212, 175, 55, 0.2) 260deg,
      rgba(212, 175, 55, 0.9) 320deg,
      rgba(212, 175, 55, 0.2) 360deg);
  /* Mask to only show a thin ring */
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));

  box-shadow: 0 0 18px rgba(212, 175, 55, 0.18), inset 0 0 18px rgba(212, 175, 55, 0.08);
  animation: spinRing 22s linear infinite;
  will-change: transform;
}

@keyframes spinRing {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ── Decorative guide rings (very subtle line art) ── */
.orbit-guide-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.08); /* Very thin elegant line */
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.guide-inner {
  width: 460px;
  height: 460px;
}

.guide-outer {
  width: 580px;
  height: 580px;
}


.profile-img-container {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  padding: 10px;
  background: var(--bg-secondary);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.12),
    inset 0 0 0 2px var(--accent-primary);
  z-index: 3;
  /* Float animation applied; parallax JS will use translate() via CSS var */
  animation: heroImageFloat 5s ease-in-out infinite;
  will-change: transform;
  /* Entrance starts invisible */
  opacity: 0;
  transform: translateY(40px) scale(0.82);
}

/* Entrance final state — driven by JS adding class */
.profile-img-container.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Once visible keep the float running via overriding animation */
.profile-img-container.is-visible {
  animation: heroImageFloat 5s ease-in-out infinite;
}

@keyframes heroImageFloat {

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

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

.profile-img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.profile-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  border-radius: 50%;
  display: block;
}

/* ══════════════════════════════════
   4. ORBIT CONTAINER & TRACKS
   ══════════════════════════════════ */
.hero-visual .orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.hero-visual .orbit-track {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Inner track — clockwise, 22s */
.hero-visual .track-inner {
  width: 460px;
  height: 460px;
  animation: orbitSpin 22s linear infinite;
}

/* Outer track — counter-clockwise, 32s */
.hero-visual .track-outer {
  width: 590px;
  height: 590px;
  animation: orbitSpin 32s linear infinite reverse;
}

@keyframes orbitSpin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ── Orbit Items (positioned via CSS custom property --angle) ── */
.hero-visual .orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Badges start invisible; JS reveals them sequentially */
  opacity: 0;
}

/* Sequential entrance: JS adds .badge-visible with staggered setTimeout */
.hero-visual .orbit-item.badge-visible {
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Counter-rotation keeps badges upright while the track spins */
.hero-visual .track-inner .orbit-item {
  --track-radius: 230px;
  animation: counterSpinInner 22s linear infinite reverse;
}

.hero-visual .track-outer .orbit-item {
  --track-radius: 295px;
  animation: counterSpinOuter 32s linear infinite;
}

@keyframes counterSpinInner {
  0% {
    transform: rotate(var(--angle)) translate(var(--track-radius)) rotate(calc(-1 * var(--angle)));
  }

  100% {
    transform: rotate(var(--angle)) translate(var(--track-radius)) rotate(calc(-1 * var(--angle) - 360deg));
  }
}

@keyframes counterSpinOuter {
  0% {
    transform: rotate(var(--angle)) translate(var(--track-radius)) rotate(calc(-1 * var(--angle)));
  }

  100% {
    transform: rotate(var(--angle)) translate(var(--track-radius)) rotate(calc(-1 * var(--angle) + 360deg));
  }
}



.tech-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.5); /* Luxury glassmorphism */
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50px;
  box-shadow:
    0 8px 32px rgba(212, 175, 55, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
  cursor: default;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    background 0.4s ease;
  white-space: nowrap;
  min-width: max-content;
  will-change: transform;
  animation: subtleFloat 4s ease-in-out infinite alternate;
}

@keyframes subtleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.tech-badge span {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  display: block;
  letter-spacing: 0.03em;
}

.tech-badge i {
  font-size: 1.35rem;
  display: block;
  flex-shrink: 0;
}

.tech-badge:hover {
  transform: scale(1.1) translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 15px 40px rgba(212, 175, 55, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  border-color: rgba(212, 175, 55, 0.6);
}

/* ══════════════════════════════════
   RESPONSIVE SCALING
   ══════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-visual {
    height: 480px;
  }

  .profile-img-container {
    width: 340px;
    height: 340px;
  }

  .rotating-gold-ring {
    width: 380px;
    height: 380px;
  }

  .hero-ambient-glow {
    width: 420px;
    height: 420px;
  }

  .hero-visual .track-inner {
    width: 400px;
    height: 400px;
  }

  .hero-visual .track-outer {
    width: 510px;
    height: 510px;
  }

  .hero-visual .track-inner .orbit-item {
    --track-radius: 200px;
  }

  .hero-visual .track-outer .orbit-item {
    --track-radius: 255px;
  }

  .guide-inner {
    width: 400px;
    height: 400px;
  }

  .guide-outer {
    width: 510px;
    height: 510px;
  }
}

@media (max-width: 992px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-visual {
    height: 460px;
    order: -1;
    margin-bottom: var(--spacing-xl);
  }

  .hero-description {
    margin: 0 auto var(--spacing-xl);
  }

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

  .hero-visual .orbit-container,
  .hero-ambient-glow,
  .orbit-guide-ring,
  .rotating-gold-ring {
    transform: translate(-50%, -50%) scale(0.85);
  }
}

@media (max-width: 640px) {
  .hero-visual {
    height: 380px;
  }

  .hero-visual .orbit-container,
  .hero-ambient-glow,
  .orbit-guide-ring,
  .rotating-gold-ring {
    transform: translate(-50%, -50%) scale(0.62);
  }

  .profile-img-container {
    width: 280px;
    height: 280px;
  }
}

/* ── Legacy floating icon classes (kept for compatibility) ── */
.floating-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-primary);
  z-index: 3;
}

.icon-1 {
  top: 10%;
  left: 0;
  color: #1E293B;
}

.icon-2 {
  top: 60%;
  right: -20px;
  color: #D4AF37;
}

.icon-3 {
  bottom: 5%;
  left: 20px;
  color: #1E293B;
}

.icon-4 {
  top: 20%;
  right: 10px;
  color: #D4AF37;
}


.about-preview {
  background-color: var(--bg-secondary);
  overflow: visible;
}

.about-preview .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

/* ── 1. Visual wrapper ── */
.ap-visual-wrapper {
  position: relative;
  width: 100%;
  min-height: 520px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--spacing-xl);
}

/* ── 2. Ambient golden glow ── */
.ap-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 450px;
  background: radial-gradient(ellipse at center,
      rgba(212, 175, 55, 0.25) 0%,
      rgba(212, 175, 55, 0.07) 55%,
      transparent 80%);
  filter: blur(48px);
  border-radius: 60% 60% 0 0;
  z-index: 0;
  animation: apGlowPulse 5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes apGlowPulse {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.9);
  }

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

/* ── 3. Gold decorative particles ── */
.ap-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.ap-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0.16;
  animation: apParticleDrift 8s ease-in-out infinite alternate;
}

.ap1 {
  width: 7px;
  height: 7px;
  top: 9%;
  left: 6%;
  animation-delay: 0s;
}

.ap2 {
  width: 5px;
  height: 5px;
  top: 24%;
  right: 5%;
  animation-delay: 1.4s;
}

.ap3 {
  width: 11px;
  height: 11px;
  top: 68%;
  left: 3%;
  animation-delay: 2.8s;
}

.ap4 {
  width: 6px;
  height: 6px;
  top: 82%;
  right: 7%;
  animation-delay: 0.7s;
}

@keyframes apParticleDrift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.16;
  }

  100% {
    transform: translate(6px, -12px) scale(1.3);
    opacity: 0.32;
  }
}

.ap-cross {
  position: absolute;
  color: var(--accent-primary);
  opacity: 0.2;
  animation: apParticleDrift 9s ease-in-out infinite alternate;
}

.ac1 {
  top: 12%;
  right: 9%;
  font-size: 0.7rem;
  animation-delay: 1s;
}

.ac2 {
  top: 60%;
  left: 4%;
  font-size: 1.1rem;
  animation-delay: 2.6s;
}

/* ── 4. Arch frame ── */
.ap-arch-frame {
  position: relative;
  width: 340px;
  height: 500px;
  border-radius: 170px 170px 0 0;
  /* arch: curved top, flat bottom */
  overflow: hidden;
  z-index: 2;
  border: 2px solid rgba(212, 175, 55, 0.52);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.10),
    0 0 36px rgba(212, 175, 55, 0.11);
  background: var(--bg-secondary);
  animation: apArchFloat 6s ease-in-out infinite;
  will-change: transform;
  transition: box-shadow 0.4s ease;
  cursor: default;
}

.ap-arch-frame:hover {
  box-shadow:
    0 30px 75px rgba(0, 0, 0, 0.20),
    0 12px 30px rgba(0, 0, 0, 0.12),
    0 0 55px rgba(212, 175, 55, 0.24);
}

@keyframes apArchFloat {

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

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

.ap-arch-frame:hover .ap-portrait {
  transform: scale(1.06);
}

/* ── Inner gold accent ring ── */
.ap-gold-ring {
  position: absolute;
  inset: 6px;
  border-radius: 130px 130px 0 0;
  border: 1px solid rgba(212, 175, 55, 0.22);
  z-index: 3;
  pointer-events: none;
}

/* ── Image fills the arch ── */
.ap-image-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}

.ap-image-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-secondary);
  z-index: 2;
  transform-origin: top;
}

.ap-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── 5. "Open to Work" overlay pill ── */
.ap-overlay-pill {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 28px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  white-space: nowrap;
  animation: apArchFloat 4s ease-in-out infinite 0.6s;
}

.ap-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  animation: apStatusPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes apStatusPulse {

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

  50% {
    opacity: 0.6;
    transform: scale(1.28);
  }
}

.ap-status-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── 6. Achievement cards ── */
.ap-achievement-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(212, 175, 55, 0.40);
  border-radius: 14px;
  box-shadow:
    0 5px 22px rgba(0, 0, 0, 0.09),
    0 2px 7px rgba(0, 0, 0, 0.05);
  z-index: 10;
  min-width: 162px;
  cursor: default;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}

.ap-achievement-card:hover {
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow:
    0 14px 38px rgba(212, 175, 55, 0.32),
    0 5px 14px rgba(212, 175, 55, 0.16);
  border-color: var(--accent-primary);
}

.apc-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.apc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.apc-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.apc-sub {
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.2;
}

/* Card positions */
.apc-top-left {
  top: -10px;
  left: -16px;
}

.apc-right {
  top: 36%;
  right: -20px;
}

.apc-bottom-right {
  bottom: 42px;
  right: -18px;
}

/* Float animation for cards */
.ap-float-card {
  animation: apCardFloat 5s ease-in-out infinite;
}

@keyframes apCardFloat {

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

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

/* ── 7. Content side ── */
.about-title-left {
  text-align: left;
}

.about-title-left h2::after {
  left: 0;
  transform: none;
}

.about-content h2 {
  text-align: left;
  font-size: 2rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-bottom: 20px;
  display: block;
  animation: slideAndGlow 3s ease-in-out infinite alternate;
}

.about-content h3 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  padding: 5px 10px;
  text-align: left;
  border-left: 3px solid var(--accent-primary);
  animation: slideAndGlow 3s ease-in-out infinite alternate 0.5s;
}

@keyframes slideAndGlow {
  0% {
    transform: translateX(0);
    text-shadow: 0 0 0 rgba(212, 175, 55, 0);
  }

  100% {
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
  }
}

.about-content p {
  margin-bottom: var(--spacing-lg);
}

/* ── 8. Responsive ── */
@media (max-width: 1024px) {
  .about-preview .container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--spacing-2xl);
  }
  
  .about-title-left,
  .about-content h2,
  .about-content h3 {
    text-align: center;
  }
  
  .about-title-left h2::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .about-content h3 {
    border-left: none;
    border-bottom: 2px solid var(--accent-primary);
    display: inline-block;
  }

  .ap-visual-wrapper {
    max-width: 480px;
    margin: 0 auto;
  }

  .apc-top-left {
    left: 0;
  }

  .apc-right {
    right: -8px;
  }

  .apc-bottom-right {
    right: -8px;
  }
}

@media (max-width: 580px) {
  .ap-arch-frame {
    width: 220px;
    height: 330px;
    border-radius: 110px 110px 0 0;
  }

  .ap-gold-ring {
    border-radius: 104px 104px 0 0;
  }

  .ap-visual-wrapper {
    min-height: 400px;
  }

  .ap-achievement-card {
    padding: 8px 12px;
    min-width: 138px;
    gap: 7px;
  }

  .apc-right {
    right: -4px;
  }

  .apc-bottom-right {
    right: -4px;
  }

  .apc-top-left {
    left: -4px;
  }
}


/* ----------------- Skills Preview ----------------- */
.skills-preview {
  background-color: var(--bg-primary);
  /* Alternating section */
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.skill-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.skill-tag i {
  font-size: 2.5rem;
  transition: transform 0.4s ease;
}

.skill-tag:hover i {
  transform: scale(1.15);
}

.skill-tag span {
  font-weight: 500;
  color: var(--text-primary);
}

/* ----------------- Projects Preview ----------------- */
.projects-preview {
  background-color: var(--bg-secondary);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.project-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-img {
  height: 200px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.project-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--accent-tertiary);
}


.project-content {
  padding: var(--spacing-lg);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-tertiary);
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.tech-pill {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-sm);
  color: var(--accent-primary);
  font-weight: 600;
}

.project-content h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.project-content p {
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--accent-primary);
}

.project-link:hover {
  color: var(--accent-secondary);
}

/* ----------------- Experience Preview ----------------- */
.experience-preview {
  background-color: var(--bg-primary);
}

.timeline-preview {
  max-width: 800px;
  margin: 0 auto var(--spacing-2xl);
  position: relative;
}

.timeline-preview::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent-tertiary);
  /* Gold timeline line */
}

.timeline-item {
  position: relative;
  padding-left: 60px;
  margin-bottom: var(--spacing-xl);
}

.timeline-dot {
  position: absolute;
  left: 14.5px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--accent-primary);
  z-index: 1;
}

.timeline-date {
  font-size: 0.875rem;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.timeline-content h4 {
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

.timeline-content p {
  font-size: 0.95rem;
  margin-bottom: 0;
  color: var(--text-secondary);
}

/* ----------------- Contact Preview ----------------- */
.contact-preview-section {
  background-color: var(--bg-secondary);
}

.contact-preview {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.contact-preview h2 {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

/* ----------------- Utility Classes for Alignment ----------------- */
.text-center {
  text-align: center;
}

.mt-2 {
  margin-top: var(--spacing-md);
}

.mt-4 {
  margin-top: var(--spacing-xl);
}

.mb-4 {
  margin-bottom: var(--spacing-xl);
}

/* ----------------- Premium About Section ----------------- */
.about-premium-section {
  padding-top: 150px;
  /* Account for fixed navbar */
  background-color: var(--bg-primary);
  overflow: hidden;
  position: relative;
}

.about-split-screen {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

@media (max-width: 992px) {
  .about-split-screen {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
}

.about-full-width-content {
  margin-top: var(--spacing-4xl);
  width: 100%;
}

.about-grid-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  /* Slightly larger education section */
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

@media (max-width: 992px) {
  .about-grid-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
}

/* Advanced Visuals Container */
.advanced-visuals {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  perspective: 1000px;
}

.dynamic-bg {
  position: absolute;
  inset: -20%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  animation: blobFloat 10s infinite alternate ease-in-out;
}

.blob-gold {
  width: 300px;
  height: 300px;
  background: var(--accent-primary);
  top: 10%;
  left: 10%;
}

.blob-white {
  width: 250px;
  height: 250px;
  background: #ffffff;
  bottom: 10%;
  right: 10%;
  animation-delay: -5s;
}

@keyframes blobFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(30px, 50px) scale(1.1);
  }
}

.neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Hero Image Component */
.advanced-hero-image {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  z-index: 1;
  transform-style: preserve-3d;
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pulsing-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(212, 175, 55, 0.3) 50%, transparent 80%);
  border-radius: 50%;
  filter: blur(25px);
  z-index: 0;
  animation: pulseGlow 3s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
  0% {
    opacity: 0.5;
    transform: scale(0.95);
  }

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

.dual-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.ring-outer {
  width: 140%;
  padding-bottom: 140%;
  animation: rotateRing 25s linear infinite;
}

.ring-inner {
  width: 120%;
  padding-bottom: 120%;
  border-style: dotted;
  border-color: rgba(212, 175, 55, 0.6);
  animation: rotateRing 15s linear infinite reverse;
}

@keyframes rotateRing {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.rotating-gradient-border {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent-primary), transparent 120deg, #ffffff, transparent 240deg, var(--accent-primary));
  z-index: 1;
  animation: spinBorder 6s linear infinite;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  border: 3px solid transparent;
}

.advanced-hero-image:hover .rotating-gradient-border {
  animation-duration: 2s;
}

@keyframes spinBorder {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.image-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  background: var(--bg-tertiary);
}

.about-portrait-advanced {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.advanced-hero-image:hover .about-portrait-advanced {
  transform: scale(1.08);
  filter: contrast(1.1) brightness(1.05);
}

.image-overlay-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.4;
  z-index: 3;
  pointer-events: none;
}

/* Floating Glassmorphism Badges */
.floating-badge {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), inset 0 0 15px rgba(212, 175, 55, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  color: var(--text-primary);
  z-index: 4;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  animation: floatBadge 4s infinite alternate ease-in-out;
}

.floating-badge:hover {
  transform: scale(1.15) translateY(-5px);
  box-shadow: 0 15px 30px rgba(212, 175, 55, 0.25);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

@keyframes floatBadge {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-15px) rotate(5deg);
  }
}

.badge-python {
  top: 8%;
  left: -25px;
  animation-delay: 0s;
}

.badge-react {
  top: 35%;
  right: -30px;
  animation-delay: 1s;
}

.badge-docker {
  bottom: 15%;
  left: -15px;
  animation-delay: 2s;
}

.badge-git {
  bottom: 8%;
  right: 15px;
  animation-delay: 0.5s;
}

.badge-ml {
  top: -20px;
  right: 20%;
  animation-delay: 1.5s;
}

.badge-django {
  bottom: 35%;
  left: -35px;
  animation-delay: 2.5s;
}

/* Orbiting Icons */
.advanced-hero-image .orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.advanced-hero-image .orbit-track {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.advanced-hero-image .track-1 {
  width: 520px;
  height: 520px;
  animation: orbit 30s linear infinite;
}

.advanced-hero-image .track-2 {
  width: 620px;
  height: 620px;
  animation: orbit 40s linear infinite reverse;
}

.advanced-hero-image .orbit-item {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  background: var(--bg-tertiary);
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--accent-primary);
  font-size: 1.2rem;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
  animation: counterOrbit 30s linear infinite reverse;
}

.advanced-hero-image .track-2 .orbit-item {
  animation: counterOrbit 40s linear infinite;
}

@keyframes orbit {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes counterOrbit {
  0% {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@media (max-width: 768px) {
  .advanced-hero-image {
    max-width: 320px;
  }

  .track-1 {
    width: 380px;
    height: 380px;
  }

  .contact-blob-2 {
    width: 250px;
    height: 250px;
  }

  .track-2 {
    width: 450px;
    height: 450px;
  }

  .floating-badge {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

/* Content Styles */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-full);
  color: var(--accent-primary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
}

.premium-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
  text-align: center;
}

.text-gold {
  color: var(--accent-primary);
}

.about-paragraphs p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
  text-align: justify;
}

/* Core Expertise */
.core-expertise {
  margin: var(--spacing-xl) 0;
}

.expertise-title {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.tech-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--transition-normal);
  cursor: default;
}

.tech-tag i {
  color: var(--accent-primary);
  font-size: 1.1rem;
}

.tech-tag:hover {
  transform: translateY(-3px);
  border-color: var(--accent-primary);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.15);
}

/* Premium Quote */
.premium-quote {
  position: relative;
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%);
  border-left: 4px solid var(--accent-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: var(--spacing-xl) 0;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
}

.quote-icon {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 3rem;
  color: rgba(212, 175, 55, 0.1);
  z-index: 0;
}

.premium-quote p {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* Action Buttons */
.about-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
  flex-wrap: wrap;
}

/* Magnetic Button support class */
.magnetic-btn {
  display: inline-flex;
}

/* Premium Statistics Grid */
.stats-premium-section {
  padding: var(--spacing-4xl) 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.premium-stat-card {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  border: 1px solid rgba(212, 175, 55, 0.1);
  background: var(--bg-tertiary);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  transform-style: preserve-3d;
}

.premium-stat-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1);
}

.stat-icon {
  font-size: 2.5rem;
  color: var(--accent-primary);
  margin-bottom: var(--spacing-sm);
  transform: translateZ(20px);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
  margin-bottom: var(--spacing-xs);
  transform: translateZ(30px);
}

.stat-label {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transform: translateZ(10px);
}

/* ══════════════════════════════════
   SERVICE & SKILLS MODERN SECTION
   ══════════════════════════════════ */
.service-skills-preview {
  background-color: var(--bg-secondary);
  padding: var(--spacing-4xl) 0;
  border-top: 1px solid var(--border-color);
}

.service-skills-header {
  margin-bottom: var(--spacing-2xl);
}

.ss-category {
  font-family: var(--font-mono);
  color: var(--accent-primary); 
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.ss-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.services-modern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-4xl);
}

.service-modern-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: var(--spacing-xl) var(--spacing-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.service-modern-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.smc-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--spacing-lg);
  z-index: 2;
}

.service-modern-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  z-index: 2;
}

.service-modern-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  z-index: 2;
  flex-grow: 1;
}

.smc-blob {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: var(--accent-glow);
  z-index: 1;
}

/* Skills columns */
.skills-modern-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.skill-column-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: var(--spacing-xl) var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.skill-column-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: 10px;
}

.primary-badge {
  background: var(--accent-primary);
  color: white;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-pill-modern {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 20px;
  transition: transform var(--transition-fast), background var(--transition-fast);
  cursor: default;
}

.skill-pill-modern:hover {
  background: var(--accent-primary);
  color: white;
  transform: translateY(-2px);
}

@media (max-width: 1100px) {
  .services-modern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .skills-modern-columns {
    grid-template-columns: 1fr;
  }
  .services-modern-grid {
    grid-template-columns: 1fr;
  }
  .ss-title {
    font-size: 2rem;
  }
}
/* Image Wrapper & Overlay for Projects */
.project-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.project-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.project-img-overlay {
  position: absolute;
  inset: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0.2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
}

.project-card {
  transition: all 0.5s ease;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 25px rgba(212, 175, 55, 0.15);
}

.project-card:hover .project-img-wrapper img {
  transform: scale(1.06);
}

.project-card:hover .project-img-overlay {
  opacity: 1;
  transform: translateY(0);
}