/* ============================================================
   ENGINEER PORTFOLIO — HOLO-BLUEPRINT DESIGN SYSTEM (v2)
   Palette   : Deep-space navy / Steel / Neon Cyan / Safety Orange / Violet
   Type      : Space Grotesk (display) + Inter (body) + IBM Plex Mono (data) + Hind Siliguri (bn)
   Signature : A living holographic blueprint — scanning grids, drawn schematics,
               glass HUD panels and glow that reacts to scroll + pointer.
   ============================================================ */

:root{
  /* ---- color tokens (kept names for admin.css compatibility) ---- */
  --navy:        #060c17;
  --navy-2:      #0a1526;
  --steel:       #0d1c30;
  --steel-2:     #142943;
  --cyan:        #4fe6ff;
  --cyan-dim:    #3d92ad;
  --orange:      #ff6a1a;
  --orange-2:    #ffab4a;
  --violet:      #8b7bff;
  --concrete:    #ece8df;
  --concrete-2:  #ddd7c8;
  --paper:       #f6f4ef;
  --ink:         #14202b;
  --ink-soft:    #48586a;
  --line:        rgba(79,230,255,0.16);
  --line-strong: rgba(79,230,255,0.4);
  --glow-cyan:   rgba(79,230,255,.55);
  --glow-orange: rgba(255,106,26,.5);
  --glass:       rgba(13,28,48,.62);
  --glass-light: rgba(255,255,255,.06);

  /* ---- type ---- */
  --f-display: 'Space Grotesk', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  /* ---- scale ---- */
  --gap: clamp(1rem, 2vw, 2rem);
  --radius: 10px;
  --radius-sm: 6px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.nav-open{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; }

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

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }

.container{ max-width:1240px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }

/* ============================================================
   AMBIENT BACKDROP — fixed animated gradient mesh, sits behind
   absolutely everything, gives the whole page a living
   "holographic room" feel without competing for attention
   ============================================================ */
#ambient{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--navy); }
#ambient::before, #ambient::after{
  content:""; position:absolute; width:70vw; height:70vw; border-radius:50%;
  filter:blur(90px); opacity:.28; mix-blend-mode:screen;
}
#ambient::before{ background:radial-gradient(circle, var(--cyan), transparent 65%); top:-24vw; left:-18vw; animation:driftA 26s ease-in-out infinite alternate; }
#ambient::after{ background:radial-gradient(circle, var(--violet), transparent 65%); bottom:-28vw; right:-16vw; animation:driftB 32s ease-in-out infinite alternate; }
@keyframes driftA{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6vw,8vw) scale(1.15); } }
@keyframes driftB{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-7vw,-5vw) scale(1.1); } }

/* ============================================================
   TITLE-BLOCK LABEL — signature motif, now with a live scan sweep
   ============================================================ */
.title-block{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); border:1px solid var(--line-strong); padding:.4rem .8rem; border-radius:3px;
  position:relative; background:rgba(79,230,255,0.06); overflow:hidden; backdrop-filter:blur(6px);
}
.title-block::before{ content:"⌗"; color:var(--orange); font-weight:700; }
.title-block::after{
  content:""; position:absolute; top:0; left:-40%; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation:scanSweep 3.4s ease-in-out infinite;
}
@keyframes scanSweep{ 0%{ left:-40%; } 55%,100%{ left:120%; } }
.section--light .title-block{ color:var(--cyan-dim); border-color:rgba(19,41,61,.25); background:rgba(19,41,61,.04); }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(circle at 50% 42%, rgba(79,230,255,.14) 0%, transparent 55%),
    var(--navy);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(79,230,255,.14) 0%, transparent 55%);
  background-size:42px 42px, 42px 42px, auto;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .7s var(--ease), visibility .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; transform:scale(1.05); filter:blur(8px); }
