/* =========================================================
   VK.DEV — CREATIVE DEVELOPER PORTFOLIO
   Enhanced Design System
========================================================= */

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

:root {
  --bg: #05060a;
  --bg-soft: #0a0c13;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --text: #f4f4f6;
  --muted: #8a8d99;
  --accent: #7c5cff;
  --accent-2: #ff5c8a;
  --accent-3: #35e0c8;
  --accent-grad: linear-gradient(120deg, #7c5cff 0%, #ff5c8a 55%, #35e0c8 100%);
  --scroll-progress: 0%;
  font-size: 16px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  cursor: none;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 12% -5%, rgba(124, 92, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 800px 700px at 100% 20%, rgba(255, 92, 138, 0.13), transparent 55%),
    radial-gradient(ellipse 700px 600px at 20% 90%, rgba(53, 224, 200, 0.10), transparent 55%);
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

@media (max-width: 900px) {
  body { cursor: auto; }
}

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

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 10px;
}

/* =========================================================
   SCROLL PROGRESS BAR
========================================================= */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: var(--scroll-progress);
  background: var(--accent-grad);
  background-size: 200% 100%;
  animation: gradFlow 4s linear infinite;
  z-index: 9999;
  box-shadow: 0 0 12px rgba(124, 92, 255, 0.7);
  transition: width 0.1s linear;
}

@keyframes gradFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* =========================================================
   SIDE SCROLL NAV
========================================================= */

.scroll-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scroll-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  transition: all 0.4s cubic-bezier(.2, .8, .2, 1);
}

.scroll-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
  opacity: 0;
  white-space: nowrap;
  transition: all 0.3s ease;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: 6px;
}

.scroll-dot:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.scroll-dot.active {
  background: var(--accent-grad);
  height: 26px;
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.7);
}

@media (max-width: 900px) {
  .scroll-nav { display: none; }
}

/* =========================================================
   FUTURE INTRO
========================================================= */

.future-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #030308;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.future-intro.future-intro-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-walking-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.55) saturate(1.1);
  transition: opacity 1s ease, filter 1s ease;
  z-index: 1;
}

.future-intro.show-walking .intro-walking-video { opacity: 1; }
.future-intro.walking-bright .intro-walking-video { filter: brightness(0.85) saturate(1.2); }

.intro-video-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(3, 3, 8, 0.85) 100%);
}

.future-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(124, 92, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 92, 255, 0.09) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: gridMove 14s linear infinite;
  opacity: 0.7;
}

.future-intro.show-walking .future-grid { opacity: 0.15; transition: opacity 1s ease; }

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(42px, 42px); }
}

.future-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.future-orbit {
  position: absolute;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 50%;
  z-index: 1;
}

.future-orbit-a { width: 520px; height: 520px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spinSlow 30s linear infinite; }
.future-orbit-b { width: 760px; height: 760px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-color: rgba(255, 92, 138, 0.14); animation: spinSlow 40s linear infinite reverse; }

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

.future-line { position: absolute; z-index: 1; background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.4), transparent); height: 1px; width: 100%; }
.future-line-a { top: 30%; animation: lineSlide 6s ease-in-out infinite; }
.future-line-b { top: 70%; animation: lineSlide 8s ease-in-out infinite reverse; }

@keyframes lineSlide {
  0%, 100% { transform: translateX(-20%); opacity: 0.3; }
  50% { transform: translateX(20%); opacity: 0.8; }
}

.future-corner {
  position: absolute;
  z-index: 3;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.future-tl { top: 34px; left: 34px; }
.future-tr { top: 34px; right: 34px; }
.future-bl { bottom: 34px; left: 34px; }
.future-br { bottom: 34px; right: 34px; display: flex; align-items: center; gap: 8px; }
.future-br i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 10px var(--accent-3); animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.future-center {
  position: relative;
  z-index: 3;
  text-align: center;
}

.future-kicker {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--accent-3);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.future-kicker span { width: 30px; height: 1px; background: var(--accent-3); opacity: 0.6; }

.future-monogram {
  font-size: 13px;
  letter-spacing: 8px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}

.future-name {
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 800;
  letter-spacing: 4px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.future-letter {
  display: inline-block;
  opacity: 0;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1);
}

.future-letter.from-right { transform: translateX(60px); }
.future-letter.from-left { transform: translateX(-60px); }
.future-letter.from-top { transform: translateY(-60px); }
.future-letter.from-bottom { transform: translateY(60px); }

.future-letter.assembled {
  opacity: 1;
  transform: translate(0, 0);
}

.future-gap { width: 22px; }

.future-role {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--muted);
}

.future-load {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.future-load-track {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  display: block;
  position: relative;
  overflow: hidden;
}

.future-load-track i {
  position: absolute;
  inset: 0;
  background: var(--accent-grad);
  width: 0%;
  animation: loadBar 3s ease forwards;
}

@keyframes loadBar { to { width: 100%; } }

.future-load em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent-3);
  font-variant-numeric: tabular-nums;
}

.walking-label {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 3;
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: all 0.6s ease;
  display: flex;
  gap: 12px;
  align-items: center;
}

.walking-label span { width: 24px; height: 1px; background: var(--accent-3); }
.walking-label.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   LOADER
========================================================= */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
}

.loader-logo span { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.loader-line {
  width: 140px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 18px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.loader-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-grad);
  animation: loadSweep 1.1s ease-in-out infinite;
}

@keyframes loadSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

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

.cursor, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
}

.cursor {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(124, 92, 255, 0.45);
  border-radius: 50%;
  transition: all 0.18s ease-out;
}

.cursor.big { transform: translate(-50%, -50%) scale(1.8); }
.cursor-ring.big { width: 56px; height: 56px; border-color: rgba(255, 92, 138, 0.6); background: rgba(124, 92, 255, 0.08); }

@media (max-width: 900px) {
  .cursor, .cursor-ring { display: none; }
}

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

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  background: rgba(5, 6, 10, 0.55);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  position: relative;
}

.logo span { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

nav {
  display: flex;
  gap: 34px;
}

nav a {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--muted);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent-grad);
  transition: width 0.35s cubic-bezier(.2, .8, .2, 1);
  border-radius: 2px;
}

nav a:hover { color: var(--text); }
nav a:hover::after { width: 100%; }

.header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 30px;
  background: var(--surface);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 10px var(--accent-3);
  animation: pulse 1.6s ease-in-out infinite;
}

.menu {
  display: none;
  color: var(--text);
  font-size: 26px;
}

@media (max-width: 900px) {
  header { padding: 18px 22px; }
  .header-status { display: none; }
  nav {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 70%;
    background: rgba(6, 7, 12, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
    gap: 26px;
    transition: right 0.5s cubic-bezier(.2, .8, .2, 1);
    border-left: 1px solid var(--border);
  }
  nav.open { right: 0; }
  .menu { display: block; }
}

/* =========================================================
   SHARED SECTION STYLES
========================================================= */

section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 160px 60px;
}

.section-label {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--accent-3);
  font-weight: 700;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.section-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent-3);
}

.section-title {
  font-size: clamp(42px, 7vw, 88px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -1px;
}

.section-intro {
  margin-top: 22px;
  max-width: 520px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s cubic-bezier(.2, .8, .2, 1), transform 0.9s cubic-bezier(.2, .8, .2, 1);
}

.reveal.from-left { transform: translateX(-70px); }
.reveal.from-right { transform: translateX(70px); }
.reveal.zoom { transform: scale(0.85); }

.reveal.active {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.stagger.active > * {
  animation: staggerIn 0.7s cubic-bezier(.2, .8, .2, 1) both;
}

.stagger.active > *:nth-child(1) { animation-delay: 0.05s; }
.stagger.active > *:nth-child(2) { animation-delay: 0.12s; }
.stagger.active > *:nth-child(3) { animation-delay: 0.19s; }
.stagger.active > *:nth-child(4) { animation-delay: 0.26s; }
.stagger.active > *:nth-child(5) { animation-delay: 0.33s; }
.stagger.active > *:nth-child(6) { animation-delay: 0.40s; }

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.portfolio {
  position: absolute;
  font-size: clamp(90px, 20vw, 280px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
  letter-spacing: 6px;
  z-index: 0;
  transition: margin 0.3s ease-out;
  user-select: none;
  white-space: nowrap;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(124, 92, 255, 0.15);
  border-radius: 50%;
  z-index: 0;
}

.orbit.one { width: 340px; height: 340px; animation: spinSlow 40s linear infinite; }
.orbit.two { width: 520px; height: 520px; border-color: rgba(255, 92, 138, 0.1); animation: spinSlow 55s linear infinite reverse; }
.orbit.three { width: 700px; height: 700px; border-color: rgba(53, 224, 200, 0.08); animation: spinSlow 70s linear infinite; }

.code {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--accent-3);
  opacity: 0.5;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  transition: margin 1.6s ease-in-out;
}

.code.one { top: 18%; left: 10%; }
.code.two { top: 30%; right: 8%; color: var(--accent-2); }
.code.three { bottom: 26%; left: 8%; color: var(--accent); }
.code.four { bottom: 16%; right: 12%; }

@media (max-width: 900px) {
  .code { display: none; }
}

.person-wrap {
  position: relative;
  z-index: 2;
  height: 78vh;
  display: flex;
  align-items: flex-end;
}

.person {
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(124, 92, 255, 0.3));
  transition: margin 0.3s ease-out;
  animation: floatPerson 6s ease-in-out infinite;
}

@keyframes floatPerson {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hero-info {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 380px;
}

.hero-info small {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--accent-3);
  font-weight: 700;
}

.hero-info h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  margin-top: 14px;
  line-height: 1.2;
}

.typing {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-right: 2px solid var(--accent-3);
  padding-right: 4px;
}

.hero-info p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 3px;
}

.hero-button {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 20px 38px;
  border-radius: 50px;
  background: var(--accent-grad);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  color: #fff;
  box-shadow: 0 10px 40px rgba(124, 92, 255, 0.35);
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 1100px) {
  .hero-info, .hero-button { position: static; transform: none; margin: 20px auto; text-align: center; max-width: 90%; }
  .hero { flex-direction: column; padding-top: 140px; height: auto; min-height: 100vh; }
  .person-wrap { height: 45vh; }
}

.scroll {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--muted);
  z-index: 3;
}

.scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--accent-3), transparent);
  margin: 10px auto 0;
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.next-section {
  position: absolute;
  bottom: 48px;
  right: 60px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--muted);
}

.next-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(.2, .8, .2, 1);
}

.next-section:hover .next-circle {
  background: var(--accent-grad);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(124, 92, 255, 0.4);
}

@media (max-width: 900px) { .next-section { display: none; } }

/* =========================================================
   MARQUEE
========================================================= */

.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
  background: var(--surface);
}

.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marqueeScroll 26s linear infinite;
  width: max-content;
}

.marquee-track span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}

.marquee-track span:nth-child(odd) {
  -webkit-text-stroke: 0;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

.about {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 70px;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
}

.about-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease-out;
  --mx: 50%; --my: 50%;
}

.about-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(124, 92, 255, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.about-box:hover::before { opacity: 1; }

.about-box h1 {
  font-size: 60px;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
}

.about-text {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text);
}

.about-text strong {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-description {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.about-tags {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.about-tag {
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.3s ease;
}

.about-tag:hover {
  border-color: transparent;
  background: var(--accent-grad);
  color: #fff;
  transform: translateY(-3px);
}

@media (max-width: 1000px) {
  .about { grid-template-columns: 1fr; }
}

/* =========================================================
   STATS
========================================================= */

.stats {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.stat {
  padding: 40px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  transition: all 0.35s cubic-bezier(.2, .8, .2, 1);
}

.stat:hover {
  transform: translateY(-8px);
  border-color: rgba(124, 92, 255, 0.4);
  box-shadow: 0 20px 40px rgba(124, 92, 255, 0.15);
}

.stat-number {
  font-size: 48px;
  font-weight: 800;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 800px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

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

.skill-container {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.skill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease-out, border-color 0.3s ease;
  --mx: 50%; --my: 50%;
}

.skill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(124, 92, 255, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.skill:hover::before { opacity: 1; }
.skill:hover { border-color: rgba(124, 92, 255, 0.35); }

.skill-number {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.skill-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 22px;
  color: #fff;
}

.skill h3 { font-size: 20px; margin-bottom: 12px; }

.skill p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  min-height: 66px;
}

.skill-bar {
  margin-top: 22px;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

.skill-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent-grad);
  border-radius: 6px;
  transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
}

.skill.active .skill-bar span,
.stagger.active .skill-bar span { width: var(--skill); }

.skills-note {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.skills-note span {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent-3);
  font-weight: 700;
}

.skills-note b { font-size: 13px; letter-spacing: 1px; color: var(--muted); }

@media (max-width: 1000px) {
  .skill-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .skill-container { grid-template-columns: 1fr; }
}

/* =========================================================
   SERVICES
========================================================= */

.services-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.service {
  padding: 40px 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(.2, .8, .2, 1);
}

.service::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-grad);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.service:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 25px 50px rgba(124, 92, 255, 0.25);
}

.service-number {
  font-size: 40px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}

.service h3 { font-size: 22px; margin-bottom: 14px; }
.service p { color: var(--muted); font-size: 14px; line-height: 1.8; }

.service-arrow {
  margin-top: 26px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(.2, .8, .2, 1);
}

.service:hover .service-arrow {
  background: var(--accent-grad);
  transform: rotate(45deg);
  border-color: transparent;
}

@media (max-width: 1000px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .services-grid { grid-template-columns: 1fr; }
}

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

.timeline {
  margin-top: 70px;
  max-width: 900px;
  position: relative;
  padding-left: 44px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2), var(--accent-3));
}

.timeline-item {
  position: relative;
  margin-bottom: 60px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(124, 92, 255, 0.15);
}

.timeline-year {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--accent-3);
  font-weight: 700;
  margin-bottom: 10px;
}

.timeline-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 34px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.timeline-content:hover {
  transform: translateX(8px);
  border-color: rgba(124, 92, 255, 0.35);
}

.timeline-content h3 { font-size: 22px; margin-bottom: 6px; }
.timeline-content h4 { font-size: 12px; letter-spacing: 2px; color: var(--accent-2); margin-bottom: 14px; font-weight: 700; }
.timeline-content p { color: var(--muted); font-size: 14px; line-height: 1.8; }

/* =========================================================
   PROJECTS
========================================================= */

.projects-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto 50px;
  flex-wrap: wrap;
  gap: 20px;
}

.projects-title span {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 30px;
}

.filters {
  display: flex;
  gap: 14px;
  max-width: 1300px;
  margin: 0 auto 40px;
  flex-wrap: wrap;
}

.filter {
  padding: 10px 22px;
  border-radius: 30px;
  border: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.3s ease;
}

.filter:hover { border-color: rgba(124, 92, 255, 0.4); color: var(--text); }

.filter.active {
  background: var(--accent-grad);
  color: #fff;
  border-color: transparent;
}

.project-list {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.project {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 38px 10px;
  border-bottom: 1px solid var(--border);
  transition: all 0.4s cubic-bezier(.2, .8, .2, 1);
  position: relative;
}

.project.hidden { display: none; }

.project::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.08), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
}

.project:hover::before { transform: scaleX(1); }
.project:hover { padding-left: 24px; }

.project-number {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  min-width: 30px;
}

.project h3 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  transition: color 0.3s ease;
}

.project:hover h3 {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.project-description {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  max-width: 480px;
  line-height: 1.7;
}

.project-category {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent-3);
  font-weight: 700;
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .project { flex-wrap: wrap; gap: 12px; }
  .project-category { margin-left: 0; }
}

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

.achievement-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.achievement {
  padding: 40px 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  transition: all 0.35s cubic-bezier(.2, .8, .2, 1);
}

.achievement:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 92, 138, 0.35);
  box-shadow: 0 20px 40px rgba(255, 92, 138, 0.15);
}

.achievement-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 22px;
  color: #fff;
}

.achievement h3 { font-size: 20px; margin-bottom: 12px; }
.achievement p { color: var(--muted); font-size: 14px; line-height: 1.8; }

@media (max-width: 1000px) {
  .achievement-grid { grid-template-columns: 1fr; }
}

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

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

.contact h2 {
  font-size: clamp(44px, 8vw, 90px);
  font-weight: 800;
  margin-top: 10px;
}

.contact h2 span {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-subtitle {
  margin: 24px auto 50px;
  max-width: 500px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.form-group.full { grid-column: 1 / -1; }

.form-input {
  width: 100%;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

textarea.form-input { min-height: 130px; resize: vertical; }

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.15);
}

.form-input::placeholder { color: var(--muted); letter-spacing: 2px; font-size: 11px; }

.submit-button {
  grid-column: 1 / -1;
  padding: 20px;
  border-radius: 14px;
  background: var(--accent-grad);
  background-size: 200% 100%;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.submit-button:hover {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(124, 92, 255, 0.35);
}

.socials {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.social {
  padding: 14px 26px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.3s ease;
}

.social:hover {
  background: var(--accent-grad);
  color: #fff;
  border-color: transparent;
  transform: translateY(-4px);
}

@media (max-width: 700px) {
  .contact-form { grid-template-columns: 1fr; }
}

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

footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 60px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}

.back-top {
  font-weight: 700;
  color: var(--text);
  transition: color 0.3s ease;
}

.back-top:hover { color: var(--accent-3); }

/* =========================================================
   TOAST
========================================================= */

.toast {
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  padding: 16px 30px;
  border-radius: 40px;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  opacity: 0;
  z-index: 9000;
  transition: all 0.4s cubic-bezier(.2, .8, .2, 1);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  box-shadow: 0 10px 40px rgba(124, 92, 255, 0.3);
}

/* =========================================================
   RESPONSIVE SECTION PADDING
========================================================= */

@media (max-width: 900px) {
  section { padding: 120px 24px; }
  footer { padding: 30px 24px; justify-content: center; text-align: center; }
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #05050a;
  overflow-x: hidden;
}

#space-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  display: block;
  background: #05050a;
}

.orbit-rings {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.orbit-rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(124, 92, 255, 0.12);
}

.orbit-rings .ring-1 {
  width: 60vmax;
  height: 60vmax;
  border-color: rgba(124, 92, 255, 0.10);
  animation: spin-cw 90s linear infinite;
}

.orbit-rings .ring-2 {
  width: 80vmax;
  height: 80vmax;
  border-color: rgba(255, 92, 138, 0.08);
  animation: spin-ccw 130s linear infinite;
}

.orbit-rings .ring-3 {
  width: 100vmax;
  height: 100vmax;
  border-color: rgba(208, 255, 245, 0.06);
  animation: spin-cw 170s linear infinite;
}

@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 12% -5%, rgba(124, 92, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 100%, rgba(255, 92, 138, 0.12), transparent 60%);
  animation: nebula-drift 40s ease-in-out infinite alternate;
}

@keyframes nebula-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2%, 2%) scale(1.05); }
  100% { transform: translate(2%, -2%) scale(1.02); }
}

.page-content {
  position: relative;
  z-index: 1;
}
/* =========================================================
   PRO SPACE BACKGROUND — UNIQUE ORBITAL / NEBULA THEME
   Pure CSS, layered depth, circular motion only
========================================================= */

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #05050a;
  overflow-x: hidden;
}

/* =========================================================
   BASE DEEP SPACE LAYER
========================================================= */

.space-scene {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #0b0d1c 0%, #05050a 55%, #020204 100%);
  pointer-events: none;
}

/* =========================================================
   ROTATING STARFIELD LAYERS (circular motion via rotating parent)
========================================================= */

.starfield {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260vmax;
  height: 260vmax;
  transform: translate(-50%, -50%) rotate(0deg);
  background-repeat: repeat;
}

