:root{
  --bg:#060719;
  --panel:#090d1f;
  --panel-2:#10152f;
  --cyan:#04eaff;
  --cyan-soft:#7df7ff;
  --magenta:#d900ff;
  --pink:#ff2bd6;
  --green:#39ff6a;
  --text:#d9fbff;
  --muted:#7ca9b7;
  --deep:#03040d;
  --line:rgba(4,234,255,0.34);
  --font-display:"Rajdhani",sans-serif;
  --font-tech:"Share Tech Mono",monospace;
  --font-logo:"Orbitron",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:var(--bg);
  font-family:var(--font-display);
  cursor:none;
}
a{color:inherit;text-decoration:none;cursor:none;}
button{cursor:none;}
::selection{background:var(--magenta);color:#fff;}

.city-bg{
  position:fixed;
  inset:0;
  z-index:-4;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 20%,rgba(217,0,255,0.16),transparent 25%),
    linear-gradient(180deg,#08091f 0%,#10062c 48%,#050512 100%);
  --parallax-x:0px;
  --parallax-y:0px;
}
.sky-incident{
  position:absolute;
  top:16%;
  left:0;
  width:78px;
  height:44px;
  opacity:0;
  transform:translate3d(-18vw,-1vh,0) rotate(14deg) scale(.55);
  animation:sky-incident-flight-1 24s linear infinite 7s;
  pointer-events:none;
  will-change:transform,opacity;
}
.sky-incident--2{
  top:28%;
  width:72px;
  height:40px;
  transform:translate3d(112vw,-1vh,0) rotate(-12deg) scale(.46);
  animation-name:sky-incident-flight-2;
  animation-duration:31s;
  animation-delay:13s;
}
.sky-incident--3{
  top:21%;
  width:86px;
  height:48px;
  transform:translate3d(-20vw,0,0) rotate(10deg) scale(.68);
  animation-name:sky-incident-flight-3;
  animation-duration:37s;
  animation-delay:22s;
}
.sky-incident__ship,
.sky-incident__flash,
.sky-incident__particle{
  position:absolute;
}
.sky-incident__ship{
  left:18px;
  top:15px;
  width:28px;
  height:10px;
  border-radius:8px 16px 10px 8px;
  background:linear-gradient(90deg,rgba(125,247,255,.18),rgba(125,247,255,.92) 44%,rgba(217,0,255,.95));
  box-shadow:0 0 12px rgba(4,234,255,.45),0 0 26px rgba(217,0,255,.22);
}
.sky-incident__ship::before,
.sky-incident__ship::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.sky-incident__ship::before{
  left:-7px;
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-right:8px solid rgba(125,247,255,.95);
  filter:drop-shadow(0 0 6px rgba(4,234,255,.75));
}
.sky-incident__ship::after{
  right:-8px;
  width:10px;
  height:4px;
  border-radius:0 8px 8px 0;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(57,255,106,.95));
  box-shadow:0 0 10px rgba(57,255,106,.7);
}
.sky-incident__flash{
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 16%,rgba(125,247,255,.9) 24%,rgba(217,0,255,.62) 42%,transparent 72%);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  animation:sky-incident-flash 24s linear infinite 7s;
}
.sky-incident__particle{
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan-soft);
  box-shadow:0 0 10px rgba(125,247,255,.85);
  opacity:0;
}
.sky-incident__particle--1{animation:sky-incident-particle-1 24s linear infinite 7s;}
.sky-incident__particle--2{animation:sky-incident-particle-2 24s linear infinite 7s; background:var(--magenta); box-shadow:0 0 10px rgba(217,0,255,.82);}
.sky-incident__particle--3{animation:sky-incident-particle-3 24s linear infinite 7s; background:var(--green); box-shadow:0 0 10px rgba(57,255,106,.8);}
.sky-incident--2 .sky-incident__flash{animation-duration:31s;animation-delay:13s;}
.sky-incident--2 .sky-incident__particle--1,
.sky-incident--2 .sky-incident__particle--2,
.sky-incident--2 .sky-incident__particle--3{animation-duration:31s;animation-delay:13s;}
.sky-incident--3 .sky-incident__flash{animation-duration:37s;animation-delay:22s;}
.sky-incident--3 .sky-incident__particle--1,
.sky-incident--3 .sky-incident__particle--2,
.sky-incident--3 .sky-incident__particle--3{animation-duration:37s;animation-delay:22s;}
.sky-drift{
  position:absolute;
  top:24%;
  left:0;
  width:64px;
  height:20px;
  opacity:0;
  transform:translate3d(-14vw,0,0) scale(.72);
  animation:sky-drift-pass 34s linear infinite 3s;
  pointer-events:none;
  will-change:transform,opacity;
}
.sky-drift__core,
.sky-drift__trail{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border-radius:999px;
}
.sky-drift__core{
  left:22px;
  width:10px;
  height:10px;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(4,234,255,.72) 48%,rgba(217,0,255,.15) 74%,transparent 100%);
  box-shadow:0 0 14px rgba(4,234,255,.8),0 0 20px rgba(217,0,255,.26);
}
.sky-drift__core::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(125,247,255,.65),rgba(125,247,255,0));
  transform:translate(-8px,-50%);
  opacity:.8;
}
.sky-drift__trail{
  left:4px;
  width:30px;
  height:2px;
  background:linear-gradient(90deg,rgba(125,247,255,.02),rgba(125,247,255,.72),rgba(217,0,255,.12));
  box-shadow:0 0 14px rgba(4,234,255,.48);
  opacity:.78;
}
.city-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(4,234,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(4,234,255,0.035) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.55;
}
.moon{
  position:absolute;
  top:14%;
  right:15%;
  width:120px;
  height:120px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(4,234,255,0.18),rgba(217,0,255,0.12));
  box-shadow:0 0 70px rgba(4,234,255,0.2);
  transform:translate(calc(var(--parallax-x) * -0.45),calc(var(--parallax-y) * -0.35));
  animation:moon-pulse 7s ease-in-out infinite;
  will-change:transform,box-shadow;
}
.skyline{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42vh;
  opacity:.72;
  transform:translate(calc(var(--parallax-x) * 0.28),calc(var(--parallax-y) * 0.12));
  will-change:transform;
}
.skyline::before,
.skyline::after{
  content:"";
  position:absolute;
  bottom:0;
  width:100%;
  height:100%;
  background:
    linear-gradient(90deg,transparent 0 3%,#11193b 3% 11%,transparent 11% 14%,#141a45 14% 26%,transparent 26% 30%,#0d1230 30% 44%,transparent 44% 48%,#121a3d 48% 61%,transparent 61% 65%,#0d1431 65% 78%,transparent 78% 82%,#141b44 82% 94%,transparent 94% 100%);
  clip-path:polygon(0 100%,0 35%,7% 35%,7% 23%,13% 23%,13% 47%,20% 47%,20% 28%,27% 28%,27% 55%,36% 55%,36% 18%,45% 18%,45% 43%,54% 43%,54% 30%,62% 30%,62% 58%,70% 58%,70% 26%,79% 26%,79% 46%,87% 46%,87% 20%,95% 20%,95% 100%);
}
.skyline-front{
  height:34vh;
  opacity:.9;
  filter:drop-shadow(0 -10px 24px rgba(4,234,255,0.08));
  transform:translate(calc(var(--parallax-x) * 0.48),calc(var(--parallax-y) * 0.18));
}
.skyline-front::before{
  background:
    linear-gradient(90deg,transparent 0 5%,#080b22 5% 17%,transparent 17% 20%,#0a0f2a 20% 34%,transparent 34% 38%,#070a20 38% 55%,transparent 55% 58%,#0a0f2e 58% 73%,transparent 73% 77%,#080c24 77% 95%,transparent 95% 100%);
}
.road-line{
  position:absolute;
  left:0;
  right:0;
  bottom:21vh;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 20px rgba(4,234,255,.8);
}
.window-lights{
  position:absolute;
  inset:auto 0 9vh 0;
  height:28vh;
  pointer-events:none;
  transform:translate(calc(var(--parallax-x) * 0.36),calc(var(--parallax-y) * 0.14));
  will-change:transform;
}
.window-lights span{
  position:absolute;
  width:5px;
  height:12px;
  background:rgba(125,247,255,.72);
  box-shadow:0 0 12px rgba(4,234,255,.7);
  animation:window-flicker 3.6s steps(2,end) infinite;
}
.window-lights span:nth-child(1){left:9%;top:48%;animation-delay:.2s;}
.window-lights span:nth-child(2){left:16%;top:22%;animation-delay:1.1s;}
.window-lights span:nth-child(3){left:29%;top:38%;animation-delay:.65s;}
.window-lights span:nth-child(4){left:38%;top:15%;animation-delay:1.8s;}
.window-lights span:nth-child(5){left:47%;top:44%;animation-delay:.35s;}
.window-lights span:nth-child(6){left:58%;top:28%;animation-delay:2.25s;}
.window-lights span:nth-child(7){left:67%;top:54%;animation-delay:.9s;}
.window-lights span:nth-child(8){left:76%;top:24%;animation-delay:1.45s;}
.window-lights span:nth-child(9){left:84%;top:42%;animation-delay:2.7s;}
.window-lights span:nth-child(10){left:92%;top:18%;animation-delay:.05s;}

.noise,
.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
}
.noise{
  z-index:60;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines{
  z-index:61;
  opacity:.18;
  background:repeating-linear-gradient(180deg,transparent 0 4px,rgba(4,234,255,.12) 5px,transparent 7px);
  mix-blend-mode:screen;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  display:flex;
  justify-content:center;
  padding:14px 20px 0;
}
.nav-shell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:min(560px,92vw);
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  overflow:hidden;
  --indicator-x:0px;
  --indicator-w:118px;
}
.nav-indicator{
  position:absolute;
  left:0;
  bottom:0;
  width:var(--indicator-w);
  height:3px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);
  box-shadow:0 0 18px rgba(4,234,255,.85),0 0 26px rgba(217,0,255,.45);
  opacity:.96;
  transform:translateX(var(--indicator-x));
  transition:transform .26s ease-out,width .26s ease-out,opacity .2s ease;
  pointer-events:none;
}
.nav-link{
  position:relative;
  z-index:1;
  min-width:118px;
  padding:12px 18px 11px;
  color:var(--cyan);
  text-align:center;
  font-family:var(--font-display);
  font-size:27px;
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:0 0 12px rgba(4,234,255,.7);
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
.nav-link:hover,
.nav-link.active{
  color:#f3feff;
  text-shadow:0 0 14px rgba(217,0,255,.7);
}
.nav-link:hover{transform:translateY(1px);}
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--green);
  outline-offset:4px;
}