.pre-ring{
  position:absolute; width:210px; height:210px; border-radius:50%;
  border:1px dashed var(--line-strong);
  animation:spinRing 12s linear infinite;
  box-shadow:0 0 40px -6px var(--glow-cyan) inset;
}
.pre-ring-2{ width:260px; height:260px; border-style:dotted; border-color:rgba(255,106,26,.4); animation-duration:18s; animation-direction:reverse; box-shadow:none; }
@keyframes spinRing{ to{ transform:rotate(360deg); } }
.pre-draw{ width:150px; height:100px; position:relative; z-index:2; filter:drop-shadow(0 0 6px var(--glow-cyan)); }
.pre-draw path{
  fill:none; stroke:var(--cyan); stroke-width:1.4;
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:drawLine 2.4s var(--ease) forwards infinite;
}
.pre-percent{
  position:relative; z-index:2; margin-top:1.1rem;
  font-family:var(--f-mono); font-size:1.9rem; font-weight:600; letter-spacing:.04em;
  color:#fff; text-shadow:0 0 18px var(--glow-cyan);
}
.pre-label{
  position:relative; z-index:2; margin-top:.5rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em;
  color:var(--cyan-dim); text-transform:uppercase; min-height:1em;
}
.pre-bar{ position:relative; z-index:2; margin-top:1.4rem; width:180px; height:2px; background:rgba(255,255,255,.12); overflow:hidden; border-radius:2px; }
.pre-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--orange)); transition:width .12s linear; box-shadow:0 0 10px var(--glow-cyan); }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:1000;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--orange));
  box-shadow:0 0 12px var(--glow-cyan);
  transition:width .08s linear;
}

/* ============================================================
   CURSOR GLOW (desktop only, set up by JS, ignored on touch)
   ============================================================ */
#cursorGlow{
  position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--glow-cyan); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s;
  mix-blend-mode:screen;
}
#cursorGlow.active{ width:52px; height:52px; background:radial-gradient(circle, rgba(255,106,26,.25), transparent 70%); border-color:var(--glow-orange); }
@media (hover:none), (pointer:coarse){ #cursorGlow{ display:none; } }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:1.1rem 0;
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s, box-shadow .35s;
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background:rgba(6,12,23,0.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  padding:.65rem 0;
  border-color:var(--line);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-brand{ display:flex; align-items:center; gap:.65rem; position:relative; z-index:2; }
.nav-mark{
  width:36px; height:36px; border:1.5px solid var(--cyan); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.85rem; color:var(--cyan);
  transform:rotate(0deg); transition:transform .4s var(--ease), box-shadow .4s;
  box-shadow:0 0 0 0 var(--glow-cyan);
}
.nav-brand:hover .nav-mark{ transform:rotate(45deg); box-shadow:0 0 18px 1px var(--glow-cyan); }
.nav-name{ font-family:var(--f-display); font-weight:600; color:#fff; font-size:1.02rem; line-height:1.1; }
.nav-title{ font-family:var(--f-mono); font-size:.62rem; color:var(--cyan-dim); letter-spacing:.1em; text-transform:uppercase; }

.nav-links{ display:flex; gap:2.1rem; }
.nav-links a{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72); position:relative; padding:.3rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--orange)); transition:width .3s var(--ease);
  box-shadow:0 0 8px var(--glow-cyan);
}
.nav-links a:hover, .nav-links a.active{ color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); background:var(--cyan); padding:.6rem 1.2rem; border-radius:6px;
  transition:background .25s, transform .25s, box-shadow .25s; font-weight:600;
}
.nav-cta:hover{ background:var(--orange); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px -8px var(--glow-orange); }