.starfield.layer-1 {
  background-image:
    radial-gradient(1.6px 1.6px at 8% 22%, #ffffff 100%, transparent 100%),
    radial-gradient(1.2px 1.2px at 33% 68%, #cfd6ff 100%, transparent 100%),
    radial-gradient(1.4px 1.4px at 62% 12%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px at 78% 47%, #b7c4ff 100%, transparent 100%),
    radial-gradient(1.3px 1.3px at 91% 81%, #ffffff 100%, transparent 100%),
    radial-gradient(1.1px 1.1px at 18% 89%, #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 38%, #d6c9ff 100%, transparent 100%);
  background-size: 340px 340px;
  opacity: 0.75;
  animation: spin-cw 240s linear infinite;
}

.starfield.layer-2 {
  background-image:
    radial-gradient(2px 2px at 15% 15%, #ffffff 100%, transparent 100%),
    radial-gradient(1.6px 1.6px at 44% 55%, #a9e8ff 100%, transparent 100%),
    radial-gradient(1.8px 1.8px at 70% 30%, #ffffff 100%, transparent 100%),
    radial-gradient(1.4px 1.4px at 85% 70%, #ffd6f2 100%, transparent 100%),
    radial-gradient(1.7px 1.7px at 25% 82%, #ffffff 100%, transparent 100%),
    radial-gradient(1.3px 1.3px at 58% 90%, #cfd6ff 100%, transparent 100%);
  background-size: 520px 520px;
  opacity: 0.55;
  animation: spin-ccw 340s linear infinite;
}

.starfield.layer-3 {
  background-image:
    radial-gradient(2.4px 2.4px at 20% 40%, #ffffff 100%, transparent 100%),
    radial-gradient(2px 2px at 60% 65%, #b7c4ff 100%, transparent 100%),
    radial-gradient(2.2px 2.2px at 80% 20%, #ffffff 100%, transparent 100%),
    radial-gradient(1.8px 1.8px at 35% 85%, #35e0c8 60%, transparent 100%),
    radial-gradient(2px 2px at 5% 60%, #ffffff 100%, transparent 100%);
  background-size: 700px 700px;
  opacity: 0.4;
  animation: spin-cw 460s linear infinite;
}

.starfield.twinkle {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 30%, #ffffff 100%, transparent 100%),
    radial-gradient(1.6px 1.6px at 48% 74%, #ffffff 100%, transparent 100%),
    radial-gradient(1.6px 1.6px at 77% 18%, #ffffff 100%, transparent 100%),
    radial-gradient(1.6px 1.6px at 88% 58%, #ffffff 100%, transparent 100%),
    radial-gradient(1.6px 1.6px at 30% 92%, #ffffff 100%, transparent 100%);
  background-size: 460px 460px;
  animation: spin-cw 180s linear infinite, twinkle-pulse 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes twinkle-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.85; }
}

@keyframes spin-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-ccw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* =========================================================
   ORBITING RINGS (concentric, circular rotation)
========================================================= */

.orbit-rings {
  position: fixed;
  inset: 0;
  z-index: -9;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.orbit-rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
}

.orbit-rings .ring-1 {
  width: 46vmax;
  height: 46vmax;
  border-color: rgba(124, 92, 255, 0.16);
  box-shadow: 0 0 60px rgba(124, 92, 255, 0.05) inset;
  animation: spin-cw 90s linear infinite;
}

.orbit-rings .ring-2 {
  width: 66vmax;
  height: 66vmax;
  border-color: rgba(255, 92, 138, 0.13);
  animation: spin-ccw 130s linear infinite;
}

.orbit-rings .ring-3 {
  width: 88vmax;
  height: 88vmax;
  border-color: rgba(53, 224, 200, 0.10);
  animation: spin-cw 170s linear infinite;
}

.orbit-rings .ring-4 {
  width: 112vmax;
  height: 112vmax;
  border-color: rgba(255, 255, 255, 0.05);
  animation: spin-ccw 220s linear infinite;
}

.orbit-rings .ring::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.orbit-rings .ring-1::before {
  background: #7c5cff;
  box-shadow: 0 0 16px 4px rgba(124, 92, 255, 0.8);
}

.orbit-rings .ring-2::before {
  background: #ff5c8a;
  box-shadow: 0 0 16px 4px rgba(255, 92, 138, 0.8);
}

.orbit-rings .ring-3::before {
  background: #35e0c8;
  box-shadow: 0 0 16px 4px rgba(53, 224, 200, 0.8);
}

/* =========================================================
   GALACTIC CORE GLOW
========================================================= */

.galaxy-core {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  z-index: -11;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(124, 92, 255, 0.20) 0%, rgba(124, 92, 255, 0.08) 30%, transparent 65%);
  filter: blur(10px);
  animation: core-pulse 8s ease-in-out infinite, spin-cw 300s linear infinite;
}

@keyframes core-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.12); }
}

/* =========================================================
   NEBULA COLOR WASH
========================================================= */

.nebula-wash {
  position: fixed;
  inset: 0;
  z-index: -12;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 50% 50%, rgba(124, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 50%, rgba(255, 92, 138, 0.10), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 50%, rgba(53, 224, 200, 0.08), transparent 60%);
  animation: nebula-breathe 22s ease-in-out infinite;
}

@keyframes nebula-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50%      { transform: scale(1.15) rotate(6deg); opacity: 1; }
}

/* =========================================================
   SHOOTING ORBIT PARTICLES
========================================================= */

.orbit-particles {
  position: fixed;
  inset: 0;
  z-index: -8;
  pointer-events: none;
  overflow: hidden;
}

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

.orbit-particles .track-a {
  width: 30vmax;
  height: 30vmax;
  animation: spin-cw 40s linear infinite;
}

.orbit-particles .track-b {
  width: 54vmax;
  height: 54vmax;
  animation: spin-ccw 65s linear infinite;
}

.orbit-particles .track-c {
  width: 76vmax;
  height: 76vmax;
  animation: spin-cw 95s linear infinite;
}

.orbit-particles .particle-track i {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
}

.orbit-particles .track-b i { background: #35e0c8; box-shadow: 0 0 10px 2px rgba(53, 224, 200, 0.7); }
.orbit-particles .track-c i { background: #ff5c8a; box-shadow: 0 0 10px 2px rgba(255, 92, 138, 0.7); }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .starfield.layer-3,
  .orbit-rings .ring-4,
  .orbit-particles .track-c {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starfield,
  .orbit-rings .ring,
  .galaxy-core,
  .nebula-wash,
  .orbit-particles .particle-track {
    animation: none !important;
  }
}

/* =========================================================
   CONTENT LAYER
========================================================= */

.page-content {
  position: relative;
  z-index: 1;
}
/* =========================================================
   GLOBAL
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

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

button,
input,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
}

::selection{
    background:#fff;
    color:#000;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#777;
}

/* =========================================================
   GRID BACKGROUND
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:.035;

    background-image:
    linear-gradient(#fff 1px,transparent 1px),
    linear-gradient(90deg,#fff 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:60px 60px;
    }
}

/* =========================================================
   LOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:10000;

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

    transition:1s ease;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
}

.loader-logo{
    font-size:clamp(40px,8vw,100px);
    font-weight:900;
    letter-spacing:-6px;

    animation:loaderPulse 1s infinite alternate;
}

.loader-logo span{
    opacity:.3;
}

.loader-line{
    width:150px;
    height:1px;
    background:#333;
    margin:25px auto 0;
    overflow:hidden;
}

.loader-line::after{
    content:"";
    display:block;
    width:40%;
    height:100%;
    background:#fff;

    animation:loaderLine 1.2s infinite;
}

@keyframes loaderPulse{
    from{
        opacity:.3;
        transform:scale(.94);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes loaderLine{
    from{
        transform:translateX(-150px);
    }

    to{
        transform:translateX(250px);
    }
}

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

.cursor{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;

    position:fixed;
    pointer-events:none;
    z-index:10001;

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

    transition:
        width .3s,
        height .3s,
        background .3s;
}

.cursor-ring{
    width:38px;
    height:38px;

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

    position:fixed;
    pointer-events:none;
    z-index:10000;

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

    transition:.15s ease-out;
}

.cursor.big{
    width:48px;
    height:48px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(5px);
}

@media(max-width:800px){

    .cursor,
    .cursor-ring{
        display:none;
    }

}

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

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:85px;

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

    padding:0 6vw;

    z-index:500;

    background:rgba(5,5,5,.45);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.03);
}

.logo{
    font-size:24px;
    font-weight:900;
    letter-spacing:-1px;
}

.logo span{
    opacity:.3;
}

nav{
    display:flex;
    align-items:center;
    gap:32px;
}

nav a{
    position:relative;

    font-size:10px;
    letter-spacing:2px;

    color:#777;

    transition:.3s;
}

nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-9px;

    width:0;
    height:1px;

    background:#fff;

    transition:.4s;
}

nav a:hover{
    color:#fff;
}

nav a:hover::after{
    width:100%;
}

.header-status{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:9px;
    letter-spacing:2px;

    color:#555;
}

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

    border-radius:50%;
    background:#fff;

    animation:statusPulse 1.5s infinite;
}

@keyframes statusPulse{
    0%,100%{
        opacity:.3;
        transform:scale(.8);
    }

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

.menu{
    display:none;

    border:0;
    background:none;

    color:#fff;

    font-size:24px;
}

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

.hero{
    min-height:100vh;
    height:100vh;

    position:relative;
    overflow:hidden;

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

.hero::after{
    content:"";

    position:absolute;
    inset:auto 0 0;

    height:180px;

    background:linear-gradient(
        transparent,
        #050505
    );

    z-index:15;
    pointer-events:none;
}

/* giant portfolio */

.portfolio{
    position:absolute;

    left:50%;
    top:50%;

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

    font-size:clamp(80px,17vw,290px);

    font-weight:900;

    letter-spacing:-.12em;
    line-height:.75;

    white-space:nowrap;

    z-index:2;

    color:transparent;

    -webkit-text-stroke:1px rgba(255,255,255,.15);

    background:
        linear-gradient(
            110deg,
            #222 0%,
            #fff 20%,
            #333 40%,
            #fff 60%,
            #222 80%
        );

    background-size:500% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        textFlow 7s linear infinite,
        textBreath 5s ease-in-out infinite;
}

@keyframes textFlow{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:500% center;
    }

}

@keyframes textBreath{

    0%,100%{
        letter-spacing:-.12em;
        opacity:.5;
    }

    50%{
        letter-spacing:-.08em;
        opacity:.9;
    }

}

/* =========================================================
   ORBITS
========================================================= */

.orbit{
    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;

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

    pointer-events:none;
}

.orbit.one{
    width:480px;
    height:480px;

    animation:spin 20s linear infinite;
}

.orbit.two{
    width:650px;
    height:650px;

    animation:spinReverse 27s linear infinite;
}

.orbit.three{
    width:820px;
    height:820px;

    animation:spin 35s linear infinite;
}

.orbit::after{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    background:#fff;

    border-radius:50%;

    top:0;
    left:50%;

    box-shadow:0 0 20px #fff;
}

@keyframes spin{

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

}

@keyframes spinReverse{

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

}

/* =========================================================
   PERSON
========================================================= */

.person-wrap{
    position:absolute;
    inset:0;

    z-index:10;

    pointer-events:none;
}

.person{
    position:absolute;

    left:50%;
    bottom:-20px;

    transform:translateX(-50%);

    height:78vh;
    max-height:750px;

    width:auto;

    object-fit:contain;

    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(.95)
        drop-shadow(0 30px 50px rgba(0,0,0,.9));

    animation:
        personFloat 5s ease-in-out infinite,
        personReveal 1.8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes personFloat{

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

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

}

@keyframes personReveal{

    from{
        opacity:0;

        transform:
            translateX(-50%)
            translateY(120px)
            scale(.9);

        filter:
            grayscale(100%)
            blur(12px)
            brightness(.3);
    }

    to{
        opacity:1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

        filter:
            grayscale(100%)
            contrast(1.15)
            brightness(.95)
            drop-shadow(0 30px 50px rgba(0,0,0,.9));
    }

}

/* =========================================================
   CODE FLOATING
========================================================= */

.code{
    position:absolute;

    padding:12px 18px;

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

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

    backdrop-filter:blur(15px);

    font-family:monospace;

    font-size:11px;

    color:#777;

    z-index:20;

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

.code.one{
    left:7%;
    top:30%;
}

.code.two{
    right:7%;
    top:25%;

    animation-delay:1s;
}

.code.three{
    right:12%;
    bottom:22%;

    animation-delay:2s;
}

.code.four{
    left:10%;
    bottom:25%;

    animation-delay:3s;
}

@keyframes codeFloat{

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

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

}

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

.hero-info{
    position:absolute;

    left:6vw;
    bottom:70px;

    z-index:30;

    animation:slideLeft 1.5s .7s both;
}

.hero-info small{
    color:#666;

    letter-spacing:4px;

    font-size:9px;
}

.hero-info h2{
    font-size:clamp(18px,2vw,30px);

    margin-top:9px;

    font-weight:500;
}

.hero-info p{
    color:#555;

    margin-top:8px;

    font-size:11px;
}

.typing{
    color:#aaa;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

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

}

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

.hero-button{
    position:absolute;

    right:6vw;
    bottom:65px;

    z-index:30;

    width:125px;
    height:125px;

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

    border-radius:50%;

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

    font-size:10px;
    letter-spacing:2px;

    transition:.5s;

    animation:buttonAppear 1.5s .9s both;
}

.hero-button::before{
    content:"";

    position:absolute;
    inset:8px;

    border:1px dashed rgba(255,255,255,.2);

    border-radius:50%;

    animation:spin 10s linear infinite;
}

.hero-button:hover{
    background:#fff;
    color:#000;

    transform:scale(1.1) rotate(8deg);
}

@keyframes buttonAppear{

    from{
        opacity:0;
        transform:scale(.3) rotate(-180deg);
    }

    to{
        opacity:1;
        transform:scale(1) rotate(0);
    }

}

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

.scroll{
    position:absolute;

    bottom:20px;
    left:50%;

    transform:translateX(-50%);

    font-size:8px;

    letter-spacing:3px;

    color:#444;

    z-index:30;
}

.scroll::after{
    content:"";

    display:block;

    width:1px;
    height:35px;

    background:#444;

    margin:10px auto 0;

    animation:scrollLine 1.5s infinite;
}

@keyframes scrollLine{

    0%{
        transform:scaleY(0);
        transform-origin:top;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
    }

    51%{
        transform-origin:bottom;
    }

    100%{
        transform:scaleY(0);
        transform-origin:bottom;
    }

}

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

section{
    min-height:100vh;

    padding:140px 8vw;

    position:relative;
}

.section-label{
    font-size:10px;

    color:#555;

    letter-spacing:4px;

    margin-bottom:30px;
}

.section-title{
    font-size:clamp(50px,8vw,130px);

    line-height:.82;

    letter-spacing:-.08em;

    font-weight:900;
}

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

.about{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10vw;

    align-items:center;
}

.about-text{
    color:#777;

    line-height:1.9;

    font-size:14px;
}

.about-text strong{
    color:#fff;
}

.about-description{
    margin-top:30px;
}

.about-box{
    border:1px solid #202020;

    padding:45px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.about-box::before{
    content:"01";

    position:absolute;

    right:20px;
    top:10px;

    font-size:90px;

    color:#101010;

    font-weight:900;
}

.about-box:hover{
    transform:translateY(-12px);

    border-color:#444;
}

.about-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;
}

.about-tag{
    border:1px solid #252525;

    padding:9px 14px;

    font-size:9px;

    letter-spacing:1px;

    color:#777;
}

/* =========================================================
   STATS
========================================================= */

.stats{
    display:grid;

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

    border-top:1px solid #202020;
    border-bottom:1px solid #202020;
}

.stat{
    padding:50px 25px;

    border-right:1px solid #202020;

    text-align:center;
}

.stat:last-child{
    border-right:0;
}

.stat-number{
    font-size:clamp(35px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;
}

.stat-label{
    margin-top:10px;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

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

.skills{
    background:#080808;
}

.skill-container{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.skill{
    min-height:250px;

    border:1px solid #1d1d1d;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.skill::before{
    content:"";

    position:absolute;

    width:0;
    height:2px;

    left:0;
    top:0;

    background:#fff;

    transition:.6s;
}

.skill:hover::before{
    width:100%;
}

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

    border-color:#444;
}

.skill-number{
    font-size:10px;

    color:#555;
}

.skill-icon{
    position:absolute;

    right:30px;
    top:30px;

    font-size:28px;

    opacity:.3;
}

.skill h3{
    margin-top:45px;

    font-size:24px;
}

.skill p{
    margin-top:14px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

.skill-bar{
    height:2px;

    background:#1c1c1c;

    margin-top:25px;

    overflow:hidden;
}

.skill-bar span{
    display:block;

    height:100%;

    width:0;

    background:#fff;

    transition:1.5s ease;
}

.reveal.active .skill-bar span{
    width:var(--skill);
}

/* =========================================================
   TECHNOLOGY MARQUEE
========================================================= */

.marquee{
    overflow:hidden;

    border-top:1px solid #1d1d1d;
    border-bottom:1px solid #1d1d1d;

    padding:25px 0;

    background:#050505;
}

.marquee-track{
    display:flex;

    width:max-content;

    animation:marquee 25s linear infinite;
}

.marquee span{
    font-size:13px;

    color:#444;

    letter-spacing:3px;

    margin:0 35px;

    white-space:nowrap;
}

@keyframes marquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* =========================================================
   SERVICES
========================================================= */

.services-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.service{
    border:1px solid #202020;

    padding:40px;

    min-height:280px;

    position:relative;

    transition:.5s;
}

.service:hover{
    background:#0c0c0c;

    transform:translateY(-8px);

    border-color:#444;
}

.service-number{
    color:#555;

    font-size:10px;
}

.service h3{
    margin-top:60px;

    font-size:25px;
}

.service p{
    margin-top:15px;

    color:#666;

    line-height:1.8;

    font-size:11px;
}

.service-arrow{
    position:absolute;

    right:30px;
    bottom:25px;

    font-size:20px;

    color:#555;

    transition:.4s;
}

.service:hover .service-arrow{
    color:#fff;

    transform:translate(5px,-5px);
}

/* =========================================================
   EDUCATION
========================================================= */

.education{
    background:#080808;
}

.timeline{
    margin-top:90px;

    max-width:1000px;

    margin-left:auto;
    margin-right:auto;
}

.timeline-item{
    display:grid;

    grid-template-columns:150px 1fr;

    gap:40px;

    padding:40px 0;

    border-top:1px solid #202020;
}

.timeline-year{
    color:#555;

    font-size:11px;

    letter-spacing:2px;
}

.timeline-content h3{
    font-size:27px;

    margin-bottom:10px;
}

.timeline-content h4{
    color:#777;

    font-size:12px;

    font-weight:500;
}

.timeline-content p{
    margin-top:15px;

    color:#555;

    line-height:1.8;

    font-size:11px;

    max-width:700px;
}

/* =========================================================
   PROJECTS
========================================================= */

.projects-title{
    display:flex;

    align-items:end;

    justify-content:space-between;
}

.projects-title span{
    font-size:10px;

    color:#555;

    letter-spacing:2px;
}

.filters{
    display:flex;

    gap:10px;

    margin-top:60px;

    flex-wrap:wrap;
}

.filter{
    background:transparent;

    color:#555;

    border:1px solid #222;

    padding:10px 17px;

    font-size:9px;

    letter-spacing:1px;

    transition:.3s;
}

.filter:hover,
.filter.active{
    background:#fff;

    color:#000;

    border-color:#fff;
}

.project-list{
    margin-top:30px;
}

.project{
    display:grid;

    grid-template-columns:80px 1fr 180px;

    align-items:center;

    gap:30px;

    padding:40px 0;

    border-top:1px solid #222;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.project:last-child{
    border-bottom:1px solid #222;
}

.project.hidden{
    display:none;
}

.project-number{
    color:#555;

    font-size:11px;
}

.project h3{
    font-size:clamp(24px,4vw,52px);

    font-weight:700;

    letter-spacing:-2px;

    transition:.5s;
}

.project-category{
    text-align:right;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

.project-description{
    grid-column:2 / 3;

    color:#555;

    font-size:11px;

    line-height:1.7;

    margin-top:-20px;
}

.project::after{
    content:"";

    position:absolute;

    left:-100%;

    bottom:0;

    width:100%;

    height:1px;

    background:#fff;

    transition:.7s;
}

.project:hover::after{
    left:0;
}

.project:hover h3{
    transform:translateX(20px);

    letter-spacing:-1px;
}

.project:hover{
    padding-left:15px;

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

.project-view{
    color:#777;

    font-size:9px;

    letter-spacing:2px;

    opacity:0;

    transition:.4s;
}

.project:hover .project-view{
    opacity:1;
}

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

.achievements{
    background:#080808;
}

.achievement-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.achievement{
    border:1px solid #202020;

    padding:35px;

    min-height:240px;

    transition:.5s;
}

.achievement:hover{
    transform:translateY(-10px);

    border-color:#444;
}

.achievement-icon{
    font-size:28px;

    opacity:.5;
}

.achievement h3{
    margin-top:35px;

    font-size:20px;
}

.achievement p{
    margin-top:12px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

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

.contact{
    min-height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.contact h2{
    font-size:clamp(55px,11vw,170px);

    line-height:.8;

    letter-spacing:-.1em;
}

.contact h2 span{
    display:block;

    color:transparent;

    -webkit-text-stroke:1px #555;

    transition:.5s;
}

.contact h2:hover span{
    color:#fff;

    -webkit-text-stroke:1px #fff;
}

.contact-subtitle{
    max-width:550px;

    margin-top:35px;

    color:#555;

    font-size:12px;

    line-height:1.8;
}

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

.contact-form{
    width:min(700px,100%);

    margin-top:55px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.form-group{
    position:relative;
}

.form-group.full{
    grid-column:1/-1;
}

.form-input{
    width:100%;

    padding:17px 18px;

    background:#080808;

    border:1px solid #222;

    color:#fff;

    outline:none;

    font-size:11px;

    transition:.3s;
}

.form-input:focus{
    border-color:#777;
}

textarea.form-input{
    height:130px;

    resize:vertical;
}

.submit-button{
    grid-column:1/-1;

    padding:17px;

    background:#fff;

    color:#000;

    border:0;

    font-size:10px;

    letter-spacing:2px;

    transition:.4s;
}

.submit-button:hover{
    background:#ccc;

    transform:translateY(-3px);
}

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

.socials{
    display:flex;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;

    justify-content:center;
}

.social{
    border:1px solid #252525;

    padding:12px 20px;

    font-size:9px;

    letter-spacing:1px;

    color:#666;

    transition:.4s;
}

.social:hover{
    border-color:#fff;

    color:#fff;

    transform:translateY(-3px);
}

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

footer{
    border-top:1px solid #181818;

    padding:35px 8vw;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#555;

    font-size:9px;

    letter-spacing:1px;
}

.back-top{
    border:1px solid #222;

    padding:10px 15px;

    transition:.3s;
}

.back-top:hover{
    color:#fff;

    border-color:#555;
}

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

.reveal{
    opacity:0;

    transform:translateY(70px);

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

.reveal.active{
    opacity:1;

    transform:translateY(0);
}

.from-left{
    transform:translateX(-100px);
}

.from-left.active{
    transform:translateX(0);
}

.from-right{
    transform:translateX(100px);
}

.from-right.active{
    transform:translateX(0);
}

.zoom{
    transform:scale(.75);
}

.zoom.active{
    transform:scale(1);
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    right:25px;
    bottom:25px;

    padding:15px 22px;

    background:#fff;

    color:#000;

    font-size:10px;

    letter-spacing:1px;

    z-index:9000;

    transform:translateY(100px);

    opacity:0;

    transition:.4s;
}

.toast.show{
    transform:translateY(0);

    opacity:1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .header-status{
        display:none;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:800px){

    header{
        height:75px;

        padding:0 5vw;
    }

    nav{
        display:none;

        position:absolute;

        top:75px;
        left:0;

        width:100%;

        padding:30px;

        background:#050505;

        border-bottom:1px solid #222;

        flex-direction:column;

        text-align:center;

        gap:25px;
    }

    nav.open{
        display:flex;
    }

    .menu{
        display:block;
    }

    .hero{
        min-height:680px;
    }

    .portfolio{
        font-size:21vw;
    }

    .person{
        height:64vh;
    }

    .orbit.one{
        width:350px;
        height:350px;
    }

    .orbit.two{
        width:470px;
        height:470px;
    }

    .orbit.three{
        width:600px;
        height:600px;
    }

    .code{
        display:none;
    }

    .hero-info{
        left:5vw;
        bottom:35px;
    }

    .hero-button{
        right:5vw;
        bottom:30px;

        width:85px;
        height:85px;

        font-size:7px;
    }

    section{
        padding:100px 6vw;
    }

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

        gap:50px;
    }

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

    .stat{
        border-bottom:1px solid #202020;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:1fr;
    }

    .timeline-item{
        grid-template-columns:1fr;

        gap:15px;
    }

    .projects-title{
        display:block;
    }

    .projects-title span{
        display:block;

        margin-top:20px;
    }

    .project{
        grid-template-columns:40px 1fr;
    }

    .project-category,
    .project-view{
        display:none;
    }

    .project-description{
        grid-column:2;
    }

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

    .form-group.full{
        grid-column:auto;
    }

    .submit-button{
        grid-column:auto;
    }

    footer{
        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}

@media(max-width:500px){

    .hero-info h2{
        font-size:16px;
    }

    .hero-info p{
        font-size:9px;
    }

    .about-box{
        padding:30px;
    }

    .skill,
    .service,
    .achievement{
        padding:28px;
    }

    .contact h2{
        font-size:20vw;
    }

    .socials{
        gap:8px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}


/* =========================================================
   ADVANCED MOTION — SAME BLACK VK.DEV THEME
========================================================= */
.hero{--scroll-progress:0;--mouse-x:0;--mouse-y:0;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--mouse-x)*30px) calc(45% + var(--mouse-y)*30px),rgba(255,255,255,.075),transparent 18%),radial-gradient(circle at 20% 70%,rgba(255,255,255,.035),transparent 24%),radial-gradient(circle at 80% 25%,rgba(255,255,255,.025),transparent 22%);transform:translate3d(0,calc(var(--scroll-progress)*35px),0) scale(1.05);animation:atmosphereMove 12s ease-in-out infinite alternate}
@keyframes atmosphereMove{0%{transform:translate3d(-1%,0,0) scale(1.05);opacity:.55}100%{transform:translate3d(1%,2%,0) scale(1.1);opacity:1}}
.hero .portfolio::before{content:"";position:absolute;left:50%;top:50%;width:120vw;height:120vh;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(circle,black 0%,transparent 68%);animation:heroGrid 16s linear infinite}
@keyframes heroGrid{from{background-position:0 0}to{background-position:110px 110px}}
.portfolio{transform:translate3d(calc(-50% + var(--mouse-x)*6px),calc(-50% + var(--scroll-y,0px) + var(--mouse-y)*4px),0) scale(var(--scroll-scale,1));transition:transform .7s cubic-bezier(.16,1,.3,1)}
.orbit{transform:translate3d(-50%,calc(-50% + var(--scroll-y,0px)),0) scale(var(--scroll-scale,1));box-shadow:0 0 80px rgba(255,255,255,.018)}
.orbit.one::before,.orbit.two::before,.orbit.three::before{content:"";position:absolute;inset:12%;border:1px dashed rgba(255,255,255,.025);border-radius:50%;animation:innerOrbit 9s linear infinite reverse}
.orbit.two::before{inset:9%;animation-duration:13s}.orbit.three::before{inset:16%;animation-duration:17s}
@keyframes innerOrbit{to{transform:rotate(360deg)}}
.person-wrap{transform:translate3d(0,0,0);animation:personStage 6s ease-in-out infinite}
@keyframes personStage{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.person{transform:translate3d(-50%,var(--scroll-y,0px),0) scale(var(--scroll-scale,1)) rotateZ(calc(var(--scroll-rotate,0deg) + var(--mouse-rotate,0deg)));animation:personWalkFloat 4.8s ease-in-out infinite;transform-origin:50% 100%;will-change:transform}
@keyframes personWalkFloat{0%,100%{margin-top:0}25%{margin-top:-3px;transform-origin:48% 100%}50%{margin-top:-8px;transform-origin:52% 100%}75%{margin-top:-3px;transform-origin:49% 100%}}
.person-wrap::after{content:"";position:absolute;left:50%;bottom:5%;width:min(34vw,390px);height:28px;transform:translateX(-50%);border-radius:50%;background:rgba(255,255,255,.08);filter:blur(22px);opacity:.35;animation:groundShadow 4.8s ease-in-out infinite;pointer-events:none}
@keyframes groundShadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.28}50%{transform:translateX(-50%) scaleX(.78);opacity:.16}}
.code{margin-left:0;margin-top:0;transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) + var(--random-y,0px)),0) rotate(var(--scroll-rotate,0deg));transition:transform .8s cubic-bezier(.16,1,.3,1)}
@keyframes codeFloat{0%,100%{transform:translate3d(var(--random-x,0px),var(--scroll-y,0px),0) rotate(var(--scroll-rotate,0deg))}50%{transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) - 14px),0) rotate(calc(var(--scroll-rotate,0deg) + 2deg))}}
.code::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:#fff;opacity:.18;animation:codeScan 2.8s ease-in-out infinite;pointer-events:none}
@keyframes codeScan{0%,100%{transform:translateY(-100%);opacity:0}30%{opacity:.4}70%{transform:translateY(100%);opacity:0}}
.hero-info{animation:slideLeft 1.5s .7s both,heroInfoFloat 6s 2.2s ease-in-out infinite}
@keyframes heroInfoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-button{animation:buttonAppear 1.5s .9s both,buttonPulse 3.5s 2s ease-in-out infinite}
.scroll{animation:scrollFloat 2.5s ease-in-out infinite}
@keyframes scrollFloat{0%,100%{transform:translateX(-50%) translateY(0);opacity:.65}50%{transform:translateX(-50%) translateY(7px);opacity:1}}
section[id]{scroll-margin-top:85px}
@media(max-width:800px){.hero .portfolio::before{background-size:38px 38px}.person{height:68vh}.person-wrap::after{width:58vw}.hero-info{bottom:78px;left:5vw}.hero-button{width:100px;height:100px;right:5vw;bottom:68px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* =========================================================
   GLOBAL
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

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

button,
input,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
}

::selection{
    background:#fff;
    color:#000;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#777;
}

/* =========================================================
   GRID BACKGROUND
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:.035;

    background-image:
    linear-gradient(#fff 1px,transparent 1px),
    linear-gradient(90deg,#fff 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:60px 60px;
    }
}

/* =========================================================
   LOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:10000;

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

    transition:1s ease;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
}

.loader-logo{
    font-size:clamp(40px,8vw,100px);
    font-weight:900;
    letter-spacing:-6px;

    animation:loaderPulse 1s infinite alternate;
}

.loader-logo span{
    opacity:.3;
}

.loader-line{
    width:150px;
    height:1px;
    background:#333;
    margin:25px auto 0;
    overflow:hidden;
}

.loader-line::after{
    content:"";
    display:block;
    width:40%;
    height:100%;
    background:#fff;

    animation:loaderLine 1.2s infinite;
}

@keyframes loaderPulse{
    from{
        opacity:.3;
        transform:scale(.94);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes loaderLine{
    from{
        transform:translateX(-150px);
    }

    to{
        transform:translateX(250px);
    }
}

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

.cursor{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;

    position:fixed;
    pointer-events:none;
    z-index:10001;

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

    transition:
        width .3s,
        height .3s,
        background .3s;
}

.cursor-ring{
    width:38px;
    height:38px;

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

    position:fixed;
    pointer-events:none;
    z-index:10000;

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

    transition:.15s ease-out;
}

.cursor.big{
    width:48px;
    height:48px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(5px);
}

@media(max-width:800px){

    .cursor,
    .cursor-ring{
        display:none;
    }

}

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

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:85px;

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

    padding:0 6vw;

    z-index:500;

    background:rgba(5,5,5,.45);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.03);
}

.logo{
    font-size:24px;
    font-weight:900;
    letter-spacing:-1px;
}

.logo span{
    opacity:.3;
}

nav{
    display:flex;
    align-items:center;
    gap:32px;
}

nav a{
    position:relative;

    font-size:10px;
    letter-spacing:2px;

    color:#777;

    transition:.3s;
}

nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-9px;

    width:0;
    height:1px;

    background:#fff;

    transition:.4s;
}

nav a:hover{
    color:#fff;
}

nav a:hover::after{
    width:100%;
}

.header-status{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:9px;
    letter-spacing:2px;

    color:#555;
}

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

    border-radius:50%;
    background:#fff;

    animation:statusPulse 1.5s infinite;
}

@keyframes statusPulse{
    0%,100%{
        opacity:.3;
        transform:scale(.8);
    }

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

.menu{
    display:none;

    border:0;
    background:none;

    color:#fff;

    font-size:24px;
}

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

.hero{
    min-height:100vh;
    height:100vh;

    position:relative;
    overflow:hidden;

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

.hero::after{
    content:"";

    position:absolute;
    inset:auto 0 0;

    height:180px;

    background:linear-gradient(
        transparent,
        #050505
    );

    z-index:15;
    pointer-events:none;
}

/* giant portfolio */

.portfolio{
    position:absolute;

    left:50%;
    top:50%;

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

    font-size:clamp(80px,17vw,290px);

    font-weight:900;

    letter-spacing:-.12em;
    line-height:.75;

    white-space:nowrap;

    z-index:2;

    color:transparent;

    -webkit-text-stroke:1px rgba(255,255,255,.15);

    background:
        linear-gradient(
            110deg,
            #222 0%,
            #fff 20%,
            #333 40%,
            #fff 60%,
            #222 80%
        );

    background-size:500% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        textFlow 7s linear infinite,
        textBreath 5s ease-in-out infinite;
}

@keyframes textFlow{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:500% center;
    }

}

@keyframes textBreath{

    0%,100%{
        letter-spacing:-.12em;
        opacity:.5;
    }

    50%{
        letter-spacing:-.08em;
        opacity:.9;
    }

}

/* =========================================================
   ORBITS
========================================================= */

.orbit{
    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;

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

    pointer-events:none;
}

.orbit.one{
    width:480px;
    height:480px;

    animation:spin 20s linear infinite;
}

.orbit.two{
    width:650px;
    height:650px;

    animation:spinReverse 27s linear infinite;
}

.orbit.three{
    width:820px;
    height:820px;

    animation:spin 35s linear infinite;
}

.orbit::after{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    background:#fff;

    border-radius:50%;

    top:0;
    left:50%;

    box-shadow:0 0 20px #fff;
}

@keyframes spin{

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

}

@keyframes spinReverse{

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

}

/* =========================================================
   PERSON
========================================================= */

.person-wrap{
    position:absolute;
    inset:0;

    z-index:10;

    pointer-events:none;
}

.person{
    position:absolute;

    left:50%;
    bottom:-20px;

    transform:translateX(-50%);

    height:78vh;
    max-height:750px;

    width:auto;

    object-fit:contain;

    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(.95)
        drop-shadow(0 30px 50px rgba(0,0,0,.9));

    animation:
        personFloat 5s ease-in-out infinite,
        personReveal 1.8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes personFloat{

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

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

}

@keyframes personReveal{

    from{
        opacity:0;

        transform:
            translateX(-50%)
            translateY(120px)
            scale(.9);

        filter:
            grayscale(100%)
            blur(12px)
            brightness(.3);
    }

    to{
        opacity:1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

        filter:
            grayscale(100%)
            contrast(1.15)
            brightness(.95)
            drop-shadow(0 30px 50px rgba(0,0,0,.9));
    }

}

/* =========================================================
   CODE FLOATING
========================================================= */

.code{
    position:absolute;

    padding:12px 18px;

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

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

    backdrop-filter:blur(15px);

    font-family:monospace;

    font-size:11px;

    color:#777;

    z-index:20;

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

.code.one{
    left:7%;
    top:30%;
}

.code.two{
    right:7%;
    top:25%;

    animation-delay:1s;
}

.code.three{
    right:12%;
    bottom:22%;

    animation-delay:2s;
}

.code.four{
    left:10%;
    bottom:25%;

    animation-delay:3s;
}

@keyframes codeFloat{

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

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

}

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

.hero-info{
    position:absolute;

    left:6vw;
    bottom:70px;

    z-index:30;

    animation:slideLeft 1.5s .7s both;
}

.hero-info small{
    color:#666;

    letter-spacing:4px;

    font-size:9px;
}

.hero-info h2{
    font-size:clamp(18px,2vw,30px);

    margin-top:9px;

    font-weight:500;
}

.hero-info p{
    color:#555;

    margin-top:8px;

    font-size:11px;
}

.typing{
    color:#aaa;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

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

}

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

.hero-button{
    position:absolute;

    right:6vw;
    bottom:65px;

    z-index:30;

    width:125px;
    height:125px;

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

    border-radius:50%;

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

    font-size:10px;
    letter-spacing:2px;

    transition:.5s;

    animation:buttonAppear 1.5s .9s both;
}

.hero-button::before{
    content:"";

    position:absolute;
    inset:8px;

    border:1px dashed rgba(255,255,255,.2);

    border-radius:50%;

    animation:spin 10s linear infinite;
}

.hero-button:hover{
    background:#fff;
    color:#000;

    transform:scale(1.1) rotate(8deg);
}

@keyframes buttonAppear{

    from{
        opacity:0;
        transform:scale(.3) rotate(-180deg);
    }

    to{
        opacity:1;
        transform:scale(1) rotate(0);
    }

}

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

.scroll{
    position:absolute;

    bottom:20px;
    left:50%;

    transform:translateX(-50%);

    font-size:8px;

    letter-spacing:3px;

    color:#444;

    z-index:30;
}

.scroll::after{
    content:"";

    display:block;

    width:1px;
    height:35px;

    background:#444;

    margin:10px auto 0;

    animation:scrollLine 1.5s infinite;
}

@keyframes scrollLine{

    0%{
        transform:scaleY(0);
        transform-origin:top;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
    }

    51%{
        transform-origin:bottom;
    }

    100%{
        transform:scaleY(0);
        transform-origin:bottom;
    }

}

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

section{
    min-height:100vh;

    padding:140px 8vw;

    position:relative;
}

.section-label{
    font-size:10px;

    color:#555;

    letter-spacing:4px;

    margin-bottom:30px;
}

.section-title{
    font-size:clamp(50px,8vw,130px);

    line-height:.82;

    letter-spacing:-.08em;

    font-weight:900;
}

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

.about{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10vw;

    align-items:center;
}

.about-text{
    color:#777;

    line-height:1.9;

    font-size:14px;
}

.about-text strong{
    color:#fff;
}

.about-description{
    margin-top:30px;
}

.about-box{
    border:1px solid #202020;

    padding:45px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.about-box::before{
    content:"01";

    position:absolute;

    right:20px;
    top:10px;

    font-size:90px;

    color:#101010;

    font-weight:900;
}

.about-box:hover{
    transform:translateY(-12px);

    border-color:#444;
}

.about-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;
}

.about-tag{
    border:1px solid #252525;

    padding:9px 14px;

    font-size:9px;

    letter-spacing:1px;

    color:#777;
}

/* =========================================================
   STATS
========================================================= */

.stats{
    display:grid;

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

    border-top:1px solid #202020;
    border-bottom:1px solid #202020;
}

.stat{
    padding:50px 25px;

    border-right:1px solid #202020;

    text-align:center;
}

.stat:last-child{
    border-right:0;
}

.stat-number{
    font-size:clamp(35px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;
}

.stat-label{
    margin-top:10px;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

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

.skills{
    background:#080808;
}

.skill-container{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.skill{
    min-height:250px;

    border:1px solid #1d1d1d;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.skill::before{
    content:"";

    position:absolute;

    width:0;
    height:2px;

    left:0;
    top:0;

    background:#fff;

    transition:.6s;
}

.skill:hover::before{
    width:100%;
}

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

    border-color:#444;
}

.skill-number{
    font-size:10px;

    color:#555;
}

.skill-icon{
    position:absolute;

    right:30px;
    top:30px;

    font-size:28px;

    opacity:.3;
}

.skill h3{
    margin-top:45px;

    font-size:24px;
}

.skill p{
    margin-top:14px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

.skill-bar{
    height:2px;

    background:#1c1c1c;

    margin-top:25px;

    overflow:hidden;
}

.skill-bar span{
    display:block;

    height:100%;

    width:0;

    background:#fff;

    transition:1.5s ease;
}

.reveal.active .skill-bar span{
    width:var(--skill);
}

/* =========================================================
   TECHNOLOGY MARQUEE
========================================================= */

.marquee{
    overflow:hidden;

    border-top:1px solid #1d1d1d;
    border-bottom:1px solid #1d1d1d;

    padding:25px 0;

    background:#050505;
}

.marquee-track{
    display:flex;

    width:max-content;

    animation:marquee 25s linear infinite;
}

.marquee span{
    font-size:13px;

    color:#444;

    letter-spacing:3px;

    margin:0 35px;

    white-space:nowrap;
}

@keyframes marquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* =========================================================
   SERVICES
========================================================= */

.services-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.service{
    border:1px solid #202020;

    padding:40px;

    min-height:280px;

    position:relative;

    transition:.5s;
}

.service:hover{
    background:#0c0c0c;

    transform:translateY(-8px);

    border-color:#444;
}

.service-number{
    color:#555;

    font-size:10px;
}

.service h3{
    margin-top:60px;

    font-size:25px;
}

.service p{
    margin-top:15px;

    color:#666;

    line-height:1.8;

    font-size:11px;
}

.service-arrow{
    position:absolute;

    right:30px;
    bottom:25px;

    font-size:20px;

    color:#555;

    transition:.4s;
}

.service:hover .service-arrow{
    color:#fff;

    transform:translate(5px,-5px);
}

/* =========================================================
   EDUCATION
========================================================= */

.education{
    background:#080808;
}

.timeline{
    margin-top:90px;

    max-width:1000px;

    margin-left:auto;
    margin-right:auto;
}

.timeline-item{
    display:grid;

    grid-template-columns:150px 1fr;

    gap:40px;

    padding:40px 0;

    border-top:1px solid #202020;
}

.timeline-year{
    color:#555;

    font-size:11px;

    letter-spacing:2px;
}

.timeline-content h3{
    font-size:27px;

    margin-bottom:10px;
}

.timeline-content h4{
    color:#777;

    font-size:12px;

    font-weight:500;
}

.timeline-content p{
    margin-top:15px;

    color:#555;

    line-height:1.8;

    font-size:11px;

    max-width:700px;
}

/* =========================================================
   PROJECTS
========================================================= */

.projects-title{
    display:flex;

    align-items:end;

    justify-content:space-between;
}

.projects-title span{
    font-size:10px;

    color:#555;

    letter-spacing:2px;
}

.filters{
    display:flex;

    gap:10px;

    margin-top:60px;

    flex-wrap:wrap;
}

.filter{
    background:transparent;

    color:#555;

    border:1px solid #222;

    padding:10px 17px;

    font-size:9px;

    letter-spacing:1px;

    transition:.3s;
}

.filter:hover,
.filter.active{
    background:#fff;

    color:#000;

    border-color:#fff;
}

.project-list{
    margin-top:30px;
}

.project{
    display:grid;

    grid-template-columns:80px 1fr 180px;

    align-items:center;

    gap:30px;

    padding:40px 0;

    border-top:1px solid #222;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.project:last-child{
    border-bottom:1px solid #222;
}

.project.hidden{
    display:none;
}

.project-number{
    color:#555;

    font-size:11px;
}

.project h3{
    font-size:clamp(24px,4vw,52px);

    font-weight:700;

    letter-spacing:-2px;

    transition:.5s;
}

.project-category{
    text-align:right;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

.project-description{
    grid-column:2 / 3;

    color:#555;

    font-size:11px;

    line-height:1.7;

    margin-top:-20px;
}

.project::after{
    content:"";

    position:absolute;

    left:-100%;

    bottom:0;

    width:100%;

    height:1px;

    background:#fff;

    transition:.7s;
}

.project:hover::after{
    left:0;
}

.project:hover h3{
    transform:translateX(20px);

    letter-spacing:-1px;
}

.project:hover{
    padding-left:15px;

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

.project-view{
    color:#777;

    font-size:9px;

    letter-spacing:2px;

    opacity:0;

    transition:.4s;
}

.project:hover .project-view{
    opacity:1;
}

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

.achievements{
    background:#080808;
}

.achievement-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.achievement{
    border:1px solid #202020;

    padding:35px;

    min-height:240px;

    transition:.5s;
}

.achievement:hover{
    transform:translateY(-10px);

    border-color:#444;
}

.achievement-icon{
    font-size:28px;

    opacity:.5;
}

.achievement h3{
    margin-top:35px;

    font-size:20px;
}

.achievement p{
    margin-top:12px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

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

.contact{
    min-height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.contact h2{
    font-size:clamp(55px,11vw,170px);

    line-height:.8;

    letter-spacing:-.1em;
}

.contact h2 span{
    display:block;

    color:transparent;

    -webkit-text-stroke:1px #555;

    transition:.5s;
}

.contact h2:hover span{
    color:#fff;

    -webkit-text-stroke:1px #fff;
}

.contact-subtitle{
    max-width:550px;

    margin-top:35px;

    color:#555;

    font-size:12px;

    line-height:1.8;
}

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

.contact-form{
    width:min(700px,100%);

    margin-top:55px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.form-group{
    position:relative;
}

.form-group.full{
    grid-column:1/-1;
}

.form-input{
    width:100%;

    padding:17px 18px;

    background:#080808;

    border:1px solid #222;

    color:#fff;

    outline:none;

    font-size:11px;

    transition:.3s;
}

.form-input:focus{
    border-color:#777;
}

textarea.form-input{
    height:130px;

    resize:vertical;
}

.submit-button{
    grid-column:1/-1;

    padding:17px;

    background:#fff;

    color:#000;

    border:0;

    font-size:10px;

    letter-spacing:2px;

    transition:.4s;
}

.submit-button:hover{
    background:#ccc;

    transform:translateY(-3px);
}

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

.socials{
    display:flex;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;

    justify-content:center;
}

.social{
    border:1px solid #252525;

    padding:12px 20px;

    font-size:9px;

    letter-spacing:1px;

    color:#666;

    transition:.4s;
}

.social:hover{
    border-color:#fff;

    color:#fff;

    transform:translateY(-3px);
}

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

footer{
    border-top:1px solid #181818;

    padding:35px 8vw;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#555;

    font-size:9px;

    letter-spacing:1px;
}

.back-top{
    border:1px solid #222;

    padding:10px 15px;

    transition:.3s;
}

.back-top:hover{
    color:#fff;

    border-color:#555;
}

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

.reveal{
    opacity:0;

    transform:translateY(70px);

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

.reveal.active{
    opacity:1;

    transform:translateY(0);
}

.from-left{
    transform:translateX(-100px);
}

.from-left.active{
    transform:translateX(0);
}

.from-right{
    transform:translateX(100px);
}

.from-right.active{
    transform:translateX(0);
}

.zoom{
    transform:scale(.75);
}

.zoom.active{
    transform:scale(1);
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    right:25px;
    bottom:25px;

    padding:15px 22px;

    background:#fff;

    color:#000;

    font-size:10px;

    letter-spacing:1px;

    z-index:9000;

    transform:translateY(100px);

    opacity:0;

    transition:.4s;
}

.toast.show{
    transform:translateY(0);

    opacity:1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .header-status{
        display:none;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:800px){

    header{
        height:75px;

        padding:0 5vw;
    }

    nav{
        display:none;

        position:absolute;

        top:75px;
        left:0;

        width:100%;

        padding:30px;

        background:#050505;

        border-bottom:1px solid #222;

        flex-direction:column;

        text-align:center;

        gap:25px;
    }

    nav.open{
        display:flex;
    }

    .menu{
        display:block;
    }

    .hero{
        min-height:680px;
    }

    .portfolio{
        font-size:21vw;
    }

    .person{
        height:64vh;
    }

    .orbit.one{
        width:350px;
        height:350px;
    }

    .orbit.two{
        width:470px;
        height:470px;
    }

    .orbit.three{
        width:600px;
        height:600px;
    }

    .code{
        display:none;
    }

    .hero-info{
        left:5vw;
        bottom:35px;
    }

    .hero-button{
        right:5vw;
        bottom:30px;

        width:85px;
        height:85px;

        font-size:7px;
    }

    section{
        padding:100px 6vw;
    }

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

        gap:50px;
    }

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

    .stat{
        border-bottom:1px solid #202020;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:1fr;
    }

    .timeline-item{
        grid-template-columns:1fr;

        gap:15px;
    }

    .projects-title{
        display:block;
    }

    .projects-title span{
        display:block;

        margin-top:20px;
    }

    .project{
        grid-template-columns:40px 1fr;
    }

    .project-category,
    .project-view{
        display:none;
    }

    .project-description{
        grid-column:2;
    }

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

    .form-group.full{
        grid-column:auto;
    }

    .submit-button{
        grid-column:auto;
    }

    footer{
        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}

@media(max-width:500px){

    .hero-info h2{
        font-size:16px;
    }

    .hero-info p{
        font-size:9px;
    }

    .about-box{
        padding:30px;
    }

    .skill,
    .service,
    .achievement{
        padding:28px;
    }

    .contact h2{
        font-size:20vw;
    }

    .socials{
        gap:8px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}


/* =========================================================
   ADVANCED MOTION — SAME BLACK VK.DEV THEME
========================================================= */
.hero{--scroll-progress:0;--mouse-x:0;--mouse-y:0;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--mouse-x)*30px) calc(45% + var(--mouse-y)*30px),rgba(255,255,255,.075),transparent 18%),radial-gradient(circle at 20% 70%,rgba(255,255,255,.035),transparent 24%),radial-gradient(circle at 80% 25%,rgba(255,255,255,.025),transparent 22%);transform:translate3d(0,calc(var(--scroll-progress)*35px),0) scale(1.05);animation:atmosphereMove 12s ease-in-out infinite alternate}
@keyframes atmosphereMove{0%{transform:translate3d(-1%,0,0) scale(1.05);opacity:.55}100%{transform:translate3d(1%,2%,0) scale(1.1);opacity:1}}
.hero .portfolio::before{content:"";position:absolute;left:50%;top:50%;width:120vw;height:120vh;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(circle,black 0%,transparent 68%);animation:heroGrid 16s linear infinite}
@keyframes heroGrid{from{background-position:0 0}to{background-position:110px 110px}}
.portfolio{transform:translate3d(calc(-50% + var(--mouse-x)*6px),calc(-50% + var(--scroll-y,0px) + var(--mouse-y)*4px),0) scale(var(--scroll-scale,1));transition:transform .7s cubic-bezier(.16,1,.3,1)}
.orbit{transform:translate3d(-50%,calc(-50% + var(--scroll-y,0px)),0) scale(var(--scroll-scale,1));box-shadow:0 0 80px rgba(255,255,255,.018)}
.orbit.one::before,.orbit.two::before,.orbit.three::before{content:"";position:absolute;inset:12%;border:1px dashed rgba(255,255,255,.025);border-radius:50%;animation:innerOrbit 9s linear infinite reverse}
.orbit.two::before{inset:9%;animation-duration:13s}.orbit.three::before{inset:16%;animation-duration:17s}
@keyframes innerOrbit{to{transform:rotate(360deg)}}
.person-wrap{transform:translate3d(0,0,0);animation:personStage 6s ease-in-out infinite}
@keyframes personStage{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.person{transform:translate3d(-50%,var(--scroll-y,0px),0) scale(var(--scroll-scale,1)) rotateZ(calc(var(--scroll-rotate,0deg) + var(--mouse-rotate,0deg)));animation:personWalkFloat 4.8s ease-in-out infinite;transform-origin:50% 100%;will-change:transform}
@keyframes personWalkFloat{0%,100%{margin-top:0}25%{margin-top:-3px;transform-origin:48% 100%}50%{margin-top:-8px;transform-origin:52% 100%}75%{margin-top:-3px;transform-origin:49% 100%}}
.person-wrap::after{content:"";position:absolute;left:50%;bottom:5%;width:min(34vw,390px);height:28px;transform:translateX(-50%);border-radius:50%;background:rgba(255,255,255,.08);filter:blur(22px);opacity:.35;animation:groundShadow 4.8s ease-in-out infinite;pointer-events:none}
@keyframes groundShadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.28}50%{transform:translateX(-50%) scaleX(.78);opacity:.16}}
.code{margin-left:0;margin-top:0;transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) + var(--random-y,0px)),0) rotate(var(--scroll-rotate,0deg));transition:transform .8s cubic-bezier(.16,1,.3,1)}
@keyframes codeFloat{0%,100%{transform:translate3d(var(--random-x,0px),var(--scroll-y,0px),0) rotate(var(--scroll-rotate,0deg))}50%{transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) - 14px),0) rotate(calc(var(--scroll-rotate,0deg) + 2deg))}}
.code::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:#fff;opacity:.18;animation:codeScan 2.8s ease-in-out infinite;pointer-events:none}
@keyframes codeScan{0%,100%{transform:translateY(-100%);opacity:0}30%{opacity:.4}70%{transform:translateY(100%);opacity:0}}
.hero-info{animation:slideLeft 1.5s .7s both,heroInfoFloat 6s 2.2s ease-in-out infinite}
@keyframes heroInfoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-button{animation:buttonAppear 1.5s .9s both,buttonPulse 3.5s 2s ease-in-out infinite}
.scroll{animation:scrollFloat 2.5s ease-in-out infinite}
@keyframes scrollFloat{0%,100%{transform:translateX(-50%) translateY(0);opacity:.65}50%{transform:translateX(-50%) translateY(7px);opacity:1}}
section[id]{scroll-margin-top:85px}
@media(max-width:800px){.hero .portfolio::before{background-size:38px 38px}.person{height:68vh}.person-wrap::after{width:58vw}.hero-info{bottom:78px;left:5vw}.hero-button{width:100px;height:100px;right:5vw;bottom:68px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* =========================================================
   CINEMATIC VIJAY KANNAN TITLE CARD
   Same monochrome VK.DEV theme — no external libraries
========================================================= */
html{scroll-padding-top:90px}
body.intro-lock{overflow:hidden!important}
.cinematic-intro{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#030303;
    color:#fff;
    isolation:isolate;
}
.cinematic-intro::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 50% 48%,rgba(255,255,255,.11),transparent 12%),
      radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 42%),
      linear-gradient(180deg,#000 0%,#050505 50%,#000 100%);
    animation:introAtmosphere 4.8s ease-in-out both;
    z-index:-4;
}
.intro-grid{
    position:absolute;
    inset:-20%;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:60px 60px;
    transform:perspective(700px) rotateX(62deg) scale(1.5) translateY(18%);
    transform-origin:center bottom;
    mask-image:linear-gradient(to top,black,transparent 75%);
    animation:introGridMove 7s linear infinite;
    z-index:-3;
}
.intro-noise{
    position:absolute;
    inset:-50%;
    opacity:.065;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    animation:introNoise .18s steps(2) infinite;
    pointer-events:none;
    z-index:5;
}
.intro-flash{
    position:absolute;
    inset:0;
    background:#fff;
    opacity:0;
    pointer-events:none;
    z-index:4;
    animation:introFlash 1s .72s ease-out both;
}
.intro-content{
    position:relative;
    width:min(92vw,900px);
    text-align:center;
    z-index:3;
}
.intro-vk{
    font-size:clamp(74px,15vw,190px);
    line-height:.72;
    font-weight:900;
    letter-spacing:-.09em;
    transform:scale(1.7);
    opacity:0;
    filter:blur(16px);
    animation:introVK 1.15s .25s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-rule{
    width:min(430px,55vw);
    height:1px;
    margin:30px auto 24px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
}
.intro-rule span{
    display:block;
    width:100%;
    height:100%;
    background:#fff;
    transform:translateX(-101%);
    animation:introRule 1s .95s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-name{
    display:flex;
    justify-content:center;
    gap:clamp(12px,2vw,28px);
    font-size:clamp(28px,6vw,76px);
    line-height:.9;
    font-weight:800;
    letter-spacing:.12em;
    overflow:hidden;
}
.intro-name span{
    display:block;
    opacity:0;
    transform:translateY(115%) skewY(7deg);
    animation:introName 1s 1.15s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-name span:nth-child(2){animation-delay:1.3s}
.intro-role{
    margin-top:25px;
    font-size:clamp(8px,1vw,12px);
    letter-spacing:.48em;
    color:#999;
    opacity:0;
    transform:translateY(15px);
    animation:introRole .9s 1.75s ease forwards;
}
.intro-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:36px;
    font-size:8px;
    letter-spacing:.28em;
    color:#666;
    opacity:0;
    animation:introStatus .8s 2.2s ease forwards;
}
.intro-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 16px rgba(255,255,255,.8);
    animation:introDot 1.1s ease-in-out infinite;
}
.intro-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}
.intro-particle{
    position:absolute;
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:#fff;
    opacity:0;
    animation:introParticle 2.8s var(--delay) ease-out infinite;
}
.intro-skip{
    position:absolute;
    right:28px;
    bottom:25px;
    z-index:10;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.025);
    color:#777;
    padding:10px 13px;
    font:600 8px Inter,sans-serif;
    letter-spacing:.18em;
    cursor:pointer;
    transition:.3s ease;
}
.intro-skip span{
    margin-left:7px;
    padding:3px 5px;
    border:1px solid rgba(255,255,255,.15);
    color:#aaa;
}
.intro-skip:hover{
    color:#fff;
    border-color:rgba(255,255,255,.55);
    transform:translateY(-3px);
}
.cinematic-intro.intro-out{
    animation:introExit 1.05s cubic-bezier(.76,0,.24,1) forwards;
}
.cinematic-intro.intro-out .intro-content{
    animation:introContentExit .65s ease-in forwards;
}
@keyframes introAtmosphere{0%{transform:scale(1.2);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:.85}}
@keyframes introGridMove{to{background-position:0 120px,120px 0}}
@keyframes introNoise{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes introFlash{0%,60%{opacity:0}65%{opacity:.75}100%{opacity:0}}
@keyframes introVK{0%{opacity:0;transform:scale(1.7);filter:blur(16px)}65%{opacity:1;transform:scale(.96);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes introRule{to{transform:translateX(0)}}
@keyframes introName{to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes introRole{to{opacity:1;transform:translateY(0)}}
@keyframes introStatus{to{opacity:1}}
@keyframes introDot{50%{opacity:.25;transform:scale(.65)}}
@keyframes introParticle{0%{opacity:0;transform:translate3d(0,0,0) scale(.2)}18%{opacity:.7}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.4)}}
@keyframes introExit{0%{opacity:1;clip-path:inset(0)}55%{opacity:1;clip-path:inset(0 0 52% 0)}100%{opacity:0;clip-path:inset(50% 0 50% 0);visibility:hidden}}
@keyframes introContentExit{to{transform:translateY(-35px) scale(1.05);opacity:0;filter:blur(8px)}}
@media(max-width:600px){
    .intro-name{flex-direction:column;gap:4px;letter-spacing:.08em}
    .intro-rule{margin:23px auto 20px}
    .intro-role{letter-spacing:.3em}
    .intro-skip{right:15px;bottom:15px}
}
@media(prefers-reduced-motion:reduce){
    .cinematic-intro *{animation-duration:.01ms!important;animation-delay:0ms!important}
}
/* =========================================================
   GLOBAL
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

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

button,
input,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
}

::selection{
    background:#fff;
    color:#000;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#777;
}

/* =========================================================
   GRID BACKGROUND
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:.035;

    background-image:
    linear-gradient(#fff 1px,transparent 1px),
    linear-gradient(90deg,#fff 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:60px 60px;
    }
}

/* =========================================================
   LOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:10000;

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

    transition:1s ease;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
}

.loader-logo{
    font-size:clamp(40px,8vw,100px);
    font-weight:900;
    letter-spacing:-6px;

    animation:loaderPulse 1s infinite alternate;
}

.loader-logo span{
    opacity:.3;
}

.loader-line{
    width:150px;
    height:1px;
    background:#333;
    margin:25px auto 0;
    overflow:hidden;
}

.loader-line::after{
    content:"";
    display:block;
    width:40%;
    height:100%;
    background:#fff;

    animation:loaderLine 1.2s infinite;
}

@keyframes loaderPulse{
    from{
        opacity:.3;
        transform:scale(.94);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes loaderLine{
    from{
        transform:translateX(-150px);
    }

    to{
        transform:translateX(250px);
    }
}

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

.cursor{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;

    position:fixed;
    pointer-events:none;
    z-index:10001;

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

    transition:
        width .3s,
        height .3s,
        background .3s;
}

.cursor-ring{
    width:38px;
    height:38px;

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

    position:fixed;
    pointer-events:none;
    z-index:10000;

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

    transition:.15s ease-out;
}

.cursor.big{
    width:48px;
    height:48px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(5px);
}

@media(max-width:800px){

    .cursor,
    .cursor-ring{
        display:none;
    }

}

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

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:85px;

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

    padding:0 6vw;

    z-index:500;

    background:rgba(5,5,5,.45);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.03);
}

.logo{
    font-size:24px;
    font-weight:900;
    letter-spacing:-1px;
}

.logo span{
    opacity:.3;
}

nav{
    display:flex;
    align-items:center;
    gap:32px;
}

nav a{
    position:relative;

    font-size:10px;
    letter-spacing:2px;

    color:#777;

    transition:.3s;
}

nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-9px;

    width:0;
    height:1px;

    background:#fff;

    transition:.4s;
}

nav a:hover{
    color:#fff;
}

nav a:hover::after{
    width:100%;
}

.header-status{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:9px;
    letter-spacing:2px;

    color:#555;
}

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

    border-radius:50%;
    background:#fff;

    animation:statusPulse 1.5s infinite;
}

@keyframes statusPulse{
    0%,100%{
        opacity:.3;
        transform:scale(.8);
    }

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

.menu{
    display:none;

    border:0;
    background:none;

    color:#fff;

    font-size:24px;
}

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

.hero{
    min-height:100vh;
    height:100vh;

    position:relative;
    overflow:hidden;

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

.hero::after{
    content:"";

    position:absolute;
    inset:auto 0 0;

    height:180px;

    background:linear-gradient(
        transparent,
        #050505
    );

    z-index:15;
    pointer-events:none;
}

/* giant portfolio */

.portfolio{
    position:absolute;

    left:50%;
    top:50%;

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

    font-size:clamp(80px,17vw,290px);

    font-weight:900;

    letter-spacing:-.12em;
    line-height:.75;

    white-space:nowrap;

    z-index:2;

    color:transparent;

    -webkit-text-stroke:1px rgba(255,255,255,.15);

    background:
        linear-gradient(
            110deg,
            #222 0%,
            #fff 20%,
            #333 40%,
            #fff 60%,
            #222 80%
        );

    background-size:500% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        textFlow 7s linear infinite,
        textBreath 5s ease-in-out infinite;
}

@keyframes textFlow{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:500% center;
    }

}

@keyframes textBreath{

    0%,100%{
        letter-spacing:-.12em;
        opacity:.5;
    }

    50%{
        letter-spacing:-.08em;
        opacity:.9;
    }

}

/* =========================================================
   ORBITS
========================================================= */

.orbit{
    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;

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

    pointer-events:none;
}

.orbit.one{
    width:480px;
    height:480px;

    animation:spin 20s linear infinite;
}

.orbit.two{
    width:650px;
    height:650px;

    animation:spinReverse 27s linear infinite;
}

.orbit.three{
    width:820px;
    height:820px;

    animation:spin 35s linear infinite;
}

.orbit::after{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    background:#fff;

    border-radius:50%;

    top:0;
    left:50%;

    box-shadow:0 0 20px #fff;
}

@keyframes spin{

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

}

@keyframes spinReverse{

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

}

/* =========================================================
   PERSON
========================================================= */

.person-wrap{
    position:absolute;
    inset:0;

    z-index:10;

    pointer-events:none;
}

.person{
    position:absolute;

    left:50%;
    bottom:-20px;

    transform:translateX(-50%);

    height:78vh;
    max-height:750px;

    width:auto;

    object-fit:contain;

    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(.95)
        drop-shadow(0 30px 50px rgba(0,0,0,.9));

    animation:
        personFloat 5s ease-in-out infinite,
        personReveal 1.8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes personFloat{

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

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

}

@keyframes personReveal{

    from{
        opacity:0;

        transform:
            translateX(-50%)
            translateY(120px)
            scale(.9);

        filter:
            grayscale(100%)
            blur(12px)
            brightness(.3);
    }

    to{
        opacity:1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

        filter:
            grayscale(100%)
            contrast(1.15)
            brightness(.95)
            drop-shadow(0 30px 50px rgba(0,0,0,.9));
    }

}

/* =========================================================
   CODE FLOATING
========================================================= */

.code{
    position:absolute;

    padding:12px 18px;

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

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

    backdrop-filter:blur(15px);

    font-family:monospace;

    font-size:11px;

    color:#777;

    z-index:20;

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

.code.one{
    left:7%;
    top:30%;
}

.code.two{
    right:7%;
    top:25%;

    animation-delay:1s;
}

.code.three{
    right:12%;
    bottom:22%;

    animation-delay:2s;
}

.code.four{
    left:10%;
    bottom:25%;

    animation-delay:3s;
}

@keyframes codeFloat{

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

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

}

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

.hero-info{
    position:absolute;

    left:6vw;
    bottom:70px;

    z-index:30;

    animation:slideLeft 1.5s .7s both;
}

.hero-info small{
    color:#666;

    letter-spacing:4px;

    font-size:9px;
}

.hero-info h2{
    font-size:clamp(18px,2vw,30px);

    margin-top:9px;

    font-weight:500;
}

.hero-info p{
    color:#555;

    margin-top:8px;

    font-size:11px;
}

.typing{
    color:#aaa;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

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

}

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

.hero-button{
    position:absolute;

    right:6vw;
    bottom:65px;

    z-index:30;

    width:125px;
    height:125px;

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

    border-radius:50%;

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

    font-size:10px;
    letter-spacing:2px;

    transition:.5s;

    animation:buttonAppear 1.5s .9s both;
}

.hero-button::before{
    content:"";

    position:absolute;
    inset:8px;

    border:1px dashed rgba(255,255,255,.2);

    border-radius:50%;

    animation:spin 10s linear infinite;
}

.hero-button:hover{
    background:#fff;
    color:#000;

    transform:scale(1.1) rotate(8deg);
}

@keyframes buttonAppear{

    from{
        opacity:0;
        transform:scale(.3) rotate(-180deg);
    }

    to{
        opacity:1;
        transform:scale(1) rotate(0);
    }

}

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

.scroll{
    position:absolute;

    bottom:20px;
    left:50%;

    transform:translateX(-50%);

    font-size:8px;

    letter-spacing:3px;

    color:#444;

    z-index:30;
}

.scroll::after{
    content:"";

    display:block;

    width:1px;
    height:35px;

    background:#444;

    margin:10px auto 0;

    animation:scrollLine 1.5s infinite;
}

@keyframes scrollLine{

    0%{
        transform:scaleY(0);
        transform-origin:top;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
    }

    51%{
        transform-origin:bottom;
    }

    100%{
        transform:scaleY(0);
        transform-origin:bottom;
    }

}

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

section{
    min-height:100vh;

    padding:140px 8vw;

    position:relative;
}

.section-label{
    font-size:10px;

    color:#555;

    letter-spacing:4px;

    margin-bottom:30px;
}

.section-title{
    font-size:clamp(50px,8vw,130px);

    line-height:.82;

    letter-spacing:-.08em;

    font-weight:900;
}

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

.about{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10vw;

    align-items:center;
}

.about-text{
    color:#777;

    line-height:1.9;

    font-size:14px;
}

.about-text strong{
    color:#fff;
}

.about-description{
    margin-top:30px;
}

.about-box{
    border:1px solid #202020;

    padding:45px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.about-box::before{
    content:"01";

    position:absolute;

    right:20px;
    top:10px;

    font-size:90px;

    color:#101010;

    font-weight:900;
}

.about-box:hover{
    transform:translateY(-12px);

    border-color:#444;
}

.about-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;
}

.about-tag{
    border:1px solid #252525;

    padding:9px 14px;

    font-size:9px;

    letter-spacing:1px;

    color:#777;
}

/* =========================================================
   STATS
========================================================= */

.stats{
    display:grid;

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

    border-top:1px solid #202020;
    border-bottom:1px solid #202020;
}

.stat{
    padding:50px 25px;

    border-right:1px solid #202020;

    text-align:center;
}

.stat:last-child{
    border-right:0;
}

.stat-number{
    font-size:clamp(35px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;
}

.stat-label{
    margin-top:10px;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

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

.skills{
    background:#080808;
}

.skill-container{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.skill{
    min-height:250px;

    border:1px solid #1d1d1d;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.skill::before{
    content:"";

    position:absolute;

    width:0;
    height:2px;

    left:0;
    top:0;

    background:#fff;

    transition:.6s;
}

.skill:hover::before{
    width:100%;
}

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

    border-color:#444;
}

.skill-number{
    font-size:10px;

    color:#555;
}

.skill-icon{
    position:absolute;

    right:30px;
    top:30px;

    font-size:28px;

    opacity:.3;
}

.skill h3{
    margin-top:45px;

    font-size:24px;
}

.skill p{
    margin-top:14px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

.skill-bar{
    height:2px;

    background:#1c1c1c;

    margin-top:25px;

    overflow:hidden;
}

.skill-bar span{
    display:block;

    height:100%;

    width:0;

    background:#fff;

    transition:1.5s ease;
}

.reveal.active .skill-bar span{
    width:var(--skill);
}

/* =========================================================
   TECHNOLOGY MARQUEE
========================================================= */

.marquee{
    overflow:hidden;

    border-top:1px solid #1d1d1d;
    border-bottom:1px solid #1d1d1d;

    padding:25px 0;

    background:#050505;
}

.marquee-track{
    display:flex;

    width:max-content;

    animation:marquee 25s linear infinite;
}

.marquee span{
    font-size:13px;

    color:#444;

    letter-spacing:3px;

    margin:0 35px;

    white-space:nowrap;
}

@keyframes marquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* =========================================================
   SERVICES
========================================================= */

.services-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.service{
    border:1px solid #202020;

    padding:40px;

    min-height:280px;

    position:relative;

    transition:.5s;
}

.service:hover{
    background:#0c0c0c;

    transform:translateY(-8px);

    border-color:#444;
}

.service-number{
    color:#555;

    font-size:10px;
}

.service h3{
    margin-top:60px;

    font-size:25px;
}

.service p{
    margin-top:15px;

    color:#666;

    line-height:1.8;

    font-size:11px;
}

.service-arrow{
    position:absolute;

    right:30px;
    bottom:25px;

    font-size:20px;

    color:#555;

    transition:.4s;
}

.service:hover .service-arrow{
    color:#fff;

    transform:translate(5px,-5px);
}

/* =========================================================
   EDUCATION
========================================================= */

.education{
    background:#080808;
}

.timeline{
    margin-top:90px;

    max-width:1000px;

    margin-left:auto;
    margin-right:auto;
}

.timeline-item{
    display:grid;

    grid-template-columns:150px 1fr;

    gap:40px;

    padding:40px 0;

    border-top:1px solid #202020;
}

.timeline-year{
    color:#555;

    font-size:11px;

    letter-spacing:2px;
}

.timeline-content h3{
    font-size:27px;

    margin-bottom:10px;
}

.timeline-content h4{
    color:#777;

    font-size:12px;

    font-weight:500;
}

.timeline-content p{
    margin-top:15px;

    color:#555;

    line-height:1.8;

    font-size:11px;

    max-width:700px;
}

/* =========================================================
   PROJECTS
========================================================= */

.projects-title{
    display:flex;

    align-items:end;

    justify-content:space-between;
}

.projects-title span{
    font-size:10px;

    color:#555;

    letter-spacing:2px;
}

.filters{
    display:flex;

    gap:10px;

    margin-top:60px;

    flex-wrap:wrap;
}

.filter{
    background:transparent;

    color:#555;

    border:1px solid #222;

    padding:10px 17px;

    font-size:9px;

    letter-spacing:1px;

    transition:.3s;
}

.filter:hover,
.filter.active{
    background:#fff;

    color:#000;

    border-color:#fff;
}

.project-list{
    margin-top:30px;
}

.project{
    display:grid;

    grid-template-columns:80px 1fr 180px;

    align-items:center;

    gap:30px;

    padding:40px 0;

    border-top:1px solid #222;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.project:last-child{
    border-bottom:1px solid #222;
}

.project.hidden{
    display:none;
}

.project-number{
    color:#555;

    font-size:11px;
}

.project h3{
    font-size:clamp(24px,4vw,52px);

    font-weight:700;

    letter-spacing:-2px;

    transition:.5s;
}

.project-category{
    text-align:right;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

.project-description{
    grid-column:2 / 3;

    color:#555;

    font-size:11px;

    line-height:1.7;

    margin-top:-20px;
}

.project::after{
    content:"";

    position:absolute;

    left:-100%;

    bottom:0;

    width:100%;

    height:1px;

    background:#fff;

    transition:.7s;
}

.project:hover::after{
    left:0;
}

.project:hover h3{
    transform:translateX(20px);

    letter-spacing:-1px;
}

.project:hover{
    padding-left:15px;

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

.project-view{
    color:#777;

    font-size:9px;

    letter-spacing:2px;

    opacity:0;

    transition:.4s;
}

.project:hover .project-view{
    opacity:1;
}

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

.achievements{
    background:#080808;
}

.achievement-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.achievement{
    border:1px solid #202020;

    padding:35px;

    min-height:240px;

    transition:.5s;
}

.achievement:hover{
    transform:translateY(-10px);

    border-color:#444;
}

.achievement-icon{
    font-size:28px;

    opacity:.5;
}

.achievement h3{
    margin-top:35px;

    font-size:20px;
}

.achievement p{
    margin-top:12px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

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

.contact{
    min-height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.contact h2{
    font-size:clamp(55px,11vw,170px);

    line-height:.8;

    letter-spacing:-.1em;
}

.contact h2 span{
    display:block;

    color:transparent;

    -webkit-text-stroke:1px #555;

    transition:.5s;
}

.contact h2:hover span{
    color:#fff;

    -webkit-text-stroke:1px #fff;
}

.contact-subtitle{
    max-width:550px;

    margin-top:35px;

    color:#555;

    font-size:12px;

    line-height:1.8;
}

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

.contact-form{
    width:min(700px,100%);

    margin-top:55px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.form-group{
    position:relative;
}

.form-group.full{
    grid-column:1/-1;
}

.form-input{
    width:100%;

    padding:17px 18px;

    background:#080808;

    border:1px solid #222;

    color:#fff;

    outline:none;

    font-size:11px;

    transition:.3s;
}

.form-input:focus{
    border-color:#777;
}

textarea.form-input{
    height:130px;

    resize:vertical;
}

.submit-button{
    grid-column:1/-1;

    padding:17px;

    background:#fff;

    color:#000;

    border:0;

    font-size:10px;

    letter-spacing:2px;

    transition:.4s;
}

.submit-button:hover{
    background:#ccc;

    transform:translateY(-3px);
}

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

.socials{
    display:flex;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;

    justify-content:center;
}

.social{
    border:1px solid #252525;

    padding:12px 20px;

    font-size:9px;

    letter-spacing:1px;

    color:#666;

    transition:.4s;
}

.social:hover{
    border-color:#fff;

    color:#fff;

    transform:translateY(-3px);
}

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

footer{
    border-top:1px solid #181818;

    padding:35px 8vw;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#555;

    font-size:9px;

    letter-spacing:1px;
}

.back-top{
    border:1px solid #222;

    padding:10px 15px;

    transition:.3s;
}

.back-top:hover{
    color:#fff;

    border-color:#555;
}

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

.reveal{
    opacity:0;

    transform:translateY(70px);

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

.reveal.active{
    opacity:1;

    transform:translateY(0);
}

.from-left{
    transform:translateX(-100px);
}

.from-left.active{
    transform:translateX(0);
}

.from-right{
    transform:translateX(100px);
}

.from-right.active{
    transform:translateX(0);
}

.zoom{
    transform:scale(.75);
}

.zoom.active{
    transform:scale(1);
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    right:25px;
    bottom:25px;

    padding:15px 22px;

    background:#fff;

    color:#000;

    font-size:10px;

    letter-spacing:1px;

    z-index:9000;

    transform:translateY(100px);

    opacity:0;

    transition:.4s;
}

.toast.show{
    transform:translateY(0);

    opacity:1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .header-status{
        display:none;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:800px){

    header{
        height:75px;

        padding:0 5vw;
    }

    nav{
        display:none;

        position:absolute;

        top:75px;
        left:0;

        width:100%;

        padding:30px;

        background:#050505;

        border-bottom:1px solid #222;

        flex-direction:column;

        text-align:center;

        gap:25px;
    }

    nav.open{
        display:flex;
    }

    .menu{
        display:block;
    }

    .hero{
        min-height:680px;
    }

    .portfolio{
        font-size:21vw;
    }

    .person{
        height:64vh;
    }

    .orbit.one{
        width:350px;
        height:350px;
    }

    .orbit.two{
        width:470px;
        height:470px;
    }

    .orbit.three{
        width:600px;
        height:600px;
    }

    .code{
        display:none;
    }

    .hero-info{
        left:5vw;
        bottom:35px;
    }

    .hero-button{
        right:5vw;
        bottom:30px;

        width:85px;
        height:85px;

        font-size:7px;
    }

    section{
        padding:100px 6vw;
    }

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

        gap:50px;
    }

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

    .stat{
        border-bottom:1px solid #202020;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:1fr;
    }

    .timeline-item{
        grid-template-columns:1fr;

        gap:15px;
    }

    .projects-title{
        display:block;
    }

    .projects-title span{
        display:block;

        margin-top:20px;
    }

    .project{
        grid-template-columns:40px 1fr;
    }

    .project-category,
    .project-view{
        display:none;
    }

    .project-description{
        grid-column:2;
    }

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

    .form-group.full{
        grid-column:auto;
    }

    .submit-button{
        grid-column:auto;
    }

    footer{
        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}

@media(max-width:500px){

    .hero-info h2{
        font-size:16px;
    }

    .hero-info p{
        font-size:9px;
    }

    .about-box{
        padding:30px;
    }

    .skill,
    .service,
    .achievement{
        padding:28px;
    }

    .contact h2{
        font-size:20vw;
    }

    .socials{
        gap:8px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}


/* =========================================================
   ADVANCED MOTION — SAME BLACK VK.DEV THEME
========================================================= */
.hero{--scroll-progress:0;--mouse-x:0;--mouse-y:0;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--mouse-x)*30px) calc(45% + var(--mouse-y)*30px),rgba(255,255,255,.075),transparent 18%),radial-gradient(circle at 20% 70%,rgba(255,255,255,.035),transparent 24%),radial-gradient(circle at 80% 25%,rgba(255,255,255,.025),transparent 22%);transform:translate3d(0,calc(var(--scroll-progress)*35px),0) scale(1.05);animation:atmosphereMove 12s ease-in-out infinite alternate}
@keyframes atmosphereMove{0%{transform:translate3d(-1%,0,0) scale(1.05);opacity:.55}100%{transform:translate3d(1%,2%,0) scale(1.1);opacity:1}}
.hero .portfolio::before{content:"";position:absolute;left:50%;top:50%;width:120vw;height:120vh;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(circle,black 0%,transparent 68%);animation:heroGrid 16s linear infinite}
@keyframes heroGrid{from{background-position:0 0}to{background-position:110px 110px}}
.portfolio{transform:translate3d(calc(-50% + var(--mouse-x)*6px),calc(-50% + var(--scroll-y,0px) + var(--mouse-y)*4px),0) scale(var(--scroll-scale,1));transition:transform .7s cubic-bezier(.16,1,.3,1)}
.orbit{transform:translate3d(-50%,calc(-50% + var(--scroll-y,0px)),0) scale(var(--scroll-scale,1));box-shadow:0 0 80px rgba(255,255,255,.018)}
.orbit.one::before,.orbit.two::before,.orbit.three::before{content:"";position:absolute;inset:12%;border:1px dashed rgba(255,255,255,.025);border-radius:50%;animation:innerOrbit 9s linear infinite reverse}
.orbit.two::before{inset:9%;animation-duration:13s}.orbit.three::before{inset:16%;animation-duration:17s}
@keyframes innerOrbit{to{transform:rotate(360deg)}}
.person-wrap{transform:translate3d(0,0,0);animation:personStage 6s ease-in-out infinite}
@keyframes personStage{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.person{transform:translate3d(-50%,var(--scroll-y,0px),0) scale(var(--scroll-scale,1)) rotateZ(calc(var(--scroll-rotate,0deg) + var(--mouse-rotate,0deg)));animation:personWalkFloat 4.8s ease-in-out infinite;transform-origin:50% 100%;will-change:transform}
@keyframes personWalkFloat{0%,100%{margin-top:0}25%{margin-top:-3px;transform-origin:48% 100%}50%{margin-top:-8px;transform-origin:52% 100%}75%{margin-top:-3px;transform-origin:49% 100%}}
.person-wrap::after{content:"";position:absolute;left:50%;bottom:5%;width:min(34vw,390px);height:28px;transform:translateX(-50%);border-radius:50%;background:rgba(255,255,255,.08);filter:blur(22px);opacity:.35;animation:groundShadow 4.8s ease-in-out infinite;pointer-events:none}
@keyframes groundShadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.28}50%{transform:translateX(-50%) scaleX(.78);opacity:.16}}
.code{margin-left:0;margin-top:0;transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) + var(--random-y,0px)),0) rotate(var(--scroll-rotate,0deg));transition:transform .8s cubic-bezier(.16,1,.3,1)}
@keyframes codeFloat{0%,100%{transform:translate3d(var(--random-x,0px),var(--scroll-y,0px),0) rotate(var(--scroll-rotate,0deg))}50%{transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) - 14px),0) rotate(calc(var(--scroll-rotate,0deg) + 2deg))}}
.code::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:#fff;opacity:.18;animation:codeScan 2.8s ease-in-out infinite;pointer-events:none}
@keyframes codeScan{0%,100%{transform:translateY(-100%);opacity:0}30%{opacity:.4}70%{transform:translateY(100%);opacity:0}}
.hero-info{animation:slideLeft 1.5s .7s both,heroInfoFloat 6s 2.2s ease-in-out infinite}
@keyframes heroInfoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-button{animation:buttonAppear 1.5s .9s both,buttonPulse 3.5s 2s ease-in-out infinite}
.scroll{animation:scrollFloat 2.5s ease-in-out infinite}
@keyframes scrollFloat{0%,100%{transform:translateX(-50%) translateY(0);opacity:.65}50%{transform:translateX(-50%) translateY(7px);opacity:1}}
section[id]{scroll-margin-top:85px}
@media(max-width:800px){.hero .portfolio::before{background-size:38px 38px}.person{height:68vh}.person-wrap::after{width:58vw}.hero-info{bottom:78px;left:5vw}.hero-button{width:100px;height:100px;right:5vw;bottom:68px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* =========================================================
   CINEMATIC VIJAY KANNAN TITLE CARD
   Same monochrome VK.DEV theme — no external libraries
========================================================= */
html{scroll-padding-top:90px}
body.intro-lock{overflow:hidden!important}
.cinematic-intro{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#030303;
    color:#fff;
    isolation:isolate;
}
.cinematic-intro::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 50% 48%,rgba(255,255,255,.11),transparent 12%),
      radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 42%),
      linear-gradient(180deg,#000 0%,#050505 50%,#000 100%);
    animation:introAtmosphere 4.8s ease-in-out both;
    z-index:-4;
}
.intro-grid{
    position:absolute;
    inset:-20%;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:60px 60px;
    transform:perspective(700px) rotateX(62deg) scale(1.5) translateY(18%);
    transform-origin:center bottom;
    mask-image:linear-gradient(to top,black,transparent 75%);
    animation:introGridMove 7s linear infinite;
    z-index:-3;
}
.intro-noise{
    position:absolute;
    inset:-50%;
    opacity:.065;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    animation:introNoise .18s steps(2) infinite;
    pointer-events:none;
    z-index:5;
}
.intro-flash{
    position:absolute;
    inset:0;
    background:#fff;
    opacity:0;
    pointer-events:none;
    z-index:4;
    animation:introFlash 1s .72s ease-out both;
}
.intro-content{
    position:relative;
    width:min(92vw,900px);
    text-align:center;
    z-index:3;
}
.intro-vk{
    font-size:clamp(74px,15vw,190px);
    line-height:.72;
    font-weight:900;
    letter-spacing:-.09em;
    transform:scale(1.7);
    opacity:0;
    filter:blur(16px);
    animation:introVK 1.15s .25s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-rule{
    width:min(430px,55vw);
    height:1px;
    margin:30px auto 24px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
}
.intro-rule span{
    display:block;
    width:100%;
    height:100%;
    background:#fff;
    transform:translateX(-101%);
    animation:introRule 1s .95s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-name{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:clamp(14px,2.5vw,32px);
    font-size:clamp(28px,6vw,76px);
    line-height:.9;
    font-weight:800;
    letter-spacing:.08em;
    perspective:900px;
    overflow:visible;
}
.intro-word{
    display:flex;
    justify-content:center;
    gap:.035em;
}
.intro-word span{
    display:inline-block;
    min-width:.48em;
    opacity:0;
    transform:translate3d(0,125px,0) rotateX(-75deg) rotateY(18deg) scale(.65);
    filter:blur(12px);
    text-shadow:0 0 0 rgba(255,255,255,0);
    animation:introLetterIn .72s cubic-bezier(.16,1,.3,1) forwards;
}
/* Every letter enters separately — one after another. */
.intro-word-vijay span:nth-child(1){animation-delay:1.02s}
.intro-word-vijay span:nth-child(2){animation-delay:1.14s}
.intro-word-vijay span:nth-child(3){animation-delay:1.26s}
.intro-word-vijay span:nth-child(4){animation-delay:1.38s}
.intro-word-vijay span:nth-child(5){animation-delay:1.50s}
.intro-word-kannan span:nth-child(1){animation-delay:1.68s}
.intro-word-kannan span:nth-child(2){animation-delay:1.80s}
.intro-word-kannan span:nth-child(3){animation-delay:1.92s}
.intro-word-kannan span:nth-child(4){animation-delay:2.04s}
.intro-word-kannan span:nth-child(5){animation-delay:2.16s}
.intro-word-kannan span:nth-child(6){animation-delay:2.28s}
.intro-word span:hover{transform:translateY(-8px) scale(1.05);transition:transform .25s ease}
.intro-role{
    margin-top:25px;
    font-size:clamp(8px,1vw,12px);
    letter-spacing:.48em;
    color:#999;
    opacity:0;
    transform:translateY(15px);
    animation:introRole .9s 1.75s ease forwards;
}
.intro-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:36px;
    font-size:8px;
    letter-spacing:.28em;
    color:#666;
    opacity:0;
    animation:introStatus .8s 2.2s ease forwards;
}
.intro-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 16px rgba(255,255,255,.8);
    animation:introDot 1.1s ease-in-out infinite;
}
.intro-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}
.intro-particle{
    position:absolute;
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:#fff;
    opacity:0;
    animation:introParticle 2.8s var(--delay) ease-out infinite;
}
.intro-skip{
    position:absolute;
    right:28px;
    bottom:25px;
    z-index:10;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.025);
    color:#777;
    padding:10px 13px;
    font:600 8px Inter,sans-serif;
    letter-spacing:.18em;
    cursor:pointer;
    transition:.3s ease;
}
.intro-skip span{
    margin-left:7px;
    padding:3px 5px;
    border:1px solid rgba(255,255,255,.15);
    color:#aaa;
}
.intro-skip:hover{
    color:#fff;
    border-color:rgba(255,255,255,.55);
    transform:translateY(-3px);
}
.cinematic-intro.intro-out{
    animation:introExit 1.05s cubic-bezier(.76,0,.24,1) forwards;
}
.cinematic-intro.intro-out .intro-content{
    animation:introContentExit .65s ease-in forwards;
}
@keyframes introAtmosphere{0%{transform:scale(1.2);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:.85}}
@keyframes introGridMove{to{background-position:0 120px,120px 0}}
@keyframes introNoise{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes introFlash{0%,60%{opacity:0}65%{opacity:.75}100%{opacity:0}}
@keyframes introVK{0%{opacity:0;transform:scale(1.7);filter:blur(16px)}65%{opacity:1;transform:scale(.96);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes introRule{to{transform:translateX(0)}}
@keyframes introLetterIn{
    0%{opacity:0;transform:translate3d(0,125px,0) rotateX(-75deg) rotateY(18deg) scale(.65);filter:blur(12px);text-shadow:0 0 0 rgba(255,255,255,0)}
    55%{opacity:1;transform:translate3d(0,-10px,0) rotateX(8deg) rotateY(-3deg) scale(1.08);filter:blur(0);text-shadow:0 0 28px rgba(255,255,255,.35)}
    100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1);filter:blur(0);text-shadow:0 0 12px rgba(255,255,255,.12)}
}
@keyframes introRole{to{opacity:1;transform:translateY(0)}}
@keyframes introStatus{to{opacity:1}}
@keyframes introDot{50%{opacity:.25;transform:scale(.65)}}
@keyframes introParticle{0%{opacity:0;transform:translate3d(0,0,0) scale(.2)}18%{opacity:.7}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.4)}}
@keyframes introExit{0%{opacity:1;clip-path:inset(0)}55%{opacity:1;clip-path:inset(0 0 52% 0)}100%{opacity:0;clip-path:inset(50% 0 50% 0);visibility:hidden}}
@keyframes introContentExit{to{transform:translateY(-35px) scale(1.05);opacity:0;filter:blur(8px)}}
@media(max-width:600px){
    .intro-name{flex-direction:column;gap:4px;letter-spacing:.08em}
    .intro-rule{margin:23px auto 20px}
    .intro-role{letter-spacing:.3em}
    .intro-skip{right:15px;bottom:15px}
}
@media(prefers-reduced-motion:reduce){
    .cinematic-intro *{animation-duration:.01ms!important;animation-delay:0ms!important}
}
/* =========================================================
   GLOBAL
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

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

button,
input,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
}

::selection{
    background:#fff;
    color:#000;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#777;
}

/* =========================================================
   GRID BACKGROUND
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:.035;

    background-image:
    linear-gradient(#fff 1px,transparent 1px),
    linear-gradient(90deg,#fff 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:60px 60px;
    }
}

/* =========================================================
   LOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:10000;

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

    transition:1s ease;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
}

.loader-logo{
    font-size:clamp(40px,8vw,100px);
    font-weight:900;
    letter-spacing:-6px;

    animation:loaderPulse 1s infinite alternate;
}

.loader-logo span{
    opacity:.3;
}

.loader-line{
    width:150px;
    height:1px;
    background:#333;
    margin:25px auto 0;
    overflow:hidden;
}

.loader-line::after{
    content:"";
    display:block;
    width:40%;
    height:100%;
    background:#fff;

    animation:loaderLine 1.2s infinite;
}

@keyframes loaderPulse{
    from{
        opacity:.3;
        transform:scale(.94);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes loaderLine{
    from{
        transform:translateX(-150px);
    }

    to{
        transform:translateX(250px);
    }
}

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

.cursor{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;

    position:fixed;
    pointer-events:none;
    z-index:10001;

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

    transition:
        width .3s,
        height .3s,
        background .3s;
}

.cursor-ring{
    width:38px;
    height:38px;

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

    position:fixed;
    pointer-events:none;
    z-index:10000;

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

    transition:.15s ease-out;
}

.cursor.big{
    width:48px;
    height:48px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(5px);
}

@media(max-width:800px){

    .cursor,
    .cursor-ring{
        display:none;
    }

}

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

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:85px;

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

    padding:0 6vw;

    z-index:500;

    background:rgba(5,5,5,.45);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.03);
}

.logo{
    font-size:24px;
    font-weight:900;
    letter-spacing:-1px;
}

.logo span{
    opacity:.3;
}

nav{
    display:flex;
    align-items:center;
    gap:32px;
}

nav a{
    position:relative;

    font-size:10px;
    letter-spacing:2px;

    color:#777;

    transition:.3s;
}

nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-9px;

    width:0;
    height:1px;

    background:#fff;

    transition:.4s;
}

nav a:hover{
    color:#fff;
}

nav a:hover::after{
    width:100%;
}

.header-status{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:9px;
    letter-spacing:2px;

    color:#555;
}

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

    border-radius:50%;
    background:#fff;

    animation:statusPulse 1.5s infinite;
}

@keyframes statusPulse{
    0%,100%{
        opacity:.3;
        transform:scale(.8);
    }

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

.menu{
    display:none;

    border:0;
    background:none;

    color:#fff;

    font-size:24px;
}

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

.hero{
    min-height:100vh;
    height:100vh;

    position:relative;
    overflow:hidden;

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

.hero::after{
    content:"";

    position:absolute;
    inset:auto 0 0;

    height:180px;

    background:linear-gradient(
        transparent,
        #050505
    );

    z-index:15;
    pointer-events:none;
}

/* giant portfolio */

.portfolio{
    position:absolute;

    left:50%;
    top:50%;

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

    font-size:clamp(80px,17vw,290px);

    font-weight:900;

    letter-spacing:-.12em;
    line-height:.75;

    white-space:nowrap;

    z-index:2;

    color:transparent;

    -webkit-text-stroke:1px rgba(255,255,255,.15);

    background:
        linear-gradient(
            110deg,
            #222 0%,
            #fff 20%,
            #333 40%,
            #fff 60%,
            #222 80%
        );

    background-size:500% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        textFlow 7s linear infinite,
        textBreath 5s ease-in-out infinite;
}

@keyframes textFlow{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:500% center;
    }

}

@keyframes textBreath{

    0%,100%{
        letter-spacing:-.12em;
        opacity:.5;
    }

    50%{
        letter-spacing:-.08em;
        opacity:.9;
    }

}

/* =========================================================
   ORBITS
========================================================= */

.orbit{
    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;

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

    pointer-events:none;
}

.orbit.one{
    width:480px;
    height:480px;

    animation:spin 20s linear infinite;
}

.orbit.two{
    width:650px;
    height:650px;

    animation:spinReverse 27s linear infinite;
}

.orbit.three{
    width:820px;
    height:820px;

    animation:spin 35s linear infinite;
}

.orbit::after{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    background:#fff;

    border-radius:50%;

    top:0;
    left:50%;

    box-shadow:0 0 20px #fff;
}

@keyframes spin{

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

}

@keyframes spinReverse{

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

}

/* =========================================================
   PERSON
========================================================= */

.person-wrap{
    position:absolute;
    inset:0;

    z-index:10;

    pointer-events:none;
}

.person{
    position:absolute;

    left:50%;
    bottom:-20px;

    transform:translateX(-50%);

    height:78vh;
    max-height:750px;

    width:auto;

    object-fit:contain;

    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(.95)
        drop-shadow(0 30px 50px rgba(0,0,0,.9));

    animation:
        personFloat 5s ease-in-out infinite,
        personReveal 1.8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes personFloat{

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

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

}

@keyframes personReveal{

    from{
        opacity:0;

        transform:
            translateX(-50%)
            translateY(120px)
            scale(.9);

        filter:
            grayscale(100%)
            blur(12px)
            brightness(.3);
    }

    to{
        opacity:1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

        filter:
            grayscale(100%)
            contrast(1.15)
            brightness(.95)
            drop-shadow(0 30px 50px rgba(0,0,0,.9));
    }

}

/* =========================================================
   CODE FLOATING
========================================================= */

.code{
    position:absolute;

    padding:12px 18px;

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

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

    backdrop-filter:blur(15px);

    font-family:monospace;

    font-size:11px;

    color:#777;

    z-index:20;

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

.code.one{
    left:7%;
    top:30%;
}

.code.two{
    right:7%;
    top:25%;

    animation-delay:1s;
}

.code.three{
    right:12%;
    bottom:22%;

    animation-delay:2s;
}

.code.four{
    left:10%;
    bottom:25%;

    animation-delay:3s;
}

@keyframes codeFloat{

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

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

}

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

.hero-info{
    position:absolute;

    left:6vw;
    bottom:70px;

    z-index:30;

    animation:slideLeft 1.5s .7s both;
}

.hero-info small{
    color:#666;

    letter-spacing:4px;

    font-size:9px;
}

.hero-info h2{
    font-size:clamp(18px,2vw,30px);

    margin-top:9px;

    font-weight:500;
}

.hero-info p{
    color:#555;

    margin-top:8px;

    font-size:11px;
}

.typing{
    color:#aaa;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

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

}

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

.hero-button{
    position:absolute;

    right:6vw;
    bottom:65px;

    z-index:30;

    width:125px;
    height:125px;

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

    border-radius:50%;

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

    font-size:10px;
    letter-spacing:2px;

    transition:.5s;

    animation:buttonAppear 1.5s .9s both;
}

.hero-button::before{
    content:"";

    position:absolute;
    inset:8px;

    border:1px dashed rgba(255,255,255,.2);

    border-radius:50%;

    animation:spin 10s linear infinite;
}

.hero-button:hover{
    background:#fff;
    color:#000;

    transform:scale(1.1) rotate(8deg);
}

@keyframes buttonAppear{

    from{
        opacity:0;
        transform:scale(.3) rotate(-180deg);
    }

    to{
        opacity:1;
        transform:scale(1) rotate(0);
    }

}

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

.scroll{
    position:absolute;

    bottom:20px;
    left:50%;

    transform:translateX(-50%);

    font-size:8px;

    letter-spacing:3px;

    color:#444;

    z-index:30;
}

.scroll::after{
    content:"";

    display:block;

    width:1px;
    height:35px;

    background:#444;

    margin:10px auto 0;

    animation:scrollLine 1.5s infinite;
}

@keyframes scrollLine{

    0%{
        transform:scaleY(0);
        transform-origin:top;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
    }

    51%{
        transform-origin:bottom;
    }

    100%{
        transform:scaleY(0);
        transform-origin:bottom;
    }

}

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

section{
    min-height:100vh;

    padding:140px 8vw;

    position:relative;
}

.section-label{
    font-size:10px;

    color:#555;

    letter-spacing:4px;

    margin-bottom:30px;
}

.section-title{
    font-size:clamp(50px,8vw,130px);

    line-height:.82;

    letter-spacing:-.08em;

    font-weight:900;
}

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

.about{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10vw;

    align-items:center;
}

.about-text{
    color:#777;

    line-height:1.9;

    font-size:14px;
}

.about-text strong{
    color:#fff;
}

.about-description{
    margin-top:30px;
}

.about-box{
    border:1px solid #202020;

    padding:45px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.about-box::before{
    content:"01";

    position:absolute;

    right:20px;
    top:10px;

    font-size:90px;

    color:#101010;

    font-weight:900;
}

.about-box:hover{
    transform:translateY(-12px);

    border-color:#444;
}

.about-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;
}

.about-tag{
    border:1px solid #252525;

    padding:9px 14px;

    font-size:9px;

    letter-spacing:1px;

    color:#777;
}

/* =========================================================
   STATS
========================================================= */

.stats{
    display:grid;

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

    border-top:1px solid #202020;
    border-bottom:1px solid #202020;
}

.stat{
    padding:50px 25px;

    border-right:1px solid #202020;

    text-align:center;
}

.stat:last-child{
    border-right:0;
}

.stat-number{
    font-size:clamp(35px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;
}

.stat-label{
    margin-top:10px;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

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

.skills{
    background:#080808;
}

.skill-container{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.skill{
    min-height:250px;

    border:1px solid #1d1d1d;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.skill::before{
    content:"";

    position:absolute;

    width:0;
    height:2px;

    left:0;
    top:0;

    background:#fff;

    transition:.6s;
}

.skill:hover::before{
    width:100%;
}

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

    border-color:#444;
}

.skill-number{
    font-size:10px;

    color:#555;
}

.skill-icon{
    position:absolute;

    right:30px;
    top:30px;

    font-size:28px;

    opacity:.3;
}

.skill h3{
    margin-top:45px;

    font-size:24px;
}

.skill p{
    margin-top:14px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

.skill-bar{
    height:2px;

    background:#1c1c1c;

    margin-top:25px;

    overflow:hidden;
}

.skill-bar span{
    display:block;

    height:100%;

    width:0;

    background:#fff;

    transition:1.5s ease;
}

.reveal.active .skill-bar span{
    width:var(--skill);
}

/* =========================================================
   TECHNOLOGY MARQUEE
========================================================= */

.marquee{
    overflow:hidden;

    border-top:1px solid #1d1d1d;
    border-bottom:1px solid #1d1d1d;

    padding:25px 0;

    background:#050505;
}

.marquee-track{
    display:flex;

    width:max-content;

    animation:marquee 25s linear infinite;
}

.marquee span{
    font-size:13px;

    color:#444;

    letter-spacing:3px;

    margin:0 35px;

    white-space:nowrap;
}

@keyframes marquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* =========================================================
   SERVICES
========================================================= */

.services-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.service{
    border:1px solid #202020;

    padding:40px;

    min-height:280px;

    position:relative;

    transition:.5s;
}

.service:hover{
    background:#0c0c0c;

    transform:translateY(-8px);

    border-color:#444;
}

.service-number{
    color:#555;

    font-size:10px;
}

.service h3{
    margin-top:60px;

    font-size:25px;
}

.service p{
    margin-top:15px;

    color:#666;

    line-height:1.8;

    font-size:11px;
}

.service-arrow{
    position:absolute;

    right:30px;
    bottom:25px;

    font-size:20px;

    color:#555;

    transition:.4s;
}

.service:hover .service-arrow{
    color:#fff;

    transform:translate(5px,-5px);
}

/* =========================================================
   EDUCATION
========================================================= */

.education{
    background:#080808;
}

.timeline{
    margin-top:90px;

    max-width:1000px;

    margin-left:auto;
    margin-right:auto;
}

.timeline-item{
    display:grid;

    grid-template-columns:150px 1fr;

    gap:40px;

    padding:40px 0;

    border-top:1px solid #202020;
}

.timeline-year{
    color:#555;

    font-size:11px;

    letter-spacing:2px;
}

.timeline-content h3{
    font-size:27px;

    margin-bottom:10px;
}

.timeline-content h4{
    color:#777;

    font-size:12px;

    font-weight:500;
}

.timeline-content p{
    margin-top:15px;

    color:#555;

    line-height:1.8;

    font-size:11px;

    max-width:700px;
}

/* =========================================================
   PROJECTS
========================================================= */

.projects-title{
    display:flex;

    align-items:end;

    justify-content:space-between;
}

.projects-title span{
    font-size:10px;

    color:#555;

    letter-spacing:2px;
}

.filters{
    display:flex;

    gap:10px;

    margin-top:60px;

    flex-wrap:wrap;
}

.filter{
    background:transparent;

    color:#555;

    border:1px solid #222;

    padding:10px 17px;

    font-size:9px;

    letter-spacing:1px;

    transition:.3s;
}

.filter:hover,
.filter.active{
    background:#fff;

    color:#000;

    border-color:#fff;
}

.project-list{
    margin-top:30px;
}

.project{
    display:grid;

    grid-template-columns:80px 1fr 180px;

    align-items:center;

    gap:30px;

    padding:40px 0;

    border-top:1px solid #222;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.project:last-child{
    border-bottom:1px solid #222;
}

.project.hidden{
    display:none;
}

.project-number{
    color:#555;

    font-size:11px;
}

.project h3{
    font-size:clamp(24px,4vw,52px);

    font-weight:700;

    letter-spacing:-2px;

    transition:.5s;
}

.project-category{
    text-align:right;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

.project-description{
    grid-column:2 / 3;

    color:#555;

    font-size:11px;

    line-height:1.7;

    margin-top:-20px;
}

.project::after{
    content:"";

    position:absolute;

    left:-100%;

    bottom:0;

    width:100%;

    height:1px;

    background:#fff;

    transition:.7s;
}

.project:hover::after{
    left:0;
}

.project:hover h3{
    transform:translateX(20px);

    letter-spacing:-1px;
}

.project:hover{
    padding-left:15px;

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

.project-view{
    color:#777;

    font-size:9px;

    letter-spacing:2px;

    opacity:0;

    transition:.4s;
}

.project:hover .project-view{
    opacity:1;
}

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

.achievements{
    background:#080808;
}

.achievement-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.achievement{
    border:1px solid #202020;

    padding:35px;

    min-height:240px;

    transition:.5s;
}

.achievement:hover{
    transform:translateY(-10px);

    border-color:#444;
}

.achievement-icon{
    font-size:28px;

    opacity:.5;
}

.achievement h3{
    margin-top:35px;

    font-size:20px;
}

.achievement p{
    margin-top:12px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

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

.contact{
    min-height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.contact h2{
    font-size:clamp(55px,11vw,170px);

    line-height:.8;

    letter-spacing:-.1em;
}

.contact h2 span{
    display:block;

    color:transparent;

    -webkit-text-stroke:1px #555;

    transition:.5s;
}

.contact h2:hover span{
    color:#fff;

    -webkit-text-stroke:1px #fff;
}

.contact-subtitle{
    max-width:550px;

    margin-top:35px;

    color:#555;

    font-size:12px;

    line-height:1.8;
}

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

.contact-form{
    width:min(700px,100%);

    margin-top:55px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.form-group{
    position:relative;
}

.form-group.full{
    grid-column:1/-1;
}

.form-input{
    width:100%;

    padding:17px 18px;

    background:#080808;

    border:1px solid #222;

    color:#fff;

    outline:none;

    font-size:11px;

    transition:.3s;
}

.form-input:focus{
    border-color:#777;
}

textarea.form-input{
    height:130px;

    resize:vertical;
}

.submit-button{
    grid-column:1/-1;

    padding:17px;

    background:#fff;

    color:#000;

    border:0;

    font-size:10px;

    letter-spacing:2px;

    transition:.4s;
}

.submit-button:hover{
    background:#ccc;

    transform:translateY(-3px);
}

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

.socials{
    display:flex;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;

    justify-content:center;
}

.social{
    border:1px solid #252525;

    padding:12px 20px;

    font-size:9px;

    letter-spacing:1px;

    color:#666;

    transition:.4s;
}

.social:hover{
    border-color:#fff;

    color:#fff;

    transform:translateY(-3px);
}

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

footer{
    border-top:1px solid #181818;

    padding:35px 8vw;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#555;

    font-size:9px;

    letter-spacing:1px;
}

.back-top{
    border:1px solid #222;

    padding:10px 15px;

    transition:.3s;
}

.back-top:hover{
    color:#fff;

    border-color:#555;
}

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

.reveal{
    opacity:0;

    transform:translateY(70px);

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

.reveal.active{
    opacity:1;

    transform:translateY(0);
}

.from-left{
    transform:translateX(-100px);
}

.from-left.active{
    transform:translateX(0);
}

.from-right{
    transform:translateX(100px);
}

.from-right.active{
    transform:translateX(0);
}

.zoom{
    transform:scale(.75);
}

.zoom.active{
    transform:scale(1);
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    right:25px;
    bottom:25px;

    padding:15px 22px;

    background:#fff;

    color:#000;

    font-size:10px;

    letter-spacing:1px;

    z-index:9000;

    transform:translateY(100px);

    opacity:0;

    transition:.4s;
}

.toast.show{
    transform:translateY(0);

    opacity:1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .header-status{
        display:none;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:800px){

    header{
        height:75px;

        padding:0 5vw;
    }

    nav{
        display:none;

        position:absolute;

        top:75px;
        left:0;

        width:100%;

        padding:30px;

        background:#050505;

        border-bottom:1px solid #222;

        flex-direction:column;

        text-align:center;

        gap:25px;
    }

    nav.open{
        display:flex;
    }

    .menu{
        display:block;
    }

    .hero{
        min-height:680px;
    }

    .portfolio{
        font-size:21vw;
    }

    .person{
        height:64vh;
    }

    .orbit.one{
        width:350px;
        height:350px;
    }

    .orbit.two{
        width:470px;
        height:470px;
    }

    .orbit.three{
        width:600px;
        height:600px;
    }

    .code{
        display:none;
    }

    .hero-info{
        left:5vw;
        bottom:35px;
    }

    .hero-button{
        right:5vw;
        bottom:30px;

        width:85px;
        height:85px;

        font-size:7px;
    }

    section{
        padding:100px 6vw;
    }

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

        gap:50px;
    }

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

    .stat{
        border-bottom:1px solid #202020;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:1fr;
    }

    .timeline-item{
        grid-template-columns:1fr;

        gap:15px;
    }

    .projects-title{
        display:block;
    }

    .projects-title span{
        display:block;

        margin-top:20px;
    }

    .project{
        grid-template-columns:40px 1fr;
    }

    .project-category,
    .project-view{
        display:none;
    }

    .project-description{
        grid-column:2;
    }

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

    .form-group.full{
        grid-column:auto;
    }

    .submit-button{
        grid-column:auto;
    }

    footer{
        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}

@media(max-width:500px){

    .hero-info h2{
        font-size:16px;
    }

    .hero-info p{
        font-size:9px;
    }

    .about-box{
        padding:30px;
    }

    .skill,
    .service,
    .achievement{
        padding:28px;
    }

    .contact h2{
        font-size:20vw;
    }

    .socials{
        gap:8px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}


/* =========================================================
   ADVANCED MOTION — SAME BLACK VK.DEV THEME
========================================================= */
.hero{--scroll-progress:0;--mouse-x:0;--mouse-y:0;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--mouse-x)*30px) calc(45% + var(--mouse-y)*30px),rgba(255,255,255,.075),transparent 18%),radial-gradient(circle at 20% 70%,rgba(255,255,255,.035),transparent 24%),radial-gradient(circle at 80% 25%,rgba(255,255,255,.025),transparent 22%);transform:translate3d(0,calc(var(--scroll-progress)*35px),0) scale(1.05);animation:atmosphereMove 12s ease-in-out infinite alternate}
@keyframes atmosphereMove{0%{transform:translate3d(-1%,0,0) scale(1.05);opacity:.55}100%{transform:translate3d(1%,2%,0) scale(1.1);opacity:1}}
.hero .portfolio::before{content:"";position:absolute;left:50%;top:50%;width:120vw;height:120vh;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(circle,black 0%,transparent 68%);animation:heroGrid 16s linear infinite}
@keyframes heroGrid{from{background-position:0 0}to{background-position:110px 110px}}
.portfolio{transform:translate3d(calc(-50% + var(--mouse-x)*6px),calc(-50% + var(--scroll-y,0px) + var(--mouse-y)*4px),0) scale(var(--scroll-scale,1));transition:transform .7s cubic-bezier(.16,1,.3,1)}
.orbit{transform:translate3d(-50%,calc(-50% + var(--scroll-y,0px)),0) scale(var(--scroll-scale,1));box-shadow:0 0 80px rgba(255,255,255,.018)}
.orbit.one::before,.orbit.two::before,.orbit.three::before{content:"";position:absolute;inset:12%;border:1px dashed rgba(255,255,255,.025);border-radius:50%;animation:innerOrbit 9s linear infinite reverse}
.orbit.two::before{inset:9%;animation-duration:13s}.orbit.three::before{inset:16%;animation-duration:17s}
@keyframes innerOrbit{to{transform:rotate(360deg)}}
.person-wrap{transform:translate3d(0,0,0);animation:personStage 6s ease-in-out infinite}
@keyframes personStage{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.person{transform:translate3d(-50%,var(--scroll-y,0px),0) scale(var(--scroll-scale,1)) rotateZ(calc(var(--scroll-rotate,0deg) + var(--mouse-rotate,0deg)));animation:personWalkFloat 4.8s ease-in-out infinite;transform-origin:50% 100%;will-change:transform}
@keyframes personWalkFloat{0%,100%{margin-top:0}25%{margin-top:-3px;transform-origin:48% 100%}50%{margin-top:-8px;transform-origin:52% 100%}75%{margin-top:-3px;transform-origin:49% 100%}}
.person-wrap::after{content:"";position:absolute;left:50%;bottom:5%;width:min(34vw,390px);height:28px;transform:translateX(-50%);border-radius:50%;background:rgba(255,255,255,.08);filter:blur(22px);opacity:.35;animation:groundShadow 4.8s ease-in-out infinite;pointer-events:none}
@keyframes groundShadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.28}50%{transform:translateX(-50%) scaleX(.78);opacity:.16}}
.code{margin-left:0;margin-top:0;transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) + var(--random-y,0px)),0) rotate(var(--scroll-rotate,0deg));transition:transform .8s cubic-bezier(.16,1,.3,1)}
@keyframes codeFloat{0%,100%{transform:translate3d(var(--random-x,0px),var(--scroll-y,0px),0) rotate(var(--scroll-rotate,0deg))}50%{transform:translate3d(var(--random-x,0px),calc(var(--scroll-y,0px) - 14px),0) rotate(calc(var(--scroll-rotate,0deg) + 2deg))}}
.code::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:#fff;opacity:.18;animation:codeScan 2.8s ease-in-out infinite;pointer-events:none}
@keyframes codeScan{0%,100%{transform:translateY(-100%);opacity:0}30%{opacity:.4}70%{transform:translateY(100%);opacity:0}}
.hero-info{animation:slideLeft 1.5s .7s both,heroInfoFloat 6s 2.2s ease-in-out infinite}
@keyframes heroInfoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-button{animation:buttonAppear 1.5s .9s both,buttonPulse 3.5s 2s ease-in-out infinite}
.scroll{animation:scrollFloat 2.5s ease-in-out infinite}
@keyframes scrollFloat{0%,100%{transform:translateX(-50%) translateY(0);opacity:.65}50%{transform:translateX(-50%) translateY(7px);opacity:1}}
section[id]{scroll-margin-top:85px}
@media(max-width:800px){.hero .portfolio::before{background-size:38px 38px}.person{height:68vh}.person-wrap::after{width:58vw}.hero-info{bottom:78px;left:5vw}.hero-button{width:100px;height:100px;right:5vw;bottom:68px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* =========================================================
   CINEMATIC VIJAY KANNAN TITLE CARD
   Same monochrome VK.DEV theme — no external libraries
========================================================= */
html{scroll-padding-top:90px}
body.intro-lock{overflow:hidden!important}
.cinematic-intro{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#030303;
    color:#fff;
    isolation:isolate;
}
.cinematic-intro::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 50% 48%,rgba(255,255,255,.11),transparent 12%),
      radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 42%),
      linear-gradient(180deg,#000 0%,#050505 50%,#000 100%);
    animation:introAtmosphere 4.8s ease-in-out both;
    z-index:-4;
}
.intro-grid{
    position:absolute;
    inset:-20%;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:60px 60px;
    transform:perspective(700px) rotateX(62deg) scale(1.5) translateY(18%);
    transform-origin:center bottom;
    mask-image:linear-gradient(to top,black,transparent 75%);
    animation:introGridMove 7s linear infinite;
    z-index:-3;
}
.intro-noise{
    position:absolute;
    inset:-50%;
    opacity:.065;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    animation:introNoise .18s steps(2) infinite;
    pointer-events:none;
    z-index:5;
}
.intro-flash{
    position:absolute;
    inset:0;
    background:#fff;
    opacity:0;
    pointer-events:none;
    z-index:4;
    animation:introFlash 1s .72s ease-out both;
}
.intro-content{
    position:relative;
    width:min(92vw,900px);
    text-align:center;
    z-index:3;
}
.intro-vk{
    font-size:clamp(74px,15vw,190px);
    line-height:.72;
    font-weight:900;
    letter-spacing:-.09em;
    transform:scale(1.7);
    opacity:0;
    filter:blur(16px);
    animation:introVK 1.15s .25s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-rule{
    width:min(430px,55vw);
    height:1px;
    margin:30px auto 24px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
}
.intro-rule span{
    display:block;
    width:100%;
    height:100%;
    background:#fff;
    transform:translateX(-101%);
    animation:introRule 1s .95s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-name{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:clamp(14px,2.5vw,32px);
    font-size:clamp(28px,6vw,76px);
    line-height:.9;
    font-weight:800;
    letter-spacing:.08em;
    perspective:900px;
    overflow:visible;
}
.intro-word{
    display:flex;
    justify-content:center;
    gap:.035em;
}
.intro-word span{
    display:inline-block;
    min-width:.48em;
    opacity:0;
    transform:translate3d(0,125px,0) rotateX(-75deg) rotateY(18deg) scale(.65);
    filter:blur(12px);
    text-shadow:0 0 0 rgba(255,255,255,0);
    animation:introLetterIn .72s cubic-bezier(.16,1,.3,1) forwards;
}
/* Every letter enters separately from a different direction, then locks into position. */
.intro-word span{
    --sx:0px;
    --sy:125px;
    --rx:-75deg;
    --ry:18deg;
    --delay:0s;
    display:inline-block;
    min-width:.48em;
    opacity:0;
    transform:translate3d(var(--sx),var(--sy),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(.62);
    filter:blur(14px);
    text-shadow:0 0 0 rgba(255,255,255,0);
    animation:introLetterIn .82s var(--delay) cubic-bezier(.16,1,.3,1) forwards;
}

/* VIJAY: right → left → top → bottom → right */
.intro-word-vijay span:nth-child(1){--sx:220px;--sy:0px;--rx:0deg;--ry:70deg;--delay:1.02s}
.intro-word-vijay span:nth-child(2){--sx:-220px;--sy:0px;--rx:0deg;--ry:-70deg;--delay:1.18s}
.intro-word-vijay span:nth-child(3){--sx:0px;--sy:-180px;--rx:-70deg;--ry:0deg;--delay:1.34s}
.intro-word-vijay span:nth-child(4){--sx:0px;--sy:180px;--rx:70deg;--ry:0deg;--delay:1.50s}
.intro-word-vijay span:nth-child(5){--sx:220px;--sy:0px;--rx:0deg;--ry:70deg;--delay:1.66s}

/* KANNAN: left → top → bottom → right → left → top */
.intro-word-kannan span:nth-child(1){--sx:-220px;--sy:0px;--rx:0deg;--ry:-70deg;--delay:1.88s}
.intro-word-kannan span:nth-child(2){--sx:0px;--sy:-180px;--rx:-70deg;--ry:0deg;--delay:2.04s}
.intro-word-kannan span:nth-child(3){--sx:0px;--sy:180px;--rx:70deg;--ry:0deg;--delay:2.20s}
.intro-word-kannan span:nth-child(4){--sx:220px;--sy:0px;--rx:0deg;--ry:70deg;--delay:2.36s}
.intro-word-kannan span:nth-child(5){--sx:-220px;--sy:0px;--rx:0deg;--ry:-70deg;--delay:2.52s}
.intro-word-kannan span:nth-child(6){--sx:0px;--sy:-180px;--rx:-70deg;--ry:0deg;--delay:2.68s}

.intro-word span:hover{transform:translateY(-8px) scale(1.05);transition:transform .25s ease}
.intro-word span:hover{transform:translateY(-8px) scale(1.05);transition:transform .25s ease}
.intro-role{
    margin-top:25px;
    font-size:clamp(8px,1vw,12px);
    letter-spacing:.48em;
    color:#999;
    opacity:0;
    transform:translateY(15px);
    animation:introRole .9s 3.05s ease forwards;
}
.intro-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:36px;
    font-size:8px;
    letter-spacing:.28em;
    color:#666;
    opacity:0;
    animation:introStatus .8s 3.35s ease forwards;
}
.intro-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 16px rgba(255,255,255,.8);
    animation:introDot 1.1s ease-in-out infinite;
}
.intro-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}
.intro-particle{
    position:absolute;
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:#fff;
    opacity:0;
    animation:introParticle 2.8s var(--delay) ease-out infinite;
}
.intro-skip{
    position:absolute;
    right:28px;
    bottom:25px;
    z-index:10;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.025);
    color:#777;
    padding:10px 13px;
    font:600 8px Inter,sans-serif;
    letter-spacing:.18em;
    cursor:pointer;
    transition:.3s ease;
}
.intro-skip span{
    margin-left:7px;
    padding:3px 5px;
    border:1px solid rgba(255,255,255,.15);
    color:#aaa;
}
.intro-skip:hover{
    color:#fff;
    border-color:rgba(255,255,255,.55);
    transform:translateY(-3px);
}
.cinematic-intro.intro-out{
    animation:introExit 1.05s cubic-bezier(.76,0,.24,1) forwards;
}
.cinematic-intro.intro-out .intro-content{
    animation:introContentExit .65s ease-in forwards;
}
@keyframes introAtmosphere{0%{transform:scale(1.2);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:.85}}
@keyframes introGridMove{to{background-position:0 120px,120px 0}}
@keyframes introNoise{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes introFlash{0%,60%{opacity:0}65%{opacity:.75}100%{opacity:0}}
@keyframes introVK{0%{opacity:0;transform:scale(1.7);filter:blur(16px)}65%{opacity:1;transform:scale(.96);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes introRule{to{transform:translateX(0)}}
@keyframes introLetterIn{
    0%{opacity:0;transform:translate3d(var(--sx),var(--sy),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(.62);filter:blur(14px);text-shadow:0 0 0 rgba(255,255,255,0)}
    58%{opacity:1;transform:translate3d(calc(var(--sx) * -.10),calc(var(--sy) * -.10),0) rotateX(calc(var(--rx) * -.10)) rotateY(calc(var(--ry) * -.10)) scale(1.10);filter:blur(0);text-shadow:0 0 34px rgba(255,255,255,.42)}
    78%{opacity:1;transform:translate3d(calc(var(--sx) * .025),calc(var(--sy) * .025),0) rotateX(calc(var(--rx) * .025)) rotateY(calc(var(--ry) * .025)) scale(.985);filter:blur(0);text-shadow:0 0 18px rgba(255,255,255,.2)}
    100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1);filter:blur(0);text-shadow:0 0 12px rgba(255,255,255,.12)}
}
@keyframes introRole{to{opacity:1;transform:translateY(0)}}
@keyframes introStatus{to{opacity:1}}
@keyframes introDot{50%{opacity:.25;transform:scale(.65)}}
@keyframes introParticle{0%{opacity:0;transform:translate3d(0,0,0) scale(.2)}18%{opacity:.7}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.4)}}
@keyframes introExit{0%{opacity:1;clip-path:inset(0)}55%{opacity:1;clip-path:inset(0 0 52% 0)}100%{opacity:0;clip-path:inset(50% 0 50% 0);visibility:hidden}}
@keyframes introContentExit{to{transform:translateY(-35px) scale(1.05);opacity:0;filter:blur(8px)}}
@media(max-width:600px){
    .intro-name{flex-direction:column;gap:4px;letter-spacing:.08em}
    .intro-rule{margin:23px auto 20px}
    .intro-role{letter-spacing:.3em}
    .intro-skip{right:15px;bottom:15px}
}
@media(prefers-reduced-motion:reduce){
    .cinematic-intro *{animation-duration:.01ms!important;animation-delay:0ms!important}
}

/* =========================================================
   ROOT
========================================================= */

:root {

    --bg: #050505;
    --bg2: #090909;

    --white: #ffffff;
    --soft: #cfcfcf;
    --gray: #777777;
    --dark-gray: #222222;

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

    --mouse-x: 0;
    --mouse-y: 0;

    --header-height: 86px;

}


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

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

html {

    scroll-behavior: smooth;

    scroll-padding-top:
        calc(var(--header-height) + 15px);

}

body {

    background: var(--bg);

    color: var(--white);

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

    overflow-x: hidden;

}

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

button {
    font-family: inherit;
}


/* =========================================================
   GLOBAL MOVING GRID
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -10;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

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

    background-size: 80px 80px;

    transform:
        translate(
            calc(var(--mouse-x) * 10px),
            calc(var(--mouse-y) * 10px)
        );

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1);

}


/* =========================================================
   FUTURE INTRO
========================================================= */

.future-intro {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background:
        radial-gradient(
            circle at 50% 50%,
            #171717 0%,
            #080808 45%,
            #000 100%
        );

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;

}


/* Moving grid */

.intro-grid {

    position: absolute;

    inset: -50%;

    background-image:

        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    transform:
        perspective(500px)
        rotateX(65deg)
        translateY(20%);

    animation:
        gridMove 5s linear infinite;

}

@keyframes gridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 70px;
    }

}


/* =========================================================
   INTRO ORBS
========================================================= */

.intro-orb {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

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

    filter: blur(.2px);

    animation:
        orbRotate 12s linear infinite;

}

.orb-a {

    transform:
        rotateX(65deg)
        rotateY(20deg);

}

.orb-b {

    width: 700px;
    height: 700px;

    transform:
        rotateX(65deg)
        rotateY(-30deg);

    animation-direction: reverse;

}

@keyframes orbRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


/* =========================================================
   INTRO LINES
========================================================= */

.intro-lines {

    position: absolute;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    height: 1px;

    width: 100%;

    opacity: .4;

}

.line-1 {
    top: 25%;
    animation: lineMove1 4s infinite;
}

.line-2 {
    top: 55%;
    animation: lineMove2 6s infinite;
}

.line-3 {
    top: 78%;
    animation: lineMove1 5s infinite reverse;
}

@keyframes lineMove1 {

    0%,100% {
        transform: translateX(-100%);
    }

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

}

@keyframes lineMove2 {

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

    50% {
        transform: scaleX(1);
        opacity: .5;
    }

}


/* =========================================================
   INTRO CONTENT
========================================================= */

.intro-content {

    position: relative;

    z-index: 5;

    text-align: center;

    width: 100%;

}


/* small system text */

.intro-small {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-size: 10px;

    letter-spacing: 5px;

    color: #777;

    margin-bottom: 25px;

    animation:
        introFade .8s ease forwards;

}

.intro-small span {

    width: 25px;

    height: 1px;

    background: #555;

}


/* =========================================================
   VK SYMBOL
========================================================= */

.vk-symbol {

    font-size: clamp(55px, 9vw, 110px);

    font-weight: 900;

    letter-spacing: -8px;

    line-height: .8;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.35);

    opacity: .12;

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -65%)
        scale(1.3);

    pointer-events: none;

    animation:
        vkFuture 2s ease forwards;

}

@keyframes vkFuture {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -65%)
            scale(.8)
            rotateX(50deg);

    }

    100% {

        opacity: .14;

        transform:
            translate(-50%, -65%)
            scale(1.3)
            rotateX(0);

    }

}


/* =========================================================
   NAME
========================================================= */

.future-name {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: clamp(3px, .6vw, 10px);

    padding: 20px;

    perspective: 1000px;

}


/* individual letter */

.letter {

    display: inline-flex;

    width: clamp(28px, 5vw, 70px);

    height: clamp(55px, 8vw, 100px);

    align-items: center;

    justify-content: center;

    font-size: clamp(30px, 6vw, 72px);

    font-weight: 800;

    letter-spacing: -3px;

    color: #fff;

    opacity: 0;

    filter: blur(14px);

    transform:
        translate3d(0,0,0)
        rotateX(0)
        rotateY(0)
        rotateZ(0)
        scale(.8);

    transition:

        opacity .25s ease,

        filter .7s cubic-bezier(.16,1,.3,1),

        transform 1s
        cubic-bezier(.16,1,.3,1);

}


/* space */

.space-letter {

    width: clamp(12px, 2vw, 30px);

}


/* =========================================================
   DIRECTIONS
========================================================= */

.from-right {

    transform:
        translate3d(180px, 0, 0)
        rotateY(75deg)
        rotateZ(15deg)
        scale(.65);

}

.from-left {

    transform:
        translate3d(-180px, 0, 0)
        rotateY(-75deg)
        rotateZ(-15deg)
        scale(.65);

}

.from-top {

    transform:
        translate3d(0, -180px, 0)
        rotateX(75deg)
        rotateZ(10deg)
        scale(.65);

}

.from-bottom {

    transform:
        translate3d(0, 180px, 0)
        rotateX(-75deg)
        rotateZ(-10deg)
        scale(.65);

}


/* correct position */

.letter.show {

    opacity: 1;

    filter: blur(0);

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

    text-shadow:
        0 0 20px rgba(255,255,255,.15);

}


/* slight settling */

.letter.show::after {

    content: "";

}


/* =========================================================
   ROLE
========================================================= */

.intro-role {

    margin-top: 22px;

    font-size: 10px;

    letter-spacing: 7px;

    color: #777;

    opacity: 0;

    animation:
        roleReveal 1s ease 2.1s forwards;

}

@keyframes roleReveal {

    from {

        opacity: 0;

        transform:
            translateY(15px);

        letter-spacing: 12px;

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        letter-spacing: 7px;

    }

}


/* =========================================================
   PROGRESS
========================================================= */

.intro-progress {

    width: min(320px, 70vw);

    margin: 35px auto 0;

    display: flex;

    align-items: center;

    gap: 15px;

    color: #555;

    font-size: 9px;

    letter-spacing: 2px;

}

.progress-track {

    height: 1px;

    flex: 1;

    background: #222;

    overflow: hidden;

}

.progress-bar {

    height: 100%;

    background: white;

    width: 0%;

    animation:
        progressAnimation 2.4s
        cubic-bezier(.16,1,.3,1)
        forwards;

}

@keyframes progressAnimation {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   CORNERS
========================================================= */

.intro-corner {

    position: absolute;

    font-size: 9px;

    letter-spacing: 3px;

    color: #555;

    z-index: 10;

}

.top-left {

    top: 30px;
    left: 35px;

}

.top-right {

    top: 30px;
    right: 35px;

}

.bottom-left {

    bottom: 30px;
    left: 35px;

}

.bottom-right {

    bottom: 30px;
    right: 35px;

}

.status-dot {

    display: inline-block;

    width: 5px;

    height: 5px;

    background: white;

    border-radius: 50%;

    margin-right: 7px;

    box-shadow:
        0 0 10px white;

    animation:
        statusPulse 1s infinite;

}

@keyframes statusPulse {

    50% {
        opacity: .25;
    }

}


/* =========================================================
   INTRO EXIT
========================================================= */

.future-intro.intro-finished {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.intro-complete {
    overflow-x: hidden;
}


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

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 6vw;

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

    background:
        rgba(5,5,5,.72);

    backdrop-filter:
        blur(20px);

    z-index: 500;

}


/* logo */

.logo {

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -1px;

}

.logo span {
    opacity: .4;
}


/* nav */

.nav {

    display: flex;

    align-items: center;

    gap: 30px;

}

.nav-link {

    position: relative;

    font-size: 10px;

    letter-spacing: 2px;

    color: #777;

    transition:
        color .3s ease;

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 1px;

    background: white;

    transition:
        width .3s ease;

}

.nav-link:hover,
.nav-link.active {

    color: white;

}

.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


/* availability */

.availability {

    font-size: 8px;

    letter-spacing: 2px;

    color: #666;

}

.availability span {

    display: inline-block;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: white;

    margin-right: 6px;

}


/* menu */

.menu-btn {

    display: none;

    width: 35px;

    height: 30px;

    background: none;

    border: 0;

    cursor: pointer;

}

.menu-btn span {

    display: block;

    width: 25px;

    height: 1px;

    background: white;

    margin: 6px 0;

}


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

.hero {

    min-height: 100vh;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    padding:
        120px 8vw;

    isolation: isolate;

}


/* background */

.hero-background {

    position: absolute;

    inset: 0;

    z-index: -3;

}

.hero-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .1;

}

.glow-one {

    left: 15%;

    top: 20%;

    background: white;

    animation:
        glowMove 8s ease-in-out infinite;

}

.glow-two {

    right: 10%;

    bottom: 10%;

    background: #888;

    animation:
        glowMove 11s ease-in-out infinite reverse;

}

@keyframes glowMove {

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

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

}


/* portfolio giant text */

.portfolio-word {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%)
        translate(
            calc(var(--mouse-x) * 20px),
            calc(var(--mouse-y) * 20px)
        );

    font-size:
        clamp(80px, 17vw, 280px);

    font-weight: 900;

    letter-spacing: -14px;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.08);

    white-space: nowrap;

    pointer-events: none;

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1);

}


/* =========================================================
   ORBITS
========================================================= */

.orbit {

    position: absolute;

    left: 62%;

    top: 50%;

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

    border-radius: 50%;

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

    pointer-events: none;

}

.orbit-one {

    width: 430px;
    height: 430px;

    animation:
        orbit1 18s linear infinite;

}

.orbit-two {

    width: 560px;
    height: 220px;

    transform:
        translate(-50%,-50%)
        rotate(25deg);

    animation:
        orbit2 15s linear infinite reverse;

}

.orbit-three {

    width: 650px;
    height: 650px;

    animation:
        orbit3 25s linear infinite;

    opacity: .35;

}

@keyframes orbit1 {

    to {
        rotate: 360deg;
    }

}

@keyframes orbit2 {

    to {
        rotate: -360deg;
    }

}

@keyframes orbit3 {

    to {
        rotate: 360deg;
    }

}


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

.hero-content {

    width: 45%;

    position: relative;

    z-index: 10;

}

.hero-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #777;

    font-size: 9px;

    letter-spacing: 4px;

    margin-bottom: 25px;

}

.hero-label span {

    width: 30px;

    height: 1px;

    background: #777;

}

.hero h1 {

    font-size:
        clamp(45px, 7vw, 100px);

    line-height: .88;

    letter-spacing: -6px;

    font-weight: 300;

}

.hero h1 strong {

    font-weight: 800;

}

.hero p {

    max-width: 450px;

    margin-top: 30px;

    color: #888;

    font-size: 14px;

    line-height: 1.8;

}

.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 35px;

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

    padding:
        15px 22px;

    font-size: 9px;

    letter-spacing: 2px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}

.hero-button:hover {

    background: white;

    color: black;

    transform:
        translateY(-4px);

}


/* =========================================================
   PERSON
========================================================= */

.person-container {

    position: absolute;

    left: 58%;

    top: 50%;

    width: 420px;

    height: 600px;

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

    z-index: 5;

}

.person {

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 100%;

    max-height: 600px;

    object-fit: contain;

    transform:
        translateX(-50%);

    filter:
        grayscale(100%)
        contrast(1.08);

    z-index: 4;

    transition:
        transform .25s ease-out;

    animation:
        personFloat 5s ease-in-out infinite;

}

@keyframes personFloat {

    0%,100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }

}


/* photo glow */

.person-glow {

    position: absolute;

    width: 300px;

    height: 500px;

    left: 50%;

    top: 50%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.15),
            transparent 70%
        );

    filter: blur(40px);

}


/* photo rings */

.person-ring {

    position: absolute;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

}

.ring-a {

    width: 350px;
    height: 500px;

    transform:
        translate(-50%,-50%)
        rotate(20deg);

    animation:
        ringRotate 15s linear infinite;

}

.ring-b {

    width: 400px;
    height: 580px;

    transform:
        translate(-50%,-50%)
        rotate(-20deg);

    animation:
        ringRotate 20s linear infinite reverse;

}

@keyframes ringRotate {

    to {
        rotate: 360deg;
    }

}


/* scan */

.scan-line {

    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    top: 20%;

    z-index: 10;

    opacity: .5;

    animation:
        scan 4s linear infinite;

}

@keyframes scan {

    0% {
        top: 15%;
        opacity: 0;
    }

    20% {
        opacity: .5;
    }

    80% {
        opacity: .5;
    }

    100% {
        top: 90%;
        opacity: 0;
    }

}


/* =========================================================
   FLOATING CODE
========================================================= */

.floating-code {

    position: absolute;

    font-size: 10px;

    color: #555;

    font-family: monospace;

    letter-spacing: 1px;

    pointer-events: none;

    animation:
        codeFloat 5s ease-in-out infinite;

}

.code-1 {

    right: 8%;

    top: 25%;

}

.code-2 {

    left: 5%;

    top: 25%;

    animation-delay: 1s;

}

.code-3 {

    right: 7%;

    bottom: 22%;

    animation-delay: 2s;

}

.code-4 {

    left: 15%;

    bottom: 20%;

    animation-delay: 3s;

}

@keyframes codeFloat {

    0%,100% {

        transform:
            translateY(0);

        opacity: .3;

    }

    50% {

        transform:
            translateY(-18px);

        opacity: .8;

    }

}


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

.scroll-indicator {

    position: absolute;

    left: 8vw;

    bottom: 35px;

    font-size: 8px;

    letter-spacing: 3px;

    color: #666;

    display: flex;

    align-items: center;

    gap: 10px;

}

.scroll-indicator span {

    width: 30px;

    height: 1px;

    background: #666;

    animation:
        scrollLine 2s infinite;

}

@keyframes scrollLine {

    0%,100% {
        width: 10px;
    }

    50% {
        width: 35px;
    }

}


/* =========================================================
   SECTIONS
========================================================= */

section[id] {

    scroll-margin-top:
        calc(var(--header-height) + 15px);

}

.section {

    min-height: 100vh;

    position: relative;

    padding:
        150px 8vw;

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

}


/* section number */

.section-number {

    position: absolute;

    top: 45px;

    left: 8vw;

    color: #444;

    font-size: 10px;

    letter-spacing: 3px;

}


/* heading */

.section-heading {

    opacity: 0;

    transform:
        translateY(50px);

    transition:
        opacity 1s ease,
        transform 1s ease;

}

.section-heading.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

.section-heading span {

    font-size: 9px;

    letter-spacing: 4px;

    color: #666;

}

.section-heading h2 {

    margin-top: 20px;

    font-size:
        clamp(55px, 9vw, 130px);

    line-height: .85;

    font-weight: 300;

    letter-spacing: -8px;

}

.section-heading h2 strong {

    font-weight: 800;

}


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

.about-grid {

    margin-top: 100px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10vw;

}

.about-text {

    opacity: 0;

    transform:
        translateY(50px);

    transition:
        1s ease;

}

.about-text.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

.large-text {

    font-size:
        clamp(22px, 3vw, 38px);

    line-height: 1.25;

}

.about-text p + p {

    margin-top: 30px;

    color: #777;

    line-height: 1.8;

}

.text-link {

    display: inline-block;

    margin-top: 40px;

    font-size: 10px;

    letter-spacing: 2px;

    border-bottom:
        1px solid #444;

    padding-bottom: 10px;

}


/* stats */

.about-stats {

    display: grid;

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

    align-items: center;

    opacity: 0;

    transform:
        translateY(50px);

    transition:
        1s ease .2s;

}

.about-stats.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

.stat strong {

    display: block;

    font-size: 60px;

    font-weight: 700;

}

.stat span {

    color: #666;

    font-size: 8px;

    letter-spacing: 2px;

}


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

.skills-grid {

    margin-top: 100px;

    display: grid;

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

}

.skill-card {

    min-height: 220px;

    padding: 30px;

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

    opacity: 0;

    transform:
        translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        background .3s ease;

}

.skill-card.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

.skill-card:hover {

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

}

.skill-card span {

    color: #555;

    font-size: 9px;

}

.skill-card h3 {

    margin-top: 60px;

    font-size: 25px;

}

.skill-card p {

    margin-top: 10px;

    color: #666;

    font-size: 11px;

}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {

    margin-top: 100px;

    display: grid;

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

}

.service {

    padding: 40px;

    border-top:
        1px solid #333;

    opacity: 0;

    transform:
        translateY(50px);

    transition:
        .8s ease;

}

.service.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

.service-number {

    color: #555;

    font-size: 10px;

}

.service h3 {

    margin-top: 70px;

    font-size: 25px;

}

.service p {

    margin-top: 15px;

    color: #666;

    line-height: 1.7;

    font-size: 12px;

}


/* =========================================================
   PROJECTS
========================================================= */

.projects-grid {

    margin-top: 100px;

    display: grid;

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

    gap: 20px;

}

.project-card {

    min-height: 400px;

    padding: 30px;

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

    position: relative;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(60px);

    transition:
        .8s ease,
        border-color .3s ease;

}

.project-card.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

.project-card:hover {

    border-color:
        rgba(255,255,255,.35);

}

.project-top {

    display: flex;

    justify-content: space-between;

    color: #555;

    font-size: 8px;

    letter-spacing: 2px;

}

.project-card h3 {

    margin-top: 100px;

    font-size: 30px;

}

.project-card p {

    margin-top: 20px;

    color: #777;

    line-height: 1.7;

    font-size: 12px;

}

.project-tags {

    position: absolute;

    left: 30px;

    bottom: 30px;

    display: flex;

    gap: 8px;

}

.project-tags span {

    border:
        1px solid #333;

    padding:
        6px 9px;

    font-size: 7px;

    color: #777;

}

.project-arrow {

    position: absolute;

    right: 30px;

    bottom: 28px;

    font-size: 25px;

}


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

.contact {

    display: flex;

    align-items: center;

}

.contact-content {

    opacity: 0;

    transform:
        translateY(60px);

    transition:
        1s ease;

}

.contact-content.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

.contact-content > span {

    color: #666;

    font-size: 10px;

    letter-spacing: 4px;

}

.contact h2 {

    margin-top: 25px;

    font-size:
        clamp(60px, 10vw, 150px);

    line-height: .82;

    font-weight: 300;

    letter-spacing: -10px;

}

.contact h2 strong {

    font-weight: 800;

}

.contact-email {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    margin-top: 60px;

    padding-bottom: 12px;

    border-bottom:
        1px solid #555;

    font-size: 12px;

    letter-spacing: 2px;

}

.socials {

    display: flex;

    gap: 30px;

    margin-top: 70px;

}

.socials a {

    color: #666;

    font-size: 9px;

    letter-spacing: 2px;

    transition:
        color .3s ease;

}

.socials a:hover {

    color: white;

}


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

footer {

    min-height: 90px;

    padding:
        0 8vw;

    display: flex;

    justify-content: space-between;

    align-items: center;

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

    color: #555;

    font-size: 8px;

    letter-spacing: 2px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .nav {

        position: fixed;

        top: var(--header-height);

        left: 0;

        width: 100%;

        padding: 30px;

        background:
            rgba(5,5,5,.97);

        border-bottom:
            1px solid #222;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        transform:
            translateY(-120%);

        transition:
            transform .4s ease;

    }

    .nav.open {

        transform:
            translateY(0);

    }

    .menu-btn {

        display: block;

    }

    .availability {

        display: none;

    }

    .hero {

        padding:
            130px 7vw 100px;

        align-items: flex-start;

    }

    .hero-content {

        width: 100%;

        margin-top: 40px;

    }

    .hero h1 {

        font-size: 55px;

    }

    .person-container {

        left: 65%;

        opacity: .55;

        transform:
            translate(-50%,-50%)
            scale(.8);

    }

    .portfolio-word {

        font-size: 100px;

    }

    .orbit {

        left: 65%;

    }

    .about-grid,
    .skills-grid,
    .services-grid,
    .projects-grid {

        grid-template-columns: 1fr;

    }

    .about-grid {

        gap: 70px;

    }

    .skills-grid {

        gap: 10px;

    }

    .services-grid {

        gap: 30px;

    }

    .projects-grid {

        gap: 20px;

    }

    .section {

        padding:
            130px 7vw;

    }

    .section-heading h2 {

        font-size: 70px;

    }

    .contact h2 {

        font-size: 70px;

    }

}


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

@media (max-width: 600px) {

    .header {

        padding:
            0 6vw;

    }

    .future-name {

        gap: 1px;

        max-width: 95vw;

        margin: auto;

    }

    .letter {

        width: 25px;

        height: 50px;

        font-size: 29px;

        letter-spacing: -2px;

    }

    .space-letter {

        width: 8px;

    }

    .intro-role {

        letter-spacing: 4px;

        font-size: 8px;

    }

    .intro-corner {

        font-size: 6px;

    }

    .top-left,
    .bottom-left {

        left: 18px;

    }

    .top-right,
    .bottom-right {

        right: 18px;

    }

    .hero {

        min-height: 100svh;

    }

    .hero-content {

        z-index: 20;

    }

    .hero h1 {

        font-size: 46px;

        letter-spacing: -4px;

    }

    .hero p {

        font-size: 12px;

        max-width: 300px;

    }

    .person-container {

        left: 70%;

        opacity: .35;

        transform:
            translate(-50%,-50%)
            scale(.65);

    }

    .portfolio-word {

        font-size: 70px;

        letter-spacing: -6px;

    }

    .floating-code {

        display: none;

    }

    .section-heading h2 {

        font-size: 58px;

        letter-spacing: -5px;

    }

    .large-text {

        font-size: 25px;

    }

    .about-stats {

        grid-template-columns: 1fr 1fr 1fr;

    }

    .stat strong {

        font-size: 35px;

    }

    .contact h2 {

        font-size: 58px;

        letter-spacing: -5px;

    }

    .contact-email {

        font-size: 9px;

    }

    .socials {

        gap: 15px;

    }

    footer {

        flex-direction: column;

        justify-content: center;

        gap: 10px;

        text-align: center;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }

}
/* =========================================================
   GLOBAL
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

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

button,
input,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
}

::selection{
    background:#fff;
    color:#000;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#777;
}

/* =========================================================
   GRID BACKGROUND
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:.035;

    background-image:
    linear-gradient(#fff 1px,transparent 1px),
    linear-gradient(90deg,#fff 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:60px 60px;
    }
}

/* =========================================================
   LOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:10000;

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

    transition:1s ease;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
}

.loader-logo{
    font-size:clamp(40px,8vw,100px);
    font-weight:900;
    letter-spacing:-6px;

    animation:loaderPulse 1s infinite alternate;
}

.loader-logo span{
    opacity:.3;
}

.loader-line{
    width:150px;
    height:1px;
    background:#333;
    margin:25px auto 0;
    overflow:hidden;
}

.loader-line::after{
    content:"";
    display:block;
    width:40%;
    height:100%;
    background:#fff;

    animation:loaderLine 1.2s infinite;
}

@keyframes loaderPulse{
    from{
        opacity:.3;
        transform:scale(.94);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes loaderLine{
    from{
        transform:translateX(-150px);
    }

    to{
        transform:translateX(250px);
    }
}

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

.cursor{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;

    position:fixed;
    pointer-events:none;
    z-index:10001;

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

    transition:
        width .3s,
        height .3s,
        background .3s;
}

.cursor-ring{
    width:38px;
    height:38px;

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

    position:fixed;
    pointer-events:none;
    z-index:10000;

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

    transition:.15s ease-out;
}

.cursor.big{
    width:48px;
    height:48px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(5px);
}

@media(max-width:800px){

    .cursor,
    .cursor-ring{
        display:none;
    }

}

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

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:85px;

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

    padding:0 6vw;

    z-index:500;

    background:rgba(5,5,5,.45);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.03);
}

.logo{
    font-size:24px;
    font-weight:900;
    letter-spacing:-1px;
}

.logo span{
    opacity:.3;
}

nav{
    display:flex;
    align-items:center;
    gap:32px;
}

nav a{
    position:relative;

    font-size:10px;
    letter-spacing:2px;

    color:#777;

    transition:.3s;
}

nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-9px;

    width:0;
    height:1px;

    background:#fff;

    transition:.4s;
}

nav a:hover{
    color:#fff;
}

nav a:hover::after{
    width:100%;
}

.header-status{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:9px;
    letter-spacing:2px;

    color:#555;
}

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

    border-radius:50%;
    background:#fff;

    animation:statusPulse 1.5s infinite;
}

@keyframes statusPulse{
    0%,100%{
        opacity:.3;
        transform:scale(.8);
    }

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

.menu{
    display:none;

    border:0;
    background:none;

    color:#fff;

    font-size:24px;
}

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

.hero{
    min-height:100vh;
    height:100vh;

    position:relative;
    overflow:hidden;

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

.hero::after{
    content:"";

    position:absolute;
    inset:auto 0 0;

    height:180px;

    background:linear-gradient(
        transparent,
        #050505
    );

    z-index:15;
    pointer-events:none;
}

/* giant portfolio */

.portfolio{
    position:absolute;

    left:50%;
    top:50%;

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

    font-size:clamp(80px,17vw,290px);

    font-weight:900;

    letter-spacing:-.12em;
    line-height:.75;

    white-space:nowrap;

    z-index:2;

    color:transparent;

    -webkit-text-stroke:1px rgba(255,255,255,.15);

    background:
        linear-gradient(
            110deg,
            #222 0%,
            #fff 20%,
            #333 40%,
            #fff 60%,
            #222 80%
        );

    background-size:500% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        textFlow 7s linear infinite,
        textBreath 5s ease-in-out infinite;
}

@keyframes textFlow{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:500% center;
    }

}

@keyframes textBreath{

    0%,100%{
        letter-spacing:-.12em;
        opacity:.5;
    }

    50%{
        letter-spacing:-.08em;
        opacity:.9;
    }

}

/* =========================================================
   ORBITS
========================================================= */

.orbit{
    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;

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

    pointer-events:none;
}

.orbit.one{
    width:480px;
    height:480px;

    animation:spin 20s linear infinite;
}

.orbit.two{
    width:650px;
    height:650px;

    animation:spinReverse 27s linear infinite;
}

.orbit.three{
    width:820px;
    height:820px;

    animation:spin 35s linear infinite;
}

.orbit::after{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    background:#fff;

    border-radius:50%;

    top:0;
    left:50%;

    box-shadow:0 0 20px #fff;
}

@keyframes spin{

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

}

@keyframes spinReverse{

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

}

/* =========================================================
   PERSON
========================================================= */

.person-wrap{
    position:absolute;
    inset:0;

    z-index:10;

    pointer-events:none;
}

.person{
    position:absolute;

    left:50%;
    bottom:-20px;

    transform:translateX(-50%);

    height:78vh;
    max-height:450px;

    width:auto;

    object-fit:contain;

    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(.95)
        drop-shadow(0 30px 50px rgba(0,0,0,.9));

    animation:
        personFloat 5s ease-in-out infinite,
        personReveal 1.8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes personFloat{

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

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

}

@keyframes personReveal{

    from{
        opacity:0;

        transform:
            translateX(-50%)
            translateY(120px)
            scale(.9);

        filter:
            grayscale(100%)
            blur(12px)
            brightness(.3);
    }

    to{
        opacity:1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

        filter:
            grayscale(100%)
            contrast(1.15)
            brightness(.95)
            drop-shadow(0 30px 50px rgba(0,0,0,.9));
    }

}

/* =========================================================
   CODE FLOATING
========================================================= */

.code{
    position:absolute;

    padding:12px 18px;

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

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

    backdrop-filter:blur(15px);

    font-family:monospace;

    font-size:11px;

    color:#777;

    z-index:20;

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

.code.one{
    left:7%;
    top:30%;
}

.code.two{
    right:7%;
    top:25%;

    animation-delay:1s;
}

.code.three{
    right:12%;
    bottom:22%;

    animation-delay:2s;
}

.code.four{
    left:10%;
    bottom:25%;

    animation-delay:3s;
}

@keyframes codeFloat{

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

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

}

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

.hero-info{
    position:absolute;

    left:6vw;
    bottom:70px;

    z-index:30;

    animation:slideLeft 1.5s .7s both;
}

.hero-info small{
    color:#666;

    letter-spacing:4px;

    font-size:9px;
}

.hero-info h2{
    font-size:clamp(18px,2vw,30px);

    margin-top:9px;

    font-weight:500;
}

.hero-info p{
    color:#555;

    margin-top:8px;

    font-size:11px;
}

.typing{
    color:#aaa;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

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

}

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

.hero-button{
    position:absolute;

    right:6vw;
    bottom:65px;

    z-index:30;

    width:125px;
    height:125px;

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

    border-radius:50%;

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

    font-size:10px;
    letter-spacing:2px;

    transition:.5s;

    animation:buttonAppear 1.5s .9s both;
}

.hero-button::before{
    content:"";

    position:absolute;
    inset:8px;

    border:1px dashed rgba(255,255,255,.2);

    border-radius:50%;

    animation:spin 10s linear infinite;
}

.hero-button:hover{
    background:#fff;
    color:#000;

    transform:scale(1.1) rotate(8deg);
}

@keyframes buttonAppear{

    from{
        opacity:0;
        transform:scale(.3) rotate(-180deg);
    }

    to{
        opacity:1;
        transform:scale(1) rotate(0);
    }

}

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

.scroll{
    position:absolute;

    bottom:20px;
    left:50%;

    transform:translateX(-50%);

    font-size:8px;

    letter-spacing:3px;

    color:#444;

    z-index:30;
}

.scroll::after{
    content:"";

    display:block;

    width:1px;
    height:35px;

    background:#444;

    margin:10px auto 0;

    animation:scrollLine 1.5s infinite;
}

@keyframes scrollLine{

    0%{
        transform:scaleY(0);
        transform-origin:top;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
    }

    51%{
        transform-origin:bottom;
    }

    100%{
        transform:scaleY(0);
        transform-origin:bottom;
    }

}

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

section{
    min-height:100vh;

    padding:140px 8vw;

    position:relative;
}

.section-label{
    font-size:10px;

    color:#555;

    letter-spacing:4px;

    margin-bottom:30px;
}

.section-title{
    font-size:clamp(50px,8vw,130px);

    line-height:.82;

    letter-spacing:-.08em;

    font-weight:900;
}

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

.about{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10vw;

    align-items:center;
}

.about-text{
    color:#777;

    line-height:1.9;

    font-size:14px;
}

.about-text strong{
    color:#fff;
}

.about-description{
    margin-top:30px;
}

.about-box{
    border:1px solid #202020;

    padding:45px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.about-box::before{
    content:"01";

    position:absolute;

    right:20px;
    top:10px;

    font-size:90px;

    color:#101010;

    font-weight:900;
}

.about-box:hover{
    transform:translateY(-12px);

    border-color:#444;
}

.about-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;
}

.about-tag{
    border:1px solid #252525;

    padding:9px 14px;

    font-size:9px;

    letter-spacing:1px;

    color:#777;
}

/* =========================================================
   STATS
========================================================= */

.stats{
    display:grid;

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

    border-top:1px solid #202020;
    border-bottom:1px solid #202020;
}

.stat{
    padding:50px 25px;

    border-right:1px solid #202020;

    text-align:center;
}

.stat:last-child{
    border-right:0;
}

.stat-number{
    font-size:clamp(35px,5vw,65px);

    font-weight:900;

    letter-spacing:-3px;
}

.stat-label{
    margin-top:10px;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

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

.skills{
    background:#080808;
}

.skill-container{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.skill{
    min-height:250px;

    border:1px solid #1d1d1d;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.skill::before{
    content:"";

    position:absolute;

    width:0;
    height:2px;

    left:0;
    top:0;

    background:#fff;

    transition:.6s;
}

.skill:hover::before{
    width:100%;
}

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

    border-color:#444;
}

.skill-number{
    font-size:10px;

    color:#555;
}

.skill-icon{
    position:absolute;

    right:30px;
    top:30px;

    font-size:28px;

    opacity:.3;
}

.skill h3{
    margin-top:45px;

    font-size:24px;
}

.skill p{
    margin-top:14px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

.skill-bar{
    height:2px;

    background:#1c1c1c;

    margin-top:25px;

    overflow:hidden;
}

.skill-bar span{
    display:block;

    height:100%;

    width:0;

    background:#fff;

    transition:1.5s ease;
}

.reveal.active .skill-bar span{
    width:var(--skill);
}

/* =========================================================
   TECHNOLOGY MARQUEE
========================================================= */

.marquee{
    overflow:hidden;

    border-top:1px solid #1d1d1d;
    border-bottom:1px solid #1d1d1d;

    padding:25px 0;

    background:#050505;
}

.marquee-track{
    display:flex;

    width:max-content;

    animation:marquee 25s linear infinite;
}

.marquee span{
    font-size:13px;

    color:#444;

    letter-spacing:3px;

    margin:0 35px;

    white-space:nowrap;
}

@keyframes marquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* =========================================================
   SERVICES
========================================================= */

.services-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.service{
    border:1px solid #202020;

    padding:40px;

    min-height:280px;

    position:relative;

    transition:.5s;
}

.service:hover{
    background:#0c0c0c;

    transform:translateY(-8px);

    border-color:#444;
}

.service-number{
    color:#555;

    font-size:10px;
}

.service h3{
    margin-top:60px;

    font-size:25px;
}

.service p{
    margin-top:15px;

    color:#666;

    line-height:1.8;

    font-size:11px;
}

.service-arrow{
    position:absolute;

    right:30px;
    bottom:25px;

    font-size:20px;

    color:#555;

    transition:.4s;
}

.service:hover .service-arrow{
    color:#fff;

    transform:translate(5px,-5px);
}

/* =========================================================
   EDUCATION
========================================================= */

.education{
    background:#080808;
}

.timeline{
    margin-top:90px;

    max-width:1000px;

    margin-left:auto;
    margin-right:auto;
}

.timeline-item{
    display:grid;

    grid-template-columns:150px 1fr;

    gap:40px;

    padding:40px 0;

    border-top:1px solid #202020;
}

.timeline-year{
    color:#555;

    font-size:11px;

    letter-spacing:2px;
}

.timeline-content h3{
    font-size:27px;

    margin-bottom:10px;
}

.timeline-content h4{
    color:#777;

    font-size:12px;

    font-weight:500;
}

.timeline-content p{
    margin-top:15px;

    color:#555;

    line-height:1.8;

    font-size:11px;

    max-width:700px;
}

/* =========================================================
   PROJECTS
========================================================= */

.projects-title{
    display:flex;

    align-items:end;

    justify-content:space-between;
}

.projects-title span{
    font-size:10px;

    color:#555;

    letter-spacing:2px;
}

.filters{
    display:flex;

    gap:10px;

    margin-top:60px;

    flex-wrap:wrap;
}

.filter{
    background:transparent;

    color:#555;

    border:1px solid #222;

    padding:10px 17px;

    font-size:9px;

    letter-spacing:1px;

    transition:.3s;
}

.filter:hover,
.filter.active{
    background:#fff;

    color:#000;

    border-color:#fff;
}

.project-list{
    margin-top:30px;
}

.project{
    display:grid;

    grid-template-columns:80px 1fr 180px;

    align-items:center;

    gap:30px;

    padding:40px 0;

    border-top:1px solid #222;

    position:relative;

    overflow:hidden;

    transition:.5s;
}

.project:last-child{
    border-bottom:1px solid #222;
}

.project.hidden{
    display:none;
}

.project-number{
    color:#555;

    font-size:11px;
}

.project h3{
    font-size:clamp(24px,4vw,52px);

    font-weight:700;

    letter-spacing:-2px;

    transition:.5s;
}

.project-category{
    text-align:right;

    color:#555;

    font-size:9px;

    letter-spacing:2px;
}

.project-description{
    grid-column:2 / 3;

    color:#555;

    font-size:11px;

    line-height:1.7;

    margin-top:-20px;
}

.project::after{
    content:"";

    position:absolute;

    left:-100%;

    bottom:0;

    width:100%;

    height:1px;

    background:#fff;

    transition:.7s;
}

.project:hover::after{
    left:0;
}

.project:hover h3{
    transform:translateX(20px);

    letter-spacing:-1px;
}

.project:hover{
    padding-left:15px;

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

.project-view{
    color:#777;

    font-size:9px;

    letter-spacing:2px;

    opacity:0;

    transition:.4s;
}

.project:hover .project-view{
    opacity:1;
}

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

.achievements{
    background:#080808;
}

.achievement-grid{
    margin-top:90px;

    display:grid;

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

    gap:20px;
}

.achievement{
    border:1px solid #202020;

    padding:35px;

    min-height:240px;

    transition:.5s;
}

.achievement:hover{
    transform:translateY(-10px);

    border-color:#444;
}

.achievement-icon{
    font-size:28px;

    opacity:.5;
}

.achievement h3{
    margin-top:35px;

    font-size:20px;
}

.achievement p{
    margin-top:12px;

    color:#666;

    font-size:11px;

    line-height:1.8;
}

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

.contact{
    min-height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.contact h2{
    font-size:clamp(55px,11vw,170px);

    line-height:.8;

    letter-spacing:-.1em;
}

.contact h2 span{
    display:block;

    color:transparent;

    -webkit-text-stroke:1px #555;

    transition:.5s;
}

.contact h2:hover span{
    color:#fff;

    -webkit-text-stroke:1px #fff;
}

.contact-subtitle{
    max-width:550px;

    margin-top:35px;

    color:#555;

    font-size:12px;

    line-height:1.8;
}

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

.contact-form{
    width:min(700px,100%);

    margin-top:55px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.form-group{
    position:relative;
}

.form-group.full{
    grid-column:1/-1;
}

.form-input{
    width:100%;

    padding:17px 18px;

    background:#080808;

    border:1px solid #222;

    color:#fff;

    outline:none;

    font-size:11px;

    transition:.3s;
}

.form-input:focus{
    border-color:#777;
}

textarea.form-input{
    height:130px;

    resize:vertical;
}

.submit-button{
    grid-column:1/-1;

    padding:17px;

    background:#fff;

    color:#000;

    border:0;

    font-size:10px;

    letter-spacing:2px;

    transition:.4s;
}

.submit-button:hover{
    background:#ccc;

    transform:translateY(-3px);
}

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

.socials{
    display:flex;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;

    justify-content:center;
}

.social{
    border:1px solid #252525;

    padding:12px 20px;

    font-size:9px;

    letter-spacing:1px;

    color:#666;

    transition:.4s;
}

.social:hover{
    border-color:#fff;

    color:#fff;

    transform:translateY(-3px);
}

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

footer{
    border-top:1px solid #181818;

    padding:35px 8vw;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#555;

    font-size:9px;

    letter-spacing:1px;
}

.back-top{
    border:1px solid #222;

    padding:10px 15px;

    transition:.3s;
}

.back-top:hover{
    color:#fff;

    border-color:#555;
}

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

.reveal{
    opacity:0;

    transform:translateY(70px);

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

.reveal.active{
    opacity:1;

    transform:translateY(0);
}

.from-left{
    transform:translateX(-100px);
}

.from-left.active{
    transform:translateX(0);
}

.from-right{
    transform:translateX(100px);
}

.from-right.active{
    transform:translateX(0);
}

.zoom{
    transform:scale(.75);
}

.zoom.active{
    transform:scale(1);
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    right:25px;
    bottom:25px;

    padding:15px 22px;

    background:#fff;

    color:#000;

    font-size:10px;

    letter-spacing:1px;

    z-index:9000;

    transform:translateY(100px);

    opacity:0;

    transition:.4s;
}

.toast.show{
    transform:translateY(0);

    opacity:1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .header-status{
        display:none;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:800px){

    header{
        height:75px;

        padding:0 5vw;
    }

    nav{
        display:none;

        position:absolute;

        top:75px;
        left:0;

        width:100%;

        padding:30px;

        background:#050505;

        border-bottom:1px solid #222;

        flex-direction:column;

        text-align:center;

        gap:25px;
    }

    nav.open{
        display:flex;
    }

    .menu{
        display:block;
    }

    .hero{
        min-height:680px;
    }

    .portfolio{
        font-size:21vw;
    }

    .person{
        height:64vh;
    }

    .orbit.one{
        width:350px;
        height:350px;
    }

    .orbit.two{
        width:470px;
        height:470px;
    }

    .orbit.three{
        width:600px;
        height:600px;
    }

    .code{
        display:none;
    }

    .hero-info{
        left:5vw;
        bottom:35px;
    }

    .hero-button{
        right:5vw;
        bottom:30px;

        width:85px;
        height:85px;

        font-size:7px;
    }

    section{
        padding:100px 6vw;
    }

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

        gap:50px;
    }

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

    .stat{
        border-bottom:1px solid #202020;
    }

    .skill-container,
    .services-grid,
    .achievement-grid{
        grid-template-columns:1fr;
    }

    .timeline-item{
        grid-template-columns:1fr;

        gap:15px;
    }

    .projects-title{
        display:block;
    }

    .projects-title span{
        display:block;

        margin-top:20px;
    }

    .project{
        grid-template-columns:40px 1fr;
    }

    .project-category,
    .project-view{
        display:none;
    }

    .project-description{
        grid-column:2;
    }

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

    .form-group.full{
        grid-column:auto;
    }

    .submit-button{
        grid-column:auto;
    }

    footer{
        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}

@media(max-width:500px){

    .hero-info h2{
        font-size:16px;
    }

    .hero-info p{
        font-size:9px;
    }

    .about-box{
        padding:30px;
    }

    .skill,
    .service,
    .achievement{
        padding:28px;
    }

    .contact h2{
        font-size:20vw;
    }

    .socials{
        gap:8px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}


/* =========================================================
   NEXT-LEVEL SCROLL EXPERIENCE
========================================================= */

:root{
    --scroll-progress:0%;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{
    background:
        radial-gradient(circle at 50% 15%,rgba(255,255,255,.055),transparent 28%),
        #050505;
}

/* top reading progress */
.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:var(--scroll-progress);
    height:2px;
    background:#fff;
    z-index:10002;
    box-shadow:0 0 18px rgba(255,255,255,.8);
    transition:width .08s linear;
}

/* subtle section atmosphere */
section{
    isolation:isolate;
}

section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.035),transparent 68%);
    top:10%;
    right:-180px;
    pointer-events:none;
    z-index:-1;
    animation:sectionGlow 9s ease-in-out infinite alternate;
}

@keyframes sectionGlow{
    from{transform:translate3d(0,0,0) scale(.9);opacity:.35}
    to{transform:translate3d(-80px,50px,0) scale(1.15);opacity:.8}
}

/* animated section divider */
.section-divider{
    width:100%;
    height:1px;
    margin:0;
    background:linear-gradient(90deg,transparent,#333,transparent);
    position:relative;
    overflow:hidden;
}
.section-divider::after{
    content:"";
    position:absolute;
    left:-20%;
    top:0;
    width:20%;
    height:100%;
    background:#fff;
    box-shadow:0 0 15px #fff;
    animation:dividerSweep 4s linear infinite;
}
@keyframes dividerSweep{
    to{left:120%}
}

/* floating scroll navigator */
.scroll-nav{
    position:fixed;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    z-index:450;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.scroll-nav::before,
.scroll-nav::after{
    content:"";
    width:1px;
    height:38px;
    background:linear-gradient(#333,transparent);
}
.scroll-nav::after{
    background:linear-gradient(transparent,#333);
}
.scroll-dot{
    width:7px;
    height:7px;
    border:1px solid #555;
    border-radius:50%;
    background:#050505;
    transition:.45s cubic-bezier(.16,1,.3,1);
    position:relative;
}
.scroll-dot::after{
    content:attr(data-label);
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%) translateX(8px);
    white-space:nowrap;
    font-size:8px;
    letter-spacing:2px;
    color:#444;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}
.scroll-dot:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}
.scroll-dot.active{
    width:10px;
    height:10px;
    background:#fff;
    border-color:#fff;
    box-shadow:0 0 16px rgba(255,255,255,.7);
}

/* hero next-content control */
.next-section{
    position:absolute;
    left:50%;
    bottom:42px;
    transform:translateX(-50%);
    z-index:35;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:#777;
    font-size:8px;
    letter-spacing:3px;
    text-transform:uppercase;
    transition:.4s;
}
.next-section:hover{
    color:#fff;
    transform:translateX(-50%) translateY(-5px);
}
.next-section .next-circle{
    width:42px;
    height:42px;
    border:1px solid #333;
    border-radius:50%;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
}
.next-section .next-circle::before{
    content:"";
    position:absolute;
    inset:4px;
    border:1px dashed #333;
    border-radius:50%;
    animation:spin 7s linear infinite;
}
.next-arrow{
    font-size:14px;
    position:relative;
    animation:nextBounce 1.5s ease-in-out infinite;
}
@keyframes nextBounce{
    0%,100%{transform:translateY(-3px)}
    50%{transform:translateY(4px)}
}

/* magnetic cards */
.skill,
.service,
.achievement,
.about-box{
    transform-style:preserve-3d;
    will-change:transform;
}

.skill::after,
.service::after,
.achievement::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,.08),
        transparent 30%
    );
    opacity:0;
    transition:opacity .35s;
    pointer-events:none;
}
.skill:hover::after,
.service:hover::after,
.achievement:hover::after{
    opacity:1;
}

/* stronger reveal */
.reveal{
    will-change:transform,opacity;
}
.reveal.active{
    transition:
        opacity .9s cubic-bezier(.16,1,.3,1),
        transform 1.1s cubic-bezier(.16,1,.3,1);
}

/* stagger children when a section enters */
.stagger > *{
    opacity:0;
    transform:translateY(35px);
}
.stagger.active > *{
    opacity:1;
    transform:translateY(0);
}
.stagger.active > *:nth-child(1){transition-delay:.05s}
.stagger.active > *:nth-child(2){transition-delay:.12s}
.stagger.active > *:nth-child(3){transition-delay:.19s}
.stagger.active > *:nth-child(4){transition-delay:.26s}
.stagger.active > *:nth-child(5){transition-delay:.33s}
.stagger.active > *:nth-child(6){transition-delay:.40s}

/* project image-like hover sweep */
.project{
    cursor:pointer;
}
.project::before{
    content:"VIEW";
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%) scale(.7);
    width:68px;
    height:68px;
    border:1px solid #333;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:8px;
    letter-spacing:2px;
    opacity:0;
    transition:.5s cubic-bezier(.16,1,.3,1);
}
.project:hover::before{
    opacity:1;
    transform:translateY(-50%) scale(1);
}

/* soft section entrance line */
.section-label{
    position:relative;
    display:inline-block;
}
.section-label::before{
    content:"";
    position:absolute;
    left:-28px;
    top:50%;
    width:18px;
    height:1px;
    background:#555;
}

/* mobile */
@media(max-width:800px){
    .scroll-nav{
        right:10px;
        gap:8px;
    }
    .scroll-nav::before,
    .scroll-nav::after{
        height:22px;
    }
    .scroll-dot{
        width:6px;
        height:6px;
    }
    .scroll-dot::after{
        display:none;
    }
    .next-section{
        bottom:18px;
    }
    .section-label::before{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .scroll-progress,
    .section-divider::after,
    .next-arrow,
    section::before{
        animation:none !important;
    }
}

/* =========================================================
   FINAL FUTURE LAYER / ALIGNMENT FIXES
========================================================= */
:root{--header-h:85px;--fx:0;--fy:0}
html{scroll-behavior:smooth;scroll-padding-top:95px}
section[id]{scroll-margin-top:95px}
body{overflow-x:hidden}

/* Keep original portfolio theme while adding moving atmosphere */
body::after{
    content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
    background:
      radial-gradient(circle at 20% 30%,rgba(255,255,255,.035),transparent 22%),
      radial-gradient(circle at 80% 70%,rgba(255,255,255,.025),transparent 25%);
    animation:futureAtmosphere 14s ease-in-out infinite alternate;
}
@keyframes futureAtmosphere{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.05)}}

/* =========================================================
   FUTURE INTRO
========================================================= */
.future-intro{
    position:fixed;inset:0;z-index:20000;display:grid;place-items:center;overflow:hidden;
    background:#030303;color:#fff;isolation:isolate;
    transition:opacity .9s cubic-bezier(.16,1,.3,1),visibility .9s;
}
.future-intro-out{opacity:0;visibility:hidden;pointer-events:none}
.future-grid{
    position:absolute;inset:-50%;opacity:.24;
    background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:70px 70px;transform:perspective(700px) rotateX(63deg) translateY(20%);
    animation:futureGrid 5s linear infinite;
}
@keyframes futureGrid{to{background-position:0 70px}}
.future-noise{position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px);mix-blend-mode:screen}
.future-orbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}
.future-orbit-a{width:560px;height:560px;transform:rotateX(66deg) rotateY(15deg);animation:futureOrbitA 13s linear infinite}
.future-orbit-b{width:760px;height:300px;transform:rotate(24deg);animation:futureOrbitB 18s linear infinite reverse}
@keyframes futureOrbitA{to{rotate:360deg}}
@keyframes futureOrbitB{to{rotate:-360deg}}
.future-line{position:absolute;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);opacity:.45}
.future-line-a{top:31%;animation:futureLine 4s ease-in-out infinite}
.future-line-b{top:68%;animation:futureLine 6s ease-in-out infinite reverse}
@keyframes futureLine{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}
.future-corner{position:absolute;font-size:8px;letter-spacing:3px;color:#555}
.future-tl{top:28px;left:32px}.future-tr{top:28px;right:32px}.future-bl{bottom:28px;left:32px}.future-br{bottom:28px;right:32px}
.future-br i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff;margin-right:7px;box-shadow:0 0 12px #fff;animation:futurePulse 1s infinite}
@keyframes futurePulse{50%{opacity:.2}}
.future-center{position:relative;width:100%;text-align:center;z-index:5}
.future-kicker{display:flex;align-items:center;justify-content:center;gap:12px;color:#555;font-size:8px;letter-spacing:5px;margin-bottom:22px;animation:futureFade .8s ease both}
.future-kicker span{width:24px;height:1px;background:#444}
.future-monogram{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) scale(1.35);font-size:clamp(100px,20vw,260px);font-weight:900;letter-spacing:-.13em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);opacity:0;animation:monogramIn 1.3s .2s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}
@keyframes monogramIn{to{opacity:1;transform:translate(-50%,-50%) scale(1.35)}}
.future-name{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(1px,.45vw,8px);padding:10px 20px;perspective:1000px;min-height:100px}
.future-letter{display:inline-flex;align-items:center;justify-content:center;width:clamp(28px,5vw,70px);height:clamp(55px,8vw,95px);font-size:clamp(32px,6vw,70px);font-weight:900;line-height:1;color:#fff;opacity:0;filter:blur(14px);transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(.72);transition:opacity .15s ease,filter .75s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);text-shadow:0 0 30px rgba(255,255,255,.08)}
.future-gap{width:clamp(10px,2vw,30px);height:1px;display:inline-block}
.future-letter.from-right{transform:translate3d(180px,0,0) rotateY(75deg) rotateZ(12deg) scale(.65)}
.future-letter.from-left{transform:translate3d(-180px,0,0) rotateY(-75deg) rotateZ(-12deg) scale(.65)}
.future-letter.from-top{transform:translate3d(0,-180px,0) rotateX(75deg) rotateZ(9deg) scale(.65)}
.future-letter.from-bottom{transform:translate3d(0,180px,0) rotateX(-75deg) rotateZ(-9deg) scale(.65)}
.future-letter.assembled{opacity:1;filter:blur(0);transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1)}
.future-role{margin-top:16px;color:#666;font-size:8px;letter-spacing:4px;opacity:0;animation:roleIn .7s 1.85s ease forwards}
.future-role b{color:#333;margin:0 5px}
@keyframes roleIn{to{opacity:1;letter-spacing:5px}}
.future-load{width:min(320px,65vw);margin:28px auto 0;display:flex;align-items:center;gap:12px;color:#444;font-size:8px;letter-spacing:2px}
.future-load-track{height:1px;background:#1e1e1e;flex:1;overflow:hidden}.future-load-track i{display:block;height:100%;width:100%;background:#fff;transform:translateX(-100%);animation:loadIn 2.2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes loadIn{to{transform:translateX(0)}}
@keyframes futureFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================
   HERO ALIGNMENT + PHOTO MOTION
========================================================= */
.hero{isolation:isolate}
.person{will-change:transform;transition:transform .25s ease-out}
.hero .portfolio{will-change:transform}

/* Preserve the original desktop composition */
@media(min-width:801px){
    .hero-info{max-width:360px}
    .hero-button{right:6vw}
}

/* mobile header/nav alignment */
@media(max-width:800px){
    html{scroll-padding-top:85px}
    section[id]{scroll-margin-top:85px}
    .scroll-nav{right:8px}
    .future-letter{width:25px;height:50px;font-size:29px}
    .future-gap{width:7px}
    .future-corner{font-size:6px;letter-spacing:2px}
    .future-tl,.future-bl{left:16px}.future-tr,.future-br{right:16px}
    .future-role{font-size:6px;letter-spacing:2px}
    .hero-info{max-width:70vw}
}

@media(max-width:500px){
    .future-name{gap:0;padding:8px 6px}
    .future-letter{width:23px;font-size:26px}
    .future-gap{width:5px}
}




/* =========================================================
   WALKING TITLE-CARD FINALE
   Sequence:
   1) futuristic name assembly
   2) title card exits
   3) supplied walking video becomes visible
   4) video fades out into the portfolio
========================================================= */

.future-intro{
    background:#000;
}

.intro-walking-video{
    position:absolute;
    inset:-5%;
    width:110%;
    height:110%;
    object-fit:cover;
    object-position:center center;
    z-index:1;
    opacity:0;
    pointer-events:none;
    background:#000;
    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.9);
    transform:scale(1.035);
    transition:
        opacity 1.15s cubic-bezier(.16,1,.3,1),
        transform 6s cubic-bezier(.16,1,.3,1),
        filter 1.15s ease;
}

.intro-video-shade{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 48%,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.18) 38%,
            rgba(0,0,0,.58) 100%),
        linear-gradient(180deg,
            rgba(0,0,0,.42) 0%,
            rgba(0,0,0,.05) 48%,
            rgba(0,0,0,.58) 100%);
    opacity:0;
    transition:opacity 1.15s ease;
}

.future-intro.show-walking .intro-walking-video{
    opacity:.52;
    transform:scale(1);
}

.future-intro.walking-bright .intro-walking-video{
    opacity:.68;
    filter:
        brightness(.88)
        contrast(1.04)
        saturate(1);
}

.future-intro.show-walking .intro-video-shade{
    opacity:1;
}

/* Keep title elements above the video while they leave. */
.future-center{
    z-index:8;
    transition:
        opacity .8s cubic-bezier(.16,1,.3,1),
        transform 1.05s cubic-bezier(.16,1,.3,1),
        filter 1.05s ease;
}

.future-center.title-exit{
    opacity:0;
    transform:translateY(-42px) scale(1.04);
    filter:blur(10px);
    pointer-events:none;
}

.future-grid,
.future-noise,
.future-orbit,
.future-line,
.future-corner{
    z-index:5;
    transition:opacity 1s ease;
}

.future-intro.show-walking .future-grid{
    opacity:.09;
}

.future-intro.show-walking .future-noise{
    opacity:.025;
}

.future-intro.show-walking .future-orbit{
    opacity:.18;
}

.future-intro.show-walking .future-line{
    opacity:.18;
}

.future-intro.show-walking .future-corner{
    opacity:.25;
}

.walking-label{
    position:absolute;
    left:50%;
    bottom:8vh;
    transform:translate(-50%,20px);
    z-index:9;
    display:flex;
    align-items:center;
    gap:14px;
    white-space:nowrap;
    color:rgba(255,255,255,.68);
    font-size:8px;
    letter-spacing:4px;
    opacity:0;
    filter:blur(8px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1),
        filter .8s ease;
}

.walking-label span{
    width:34px;
    height:1px;
    background:rgba(255,255,255,.35);
}

.walking-label.show{
    opacity:1;
    transform:translate(-50%,0);
    filter:blur(0);
}

.future-intro.future-intro-out .intro-walking-video{
    opacity:0;
    transform:scale(1.055);
}

.future-intro.future-intro-out .intro-video-shade{
    opacity:0;
}

.future-intro.future-intro-out .walking-label{
    opacity:0;
    transform:translate(-50%,-12px);
}

/* The walking shot stays visible enough to actually read as video. */
@media(min-width:801px){
    .intro-walking-video{
        object-position:center 45%;
    }
}

@media(max-width:800px){
    .intro-walking-video{
        inset:-8%;
        width:116%;
        height:116%;
        object-position:center center;
        filter:brightness(.82) contrast(1.04);
    }

    .future-intro.show-walking .intro-walking-video{
        opacity:.58;
    }

    .future-intro.walking-bright .intro-walking-video{
        opacity:.68;
    }

    .walking-label{
        bottom:10vh;
        font-size:6px;
        letter-spacing:2.5px;
        gap:8px;
    }

    .walking-label span{
        width:20px;
    }
}

@media(prefers-reduced-motion:reduce){
    .intro-walking-video{
        transition:none;
    }
}


/* =========================================================
   SYNCHRONIZED TITLE + VIDEO END
   Title card fades in the final second of the walking video.
   The video reaches its exact end, then the intro exits.
========================================================= */
.future-intro.title-ending .future-center{
    opacity:0;
    transform:translateY(-34px) scale(1.035);
    filter:blur(10px);
    transition:opacity 1.05s cubic-bezier(.16,1,.3,1),
               transform 1.05s cubic-bezier(.16,1,.3,1),
               filter 1.05s ease;
}
.future-intro.title-ending .future-grid,
.future-intro.title-ending .future-noise,
.future-intro.title-ending .future-orbit,
.future-intro.title-ending .future-line,
.future-intro.title-ending .future-corner,
.future-intro.title-ending .walking-label{
    opacity:0;
    transition:opacity 1.05s ease;
}
.future-intro.title-ending .intro-walking-video{
    opacity:.78 !important;
    transform:scale(1.015);
}
.future-intro.future-intro-out{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .9s cubic-bezier(.16,1,.3,1), visibility .9s;
}
.future-intro.future-intro-out .intro-walking-video{
    opacity:0 !important;
    transform:scale(1.035);
}

/* =========================================================
   FINAL WALKING VIDEO TITLE-CARD BACKGROUND
   The walking video is ALWAYS behind the name card.
   The futuristic title, grid and typography stay in front.
========================================================= */

/* Video sits behind the complete title-card composition. */
.future-intro .intro-walking-video{
    z-index:1 !important;
    opacity:.34 !important;
    visibility:visible;
    object-fit:cover;
    object-position:center center;

    /* Adapt the supplied walking footage to the existing black page */
    filter:
        grayscale(100%)
        brightness(.58)
        contrast(1.16)
        saturate(.72)
        blur(.6px);

    transform:scale(1.045);
    transition:
        opacity 1.2s cubic-bezier(.16,1,.3,1),
        transform 5s cubic-bezier(.16,1,.3,1),
        filter 1.2s ease;
}

/* Dark cinematic layer makes the video belong to the existing page. */
.future-intro .intro-video-shade{
    z-index:2 !important;
    opacity:1 !important;
    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.25) 42%,
            rgba(0,0,0,.76) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.20) 36%,
            rgba(0,0,0,.42) 66%,
            rgba(0,0,0,.86) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.65) 0%,
            rgba(0,0,0,.04) 50%,
            rgba(0,0,0,.65) 100%
        );
}

/* Existing futuristic elements stay above the walking footage. */
.future-intro .future-grid,
.future-intro .future-noise,
.future-intro .future-orbit,
.future-intro .future-line,
.future-intro .future-corner{
    z-index:5 !important;
}

.future-intro .future-center{
    z-index:8 !important;
}

/* Make the name card readable while still showing the walking person. */
.future-intro .future-name{
    text-shadow:
        0 0 8px rgba(0,0,0,.95),
        0 0 28px rgba(255,255,255,.12);
}

.future-intro .future-letter{
    text-shadow:
        0 0 18px rgba(0,0,0,.95),
        0 0 32px rgba(255,255,255,.10);
}

/* When the title card finishes, reveal more of the walking video. */
.future-intro.show-walking .intro-walking-video{
    opacity:.60 !important;
    filter:
        grayscale(70%)
        brightness(.78)
        contrast(1.10)
        saturate(.82)
        blur(.25px);
    transform:scale(1.015);
}

/* Final video moment: brighter, but still consistent with black theme. */
.future-intro.walking-bright .intro-walking-video{
    opacity:.72 !important;
    filter:
        grayscale(45%)
        brightness(.88)
        contrast(1.06)
        saturate(.90)
        blur(0);
}

/* Keep the title-card graphics subtle over the video. */
.future-intro.show-walking .future-grid{
    opacity:.10 !important;
}

.future-intro.show-walking .future-orbit{
    opacity:.16 !important;
}

/* On final fade, video disappears together with the intro. */
.future-intro.future-intro-out .intro-walking-video{
    opacity:0 !important;
    transform:scale(1.06);
}

/* Mobile */
@media(max-width:800px){
    .future-intro .intro-walking-video{
        inset:-6%;
        width:112%;
        height:112%;
        opacity:.28 !important;
        object-position:center center;
        filter:
            grayscale(100%)
            brightness(9.92)
            contrast(1.14)
            saturate(.7)
            blur(.8px);
    }

    .future-intro.show-walking .intro-walking-video{
        opacity:.54 !important;
    }

    .future-intro.walking-bright .intro-walking-video{
        opacity:.64 !important;
    }

    .future-intro .intro-video-shade{
        background:
            radial-gradient(
                ellipse at center,
                rgba(0,0,0,.10) 0%,
                rgba(0,0,0,.38) 48%,
                rgba(0,0,0,.82) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0,0,0,.78),
                rgba(0,0,0,.18) 45%,
                rgba(0,0,0,.88)
            );
    }
}

/* =====================================================
   VK.DEV — PREMIUM PRO DESIGN ENHANCEMENT
   Add this AFTER your existing CSS
===================================================== */

:root {
  --pro-purple: #8b5cf6;
  --pro-pink: #ec4899;
  --pro-cyan: #22d3ee;
  --pro-glow: rgba(139, 92, 246, .35);
}

/* ---------- PREMIUM BODY ATMOSPHERE ---------- */

body {
  background:
    radial-gradient(circle at 10% 10%, rgba(139,92,246,.10), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(236,72,153,.08), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(34,211,238,.06), transparent 30%),
    #050507;
  background-attachment: fixed;
}

/* Animated light sweep */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .18;
  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(139,92,246,.08) 45%,
      transparent 55%
    );
  background-size: 250% 250%;
  animation: proLightSweep 14s ease-in-out infinite;
}

@keyframes proLightSweep {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- PREMIUM SELECTION ---------- */

::selection {
  background: rgba(139,92,246,.8);
  color: white;
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #050507;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--pro-purple),
    var(--pro-pink),
    var(--pro-cyan)
  );
  border-radius: 20px;
}

/* ---------- HEADER GLASS EFFECT ---------- */

header,
.navbar,
nav {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

header::after,
.navbar::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139,92,246,.7),
    rgba(236,72,153,.7),
    transparent
  );
  opacity: .6;
}

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

button,
.btn,
a.btn,
.cta,
.contact-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

button::before,
.btn::before,
a.btn::before,
.cta::before,
.contact-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );
  transform: skewX(-20deg);
  transition: left .7s ease;
  z-index: -1;
}

button:hover::before,
.btn:hover::before,
a.btn:hover::before,
.cta:hover::before,
.contact-btn:hover::before {
  left: 140%;
}

button:hover,
.btn:hover,
a.btn:hover,
.cta:hover,
.contact-btn:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow:
    0 15px 40px rgba(139,92,246,.22),
    0 0 25px rgba(236,72,153,.12);
}

/* ---------- HEADINGS PREMIUM GLOW ---------- */

h1,
.hero-title,
.section-title {
  text-shadow:
    0 0 25px rgba(139,92,246,.08),
    0 0 60px rgba(236,72,153,.04);
}

.gradient-text,
.gradient,
.highlight {
  background-size: 250% auto;
  animation: gradientFlow 5s ease infinite;
}

@keyframes gradientFlow {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ---------- PROJECT CARDS ---------- */

.project-card,
.project,
.card,
.skill-card,
.service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    border-color .4s ease,
    box-shadow .4s ease,
    background .4s ease;
}

/* Animated border glow */
.project-card::before,
.project::before,
.card::before,
.skill-card::before,
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    transparent 15%,
    rgba(139,92,246,.8),
    rgba(236,72,153,.8),
    rgba(34,211,238,.8),
    transparent 85%
  );
  background-size: 250% 250%;
  animation: borderMotion 7s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.project-card:hover::before,
.project:hover::before,
.card:hover::before,
.skill-card:hover::before,
.service-card:hover::before {
  opacity: 1;
}

@keyframes borderMotion {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

/* Card inner shine */
.project-card::after,
.project::after,
.card::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 70%;
  height: 250%;
  background: linear-gradient(
    110deg,
    transparent,
    rgba(255,255,255,.035),
    transparent
  );
  transform: rotate(25deg);
  transition: all .9s ease;
  pointer-events: none;
}

.project-card:hover::after,
.project:hover::after,
.card:hover::after {
  left: 130%;
}

/* ---------- PROJECT HOVER ---------- */

.project-card:hover,
.project:hover,
.card:hover,
.skill-card:hover,
.service-card:hover {
  transform: translateY(-12px);
  border-color: rgba(139,92,246,.55);
  box-shadow:
    0 20px 70px rgba(0,0,0,.35),
    0 0 35px rgba(139,92,246,.13),
    inset 0 1px rgba(255,255,255,.06);
}

/* ---------- IMAGE HOVER ---------- */

.project-card img,
.project img,
.card img {
  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .5s ease;
}

.project-card:hover img,
.project:hover img,
.card:hover img {
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.05);
}

