:root{
  --bg:#0a0a0a;--bg-elev:#121212;--text:#f3f4f6;--muted:#a3a3a3;--brand:#6cf0c2;--card:#151515;--border:#2a2a2a;
  --btn-bg:#f3f4f6;--btn-text:#0a0a0a;--btn-ghost-text:#f3f4f6;
  --radius:14px;--radius-sm:10px;--container:1200px;--shadow:0 10px 30px rgba(0,0,0,.45);
}
:root.light{--bg:#ffffff;--bg-elev:#fafafa;--text:#0a0a0a;--muted:#4b5563;--card:#ffffff;--border:#e5e7eb;--btn-bg:#0a0a0a;--btn-text:#ffffff;--btn-ghost-text:#0a0a0a}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font:500 16px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
/* Prevent unwanted horizontal scrolling from wide effects */
html, body{max-width:100%;overflow-x:hidden;overflow-y:visible;will-change:auto}

/* Global performance optimizations */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  text-rendering: optimizeLegibility;
}

/* Optimize animations for better performance */
.marquee-track,
.projects-track,
.project-card,
.btn,
.resume-icon,
.cv-icon {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Enhanced marquee performance */
.marquee,
.projects-marquee {
  transform: translateZ(0);
  will-change: auto;
}

.marquee-track,
.projects-track {
  /* Force hardware acceleration */
  transform: translate3d(0, 0, 0);
  /* Optimize rendering */
  contain: layout style paint;
  /* Smooth animation */
  animation-timing-function: linear;
}

/* Styled vertical scrollbar (keeps scrolling, looks on-brand) */
html{scrollbar-width:thin;scrollbar-color:var(--brand) transparent}
/* Chrome/Edge/Safari */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));border-left:1px solid var(--border)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 50%, #62c2ff));border-radius:999px;border:2px solid transparent;background-clip:content-box;box-shadow:0 0 10px color-mix(in oklab, var(--brand) 50%, transparent)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, #62c2ff), var(--brand))}
.cursor-none{cursor:none}
.cursor-none *{cursor:none!important}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn-bg);color:var(--btn-text);border-radius:999px;padding:12px 18px;font-weight:700;letter-spacing:.01em;transition:transform .15s ease,opacity .2s,background .2s,color .2s;position:relative;z-index:10}
.btn:hover{transform:translateY(-1px) translateZ(0);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn--ghost{background:transparent;color:var(--btn-ghost-text);border:1px solid var(--border)}
.btn--sm{padding:8px 14px}
.btn--lg{padding:14px 24px;font-size:18px}
.hide-sm{display:none}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(10,10,10,.9),rgba(10,10,10,.6) 40%,rgba(10,10,10,0));backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid transparent;overflow:visible}
.site-header::before{content:"";position:absolute;inset:-40% -20% 0 -20%;pointer-events:none;opacity:.35;background:
  radial-gradient(80% 120% at var(--hx,15%) 0%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  transition:opacity .3s ease}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#6cf0c2,#62c2ff,#f472b6);opacity:.5;box-shadow:none}
.site-header.is-scrolled{border-color:var(--border);background:rgba(10,10,10,.85)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:48px;max-width:1200px;margin:0 auto;padding:0 20px}
.brand-container{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.site-header .container{padding-left:10px}
.brand{font-weight:800;letter-spacing:.4px;font-size:24px}
.brand{position:relative;display:inline-block;background:linear-gradient(90deg,#fff, color-mix(in oklab, var(--brand) 60%, #e6fff6), #fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brand-pan 8s linear infinite;text-shadow:0 1px 12px rgba(108,240,194,.12)}
.brand::after{content:"";position:absolute;inset:-2px -6px;z-index:-1;border-radius:10px;background:radial-gradient(40% 60% at 0% 50%, rgba(255,255,255,.06), transparent 60%);opacity:.6;transition:opacity .25s, transform .25s}
.brand::before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);transform:translateX(calc(var(--mx, -20%) - 20%));mix-blend-mode:screen;opacity:.0;transition:opacity .25s}
.brand:hover::before{opacity:.35}
.brand:hover{animation-duration:4s}
.brand:active::after{transform:scale(.98)}
@keyframes brand-pan{to{background-position:-200% 0}}
.brand:hover::after{opacity:1}
.site-nav{display:flex;gap:18px;align-items:center}
.site-nav a{position:relative;color:var(--muted);padding:8px 10px;border-radius:999px;transition:color .2s ease}
.site-nav a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));border:1px solid var(--border);border-radius:999px;opacity:0;transform:scale(.96);transition:opacity .2s, transform .2s}
.site-nav a:hover::before,.site-nav a.is-active::before{opacity:1;transform:scale(1)}
.site-nav a:hover{color:var(--text)}
.site-nav a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
.site-nav a.is-active{color:var(--text);font-weight:600}
.site-nav{position:relative}
.nav-indicator{position:absolute;bottom:0;height:3px;left:0;width:100%;background:linear-gradient(90deg,var(--brand),#62c2ff,#f472b6);border-radius:4px;box-shadow:0 0 12px rgba(108,240,194,.4);transition:left .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1), opacity .25s, height .25s cubic-bezier(.2,.8,.2,1);opacity:.6}
.site-nav a:hover::after,.site-nav a.is-active::after{content:"";position:absolute;inset:auto 8px -8px 8px;height:6px;background:radial-gradient(12px 6px at 50% 0, color-mix(in oklab, var(--brand) 50%, transparent), transparent 70%);filter:blur(6px);opacity:.5;pointer-events:none}
.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text);cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text)}

@media(min-width:860px){
  .nav-toggle{display:none}
}

@media(max-width:859px){
  .site-nav{position:fixed;inset:64px 16px auto 16px;display:grid;gap:12px;padding:16px;border:1px solid var(--border);background:var(--bg-elev);border-radius:var(--radius);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .site-nav.is-open{opacity:1;pointer-events:auto;transform:none}
}

/* Hero */
.section{padding:80px 0;position:relative;overflow:visible}
.hero{position:relative;overflow:visible;padding-top:280px;padding-bottom:120px;min-height:100svh;display:flex;align-items:center}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:16px;max-width:1200px;margin:0 auto;padding:0 20px;overflow:visible;justify-content:center}
.hero-content{max-width:860px;overflow:visible;margin:0 auto}
.hero-bg{position:absolute;inset:-10% -5% -5% -5%;z-index:1;pointer-events:none}
.hero-bg #bg3d{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.5;transform:translateX(25%)}
/* Aurora background inspired by Aceternity UI Aurora */
.aurora{position:absolute;inset:-20% -20% auto -20%;height:70%;filter:blur(40px);background:conic-gradient(from 180deg at 50% 50%, rgba(108,240,194,.25), rgba(108,240,194,0) 25%, rgba(98,194,255,.25), rgba(98,194,255,0) 50%, rgba(244,114,182,.25), rgba(244,114,182,0) 75%, rgba(108,240,194,.25));animation:aurora-move 18s ease-in-out infinite alternate}
@keyframes aurora-move{0%{transform:translateY(-10%) rotate(0deg)}100%{transform:translateY(10%) rotate(8deg)}}
/* Background lines inspired by Aceternity Background Lines */
.bg-lines{position:absolute;inset:auto 0 0 0;height:220px;opacity:.6}
.bg-lines path{animation:line-wave 8s ease-in-out infinite}
.bg-lines path:nth-child(2){animation-delay:-.6s}
.bg-lines path:nth-child(3){animation-delay:-1.2s}
.bg-lines path:nth-child(4){animation-delay:-1.8s}
.bg-lines path:nth-child(5){animation-delay:-2.4s}
@keyframes line-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Spotlight effect inspired by Aceternity Spotlight */
.spotlight{position:absolute;inset:0;background:radial-gradient(600px 300px at var(--sx,50%) var(--sy,30%), rgba(255,255,255,.08), transparent 60%);mix-blend-mode:screen;transition:opacity .2s}