.social-rail{
  position:fixed;
  left:28px;
  top:29%;
  z-index:35;
  display:grid;
  gap:16px;
}
.social-rail a{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(4,234,255,.42);
  background:rgba(5,7,25,.78);
  color:var(--cyan);
  font-family:var(--font-tech);
  font-size:14px;
  font-weight:700;
  box-shadow:0 0 18px rgba(4,234,255,.16);
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.social-rail svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.social-rail a:hover{
  transform:translateX(5px);
  background:var(--magenta);
  color:#fff;
  box-shadow:0 0 24px rgba(217,0,255,.62);
}

main{
  position:relative;
  z-index:2;
}
.hero-section{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:110px 9vw 70px;
}
.hero-window{
  position:relative;
  width:min(1138px,100%);
  min-height:448px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) 300px;
  gap:28px;
  align-items:center;
  padding:54px;
  border-left:3px solid var(--magenta);
  border-right:3px solid var(--magenta);
  background:
    linear-gradient(rgba(3,4,13,.62),rgba(3,4,13,.72)),
    radial-gradient(circle at 65% 42%,rgba(4,234,255,.18),transparent 22%),
    linear-gradient(120deg,rgba(4,234,255,.08),rgba(217,0,255,.05));
  box-shadow:
    0 0 0 1px rgba(4,234,255,.2),
    0 0 55px rgba(4,234,255,.12),
    inset 0 0 80px rgba(0,0,0,.72);
  overflow:hidden;
}
.hero-window::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 0 48%,rgba(4,234,255,.16) 50%,transparent 52%),
    repeating-linear-gradient(90deg,rgba(4,234,255,.1) 0 2px,transparent 2px 72px);
  opacity:.25;
}
.terminal-bars{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  display:grid;
  grid-template-columns:2fr 1fr 1.4fr .7fr;
}
.terminal-bars span:nth-child(1){background:var(--cyan);}
.terminal-bars span:nth-child(2){background:var(--magenta);}
.terminal-bars span:nth-child(3){background:#132151;}
.terminal-bars span:nth-child(4){background:var(--green);}
.hero-copy,
.holo-card{
  position:relative;
  z-index:1;
}
.glitch-title{
  max-width:790px;
  color:var(--cyan);
  font-family:var(--font-display);
  font-size:clamp(44px,6.4vw,76px);
  font-weight:700;
  line-height:.84;
  letter-spacing:-.02em;
  text-transform:none;
  text-shadow:0 0 18px rgba(4,234,255,.74);
}
.hero-copy .glitch-title{
  margin-top:-2px;
}
.glitch-title span{
  color:var(--magenta);
  text-shadow:0 0 18px rgba(217,0,255,.86);
}
.hero-text{
  max-width:650px;
  margin-top:24px;
  color:#b7e9f1;
  font-size:22px;
  line-height:1.45;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.neon-btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border:1px solid var(--cyan);
  background:rgba(4,234,255,.16);
  color:var(--cyan);
  font-family:var(--font-tech);
  font-size:14px;
  text-transform:uppercase;
  box-shadow:0 0 22px rgba(4,234,255,.22),inset 0 0 20px rgba(4,234,255,.08);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.neon-btn:hover{
  transform:translateY(-3px);
  background:var(--cyan);
  color:#03101b;
  box-shadow:0 0 32px rgba(4,234,255,.75);
}
.neon-btn.ghost{
  border-color:var(--magenta);
  color:#f7b4ff;
  background:rgba(217,0,255,.12);
}
.neon-btn.ghost:hover{
  background:var(--magenta);
  color:#fff;
  box-shadow:0 0 32px rgba(217,0,255,.75);
}
.holo-card{
  align-self:stretch;
  display:grid;
  place-items:center;
  grid-template-rows:1fr auto;
  gap:18px;
  min-height:330px;
  padding:18px;
  border:1px solid rgba(4,234,255,.42);
  background:rgba(3,8,22,.66);
  box-shadow:inset 0 0 32px rgba(4,234,255,.08);
  overflow:hidden;
}
.holo-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(4,234,255,.18);
  background:radial-gradient(circle,rgba(4,234,255,.12),transparent 58%);
  transform:perspective(420px) rotateX(62deg);
  pointer-events:none;
}
.scan-orbit{
  position:absolute;
  inset:40px;
  border:1px solid rgba(4,234,255,.42);
  border-radius:50%;
  box-shadow:0 0 28px rgba(4,234,255,.18),inset 0 0 28px rgba(217,0,255,.08);
  animation:scan-orbit 8s linear infinite;
}
.scan-orbit::before,
.scan-orbit::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 16px rgba(57,255,106,.9);
}
.scan-orbit::before{top:12%;right:12%;}
.scan-orbit::after{left:18%;bottom:8%;background:var(--magenta);box-shadow:0 0 16px rgba(217,0,255,.9);}
.avatar-grid{
  position:relative;
  z-index:1;
  width:min(210px,80%);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  align-content:center;
}
.avatar-grid span{
  aspect-ratio:1;
  background:rgba(4,234,255,.14);
  border:1px solid rgba(4,234,255,.26);
  box-shadow:0 0 12px rgba(4,234,255,.12);
}
.avatar-grid span:nth-child(2),
.avatar-grid span:nth-child(7),
.avatar-grid span:nth-child(10){
  background:rgba(217,0,255,.38);
  border-color:rgba(217,0,255,.72);
}
.avatar-grid span:nth-child(4),
.avatar-grid span:nth-child(5),
.avatar-grid span:nth-child(8),
.avatar-grid span:nth-child(9),
.avatar-grid span:nth-child(12){
  opacity:.22;
}
.signal-readout{
  position:relative;
  z-index:1;
  width:100%;
  min-height:72px;
  padding:16px 14px;
  border:1px solid rgba(57,255,106,.3);
  background:linear-gradient(90deg,rgba(57,255,106,.08),rgba(4,234,255,.05),rgba(217,0,255,.07));
  box-shadow:inset 0 0 18px rgba(57,255,106,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.signal-readout span,
.signal-readout small{
  display:block;
}
.signal-readout span{
  color:var(--green);
  font-family:var(--font-tech);
  font-size:13px;
  letter-spacing:.08em;
  animation:status-blink 2.6s steps(2,end) infinite;
}
.signal-readout small{
  margin-top:6px;
  color:var(--cyan-soft);
  font-family:var(--font-tech);
  font-size:11px;
  letter-spacing:.04em;
}

.content-section,
.contact-section{
  width:min(1080px,calc(100% - 48px));
  margin:0 auto;
  padding:92px 0;
}
.section-label{
  margin-bottom:20px;
  color:var(--green);
  font-family:var(--font-tech);
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.section-grid{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1fr);
  gap:34px;
  align-items:start;
}
.section-heading{
  max-width:760px;
  margin-bottom:30px;
}
h2{
  color:var(--cyan);
  font-family:var(--font-display);
  font-size:clamp(36px,5vw,58px);
  line-height:.95;
  text-shadow:0 0 18px rgba(4,234,255,.34);
}
.section-heading p,
.cyber-panel p,
.timeline-item p,
.project-body p,
.skill-card p,
.contact-panel p{
  color:#a7cfdb;
  font-size:19px;
  line-height:1.55;
}
.cyber-panel{
  position:relative;
  padding:26px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(4,234,255,.08),rgba(217,0,255,.05)),rgba(5,8,25,.84);
  box-shadow:0 0 28px rgba(4,234,255,.1),inset 0 0 34px rgba(4,234,255,.04);
}
.cyber-panel::before,
.project-card::before,
.skill-card::before,
.timeline-item::before,
.contact-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--cyan),transparent 35%,var(--magenta)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.cyber-panel p+p{margin-top:18px;}
.info-grid{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:12px 18px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(4,234,255,.2);
}
.info-grid span{
  color:var(--muted);
  font-family:var(--font-tech);
  font-size:13px;
  text-transform:uppercase;
}
.info-grid strong{
  color:var(--text);
  font-size:18px;
}