/* ---------- FLOATING ORB EFFECT ---------- */

.hero,
.hero-section,
.home,
.intro-content {
  position: relative;
}

.hero::before,
.hero-section::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  top: 5%;
  right: 8%;
  background: radial-gradient(
    circle,
    rgba(139,92,246,.13),
    transparent 70%
  );
  filter: blur(5px);
  animation: orbFloat 8s ease-in-out infinite;
  pointer-events: none;
}

.hero::after,
.hero-section::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  bottom: 0;
  left: 4%;
  background: radial-gradient(
    circle,
    rgba(236,72,153,.10),
    transparent 70%
  );
  animation: orbFloat 10s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes orbFloat {
  0%,100% {
    transform: translate(0,0) scale(1);
  }
  50% {
    transform: translate(20px,-25px) scale(1.12);
  }
}

/* ---------- SECTION DIVIDERS ---------- */

section {
  position: relative;
}

section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139,92,246,.25),
    rgba(236,72,153,.2),
    transparent
  );
}

/* ---------- NAV LINK ANIMATION ---------- */

nav a,
.nav-link {
  position: relative;
  transition: color .3s ease;
}

nav a::after,
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0;
  height: 2px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    var(--pro-purple),
    var(--pro-pink)
  );
  transform: translateX(-50%);
  transition: width .35s ease;
  box-shadow: 0 0 12px var(--pro-purple);
}