/* Meteors inspired by Aceternity Meteors */
.meteors{position:absolute;inset:0;overflow:hidden}
.meteor{position:absolute;top:-10%;left:50%;width:1px;height:120px;background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.6));filter:blur(.2px);opacity:.6;transform:translateX(-50%) rotate(var(--rot,20deg));animation:meteor 6s linear infinite;}
@keyframes meteor{0%{transform:translate(-50%,-20%) rotate(var(--rot,20deg))}100%{transform:translate(calc(-50% + var(--dx, -300px)), calc(120% + var(--dy, 400px))) rotate(var(--rot,20deg))}}
.eyebrow{color:var(--brand);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin-bottom:14px}
.headline{font-size:44px;line-height:1.06;letter-spacing:-.02em;margin:0 0 16px;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.flip-words{display:inline-grid;vertical-align:baseline;padding-bottom:4px}
.flip-words .word{grid-area:1/1;opacity:0;transform:translateY(14px) rotateX(40deg);transform-origin:bottom;transition:opacity .5s, transform .6s}
.flip-words .word.is-active{opacity:1;transform:translateY(0) rotateX(0)}
.lede{color:var(--muted);max-width:720px;margin:0 0 22px}

.cta-row{display:flex;gap:16px;padding:40px 30px;margin:32px 0 0 0;width:fit-content;min-width:max-content;overflow:visible;position:relative;z-index:10}
.marquee{overflow:hidden;border-block:1px solid var(--border);margin-top:20px;mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent)}
.marquee-track{
  display: flex;
  gap: 40px;
  padding: 10px 0;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
  color: #8df6d3;
  opacity: 0.6;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  width: max-content;
  /* Enhanced smoothness */
  animation-timing-function: linear;
  animation-fill-mode: both;
  /* Ensure seamless loop */
  animation-iteration-count: infinite;
}
.marquee-track span{opacity:.9;transition:color 0.3s ease, opacity 0.3s ease;cursor:pointer}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span:hover{color:var(--brand);opacity:1}
.marquee:hover .marquee-track span:not(:hover){color:rgba(255,255,255,0.2);opacity:0.3}
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}


/* Icon content within buttons */
.btn .icon-image {
  font-size: 14px; /* Smaller for compact buttons */
  margin-bottom: 2px; /* Tighter spacing */
  opacity: 0.9;
}

.btn .icon-label {
  font-size: 12px; /* Smaller for compact buttons */
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 1;
}