.hamburger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:42px; height:42px; position:relative; z-index:1100; flex-shrink:0;
}
.hamburger span{ height:2px; width:24px; background:#fff; transition:.3s var(--ease); border-radius:2px; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; background:rgba(3,7,14,.6); backdrop-filter:blur(3px);
  z-index:55; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.nav-overlay.show{ opacity:1; visibility:visible; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; background:var(--navy); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{
  position:absolute; top:-12%; left:0; width:100%; height:124%; object-fit:cover; opacity:.4;
  filter:saturate(1.15) contrast(1.05); will-change:transform;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,12,23,.5) 0%, rgba(6,12,23,.72) 55%, var(--navy) 100%),
    linear-gradient(90deg, rgba(6,12,23,.85) 0%, rgba(6,12,23,.15) 45%);
}
.hero-grid{
  position:absolute; inset:0; z-index:1; opacity:.55;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 40%, #000 0%, transparent 75%);
  animation:gridPulse 6s ease-in-out infinite;
}
@keyframes gridPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.65; } }
#particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-svg{ position:absolute; z-index:2; pointer-events:none; filter:drop-shadow(0 0 8px var(--glow-cyan)); }
.hero-svg path, .hero-svg circle{
  fill:none; stroke:var(--cyan); stroke-width:1;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:drawOnce 2.6s var(--ease) forwards;
  animation-delay:.4s;
}
@keyframes drawOnce{ to{ stroke-dashoffset:0; } }

.hero-content{ position:relative; z-index:3; padding-top:5rem; }
.hero-in{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d,0) * 110ms + .3s); }
body.loaded .hero-in{ opacity:1; transform:translateY(0); }
.hero-eyebrow{ margin-bottom:1.6rem; }
.hero-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.6rem, 6.4vw, 5.4rem); color:#fff; line-height:1.02; letter-spacing:-.01em; max-width:16ch; }
.hero-title .accent{ color:var(--cyan); text-shadow:0 0 30px var(--glow-cyan); position:relative; }
.hero-role{ font-family:var(--f-mono); font-size:clamp(.95rem,1.6vw,1.15rem); color:var(--orange-2); margin-top:1.1rem; letter-spacing:.04em; }
.hero-desc{ margin-top:1.4rem; max-width:46ch; color:rgba(255,255,255,.7); font-size:1.02rem; }
.hero-actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.9rem 1.7rem; border-radius:7px; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
  border:1px solid transparent;
}
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 8px 24px -10px var(--glow-orange); }
.btn-primary:hover{ background:var(--orange-2); transform:translateY(-3px); box-shadow:0 14px 32px -10px var(--glow-orange); }
.btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff; backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-3px); box-shadow:0 10px 26px -12px var(--glow-cyan); }
.section--light .btn-ghost{ border-color:rgba(19,41,61,.3); color:var(--ink); }
.section--light .btn-ghost:hover{ border-color:var(--cyan-dim); color:var(--cyan-dim); }

.hero-stats{ position:relative; z-index:3; display:flex; gap:0; margin-top:4.2rem; border-top:1px solid var(--line); }
.stat{ flex:1; padding:1.3rem 1.4rem 0; border-left:1px solid var(--line); position:relative; }
.stat:first-child{ border-left:none; padding-left:0; }
.stat-num{ font-family:var(--f-mono); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--cyan); font-weight:500; text-shadow:0 0 20px var(--glow-cyan); }
.stat-label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:.35rem; }
.stat-tick{ position:absolute; top:-1px; left:0; width:8px; height:8px; border-left:1px solid var(--orange); border-top:1px solid var(--orange); }

.scroll-cue{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.65rem; color:rgba(255,255,255,.5); letter-spacing:.15em; }
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--cyan), transparent); animation:pulseDown 1.8s ease-in-out infinite; }
@keyframes pulseDown{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ position:relative; padding:clamp(4.5rem,9vw,8rem) 0; background:var(--navy); }
.section--light{ background:var(--paper); }
.section--steel{ background:var(--steel); }
.section-head{ max-width:640px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,4vw,3.1rem); margin-top:1rem; color:#fff; letter-spacing:-.01em; }
.section--light .section-title, .section--light .lead{ color:var(--ink); }
.lead{ color:rgba(255,255,255,.65); margin-top:1rem; font-size:1.05rem; max-width:52ch; }
.section--light .lead{ color:var(--ink-soft); }