nav a:hover::after,
nav a.active::after,
.nav-link:hover::after,
.nav-link.active::after {
  width: 70%;
}

/* ---------- SOCIAL ICONS ---------- */

.socials a,
.social-links a,
.social-icon {
  transition:
    transform .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}

.socials a:hover,
.social-links a:hover,
.social-icon:hover {
  transform: translateY(-6px) rotate(-5deg);
  color: var(--pro-pink);
  filter: drop-shadow(0 0 12px rgba(236,72,153,.55));
}

/* ---------- SKILL BARS ---------- */

.skill-bar,
.progress-bar {
  overflow: hidden;
  position: relative;
}

.skill-bar::after,
.progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 35%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  animation: skillShine 2.5s ease-in-out infinite;
}

@keyframes skillShine {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}

/* ---------- FORM INPUTS ---------- */

input,
textarea,
select {
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease,
    transform .3s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(139,92,246,.8) !important;
  background: rgba(139,92,246,.06);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.08),
    0 0 25px rgba(139,92,246,.10);
  transform: translateY(-2px);
}

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

footer {
  position: relative;
  overflow: hidden;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 160%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--pro-purple),
    var(--pro-pink),
    var(--pro-cyan),
    transparent
  );
  animation: footerLine 6s linear infinite;
}