/* Resume button - compact with magnetic effect */
.resume-icon {
  position: relative !important;
  background: rgba(108, 240, 194, 0.1) !important;
  color: var(--text) !important;
  border: 1px solid rgba(108, 240, 194, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  padding: 8px 12px !important; /* More compact */
  margin-bottom: 0 !important;
  font-size: 12px !important; /* Smaller font */
  min-width: 70px !important; /* Much narrower */
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important; /* Very tight gap */
  text-decoration: none !important;
  overflow: visible !important;
  border-radius: 12px !important; /* Slightly rounded */
}


/* CV button - compact with magnetic effect */
.cv-icon {
  position: relative !important;
  background: rgba(98, 194, 255, 0.1) !important;
  color: var(--btn-ghost-text) !important;
  border: 1px solid rgba(98, 194, 255, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  padding: 8px 12px !important; /* More compact */
  margin-bottom: 0 !important;
  font-size: 12px !important; /* Smaller font */
  min-width: 70px !important; /* Much narrower */
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important; /* Very tight gap */
  text-decoration: none !important;
  overflow: visible !important;
  border-radius: 12px !important; /* Slightly rounded */
}


/* Tooltip - positioned at bottom with gap and arrow pointing up */
.btn .icon-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.95);
  color: var(--brand);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.2s ease-out;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(108, 240, 194, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn .icon-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-bottom: 4px solid rgba(0, 0, 0, 0.95);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.btn .icon-tooltip.is-visible {
  opacity: 1;
}



/* Dragging state for buttons with icons */
.btn.dragging {
  opacity: 0.95;
  transform: rotate(5deg) scale(1.12) translateY(-8px);
  z-index: 1000;
  box-shadow: 0 25px 80px rgba(108, 240, 194, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
  border-color: rgba(108, 240, 194, 0.6);
  backdrop-filter: blur(35px);
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: dragFloat 0.6s ease-in-out infinite alternate;
}

@keyframes dragFloat {
  0% {
    transform: rotate(5deg) scale(1.12) translateY(-8px);
  }
  100% {
    transform: rotate(3deg) scale(1.15) translateY(-12px);
  }
}



.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  backdrop-filter: blur(20px);
  cursor: grab;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  width: 70px;
  position: relative;
  overflow: visible;
  transform-origin: center;
  will-change: transform;
}

.icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(108, 240, 194, 0.4);
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 15px 40px rgba(108, 240, 194, 0.2), 0 5px 15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(25px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.icon:hover::before {
  opacity: 0;
}

.icon:active {
  cursor: grabbing;
  transform: scale(0.98) translateY(-2px);
}

.icon.dragging {
  opacity: 0.95;
  transform: rotate(5deg) scale(1.12) translateY(-8px);
  z-index: 1000;
  box-shadow: 0 25px 80px rgba(108, 240, 194, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
  background: rgba(108, 240, 194, 0.12);
  border-color: rgba(108, 240, 194, 0.6);
  backdrop-filter: blur(35px);
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: dragFloat 0.6s ease-in-out infinite alternate;
}

@keyframes dragFloat {
  0% {
    transform: rotate(5deg) scale(1.12) translateY(-8px);
  }
  100% {
    transform: rotate(3deg) scale(1.15) translateY(-12px);
  }
}

.icon-image {
  font-size: 16px;
  margin-bottom: 8px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.icon:hover .icon-image {
  opacity: 1;
}

.icon-label {
  font-size: 9px;
  color: var(--text);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.icon:hover .icon-label {
  opacity: 1;
}


/* Professional download zone */
.download-zone {
  position: fixed;
  bottom: 120px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(24px);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 10;
  min-width: 110px;
  transform-origin: center center;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateX(-50%) translateY(20px) scale(0.9);
  pointer-events: none;
}

.download-zone.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.download-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.download-zone.drag-over {
  background: rgba(108, 240, 194, 0.15);
  border-color: rgba(108, 240, 194, 0.7);
  transform: translateX(-50%) scale(1.08) translateY(-5px);
  box-shadow: 0 20px 60px rgba(108, 240, 194, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(30px);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: downloadPulse 0.8s ease-in-out infinite alternate;
}

@keyframes downloadPulse {
  0% {
    box-shadow: 0 20px 60px rgba(108, 240, 194, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
  }
  100% {
    box-shadow: 0 25px 80px rgba(108, 240, 194, 0.4), 0 12px 25px rgba(0, 0, 0, 0.3);
  }
}

.download-zone.drag-over::before {
  opacity: 1;
}

.download-icon {
  font-size: 24px;
  margin-bottom: 12px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.download-zone.drag-over .download-icon {
  opacity: 1;
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 0 15px rgba(108, 240, 194, 0.6));
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: iconSpin 1s ease-in-out infinite alternate;
}

@keyframes iconSpin {
  0% {
    transform: scale(1.15) rotate(5deg);
  }
  100% {
    transform: scale(1.2) rotate(-5deg);
  }
}

.download-label {
  font-size: 11px;
  color: var(--brand);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.5px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.download-zone.drag-over .download-label {
  opacity: 1;
  transform: scale(1.08);
  text-shadow: 0 0 12px rgba(108, 240, 194, 0.5);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: labelGlow 1.2s ease-in-out infinite alternate;
}

@keyframes labelGlow {
  0% {
    text-shadow: 0 0 12px rgba(108, 240, 194, 0.5);
  }
  100% {
    text-shadow: 0 0 20px rgba(108, 240, 194, 0.7);
  }
}

/* Pin marquee to bottom of hero only */
.hero > .marquee{position:absolute;left:0;right:0;bottom:60px;z-index:2}

/* Landing animation (runs once after loader) */
/* Initial offscreen state until landing begins */
body:not(.is-landing):not(.is-landed) .hero .eyebrow,
body:not(.is-landing):not(.is-landed) .hero .headline,
body:not(.is-landing):not(.is-landed) .hero .lede,
body:not(.is-landing):not(.is-landed) .hero .cta-row{opacity:0}

/* Heavier landing timeline */
@keyframes upfade{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:translateY(20px) scale(.96)}60%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{transform:none}}
@keyframes mask-reveal{0%{clip-path:inset(0 0 100% 0);opacity:.2}100%{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes header-in{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes bg-in{from{opacity:0;transform:translateX(25%) scale(1.08)}to{opacity:.5;transform:translateX(25%) scale(1)}}
@keyframes marquee-wake{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

body.is-landing .site-header{animation:header-in .7s ease both .05s}
body.is-landing .hero .eyebrow{animation:upfade .6s ease both .2s}
body.is-landing .hero .headline{animation:mask-reveal .9s cubic-bezier(.2,.8,.2,1) both .3s}
body.is-landing .hero .lede{animation:upfade .7s ease both .5s}
body.is-landing .hero .cta-row{animation:pop .6s ease both .7s}
body.is-landing .hero-bg #bg3d{animation:bg-in .9s ease both .25s}
body.is-landing .hero > .marquee{animation:marquee-wake .6s ease both .9s}

/* End state */
body.is-landed .hero .eyebrow,
body.is-landed .hero .headline,
body.is-landed .hero .lede,
body.is-landed .hero .cta-row{opacity:1;transform:none;clip-path:inset(0)}

/* Projects Deck */
.projects {
  position: relative;
  overflow: visible;
}

/* Floating Code Particles Background for Projects */
.projects-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.projects-stars .code-particle {
  position: absolute;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: rgba(108, 240, 194, 0.3);
  opacity: 0;
  animation: float-code 8s ease-in-out infinite;
  user-select: none;
}

.projects-stars .code-particle:nth-child(odd) {
  color: rgba(98, 194, 255, 0.25);
}

.projects-stars .code-particle:nth-child(3n) {
  color: rgba(244, 114, 182, 0.2);
}

@keyframes float-code {
  0%, 100% {
    opacity: 0;
    transform: translateY(100vh) rotate(0deg) scale(0.8);
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) rotate(5deg) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) rotate(-5deg) scale(1);
  }
}

/* Geometric Shapes Background */
.projects-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(108, 240, 194, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(98, 194, 255, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, rgba(244, 114, 182, 0.03) 0%, transparent 50%);
  animation: pulse-glow 6s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Floating Geometric Shapes */
.projects-stars .geo-shape {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.1;
  animation: float-geo 12s linear infinite;
}

.projects-stars .geo-shape.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.projects-stars .geo-shape.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid rgba(255, 255, 255, 0.1);
  background: none;
}

.projects-stars .geo-shape.square {
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
}

@keyframes float-geo {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

.projects-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.projects-header h2 {
  font-size: 36px;
  margin: 0 0 16px 0;
  color: var(--text);
  letter-spacing: -0.01em;
}

.projects-header p {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.projects-marquee {
  overflow: hidden;
  margin: 60px 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  position: relative;
  z-index: 2;
}

.projects-track {
  display: flex;
  gap: 32px;
  padding: 20px 0;
  white-space: nowrap;
  animation: projects-marquee 24s linear infinite;
  will-change: transform;
  transform: translateZ(0);
  contain: layout style paint;
  backface-visibility: hidden;
  width: max-content;
  isolation: isolate;
  /* Enhanced smoothness */
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.project-card {
  flex-shrink: 0;
  width: 300px;
  height: 400px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  perspective: 1000px;
  will-change: transform;
  transform: translateZ(0);
}

/* 3D Card Effect Components */
.card-container {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.card-body {
  width: 100%;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-style: preserve-3d;
}

.card-item {
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Default depth for card items */
.card-item[translateZ="50"] {
  transform: translateZ(10px);
}

.card-item[translateZ="100"] {
  transform: translateZ(20px);
}

.card-item[translateZ="150"] {
  transform: translateZ(30px);
}

.card-item[translateZ="200"] {
  transform: translateZ(40px);
}

.project-image {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
}


.project-card:hover {
  transform: translateY(-4px) translateZ(0) scale(1.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* 3D Card Hover Effects */
.project-card:hover .card-container {
  transform: rotateX(5deg) rotateY(5deg);
}

.project-card:hover .card-item[translateZ="50"] {
  transform: translateZ(20px);
}

.project-card:hover .card-item[translateZ="100"] {
  transform: translateZ(40px);
}

.project-card:hover .card-item[translateZ="150"] {
  transform: translateZ(60px);
}

.project-card:hover .card-item[translateZ="200"] {
  transform: translateZ(80px);
}

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

/* Default state - all images colored */
.project-card .project-image img {
  filter: grayscale(0%);
  transition: filter 0.3s ease;
}

/* Black and white effect for images on non-hovered cards when any card is hovered */
.projects-track:hover .project-card:not(:hover) .project-image img {
  filter: grayscale(100%);
}










.project-logo {
  font-size: 52px;
  margin-bottom: 16px;
  opacity: 0.95;
  position: relative;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.project-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.project-card p {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 20px 0;
  font-weight: 400;
  opacity: 0.8;
}



@keyframes projects-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}



/* Services: animated beams */
.services::before{content:"";position:absolute;inset:-20% -10% -10% -10%;background:
  conic-gradient(from 0deg at 20% 20%, color-mix(in oklab, var(--brand) 32%, transparent), transparent 40%),
  conic-gradient(from 180deg at 80% 30%, rgba(98,194,255,.25), transparent 50%);
  filter:blur(40px);opacity:.5;animation:beams 18s linear infinite}
@keyframes beams{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.services > *{position:relative;z-index:1}

/* About: floating blobs */
.about::before{content:"";position:absolute;inset:-10% -10% -10% -10%;background:
  radial-gradient(200px 200px at var(--bx,20%) var(--by,30%), color-mix(in oklab, var(--brand) 30%, transparent), transparent 60%),
  radial-gradient(260px 260px at calc(var(--bx,20%) + 50%) calc(var(--by,30%) + 20%), rgba(244,114,182,.18), transparent 60%);
  opacity:.45;filter:blur(20px);animation:blobs 12s ease-in-out infinite alternate}
@keyframes blobs{0%{--bx:18%;--by:30%}100%{--bx:28%;--by:38%}}
.about > *{position:relative;z-index:1}

/* Testimonials: animated lines */
.testimonials::before{content:"";position:absolute;inset:0;opacity:.35;background:
  repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,255,255,.04) 118px 119px),
  repeating-linear-gradient(0deg, transparent 0 118px, rgba(255,255,255,.04) 118px 119px);
  transform:translateZ(0);animation:lines-move 20s linear infinite}
@keyframes lines-move{from{background-position:0 0,0 0}to{background-position:240px 0,0 240px}}
.testimonials > *{position:relative;z-index:1}

/* Contact: dotted grid with soft vignette */
.contact::before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0) 0 0/18px 18px,
  radial-gradient(80% 80% at 50% -10%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%);
  opacity:.35}
.contact > *{position:relative;z-index:1}

@media(min-width:700px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .card{grid-template-rows:240px auto}
}
@media(min-width:1024px){
  .hero-inner{grid-template-columns:1.2fr .8fr;align-items:center}
  .hero-content{margin-top:-256px}
}
@media(min-width:1024px){.work-grid{grid-template-columns:repeat(4,1fr)}.card{grid-template-rows:200px auto}}

/* Staggered entrance for project cards */
.work-grid .card{opacity:0;transform:translateY(16px)}
.work-grid .card.is-in{opacity:1;transform:none;transition:opacity .6s ease var(--delay,0s), transform .6s ease var(--delay,0s)}
.work-grid .card.is-hidden{opacity:0!important;transform:scale(.98) translateY(8px);pointer-events:none;transition:opacity .3s ease, transform .3s ease}

/* Projects Page Styles */
.project-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .project-overlay {
  opacity: 1;
}

.project-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.year {
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}

.category {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stats Section */
.stats {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  padding: 60px 0;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 48px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Modal Enhancements */
.modal-content {
  margin-top: 20px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Form Enhancements */
select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  transition: border-color 0.2s ease;
}

select:focus {
  outline: none;
  border-color: var(--brand);
}

/* Services removed */

/* About */
.about {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

/* About Background Effects - Crazy Smooth Animations */
.about-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

/* Crazy Energy Orbs */
.about-particles {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 15% 25%, rgba(108, 240, 194, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(98, 194, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 10%, rgba(244, 114, 182, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  animation: crazy-energy-pulse 6s ease-in-out infinite alternate;
  filter: blur(0.5px);
}

@keyframes crazy-energy-pulse {
  0% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg) translateX(0px);
    filter: blur(0.5px) hue-rotate(0deg);
  }
  25% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(2deg) translateX(5px);
    filter: blur(1px) hue-rotate(10deg);
  }
  50% { 
    opacity: 0.9; 
    transform: scale(1.2) rotate(0deg) translateX(0px);
    filter: blur(1.5px) hue-rotate(20deg);
  }
  75% { 
    opacity: 0.6; 
    transform: scale(1.05) rotate(-2deg) translateX(-5px);
    filter: blur(1px) hue-rotate(10deg);
  }
  100% { 
    opacity: 0.5; 
    transform: scale(1) rotate(0deg) translateX(0px);
    filter: blur(0.5px) hue-rotate(0deg);
  }
}

/* Mesmerizing Floating Elements */
.about-grid {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(108, 240, 194, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(98, 194, 255, 0.025) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.02) 0%, transparent 60%);
  animation: mesmerizing-float 8s ease-in-out infinite;
}

@keyframes mesmerizing-float {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.6;
  }
  25% { 
    transform: translateY(-8px) translateX(3px) rotate(1deg);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-15px) translateX(0px) rotate(0deg);
    opacity: 0.9;
  }
  75% { 
    transform: translateY(-8px) translateX(-3px) rotate(-1deg);
    opacity: 0.7;
  }
  100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.6;
  }
}

/* Personal Photo Background */
.about-shapes {
  position: absolute;
  inset: 0;
}

.about-shapes::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10%;
  right: 20%;
  background-image: url('../img/me.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  opacity: 0.8;
  animation: photo-float 8s ease-in-out infinite;
  box-shadow: 
    0 0 30px rgba(108, 240, 194, 0.2),
    0 0 60px rgba(108, 240, 194, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(108, 240, 194, 0.3);
}

.about-shapes::after {
  display: none;
}

@keyframes photo-float {
  0%, 100% { 
    transform: translateY(0px) scale(1) rotate(0deg); 
    opacity: 0.8;
    filter: hue-rotate(0deg) brightness(1);
  }
  25% { 
    transform: translateY(-8px) scale(1.02) rotate(1deg);
    opacity: 0.9;
    filter: hue-rotate(5deg) brightness(1.05);
  }
  50% { 
    transform: translateY(-15px) scale(1.05) rotate(0deg);
    opacity: 1;
    filter: hue-rotate(10deg) brightness(1.1);
  }
  75% { 
    transform: translateY(-8px) scale(1.02) rotate(-1deg);
    opacity: 0.9;
    filter: hue-rotate(5deg) brightness(1.05);
  }
}

/* Flowing Data Streams */
.about-connections {
  position: absolute;
  inset: 0;
}

.about-connections::before,
.about-connections::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--brand), transparent);
  opacity: 0.15;
  animation: flowing-stream 5s ease-in-out infinite;
  border-radius: 2px;
  box-shadow: 0 0 8px var(--brand);
}

.about-connections::before {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}

.about-connections::after {
  bottom: 30%;
  right: 30%;
  animation-delay: 1.5s;
  background: linear-gradient(180deg, transparent, #62c2ff, transparent);
  box-shadow: 0 0 8px #62c2ff;
}

@keyframes flowing-stream {
  0%, 100% { 
    opacity: 0.2; 
    transform: scaleY(0.7) translateY(0px);
  }
  25% { 
    opacity: 0.5; 
    transform: scaleY(1.1) translateY(-5px);
  }
  50% { 
    opacity: 0.8; 
    transform: scaleY(1.4) translateY(-10px);
  }
  75% { 
    opacity: 0.5; 
    transform: scaleY(1.1) translateY(-5px);
  }
}

/* Pulsing Data Points */
.about-nodes {
  position: absolute;
  inset: 0;
}

.about-nodes::before,
.about-nodes::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.3;
  animation: crazy-pulse 3s ease-in-out infinite;
  box-shadow: 
    0 0 8px var(--brand),
    0 0 16px rgba(108, 240, 194, 0.1);
}

.about-nodes::before {
  top: 30%;
  left: 35%;
  animation-delay: 0s;
}

.about-nodes::after {
  bottom: 40%;
  right: 35%;
  animation-delay: 1s;
  background: #62c2ff;
  box-shadow: 
    0 0 8px #62c2ff,
    0 0 16px rgba(98, 194, 255, 0.1);
}

@keyframes crazy-pulse {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  25% { 
    opacity: 0.6; 
    transform: scale(1.3) rotate(90deg);
    filter: hue-rotate(15deg);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.8) rotate(180deg);
    filter: hue-rotate(30deg);
  }
  75% { 
    opacity: 0.6; 
    transform: scale(1.3) rotate(270deg);
    filter: hue-rotate(15deg);
  }
}

/* Floating Tech Elements - Optimized */
@keyframes tech-float {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.2;
  }
  50% { 
    transform: translateY(-15px) scale(1.1);
    opacity: 0.5;
  }
}

/* About Content */
.about-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.about-header {
  text-align: center;
  margin-bottom: 60px;
}

.about-title {
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 800;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.title-text {
  color: var(--text);
}

.title-accent {
  color: var(--brand);
  position: relative;
}

.title-accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), #62c2ff);
  border-radius: 2px;
  animation: accent-pulse 2s ease-in-out infinite;
}

@keyframes accent-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.1); }
}

.about-subtitle {
  font-size: 18px;
  color: var(--muted);
  font-weight: 500;
  max-width: 600px;
  margin: 0 auto;
}

.about-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: start;
}

/* About Text */
.about-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.text-block {
  position: relative;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.text-block:hover {
  border-color: rgba(108, 240, 194, 0.2);
  background: rgba(108, 240, 194, 0.03);
  transform: translateY(-2px);
}

.text-block p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

.intro-text {
  font-size: 18px !important;
  font-weight: 600;
  color: var(--text) !important;
}

.highlight-name {
  color: var(--brand);
  font-weight: 700;
  position: relative;
}

.highlight-name::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand);
  opacity: 0.3;
}

.skill-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(108, 240, 194, 0.1);
  color: var(--brand);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  margin: 0 2px;
  transition: all 0.3s ease;
}

.skill-tag:hover {
  background: rgba(108, 240, 194, 0.2);
  transform: translateY(-1px);
}

/* About Visual */
.about-visual {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.skills-showcase {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.skill-category {
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.skill-category:hover {
  border-color: rgba(108, 240, 194, 0.2);
  background: rgba(108, 240, 194, 0.03);
  transform: translateY(-2px);
}

.skill-category h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.skill-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-item {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  transition: all 0.3s ease;
}

.skill-item:hover {
  background: rgba(108, 240, 194, 0.1);
  border-color: rgba(108, 240, 194, 0.3);
  color: var(--brand);
  transform: translateY(-1px);
}

/* About Stats */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-item:hover {
  border-color: rgba(108, 240, 194, 0.2);
  background: rgba(108, 240, 194, 0.03);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 8px;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .about-visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .about {
    padding: 60px 0;
  }
  
  .about-header {
    margin-bottom: 40px;
  }
  
  .about-title {
    flex-direction: column;
    gap: 8px;
  }
  
  .about-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .text-block {
    padding: 20px;
  }
}

/* Testimonials removed */

/* Contact */
.contact-inner{display:grid;place-items:center;text-align:center;border:1px solid var(--border);border-radius:var(--radius);padding:40px;background:radial-gradient(80% 80% at 50% 0%,rgba(108,240,194,.1),rgba(10,10,10,0))}

/* Footer */
.site-footer {
  position: relative;
  padding: 15px 0;
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(15px);
  overflow: hidden;
  z-index: 10;
}

/* Footer Background Effects */
.footer-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Floating Footer Particles */
.footer-particles {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(108, 240, 194, 0.12) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(98, 194, 255, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.08) 0%, transparent 40%);
  animation: footer-energy-flow 7s ease-in-out infinite alternate;
}

@keyframes footer-energy-flow {
  0% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.05) rotate(1deg);
    filter: hue-rotate(10deg);
  }
  100% { 
    opacity: 0.4; 
    transform: scale(1.02) rotate(0deg);
    filter: hue-rotate(5deg);
  }
}

/* Horizontal Data Streams */
.footer-streams {
  position: absolute;
  inset: 0;
}

.footer-streams::before,
.footer-streams::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.3;
  animation: footer-stream-flow 6s ease-in-out infinite;
  border-radius: 1px;
  box-shadow: 0 0 10px var(--brand);
}

.footer-streams::before {
  top: 30%;
  left: 10%;
  animation-delay: 0s;
}

.footer-streams::after {
  bottom: 30%;
  right: 10%;
  animation-delay: 2s;
  background: linear-gradient(90deg, transparent, #62c2ff, transparent);
  box-shadow: 0 0 10px #62c2ff;
}

@keyframes footer-stream-flow {
  0%, 100% { 
    opacity: 0.2; 
    transform: scaleX(0.8) translateX(0px);
  }
  50% { 
    opacity: 0.5; 
    transform: scaleX(1.2) translateX(10px);
  }
}

/* Footer Data Nodes */
.footer-nodes {
  position: absolute;
  inset: 0;
}

.footer-nodes::before,
.footer-nodes::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.5;
  animation: footer-node-pulse 4s ease-in-out infinite;
  box-shadow: 0 0 12px var(--brand);
}

.footer-nodes::before {
  top: 25%;
  left: 20%;
  animation-delay: 0s;
}

.footer-nodes::after {
  bottom: 25%;
  right: 20%;
  animation-delay: 1.5s;
  background: #62c2ff;
  box-shadow: 0 0 12px #62c2ff;
}

@keyframes footer-node-pulse {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.4);
  }
}