.divider-draw{ width:100%; height:2px; margin:0 auto; overflow:visible; }
.divider-draw line{ stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2000; stroke-dashoffset:2000; }
.divider-draw.in-view line{ animation:drawOnce 1.6s var(--ease) forwards; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; }
.reveal-delay-2.in-view{ transition-delay:.2s; }
.reveal-delay-3.in-view{ transition-delay:.3s; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ min-height:70vh; display:flex; align-items:center; }
.about-copy{
  position:relative; max-width:640px; z-index:2;
  padding:clamp(1.8rem,3vw,2.8rem); border-left:2px solid var(--orange); border-radius:0 var(--radius) var(--radius) 0;
  background:linear-gradient(120deg, rgba(6,12,23,.72) 0%, rgba(6,12,23,.42) 100%);
  backdrop-filter:blur(6px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.about-copy p{ color:rgba(255,255,255,.72); margin-bottom:1.1rem; font-size:1.02rem; }
.about-copy p:first-of-type{ color:#fff; font-size:1.14rem; font-family:var(--f-display); font-weight:500; line-height:1.5; }
.about-meta{ margin-top:1.8rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem; border-top:1px solid var(--line); padding-top:1.6rem; }
.about-meta div{ font-family:var(--f-mono); font-size:.78rem; transition:transform .25s var(--ease); border-radius:2px; }
.about-meta div:hover{ transform:translateX(5px); }
.about-meta span{ display:block; color:var(--cyan-dim); text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; margin-bottom:.3rem; }
.about-meta strong{ color:#fff; font-weight:500; font-size:.92rem; transition:color .25s; }
.about-meta div:hover strong{ color:var(--cyan); }

.about-bg img{ object-position:78% center; opacity:.6; filter:grayscale(0) contrast(1.08) saturate(1.1); }
.about-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--navy) 0%, rgba(6,12,23,.75) 26%, rgba(6,12,23,.28) 62%, rgba(6,12,23,.08) 100%),
    linear-gradient(180deg, var(--navy) 0%, rgba(6,12,23,.05) 18%, rgba(6,12,23,.05) 82%, var(--navy) 100%);
}

/* ============================================================
   SMART SECTION BACKGROUNDS — photos now clearly visible, tinted + vignetted
   ============================================================ */
.section-bg, .skills-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.section-bg img, .skills-bg img{
  position:absolute; top:-12%; left:0; width:100%; height:124%; object-fit:cover;
  will-change:transform; opacity:.34; filter:contrast(1.1) saturate(1.15);
}
.skills-bg img{ opacity:.22; }
.section--light .section-bg img{ opacity:.16; filter:grayscale(.25) contrast(1.05) brightness(1.05); }
.section-bg::after{ content:""; position:absolute; inset:0; }
.section--steel .section-bg::after{ background:radial-gradient(ellipse 70% 55% at 50% 40%, rgba(19,41,61,.15) 0%, var(--steel) 100%), linear-gradient(180deg, var(--steel) 0%, rgba(19,41,61,.4) 24%, rgba(19,41,61,.4) 76%, var(--steel) 100%); }
.section:not(.section--light):not(.section--steel):not(.about) .section-bg::after{ background:radial-gradient(ellipse 70% 55% at 50% 40%, rgba(6,12,23,.15) 0%, var(--navy) 100%), linear-gradient(180deg, var(--navy) 0%, rgba(6,12,23,.4) 24%, rgba(6,12,23,.4) 76%, var(--navy) 100%); }
.section--light .section-bg::after{ background:linear-gradient(180deg, var(--paper) 0%, rgba(246,244,239,.35) 24%, rgba(246,244,239,.35) 76%, var(--paper) 100%); }
.section > .container{ position:relative; z-index:2; }

/* ============================================================
   EDUCATION
   ============================================================ */
.timeline{ position:relative; max-width:820px; }
.timeline-rail{ position:absolute; left:9px; top:6px; bottom:6px; width:1px; background:var(--line); }
.timeline-rail-draw{ position:absolute; left:0; top:0; width:1px; height:0; background:linear-gradient(var(--cyan), var(--orange)); box-shadow:0 0 10px var(--glow-cyan); transition:height 1.4s var(--ease); }
.timeline.in-view .timeline-rail-draw{ height:100%; }
.tl-item{ position:relative; padding:0 0 2.6rem 3rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:0; top:4px; width:19px; height:19px; border:1.5px solid var(--cyan); border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(79,230,255,.08); }
.tl-dot::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.tl-year{ font-family:var(--f-mono); font-size:.72rem; color:var(--orange-2); letter-spacing:.08em; }
.tl-degree{ font-family:var(--f-display); font-size:1.28rem; color:#fff; margin-top:.4rem; font-weight:600; }
.tl-inst{ color:rgba(255,255,255,.62); font-size:.95rem; margin-top:.25rem; }
.tl-note{ color:rgba(255,255,255,.45); font-size:.86rem; margin-top:.3rem; font-family:var(--f-mono); }

/* ============================================================
   SKILLS
   ============================================================ */
.skills-band{ position:relative; background:var(--steel); overflow:hidden; }
.skills-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,41,61,.2) 0%, rgba(19,41,61,.9) 100%); pointer-events:none; }
.skills-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2rem; border-radius:var(--radius); overflow:hidden; }
.skill-card{ background:rgba(13,28,48,.75); backdrop-filter:blur(8px); padding:1.9rem 1.7rem; transition:background .3s var(--ease), transform .18s ease-out; display:flex; flex-direction:column; gap:.9rem; }
.skill-card:hover{ background:var(--steel-2); }
.skill-icon{ width:42px; height:42px; border:1px solid var(--cyan-dim); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--cyan); font-size:1.2rem; transition:transform .3s var(--ease), color .3s, border-color .3s, box-shadow .3s; }
.skill-name{ font-family:var(--f-display); color:#fff; font-size:1.05rem; font-weight:600; }
.skill-cat{ font-family:var(--f-mono); font-size:.66rem; color:var(--cyan-dim); text-transform:uppercase; letter-spacing:.1em; }
.skill-bar{ height:3px; background:rgba(255,255,255,.1); margin-top:.4rem; position:relative; overflow:hidden; border-radius:2px; }
.skill-bar-fill{ position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--cyan),var(--orange)); transition:width 1.2s var(--ease); box-shadow:0 0 8px var(--glow-cyan); }
.skill-card.in-view .skill-bar-fill{ width:var(--lvl,70%); }