@keyframes footerLine {
  from { transform: translateX(-20%); }
  to { transform: translateX(20%); }
}

/* ---------- REVEAL ANIMATION ---------- */

.reveal,
.animate-on-scroll {
  will-change: transform, opacity;
}

/* ---------- TEXT HOVER GLITCH ---------- */

.glitch-hover {
  transition: text-shadow .3s ease;
}

.glitch-hover:hover {
  animation: textGlitch .35s steps(2);
}

@keyframes textGlitch {
  0% {
    text-shadow:
      2px 0 var(--pro-pink),
      -2px 0 var(--pro-cyan);
  }
  50% {
    text-shadow:
      -2px 0 var(--pro-pink),
      2px 0 var(--pro-cyan);
  }
  100% {
    text-shadow: none;
  }
}

/* ---------- PREMIUM CURSOR TRAIL SUPPORT ---------- */

.cursor-dot {
  box-shadow:
    0 0 10px var(--pro-purple),
    0 0 25px rgba(139,92,246,.4);
}

.cursor-ring {
  border-color: rgba(236,72,153,.6);
  box-shadow:
    0 0 20px rgba(236,72,153,.15);
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

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

@media (max-width: 768px) {
  .project-card:hover,
  .project:hover,
  .card:hover,
  .skill-card:hover {
    transform: translateY(-5px);
  }

  .hero::before,
  .hero-section::before {
    width: 180px;
    height: 180px;
    right: -40px;
  }

  .hero::after,
  .hero-section::after {
    width: 130px;
    height: 130px;
    left: -30px;
  }
}