/* Footer Connections */
.footer-connections {
  position: absolute;
  inset: 0;
}

.footer-connections::before,
.footer-connections::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 30px;
  background: var(--brand);
  opacity: 0.3;
  animation: footer-connection-flicker 3s ease-in-out infinite;
  border-radius: 1px;
}

.footer-connections::before {
  top: 40%;
  left: 30%;
  animation-delay: 0s;
}

.footer-connections::after {
  bottom: 40%;
  right: 30%;
  animation-delay: 1s;
  background: #62c2ff;
}

@keyframes footer-connection-flicker {
  0%, 100% { 
    opacity: 0.1; 
    transform: scaleY(0.5);
  }
  50% { 
    opacity: 0.4; 
    transform: scaleY(1.2);
  }
}

/* Footer Content */
.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer-brand {
  flex: 1;
}

.footer-copyright {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.footer-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
  color: var(--muted);
  position: relative;
  overflow: hidden;
}

.footer-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand), #62c2ff);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer-link:hover::before {
  opacity: 0.1;
}

.footer-link:hover {
  background: rgba(108, 240, 194, 0.1);
  border-color: rgba(108, 240, 194, 0.3);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(108, 240, 194, 0.2);
}

.footer-icon {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.footer-link:hover .footer-icon {
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .footer-links {
    order: -1;
  }
}

/* Utilities */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Custom Cursor inspired by Aceternity Following Pointer */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:1100}
.cursor-ring{position:absolute;width:44px;height:44px;border:1px solid rgba(236,236,236,.35);border-radius:999px;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s,border-color .2s}
.cursor-dot{position:absolute;width:6px;height:6px;background:#eaeaea;border-radius:999px;transform:translate(-50%,-50%);transition:opacity .2s}
.cursor.is-hidden .cursor-ring,.cursor.is-hidden .cursor-dot{opacity:0}
.cursor.is-click .cursor-ring{width:28px;height:28px;border-color:#6cf0c2}
.cursor.is-link .cursor-ring{width:64px;height:64px;border-color:#6cf0c2}
.cursor-trail{position:fixed;inset:0;pointer-events:none;z-index:1050}
.trail-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.8;transform:translate(-50%,-50%);animation:trail-fade .8s ease forwards}
@keyframes trail-fade{to{opacity:0;transform:translate(-50%,-50%) scale(.3)}}

/* Reveal on scroll */
.reveal .section-head, .reveal .work-grid, .reveal .service-grid, .reveal .two-col, .reveal .slider, .reveal .contact-inner{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible .section-head, .reveal.is-visible .work-grid, .reveal.is-visible .service-grid, .reveal.is-visible .two-col, .reveal.is-visible .slider, .reveal.is-visible .contact-inner{opacity:1;transform:none}

/* Magnetic hover */
.magnet{position:relative;z-index:0;will-change:transform}

/* Scroll progress */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));z-index:60}
.scroll-progress__bar{height:100%;width:0;background:linear-gradient(90deg,#6cf0c2,#62c2ff,#f472b6);box-shadow:0 0 16px rgba(108,240,194,.4)}

/* Selection */
::selection{background:color-mix(in oklab, var(--brand) 40%, transparent);color:var(--text)}

/* Enhanced Modal with Animations */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.is-open {
  display: grid;
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.is-open .modal-backdrop {
  opacity: 1;
}

.modal-dialog {
  position: relative;
  max-width: 900px;
  width: 92%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: scale(0.8) translateY(50px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.is-open .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-close:hover {
  transform: rotate(90deg);
  background: var(--brand);
  color: var(--bg);
}

.modal-media {
  height: 420px;
  background: #0f0f0f center/cover no-repeat;
}

.modal-body {
  padding: 16px;
}

.muted {
  color: var(--muted);
}

/* Enhanced Contact Form */
.contact-modal {
  max-width: 600px;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(108, 240, 194, 0.2);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(108, 240, 194, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.contact-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6cf0c2, #62c2ff, #f472b6);
  animation: shimmer 3s ease-in-out infinite;
}

/* Animated background effects */
.contact-bg-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #6cf0c2 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.dot-1 { top: 20%; left: 10%; animation-delay: 0s; }
.dot-2 { top: 60%; right: 15%; animation-delay: 1.2s; }
.dot-3 { top: 40%; left: 5%; animation-delay: 2.4s; }
.dot-4 { top: 80%; right: 25%; animation-delay: 3.6s; }
.dot-5 { top: 30%; right: 5%; animation-delay: 4.8s; }

/* Contact header */
.contact-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #ffffff 0%, #6cf0c2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.title-accent {
  animation: sparkle 2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-accent svg {
  width: 20px;
  height: 20px;
  stroke: #6cf0c2;
  transition: all 0.3s ease;
}

.contact-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  margin: 0;
  font-weight: 400;
}

/* Enhanced form styling */
.contact-form {
  position: relative;
  z-index: 2;
}

.form-row {
  margin-bottom: 1.5rem;
}

.input-group {
  position: relative;
}

.input-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.label-icon {
  opacity: 0.7;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: all 0.3s ease;
}

.input-wrapper {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #6cf0c2;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 0 0 4px rgba(108, 240, 194, 0.1),
    0 8px 25px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.form-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.input-focus-ring {
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6cf0c2, #62c2ff);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}

.form-input:focus + .input-focus-ring {
  opacity: 0.3;
  animation: pulse-ring 2s ease-in-out infinite;
}

/* Enhanced buttons with stunning animations */
.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-primary {
  flex: 1;
  position: relative;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #6cf0c2 0%, #4ad2a5 50%, #2b8a6b 100%);
  border: none;
  border-radius: 12px;
  color: #000000;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 
    0 4px 15px rgba(108, 240, 194, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  letter-spacing: 0.3px;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 15px 35px rgba(108, 240, 194, 0.4),
    0 0 0 1px rgba(108, 240, 194, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #7af5d2 0%, #5ae2b5 50%, #3baa7b 100%);
}

.btn-primary:active {
  transform: translateY(-1px) scale(0.98);
  transition: all 0.1s ease;
}

.btn-secondary {
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(108, 240, 194, 0.1), rgba(98, 194, 255, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-secondary:hover::before {
  opacity: 1;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(108, 240, 194, 0.4);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(108, 240, 194, 0.2);
  color: #ffffff;
}

.btn-icon {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.btn-primary:hover .btn-icon {
  transform: translateX(3px) scale(1.1);
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  transform: scale(0);
  animation: ripple 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Enhanced modal close button */
.contact-modal .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.contact-modal .modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: rotate(90deg);
}

/* Performance Optimized CSS - 60fps Smooth Animations */

/* GPU Acceleration for all animated elements */
.modal,
.modal-dialog,
.btn-primary,
.btn-secondary,
.form-input,
.floating-dot,
.title-accent,
.input-focus-ring,
.btn-ripple {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimized animations with transform3d for GPU acceleration */
@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes float {
  0%, 100% { 
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    opacity: 0.6;
  }
  50% { 
    transform: translate3d(0, -20px, 0) scale3d(1.2, 1.2, 1);
    opacity: 1;
  }
}

@keyframes sparkle {
  0%, 100% { 
    transform: scale3d(1, 1, 1) rotateZ(0deg);
    opacity: 0.8;
  }
  50% { 
    transform: scale3d(1.2, 1.2, 1) rotateZ(180deg);
    opacity: 1;
  }
}

@keyframes pulse-ring {
  0% { transform: scale3d(1, 1, 1); opacity: 0.3; }
  50% { transform: scale3d(1.05, 1.05, 1); opacity: 0.1; }
  100% { transform: scale3d(1, 1, 1); opacity: 0.3; }
}

@keyframes ripple {
  0% {
    transform: scale3d(0, 0, 0);
    opacity: 1;
  }
  50% {
    transform: scale3d(1, 1, 1);
    opacity: 0.8;
  }
  100% {
    transform: scale3d(2, 2, 0);
    opacity: 0;
  }
}

/* Optimized transitions with hardware acceleration */
.modal {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-dialog {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.btn-primary,
.btn-secondary {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              box-shadow 0.4s ease,
              background 0.4s ease;
}

.form-input {
  transition: transform 0.3s ease, 
              border-color 0.3s ease,
              background 0.3s ease,
              box-shadow 0.3s ease;
}

/* Optimized floating dots with reduced complexity */
.floating-dot {
  animation: float 6s ease-in-out infinite;
  transform: translateZ(0);
}

/* Optimized button hover effects */
.btn-primary:hover {
  transform: translate3d(0, -3px, 0) scale3d(1.02, 1.02, 1);
}

.btn-secondary:hover {
  transform: translate3d(0, -2px, 0);
}

/* Optimized input focus effects */
.form-input:focus {
  transform: translate3d(0, -2px, 0);
}

/* Optimized icon animations */
.btn-icon {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-primary:hover .btn-icon {
  transform: translate3d(3px, 0, 0) scale3d(1.1, 1.1, 1);
}

/* Space-Themed Custom Scrollbar - Functional Version */
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, 
    rgba(15, 15, 15, 0.95) 0%,
    rgba(25, 25, 35, 0.95) 50%,
    rgba(15, 15, 15, 0.95) 100%);
  border-radius: 7px;
  border: 1px solid rgba(108, 240, 194, 0.15);
  box-shadow: 
    inset 0 0 15px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(108, 240, 194, 0.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    #6cf0c2 0%,
    #4ad2a5 25%,
    #2b8a6b 75%,
    #1a6b52 100%);
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 
    0 0 12px rgba(108, 240, 194, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    #7af5d2 0%,
    #5ae2b5 25%,
    #3baa7b 75%,
    #2a7c62 100%);
  box-shadow: 
    0 0 18px rgba(108, 240, 194, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transform: scaleX(1.05);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg,
    #8af8e2 0%,
    #6af2c5 25%,
    #4bc28b 75%,
    #3a8c72 100%);
  box-shadow: 
    0 0 22px rgba(108, 240, 194, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-corner {
  background: rgba(15, 15, 15, 0.95);
}

/* Space-themed scrollbar arrows */
::-webkit-scrollbar-button {
  background: linear-gradient(180deg,
    rgba(108, 240, 194, 0.08) 0%,
    rgba(108, 240, 194, 0.03) 100%);
  border: 1px solid rgba(108, 240, 194, 0.15);
  border-radius: 3px;
  transition: all 0.2s ease;
}

::-webkit-scrollbar-button:hover {
  background: linear-gradient(180deg,
    rgba(108, 240, 194, 0.15) 0%,
    rgba(108, 240, 194, 0.08) 100%);
  border-color: rgba(108, 240, 194, 0.3);
  box-shadow: 0 0 8px rgba(108, 240, 194, 0.2);
}

::-webkit-scrollbar-button:active {
  background: linear-gradient(180deg,
    rgba(108, 240, 194, 0.2) 0%,
    rgba(108, 240, 194, 0.1) 100%);
}

/* Custom scrollbar for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #6cf0c2 rgba(15, 15, 15, 0.95);
}

/* Space-themed scrollbar enhancements */
body {
  scrollbar-width: thin;
  scrollbar-color: #6cf0c2 rgba(25, 25, 35, 0.95);
}

/* Floating space particles near scrollbar */
.space-particles {
  position: fixed;
  top: 0;
  right: 0;
  width: 20px;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.space-particle {
  position: absolute;
  width: 1px;
  height: 1px;
  background: radial-gradient(circle, #6cf0c2 0%, transparent 70%);
  border-radius: 50%;
  animation: particle-drift 8s linear infinite;
}

.space-particle:nth-child(2n) {
  background: radial-gradient(circle, #62c2ff 0%, transparent 70%);
  animation-duration: 12s;
}

.space-particle:nth-child(3n) {
  background: radial-gradient(circle, #f472b6 0%, transparent 70%);
  animation-duration: 10s;
}

@keyframes particle-drift {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) scale(1);
  }
  100% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  width: 3px;
  height: 0%;
  background: linear-gradient(180deg,
    #6cf0c2 0%,
    #4ad2a5 50%,
    #2b8a6b 100%);
  box-shadow: 0 0 8px rgba(108, 240, 194, 0.4);
  z-index: 2;
  transition: height 0.1s ease;
  border-radius: 0 0 2px 2px;
}

/* Enhanced scrollbar glow effect */
.scrollbar-glow {
  position: fixed;
  top: 0;
  right: 0;
  width: 14px;
  height: 80px;
  background: radial-gradient(ellipse at center,
    rgba(108, 240, 194, 0.2) 0%,
    rgba(108, 240, 194, 0.05) 40%,
    transparent 70%);
  border-radius: 7px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scrollbar-glow.active {
  opacity: 1;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.2;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.4;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .contact-modal {
    max-width: 95%;
    margin: 1rem;
  }
  
  .contact-title {
    font-size: 2rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}

/* Toasts */
.toasts{position:fixed;right:14px;bottom:14px;display:grid;gap:8px;z-index:90}
.toast{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text);box-shadow:var(--shadow);animation:toast-in .2s ease}
.toast--error{border-color:#ef4444;background:color-mix(in oklab, #ef4444 10%, var(--bg-elev));color:#fca5a5}
.toast--success{border-color:var(--brand);background:color-mix(in oklab, var(--brand) 10%, var(--bg-elev));color:var(--brand)}

/* Project Modal Styles - Creative Animations */
.project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s ease;
}

.project-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.project-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: scale(1.1);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-modal.is-open .project-modal-backdrop {
  opacity: 1;
  transform: scale(1);
}

.project-modal-content {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  transform: scale(0.3) rotateX(15deg) rotateY(-10deg) translateY(100px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(108, 240, 194, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.project-modal.is-open .project-modal-content {
  transform: scale(1) rotateX(0deg) rotateY(0deg) translateY(0);
}

/* Subtle professional border */
.project-modal-content::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, 
    rgba(108, 240, 194, 0.1) 0%, 
    rgba(108, 240, 194, 0.05) 50%, 
    rgba(108, 240, 194, 0.1) 100%
  );
  border-radius: 21px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.project-modal.is-open .project-modal-content::before {
  opacity: 1;
}

/* Subtle ambient lighting */
.project-modal-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(108, 240, 194, 0.02) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(108, 240, 194, 0.01) 0%, transparent 60%);
  border-radius: 20px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.project-modal.is-open .project-modal-content::after {
  opacity: 1;
}

.project-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 28px 20px 28px;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.project-modal.is-open .project-modal-header {
  opacity: 1;
  transform: translateY(0);
}

.project-modal-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.project-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.project-modal-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(108, 240, 194, 0.2), transparent);
  transition: left 0.5s ease;
}

.project-modal-close:hover::before {
  left: 100%;
}

.project-modal-close:hover {
  background: var(--bg-elev);
  color: var(--text);
  transform: scale(1.05);
}

.project-modal-body {
  padding: 24px 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

.project-modal.is-open .project-modal-body {
  opacity: 1;
  transform: translateY(0);
}

.project-modal-description {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px 0;
  position: relative;
}

.project-modal-description::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  transition: width 0.8s ease 0.5s;
}

.project-modal.is-open .project-modal-description::after {
  width: 100%;
}

.project-modal-image {
  width: 100%;
  height: 220px;
  background: var(--bg-elev);
  border-radius: 16px;
  margin-bottom: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.8) rotateY(10deg);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
  position: relative;
  overflow: hidden;
}

.project-modal.is-open .project-modal-image {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
}

.project-modal-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(108, 240, 194, 0.1), transparent);
  transition: left 1s ease 0.6s;
}

.project-modal.is-open .project-modal-image::before {
  left: 100%;
}

.project-modal-footer {
  display: flex;
  gap: 16px;
  padding: 20px 28px 28px 28px;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}

.project-modal.is-open .project-modal-footer {
  opacity: 1;
  transform: translateY(0);
}

.project-modal-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.project-modal-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.project-modal-btn:hover::before {
  left: 100%;
}

.project-modal-btn--github {
  background: #24292e;
  color: #ffffff;
  border-color: #24292e;
  box-shadow: 0 2px 8px rgba(36, 41, 46, 0.2);
}

.project-modal-btn--github:hover {
  background: #1a1e22;
  border-color: #1a1e22;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(36, 41, 46, 0.3);
}

.project-modal-btn--github svg {
  transition: transform 0.3s ease;
}

.project-modal-btn--github:hover svg {
  transform: scale(1.05);
}

.project-modal-btn--website {
  background: var(--brand);
  color: #000000;
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(108, 240, 194, 0.2);
}

.project-modal-btn--website:hover {
  background: color-mix(in oklab, var(--brand) 80%, #000000);
  border-color: color-mix(in oklab, var(--brand) 80%, #000000);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 240, 194, 0.3);
}

.project-modal-btn--website svg {
  transition: transform 0.3s ease;
}

.project-modal-btn--website:hover svg {
  transform: scale(1.05);
}

.project-modal-btn svg {
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Staggered animation for buttons */
.project-modal-btn:nth-child(1) {
  animation-delay: 0.6s;
}

.project-modal-btn:nth-child(2) {
  animation-delay: 0.7s;
}

/* Responsive Design */
@media (max-width: 768px) {
  .project-modal-content {
    width: 95%;
    max-width: none;
  }
  
  .project-modal-header {
    padding: 20px 20px 12px 20px;
  }
  
  .project-modal-title {
    font-size: 20px;
  }
  
  .project-modal-body {
    padding: 16px 20px;
  }
  
  .project-modal-footer {
    padding: 12px 20px 20px 20px;
    flex-direction: column;
  }
  
  .project-modal-btn {
    padding: 14px 20px;
  }
}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Loader */
.loader{position:fixed;inset:0;background:radial-gradient(80% 60% at 50% 40%, color-mix(in oklab, var(--brand) 12%, transparent), transparent), var(--bg);display:grid;place-items:center;z-index:200;transition:opacity .5s ease, visibility .5s ease}
.loader.is-hidden{opacity:0;visibility:hidden}
.loader-inner{display:grid;gap:16px;place-items:center}
.orbs{position:relative;width:120px;height:60px}
.orb{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:999px;background:var(--brand);filter:blur(.3px);box-shadow:0 0 24px color-mix(in oklab, var(--brand) 60%, transparent)}
.orb:nth-child(1){animation:orbit1 1.8s ease-in-out infinite}
.orb:nth-child(2){animation:orbit2 1.8s ease-in-out infinite .1s}
.orb:nth-child(3){animation:orbit3 1.8s ease-in-out infinite .2s}
@keyframes orbit1{0%,100%{transform:translate(-50%,-50%) translateX(-36px)}50%{transform:translate(-50%,-50%) translateX(36px)}}
@keyframes orbit2{0%,100%{transform:translate(-50%,-50%) translateY(-18px)}50%{transform:translate(-50%,-50%) translateY(18px)}}
@keyframes orbit3{0%,100%{transform:translate(-50%,-50%) translateX(36px)}50%{transform:translate(-50%,-50%) translateX(-36px)}}
.loader-word{display:flex;gap:2px;font-weight:800;letter-spacing:.08em}
.loader-word span{color:var(--text);opacity:.6;animation:pulse 1.2s ease-in-out infinite}
.loader-word span:nth-child(2){animation-delay:.05s}
.loader-word span:nth-child(3){animation-delay:.1s}
.loader-word span:nth-child(4){animation-delay:.15s}
.loader-word span:nth-child(5){animation-delay:.2s}
.loader-word span:nth-child(6){animation-delay:.25s}
.loader-word span:nth-child(7){animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.bar{width:200px;height:6px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.05);overflow:hidden}
.bar .fill{display:block;height:100%;width:0;background:linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 50%, #62c2ff));box-shadow:0 0 16px color-mix(in oklab, var(--brand) 50%, transparent)}

/* Respect reduced motion */
/* Mobile-specific styles */
@media (max-width: 768px) {
  /* Hide cursor on mobile */
  .cursor {
    display: none !important;
  }
  
  /* Hide cursor trail on mobile */
  .cursor-trail {
    display: none !important;
  }
  
  /* Ensure no cursor-none class affects mobile */
  .cursor-none {
    cursor: auto !important;
  }
  
  /* Adjust hero section for mobile */
  .hero {
    padding-top: 120px;
    padding-bottom: 80px;
    min-height: 100vh;
  }
  
  /* Adjust hero content for mobile */
  .hero-content {
    text-align: center;
  }
  
  /* Adjust project cards for mobile */
  .project-card {
    margin: 0 8px;
  }
  
  /* Adjust modal for mobile */
  .project-modal-content {
    margin: 20px;
    max-height: 90vh;
  }
  
  /* Disable drag on mobile for download buttons */
  .resume-icon,
  .cv-icon {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Adjust desktop icons for mobile */
  .desktop-icons {
    display: none;
  }
  
  /* Adjust marquee speed for mobile */
  .projects-track {
    animation-duration: 20s;
  }
  
  /* Adjust button sizes for mobile */
  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  /* Adjust form inputs for mobile */
  .form-group input,
  .form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Adjust project modal buttons for mobile */
  .project-modal-btn {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  /* Adjust header for mobile */
  .site-header {
    padding: 16px 20px;
  }
  
  /* Adjust section padding for mobile */
  .section {
    padding: 60px 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .aurora,.bg-lines path,.spotlight,.meteors,.meteor,.marquee-track,.services::before,.about::before,.testimonials::before{animation:none!important}
}

/* Command palette */
.cmdk{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);z-index:120}
.cmdk.is-open{display:grid}
.cmdk-dialog{width:600px;max-width:92%;border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);box-shadow:var(--shadow);overflow:hidden}
.cmdk-input{width:100%;padding:14px 16px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:16px}
.cmdk-input:focus{outline:none}
.cmdk-list{max-height:300px;overflow:auto;display:grid}
.cmdk-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.cmdk-item:hover{background:rgba(255,255,255,.04)}
.cmdk-item kbd{opacity:.6;font-size:12px}

/* Link preview tooltip */
.tooltip{position:absolute;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text);font-size:12px;box-shadow:var(--shadow);transform:translate(-50%, -120%);white-space:nowrap;z-index:110}