/* ============================================================
   PROJECTS
   ============================================================ */
.filter-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.filter-btn{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.55rem 1.1rem; border:1px solid rgba(255,255,255,.22); border-radius:20px; color:rgba(255,255,255,.65); transition:.25s; }
.section--light .filter-btn{ border-color:rgba(19,41,61,.22); color:var(--ink-soft); }
.filter-btn:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 14px -4px var(--glow-cyan); }
.filter-btn.active{ background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 8px 20px -8px var(--glow-orange); }

.projects-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.6rem; }
.project-card{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3.1; background:var(--steel); border:1px solid var(--line); transition:border-color .3s, transform .3s var(--ease); }
.project-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.project-card:hover{ border-color:var(--line-strong); }
.project-card:hover img{ transform:scale(1.07); }
.project-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem; background:linear-gradient(0deg, rgba(6,12,23,.94) 10%, rgba(6,12,23,.2) 60%, transparent 100%); }
.project-tag{ font-family:var(--f-mono); font-size:.64rem; color:var(--orange-2); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.4rem; }
.project-title{ font-family:var(--f-display); color:#fff; font-size:1.14rem; font-weight:600; }
.project-loc{ font-size:.82rem; color:rgba(255,255,255,.65); margin-top:.25rem; font-family:var(--f-mono); }
.project-corner{ position:absolute; top:.9rem; right:.9rem; width:30px; height:30px; border:1px solid rgba(255,255,255,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; opacity:0; transform:translateY(-6px); transition:.3s; backdrop-filter:blur(4px); }
.project-card:hover .project-corner{ opacity:1; transform:translateY(0); border-color:var(--cyan); box-shadow:0 0 14px -4px var(--glow-cyan); }

/* ============================================================
   CERTIFICATES
   ============================================================ */
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem; }
.cert-card{ background:#fff; border:1px solid var(--concrete-2); border-radius:var(--radius); padding:1.5rem; display:flex; gap:1.1rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.cert-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -22px rgba(19,41,61,.3); border-color:var(--cyan-dim); }
.cert-thumb{ width:64px; height:64px; flex-shrink:0; border-radius:8px; overflow:hidden; border:1px solid var(--concrete-2); }
.cert-thumb img{ width:100%; height:100%; object-fit:cover; }
.cert-title{ font-family:var(--f-display); font-weight:600; color:var(--ink); font-size:1rem; }
.cert-issuer{ font-family:var(--f-mono); font-size:.76rem; color:var(--ink-soft); margin-top:.35rem; }
.cert-year{ font-family:var(--f-mono); font-size:.68rem; color:var(--cyan-dim); margin-top:.5rem; letter-spacing:.06em; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem); }
.contact-list{ display:flex; flex-direction:column; gap:1.5rem; }
.c-item{ display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.5rem; border-bottom:1px solid var(--line); transition:transform .25s var(--ease), border-color .25s; }
.c-item:hover{ transform:translateX(7px); border-color:var(--cyan); }
.c-icon{ width:40px; height:40px; border:1px solid var(--cyan-dim); display:flex; align-items:center; justify-content:center; color:var(--cyan); flex-shrink:0; border-radius:9px; transition:background .25s, color .25s, transform .25s, box-shadow .25s; }
.c-item:hover .c-icon{ background:var(--cyan); color:var(--navy); transform:scale(1.08); box-shadow:0 0 18px -2px var(--glow-cyan); }
.c-label{ font-family:var(--f-mono); font-size:.68rem; color:var(--cyan-dim); text-transform:uppercase; letter-spacing:.08em; }
.c-value{ color:#fff; margin-top:.3rem; font-size:.98rem; }
.map-frame{ margin-top:.5rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.map-frame iframe{ width:100%; height:220px; filter:grayscale(.3) invert(.92) contrast(.9); }

.contact-form{ background:rgba(13,28,48,.65); backdrop-filter:blur(10px); padding:clamp(1.8rem,3vw,2.6rem); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group{ margin-bottom:1.1rem; }
.form-group.full{ grid-column:1/-1; }
.form-group label{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-dim); margin-bottom:.5rem; }
.form-group input, .form-group textarea{ width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.22); color:#fff; padding:.78rem .9rem; border-radius:7px; font-size:.94rem; transition:border-color .25s, box-shadow .25s, background .25s; }
.form-group input::placeholder, .form-group textarea::placeholder{ color:rgba(255,255,255,.32); }
.form-group input:focus, .form-group textarea:focus{ border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(79,230,255,.15); background:rgba(255,255,255,.05); }
.form-submit{ width:100%; justify-content:center; margin-top:.4rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy-2); padding:2.6rem 0; border-top:1px solid var(--line); position:relative; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-brand{ font-family:var(--f-mono); font-size:.78rem; color:rgba(255,255,255,.5); }
.footer-brand strong{ color:#fff; }
.footer-social{ display:flex; gap:.8rem; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cyan); transition:.25s; }
.footer-social a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px); box-shadow:0 10px 22px -8px var(--glow-orange); }
.footer-credit{ font-family:var(--f-mono); font-size:.7rem; color:rgba(255,255,255,.35); }
.footer-credit a{ color:var(--cyan-dim); }

/* ============================================================
   MISC — toast / lightbox / scroll-top / whatsapp
   ============================================================ */
#toast{
  position:fixed; bottom:1.6rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(6,12,23,.92); backdrop-filter:blur(10px); color:#fff; border:1px solid var(--cyan); font-family:var(--f-mono); font-size:.82rem;
  padding:.85rem 1.4rem; border-radius:8px; z-index:2000; opacity:0; pointer-events:none; transition:.35s var(--ease);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.5);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.lightbox{ position:fixed; inset:0; background:rgba(3,7,14,.96); backdrop-filter:blur(6px); z-index:3000; display:none; align-items:center; justify-content:center; flex-direction:column; padding:2rem; }