.project-grid,
.skill-grid,
.education-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.project-card,
.skill-card,
.timeline-item,
.contact-panel{
  position:relative;
  background:rgba(5,8,25,.86);
  border:1px solid rgba(4,234,255,.26);
  box-shadow:0 0 35px rgba(4,234,255,.08);
  overflow:hidden;
}
.project-screen{
  position:relative;
  min-height:230px;
  overflow:hidden;
  border-bottom:1px solid rgba(4,234,255,.24);
}
.vision-screen{
  background:
    linear-gradient(rgba(4,234,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(4,234,255,.08) 1px,transparent 1px),
    radial-gradient(circle at 65% 35%,rgba(57,255,106,.16),transparent 20%),
    #050914;
  background-size:26px 26px,26px 26px,100% 100%,100% 100%;
}
.box{
  position:absolute;
  border:2px solid var(--green);
  box-shadow:0 0 18px rgba(57,255,106,.65);
}
.box::before{
  content:"target.lock";
  position:absolute;
  top:-24px;
  left:-2px;
  color:var(--green);
  font-family:var(--font-tech);
  font-size:11px;
}
.box-one{left:14%;top:32%;width:105px;height:76px;}
.box-two{right:14%;bottom:22%;width:132px;height:86px;}
.scan-beam{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 18px var(--cyan);
}
.face-screen{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(217,0,255,.22),transparent 18%),
    linear-gradient(135deg,rgba(4,234,255,.12),rgba(217,0,255,.12)),
    #060719;
}
.face-lock{
  width:140px;
  height:140px;
  border:3px solid var(--magenta);
  box-shadow:0 0 30px rgba(217,0,255,.5);
}
.face-lock::before{
  content:"FACE_ID";
  position:absolute;
  margin-top:-28px;
  color:var(--magenta);
  font-family:var(--font-tech);
}
.data-line{
  position:absolute;
  right:38px;
  height:4px;
  background:var(--cyan);
  box-shadow:0 0 16px var(--cyan);
}
.line-one{top:56px;width:120px;}
.line-two{top:86px;width:80px;}
.line-three{top:116px;width:148px;}
.project-body{
  padding:24px;
}
.project-meta{
  margin-bottom:10px;
  color:var(--green);
  font-family:var(--font-tech);
  font-size:12px;
  text-transform:uppercase;
}
h3{
  color:#f3feff;
  font-family:var(--font-display);
  font-size:28px;
  line-height:1.05;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.tags span{
  padding:6px 9px;
  border:1px solid rgba(4,234,255,.3);
  color:var(--cyan-soft);
  font-family:var(--font-tech);
  font-size:12px;
  background:rgba(4,234,255,.07);
}

.skill-card{
  padding:26px;
  min-height:190px;
}
.skill-index{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:26px;
  background:var(--magenta);
  color:#fff;
  font-family:var(--font-tech);
  box-shadow:0 0 24px rgba(217,0,255,.45);
}
.skill-card h3{margin-bottom:12px;}

.timeline{
  display:grid;
  gap:18px;
}
.timeline-item{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:26px;
  padding:26px;
}
.timeline-item time{
  color:var(--green);
  font-family:var(--font-tech);
  font-size:13px;
  text-transform:uppercase;
}

.education-grid .cyber-panel h3{margin-bottom:12px;}
.education-grid .cyber-panel small{
  display:block;
  margin-top:14px;
  color:var(--green);
  font-family:var(--font-tech);
}

.contact-panel{
  padding:42px;
}
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:28px;
  align-items:stretch;
}
.contact-copy{
  display:grid;
  align-content:start;
  gap:16px;
  padding-right:12px;
}
.contact-panel h2{
  max-width:780px;
  margin:0;
  font-size:clamp(48px,5.8vw,78px);
  line-height:.88;
}
.contact-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.contact-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border:1px solid rgba(4,234,255,.28);
  background:rgba(4,234,255,.08);
  color:var(--cyan-soft);
  font-family:var(--font-tech);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(4,234,255,.08);
}
.contact-badge--success{
  border-color:rgba(57,255,106,.38);
  background:rgba(57,255,106,.12);
  color:var(--green);
  box-shadow:0 0 18px rgba(57,255,106,.12);
}
.contact-intro{
  max-width:700px;
}
.contact-location{
  margin-top:6px;
  color:var(--muted);
  font-family:var(--font-tech);
  font-size:14px;
  letter-spacing:.03em;
}
.contact-rail{
  display:grid;
  gap:12px;
  align-content:start;
  padding:18px;
  border:1px solid rgba(4,234,255,.22);
  background:linear-gradient(180deg,rgba(4,234,255,.05),rgba(5,8,25,.52));
  box-shadow:inset 0 0 28px rgba(4,234,255,.05);
}
.contact-actions,
.contact-socials{
  display:grid;
  gap:12px;
}
.contact-actions{margin-top:0;}
.contact-socials{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.contact-btn,
.contact-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:58px;
  padding:14px 18px;
  border:1px solid rgba(4,234,255,.34);
  background:rgba(4,234,255,.06);
  color:var(--cyan);
  font-family:var(--font-tech);
  font-size:15px;
  letter-spacing:.02em;
  box-shadow:0 0 22px rgba(4,234,255,.12),inset 0 0 20px rgba(4,234,255,.04);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease;
}
.contact-btn svg,
.contact-icon-btn svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  fill:currentColor;
}
.contact-btn:hover,
.contact-icon-btn:hover,
.contact-btn:focus-visible,
.contact-icon-btn:focus-visible{
  transform:translateY(-2px);
  border-color:var(--cyan-soft);
  background:rgba(4,234,255,.12);
  color:#f6feff;
  box-shadow:0 0 30px rgba(4,234,255,.28),0 0 10px rgba(217,0,255,.12);
}
.contact-btn--primary{
  min-height:66px;
  border-color:rgba(57,255,106,.75);
  background:linear-gradient(135deg,rgba(57,255,106,.2),rgba(4,234,255,.24));
  color:#f6fffb;
  box-shadow:0 0 34px rgba(57,255,106,.22),inset 0 0 22px rgba(255,255,255,.05);
}
.contact-btn--primary:hover,
.contact-btn--primary:focus-visible{
  background:linear-gradient(135deg,rgba(57,255,106,.34),rgba(4,234,255,.36));
  border-color:var(--green);
  box-shadow:0 0 36px rgba(57,255,106,.42),0 0 18px rgba(4,234,255,.2);
}
.contact-icon-btn{
  min-height:56px;
  padding-inline:14px;
}
footer{
  position:relative;
  z-index:2;
  padding:30px 24px 48px;
  color:var(--muted);
  font-family:var(--font-tech);
  text-align:center;
}