.lightbox.show{ display:flex; }
.lightbox img{ max-width:min(90vw,900px); max-height:75vh; object-fit:contain; border:1px solid var(--line-strong); border-radius:var(--radius); }
.lightbox-caption{ color:#fff; font-family:var(--f-mono); font-size:.85rem; margin-top:1rem; }
.lightbox-close{ position:absolute; top:1.6rem; right:1.6rem; width:44px; height:44px; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; font-size:1.2rem; transition:.25s; }
.lightbox-close:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 18px -2px var(--glow-cyan); }

.scroll-top{
  position:fixed; bottom:1.8rem; right:1.8rem; width:46px; height:46px; background:var(--orange); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:800;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s var(--ease);
  box-shadow:0 10px 26px -8px var(--glow-orange);
}
.scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover{ transform:translateY(-3px); }

.whatsapp-float{
  position:fixed; bottom:1.8rem; left:1.8rem; width:52px; height:52px; background:#25d366; color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:800; font-size:1.35rem;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.4);
  animation:floatBob 3s ease-in-out infinite;
}
@keyframes floatBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ============================================================
   REVEAL VARIANTS
   ============================================================ */
.reveal[data-reveal="up"]{ transform:translateY(28px); }
.reveal[data-reveal="up"].in-view{ transform:none; }
.reveal[data-reveal="left"]{ transform:translateX(-52px); }
.reveal[data-reveal="left"].in-view{ transform:none; }
.reveal[data-reveal="right"]{ transform:translateX(52px); }
.reveal[data-reveal="right"].in-view{ transform:none; }
.reveal[data-reveal="scale"]{ transform:scale(.88) translateY(14px); }
.reveal[data-reveal="scale"].in-view{ transform:scale(1) translateY(0); }
.reveal[data-reveal="rotate"]{ transform:translateY(26px) rotate(-4deg); }
.reveal[data-reveal="rotate"].in-view{ transform:translateY(0) rotate(0deg); }
.reveal[data-reveal="clip"]{ transform:translateY(18px); clip-path:inset(0 0 100% 0); transition:opacity .7s var(--ease), transform .7s var(--ease), clip-path .9s var(--ease); }
.reveal[data-reveal="clip"].in-view{ transform:translateY(0); clip-path:inset(0 0 0% 0); }
.reveal{ transition-duration:.85s; transition-timing-function:var(--ease); }
.stagger-grid > *{ transition-delay:var(--stagger-delay, 0ms); }

/* ============================================================
   HOVER MICRO-INTERACTIONS
   ============================================================ */
.stat{ transition:transform .3s var(--ease); cursor:default; }
.stat:hover{ transform:translateY(-5px); }
.stat:hover .stat-num{ color:var(--orange-2); text-shadow:0 0 24px var(--glow-orange); }
.stat-num{ transition:color .3s, text-shadow .3s; }
.tl-item{ transition:transform .3s var(--ease); }
.tl-item:hover{ transform:translateX(8px); }
.tl-dot{ transition:background .3s, border-color .3s, box-shadow .3s; }
.tl-item:hover .tl-dot{ background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 6px rgba(255,106,26,.18); }
.tl-degree{ transition:color .3s; }
.tl-item:hover .tl-degree{ color:var(--cyan); }
.skill-card, .project-card, .cert-card{ transition:transform .18s ease-out, background .3s var(--ease), box-shadow .3s var(--ease); transform-style:preserve-3d; }
.skill-card:hover{ box-shadow:0 18px 36px -18px rgba(0,0,0,.55); }
.skill-icon{ transition:transform .3s var(--ease), color .3s, border-color .3s, box-shadow .3s; }
.skill-card:hover .skill-icon{ transform:rotate(-8deg) scale(1.08); color:var(--orange); border-color:var(--orange); box-shadow:0 0 16px -4px var(--glow-orange); }
.project-card{ cursor:pointer; }
.project-card:hover{ box-shadow:0 24px 50px -22px rgba(0,0,0,.6); }
.cert-card:hover{ box-shadow:0 20px 44px -22px rgba(19,41,61,.28); }
.cert-thumb img{ transition:transform .4s var(--ease); }
.cert-card:hover .cert-thumb img{ transform:scale(1.12); }