@media (max-width:980px){
  body{cursor:auto;}
  a,button{cursor:auto;}
  .nav-shell{overflow-x:auto;justify-content:flex-start;}
  .nav-link{min-width:96px;font-size:23px;}
  .social-rail{display:none;}
  .hero-section{padding-inline:24px;}
  .hero-window{grid-template-columns:1fr;padding:34px;min-height:auto;}
  .holo-card{min-height:260px;}
  .section-grid,
  .project-grid,
  .skill-grid,
  .education-grid,
  .timeline-item,
  .contact-layout,
  .contact-socials{grid-template-columns:1fr;}
  .contact-layout{gap:16px;}
  .contact-copy{padding-right:0;}
  .contact-rail{padding:16px;}
  .contact-btn,
  .contact-icon-btn{width:100%;}
}

@media (max-width:560px){
  .site-header{padding-inline:10px;}
  .nav-link{min-width:88px;font-size:20px;padding-inline:12px;}
  .hero-section{padding-top:96px;}
  .hero-window{padding:26px 20px;}
  .glitch-title{font-size:43px;}
  .hero-text{font-size:18px;}
  .content-section,
  .contact-section{width:calc(100% - 28px);padding:66px 0;}
  .info-grid{grid-template-columns:1fr;}
  .contact-panel{padding:26px;}
  .contact-panel h2{font-size:clamp(38px,11vw,54px);}
  .contact-rail{padding:14px;}
  .contact-btn{padding-inline:16px;}
}