.btn, .nav-cta, .filter-btn{ position:relative; overflow:hidden; }
.btn::after, .nav-cta::after, .filter-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 65%);
  opacity:0; transition:opacity .3s;
}
.btn:hover::after, .nav-cta:hover::after, .filter-btn:hover::after{ opacity:1; }
.filter-btn.active::after{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .nav-links{
    position:fixed; top:0; right:0; height:100dvh; width:min(84vw,340px);
    background:linear-gradient(160deg, rgba(6,12,23,.98), rgba(13,28,48,.98));
    backdrop-filter:blur(20px);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:6rem 2.2rem 2rem; gap:1.8rem;
    transform:translateX(100%); transition:transform .45s var(--ease-2);
    border-left:1px solid var(--line-strong); z-index:1050;
    box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:.95rem; opacity:0; transform:translateX(18px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
  .nav-links.open a{ opacity:1; transform:translateX(0); }
  .nav-links.open a:nth-child(1){ transition-delay:.08s; }
  .nav-links.open a:nth-child(2){ transition-delay:.13s; }
  .nav-links.open a:nth-child(3){ transition-delay:.18s; }
  .nav-links.open a:nth-child(4){ transition-delay:.23s; }
  .nav-links.open a:nth-child(5){ transition-delay:.28s; }
  .nav-links.open a:nth-child(6){ transition-delay:.33s; }
  .nav-links.open a:nth-child(7){ transition-delay:.38s; }

  .hamburger{ display:flex; }
  .nav-cta{ display:none; }
  .contact-wrap{ grid-template-columns:1fr; }
  .about-meta{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .hero-stats{ flex-wrap:wrap; }
  .stat{ flex:1 1 45%; border-left:none; border-top:1px solid var(--line); padding:1rem 0 0; margin-top:1rem;}
  .about-copy{ max-width:100%; border-left:none; border-top:2px solid var(--orange); border-radius:0 0 var(--radius) var(--radius); }
  .about-bg img{ object-position:60% center; opacity:.4; }
  .about-bg::after{ background:linear-gradient(180deg, var(--navy) 0%, rgba(6,12,23,.6) 30%, rgba(6,12,23,.6) 70%, var(--navy) 100%); }
}
@media (max-width: 480px){
  .about-meta{ grid-template-columns:1fr; }
  .scroll-top{ width:40px; height:40px; bottom:1.2rem; right:1.2rem; }
  .whatsapp-float{ width:46px; height:46px; bottom:1.2rem; left:1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .section-bg img, .hero-bg img, .skills-bg img{ transform:none !important; }
  #ambient::before, #ambient::after{ animation:none; }
}