/* =============================================================
   style.css  --  Abdullah Shafique Portfolio
   Key rules:
   1. Cursor: position:fixed, top/left set by JS, CSS adds
      transform:translate(-50%,-50%) to centre on mouse.
      No transition on transform (JS updates every frame).
   2. No html { scroll-behavior:smooth } -- Lenis handles it.
      Having both causes double-easing lag.
   3. Card tilt: --gx/--gy custom props drive gloss ::after.
   ============================================================= */

/* ── tokens ── */
:root {
  --bg:      #030309;
  --bg1:     #07071a;
  --bg2:     #0c0c22;
  --card:    #0e0e22;
  --card2:   #13132c;
  --border:  #181838;
  --border2: #22224a;
  --green:   #00ff88;
  --gdim:    #00cc6a;
  --gfaint:  rgba(0,255,136,.07);
  --gglow:   rgba(0,255,136,.18);
  --cyan:    #22d3ee;
  --cfaint:  rgba(34,211,238,.07);
  --amber:   #f59e0b;
  --purple:  #a78bfa;
  --text:    #f1f5f9;
  --text2:   #cbd5e1;
  --muted:   #94a3b8;
  --muted2:  #64748b;
  --display: 'Bebas Neue', sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --body:    'Plus Jakarta Sans', sans-serif;
  --ease:    cubic-bezier(.16,1,.3,1);
}

/* ── reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* NO html { scroll-behavior } -- Lenis handles scrolling */
body {
  background:var(--bg); color:var(--text);
  font-family:var(--body); overflow-x:hidden; line-height:1.65;
}
@media (pointer:fine) {
  body { cursor:none; }
  a, button, [role=button] { cursor:none; }
}
/* grain overlay */
body::after {
  content:''; position:fixed; inset:0;
  pointer-events:none; z-index:9999; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
}
:focus-visible { outline:2px solid var(--green); outline-offset:4px; border-radius:3px; }
:focus:not(:focus-visible) { outline:none; }

/* =============================================================
   CURSOR
   JS (cursor.js) sets .cur-dot left/top to raw mouse position.
   JS sets .cur-ring left/top to lerped position.
   CSS adds translate(-50%,-50%) so elements centre on that point.
   width/height transition for the hover expand effect.
   NO transition on left/top or transform -- JS drives them.
   ============================================================= */
.cur-dot {
  width:6px; height:6px; background:var(--green); border-radius:50%;
  position:fixed; top:-500px; left:-500px;        /* off-screen until first mousemove */
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);                  /* centre on mouse point */
  transition:width .18s, height .18s, opacity .18s;
}
.cur-ring {
  width:34px; height:34px;
  border:1.5px solid rgba(0,255,136,.45); border-radius:50%;
  position:fixed; top:-500px; left:-500px;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s, opacity .18s;
}
body.hov .cur-dot  { width:10px; height:10px; }
body.hov .cur-ring { width:52px; height:52px; border-color:var(--green); }

/* trail canvas -- fixed, pointer-events none */
#trailCanvas { position:fixed; inset:0; pointer-events:none; z-index:99997; }

/* =============================================================
   PROGRESS BAR
   ============================================================= */
.pbar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--green),var(--cyan),var(--green));
  background-size:200% 100%;
  animation:pbarShift 4s linear infinite;
  z-index:9999; transition:width .08s linear;
}
@keyframes pbarShift { 0%{background-position:0%} 100%{background-position:200%} }

/* skip link */
.skip { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus {
  position:fixed; top:1rem; left:1rem; width:auto; height:auto;
  background:var(--bg); color:var(--green); padding:.5rem 1rem;
  border:2px solid var(--green); border-radius:3px; z-index:10000; text-decoration:none;
}

/* scroll-to-top */
.scroll-top {
  position:fixed; bottom:2rem; right:2rem; z-index:800;
  width:44px; height:44px; border-radius:50%;
  background:var(--card); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.9rem; color:var(--muted);
  opacity:0; transform:translateY(12px) scale(.88);
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .2s, color .2s;
}
.scroll-top.show { opacity:1; transform:translateY(0) scale(1); }
.scroll-top:hover { border-color:var(--green); color:var(--green); }

/* easter egg */
.easter-msg {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);
  background:var(--card); border:1px solid var(--green); border-radius:12px;
  padding:2rem 3rem; font-family:var(--mono); font-size:.88rem; color:var(--green);
  z-index:9990; text-align:center; line-height:2.1;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  box-shadow:0 0 60px rgba(0,255,136,.18);
}
.easter-msg.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* terminal widget */
.terminal-widget {
  position:fixed; bottom:2rem; left:2rem; z-index:800;
  background:var(--card); border:1px solid var(--border2); border-radius:8px;
  padding:.65rem 1rem; min-width:200px; max-width:290px;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
  transition:border-color .25s;
}
.terminal-widget:hover { border-color:rgba(0,255,136,.25); }
.term-hd {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.6rem; color:var(--muted2);
  margin-bottom:.45rem; padding-bottom:.4rem; border-bottom:1px solid var(--border);
}
.term-prompt { font-family:var(--mono); font-size:.68rem; color:var(--green); }
.term-out    { font-family:var(--mono); font-size:.68rem; color:var(--text2); }
@media (max-width:640px) { .terminal-widget { display:none; } }

/* =============================================================
   NAV
   ============================================================= */
nav#nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 5rem;
  transition:padding .4s var(--ease), background .4s, border-color .4s;
}
nav#nav.sc {
  background:rgba(3,3,9,.93);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border); padding:1.1rem 5rem;
}
.nav-brand { text-decoration:none; display:flex; flex-direction:column; gap:2px; }
.nav-brand-name { font-family:var(--display); font-size:1.1rem; letter-spacing:.08em; color:var(--text); line-height:1; }
.nav-brand-sub  { font-family:var(--mono); font-size:.58rem; color:var(--green); letter-spacing:.18em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:2.5rem; list-style:none; }
.nav-links a {
  font-family:var(--mono); font-size:.68rem; color:var(--muted);
  text-decoration:none; letter-spacing:.08em; transition:color .2s; position:relative;
}
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--green); transition:width .3s; }
.nav-links a:hover { color:var(--green); }
.nav-links a:hover::after { width:100%; }
.nav-hire {
  font-family:var(--mono); font-size:.7rem; color:#000!important; background:var(--green);
  padding:.5rem 1.2rem; border-radius:3px; font-weight:700;
  letter-spacing:.05em; text-decoration:none; transition:background .2s, transform .2s;
}
.nav-hire::after { display:none!important; }
.nav-hire:hover { background:var(--gdim)!important; transform:translateY(-1px); }

/* hamburger */
.hbg { display:none; flex-direction:column; gap:5px; padding:.4rem; background:none; border:none; z-index:600; }
.hbg span { display:block; width:22px; height:2px; background:var(--text); border-radius:1px; transition:all .25s; }
.hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hbg.open span:nth-child(2) { opacity:0; }
.hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* mobile full-screen menu */
.mob-nav {
  display:none; position:fixed; inset:0; background:rgba(3,3,9,.97); z-index:490;
  flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
  transform:translateY(-100%); transition:transform .45s var(--ease);
}
.mob-nav.open { transform:translateY(0); }
.mob-nav a { font-family:var(--display); font-size:2.8rem; letter-spacing:.04em; color:var(--text); text-decoration:none; transition:color .2s; }
.mob-nav a:hover { color:var(--green); }
.mob-sub { font-family:var(--mono); font-size:.75rem; color:var(--muted); letter-spacing:.1em; }
.mob-cv {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.72rem; color:var(--green);
  border:1px solid rgba(0,255,136,.3); padding:.6rem 1.4rem; border-radius:4px;
  text-decoration:none; transition:background .2s; margin-top:.5rem;
}
.mob-cv:hover { background:var(--gfaint); }

@media (max-width:900px) {
  nav#nav, nav#nav.sc { padding:1.2rem 1.5rem; }
  .nav-links { display:none; }
  .hbg { display:flex; }
  .mob-nav { display:flex; }
}

/* =============================================================
   HERO
   ============================================================= */
#hero {
  min-height:100vh; position:relative;
  display:flex; align-items:center;
  padding:10rem 5rem 6rem; overflow:hidden;
}
#heroCanvas { position:absolute; inset:0; width:100%; height:100%; opacity:.30; pointer-events:all; }
.hero-fog {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 80% 25%,rgba(0,255,136,.05) 0%,transparent 60%),
    radial-gradient(ellipse 55% 65% at 15% 75%,rgba(34,211,238,.035) 0%,transparent 60%),
    linear-gradient(to bottom,transparent 50%,var(--bg) 100%);
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,255,136,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,136,.015) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 65%,transparent 100%);
}
.hero-inner { position:relative; z-index:2; max-width:860px; }

/* badge */
.h-badge {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.66rem; color:var(--green);
  background:rgba(0,255,136,.05); border:1px solid rgba(0,255,136,.14);
  padding:.5rem 1.1rem; border-radius:100px; margin-bottom:2.5rem;
  opacity:0; animation:fadeUp .6s .1s forwards;
}
.pulse-ring { width:9px; height:9px; position:relative; flex-shrink:0; }
.pulse-ring::before, .pulse-ring::after {
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--green);
}
.pulse-ring::after { animation:ripple 2s infinite; background:transparent; border:1.5px solid var(--green); }
@keyframes ripple { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2.5);opacity:0} }

/* heading */
.h-heading { margin-bottom:2rem; opacity:0; animation:fadeUp .6s .2s forwards; }
.h-kicker { font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.22em; text-transform:uppercase; margin-bottom:.8rem; display:block; }
.h-display { font-family:var(--display); font-size:clamp(4rem,10.5vw,9.5rem); line-height:.9; letter-spacing:.02em; }
.hd-ghost  { display:block; color:transparent; -webkit-text-stroke:1.5px rgba(241, 245, 249, 0.507); }
.hd-solid  { display:block; color:var(--text); min-height:.9em; }
.hd-accent { display:block; color:var(--green); text-shadow:0 0 80px rgba(0,255,136,.22); }
.tw-cursor { display:inline-block; width:3px; height:.75em; background:var(--green); margin-left:2px; vertical-align:middle; animation:blink 1s infinite; }

/* tagline */
.h-tagline {
  font-size:clamp(.88rem,1.4vw,1.03rem); color:var(--muted);
  line-height:2; max-width:510px; margin-bottom:2.2rem; font-weight:300;
  opacity:0; animation:fadeUp .6s .35s forwards;
}
.h-tagline strong { color:var(--text); font-weight:600; }
.h-tagline em     { color:var(--cyan); font-style:normal; }

/* pills */
.h-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.8rem; opacity:0; animation:fadeUp .6s .45s forwards; }
.pill {
  font-family:var(--mono); font-size:.64rem; color:var(--cyan);
  background:rgba(34,211,238,.06); border:1px solid rgba(34,211,238,.18);
  padding:.32rem .8rem; border-radius:100px; letter-spacing:.05em;
  transition:background .2s, border-color .2s, transform .2s;
}
.pill:hover { background:rgba(34,211,238,.12); border-color:var(--cyan); transform:translateY(-2px); }

/* CTAs */
.h-ctas { display:flex; gap:1rem; flex-wrap:wrap; opacity:0; animation:fadeUp .6s .55s forwards; }
.btn-p {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; font-weight:700;
  color:#000; background:var(--green); padding:.95rem 2.2rem;
  border-radius:4px; text-decoration:none; letter-spacing:.05em;
  transition:background .3s, transform .3s, box-shadow .3s; position:relative; overflow:hidden;
}
.btn-p::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,.18); transition:left .4s; }
.btn-p:hover { background:var(--gdim); transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,255,136,.28); }
.btn-p:hover::before { left:100%; }
.btn-s {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; color:var(--text);
  border:1px solid var(--border2); padding:.95rem 2rem;
  border-radius:4px; text-decoration:none; letter-spacing:.05em;
  transition:border-color .2s, color .2s, transform .2s;
}
.btn-s:hover { border-color:var(--green); color:var(--green); transform:translateY(-3px); }
.btn-cv {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; color:var(--cyan);
  border:1px solid rgba(34,211,238,.25); padding:.95rem 1.8rem;
  border-radius:4px; text-decoration:none; letter-spacing:.05em;
  transition:border-color .2s, background .2s, transform .2s;
}
.btn-cv:hover { border-color:var(--cyan); background:rgba(34,211,238,.06); transform:translateY(-3px); }

/* floating metrics - desktop */
.h-metrics {
  position:absolute; right:5rem; top:50%; transform:translateY(-55%);
  display:flex; flex-direction:column; gap:.9rem; z-index:2;
  opacity:0; animation:fadeLeft .6s .75s forwards;
}
@keyframes fadeLeft {
  from { opacity:0; transform:translateY(-55%) translateX(18px); }
  to   { opacity:1; transform:translateY(-55%) translateX(0); }
}
/* floating metrics - mobile horizontal row */
.h-metrics-mobile {
  display:none; position:absolute;
  bottom:5.5rem; left:1.5rem; right:1.5rem; z-index:2;
  flex-direction:row; gap:.5rem;
  opacity:0; animation:fadeUp .6s .8s forwards;
}
.h-metrics-mobile .m-card { flex:1; min-width:0; padding:.7rem .8rem; }
.h-metrics-mobile .m-val  { font-size:1.3rem; }
.h-metrics-mobile .m-lbl  { font-size:.5rem; }

@media (max-width:1180px) { .h-metrics { display:none; } .h-metrics-mobile { display:flex; } }

/* metric card */
.m-card {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:1rem 1.4rem; position:relative; overflow:hidden; min-width:150px;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .25s;
  --gx:50%; --gy:50%;
}
.m-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--green),var(--cyan)); }
.m-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.06) 0%,transparent 55%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.m-card:hover { transform:translateY(-6px) scale(1.03); box-shadow:0 16px 48px rgba(0,0,0,.45); border-color:rgba(0,255,136,.2); }
.m-card:hover::after { opacity:1; }
.m-float { animation:mFloat 5.5s ease-in-out infinite; }
.m-card:hover { animation:none; }
@keyframes mFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.m-val { font-family:var(--display); font-size:2rem; color:var(--green); letter-spacing:.02em; line-height:1; }
.m-lbl { font-family:var(--mono); font-size:.58rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem; }

/* scroll hint */
.h-scroll { position:absolute; bottom:2.5rem; left:5rem; z-index:2; display:flex; align-items:center; gap:.9rem; opacity:0; animation:fadeUp .6s 1.1s forwards; }
.h-scroll-line { width:40px; height:1px; background:var(--muted2); position:relative; overflow:hidden; }
.h-scroll-line::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--green); animation:scan 2s 1.2s infinite; }
@keyframes scan { 0%{left:-100%} 100%{left:100%} }
.h-scroll-txt { font-family:var(--mono); font-size:.6rem; color:var(--muted2); letter-spacing:.18em; text-transform:uppercase; }
.h-commit { position:absolute; bottom:2.5rem; right:5rem; z-index:2; display:flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.64rem; color:var(--muted); opacity:0; animation:fadeUp .6s 1.1s forwards; }
.cdot { width:7px; height:7px; background:var(--green); border-radius:50%; animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* =============================================================
   SECTION COMMONS
   ============================================================= */
section { padding:5rem 5rem; }
.s-label {
  font-family:var(--mono); font-size:.66rem; color:var(--green);
  letter-spacing:.25em; text-transform:uppercase; margin-bottom:1rem;
  display:flex; align-items:center; gap:.7rem;
}
.s-label::before { content:'//'; color:var(--muted2); }
.s-title { font-family:var(--display); font-size:clamp(2.4rem,5vw,4.8rem); letter-spacing:.03em; line-height:.92; margin-bottom:4rem; }
.s-title .ac { color:var(--green); }
.s-title .gh { color:transparent; -webkit-text-stroke:1.2px rgba(241, 245, 249, 0.507) }
.rev { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rev.vis { opacity:1; transform:translateY(0); }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s}

/* =============================================================
   SYSTEMS
   ============================================================= */
#systems { background:var(--bg1); }
.sys-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.sys-card {
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:2rem; position:relative; overflow:hidden;
  transition:border-color .3s, transform .4s var(--ease), box-shadow .4s;
  --gx:50%; --gy:50%;
}
.sys-card > * { position:relative; z-index:2; }
.sys-card:hover { transform:translateY(-5px); box-shadow:0 24px 64px rgba(0,0,0,.45); }
/* gloss */
.sys-card::after, .pcard::after, .proof-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.065) 0%,transparent 55%);
  opacity:0; transition:opacity .3s; pointer-events:none; z-index:1;
}
.sys-card:hover::after, .pcard:hover::after, .proof-card:hover::after { opacity:1; }
/* top color bar */
.sc-bar { position:absolute; top:0; left:0; right:0; height:2px; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.sys-card:hover .sc-bar { transform:scaleX(1); }
.ag .sc-bar{background:linear-gradient(90deg,var(--green),var(--cyan))}
.rg .sc-bar{background:linear-gradient(90deg,var(--cyan),var(--green))}
.ml .sc-bar{background:linear-gradient(90deg,var(--purple),var(--cyan))}
.ev .sc-bar{background:linear-gradient(90deg,var(--amber),var(--green))}
/* corner glow */
.sys-card::before { content:''; position:absolute; top:-20px; right:-20px; width:120px; height:120px; border-radius:50%; opacity:0; transition:opacity .4s; pointer-events:none; }
.ag::before{background:radial-gradient(circle,rgba(0,255,136,.1) 0%,transparent 70%)}
.rg::before{background:radial-gradient(circle,rgba(34,211,238,.1) 0%,transparent 70%)}
.ml::before{background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%)}
.ev::before{background:radial-gradient(circle,rgba(245,158,11,.1) 0%,transparent 70%)}
.sys-card:hover::before { opacity:1; }
.sc-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.5rem; }
.sc-icon { width:42px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.ag .sc-icon{background:rgba(0,255,136,.1)} .rg .sc-icon{background:rgba(34,211,238,.1)} .ml .sc-icon{background:rgba(167,139,250,.1)} .ev .sc-icon{background:rgba(245,158,11,.1)}
.sc-name { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.25rem; }
.sc-sub  { font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.05em; }
.flow { display:flex; flex-direction:column; }
.fn { display:flex; align-items:stretch; gap:.9rem; }
.fspine { display:flex; flex-direction:column; align-items:center; width:16px; flex-shrink:0; }
.fdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.fline { width:1px; flex:1; min-height:14px; }
.fbody { padding-bottom:.9rem; flex:1; }
.flabel { font-family:var(--mono); font-size:.7rem; color:var(--text); font-weight:700; margin-bottom:.15rem; }
.fdesc  { font-size:.72rem; color:var(--muted); line-height:1.65; }
.fchips { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; }
.fchip  { font-family:var(--mono); font-size:.58rem; padding:.18rem .5rem; border-radius:2px; }
.ag .fdot{background:var(--green)} .ag .fline{background:rgba(0,255,136,.15)} .ag .fchip{border:1px solid rgba(0,255,136,.2);color:var(--green)}
.rg .fdot{background:var(--cyan)}  .rg .fline{background:rgba(34,211,238,.15)} .rg .fchip{border:1px solid rgba(34,211,238,.2);color:var(--cyan)}
.ml .fdot{background:var(--purple)}.ml .fline{background:rgba(167,139,250,.15)}.ml .fchip{border:1px solid rgba(167,139,250,.2);color:var(--purple)}
.ev .fdot{background:var(--amber)} .ev .fline{background:rgba(245,158,11,.15)} .ev .fchip{border:1px solid rgba(245,158,11,.2);color:var(--amber)}
.sc-metrics { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.sc-m { font-family:var(--mono); font-size:.61rem; padding:.25rem .6rem; border-radius:3px; background:var(--bg2); border:1px solid var(--border); color:var(--muted); }
.ag .sc-m.k{color:var(--green);border-color:rgba(0,255,136,.2)} .rg .sc-m.k{color:var(--cyan);border-color:rgba(34,211,238,.2)}
.ml .sc-m.k{color:var(--purple);border-color:rgba(167,139,250,.2)} .ev .sc-m.k{color:var(--amber);border-color:rgba(245,158,11,.2)}

/* =============================================================
   PROJECTS
   ============================================================= */
.proj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.pcard {
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:2rem; position:relative; overflow:hidden;
  transition:border-color .3s, box-shadow .3s, transform .4s var(--ease);
  text-decoration:none; color:inherit; display:block;
  --gx:50%; --gy:50%;
}
.pcard > * { position:relative; z-index:2; }
.pcard:hover { border-color:rgba(0,255,136,.18); box-shadow:0 28px 72px rgba(0,0,0,.5); }
.pcglow {
  position:absolute; width:220px; height:220px;
  background:radial-gradient(circle,rgba(0,255,136,.07) 0%,transparent 70%);
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity .3s;
  transform:translate(-50%,-50%); z-index:0;
}
.pcard:hover .pcglow { opacity:1; }
.pcard.feat { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.pm { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; flex-wrap:wrap; gap:.4rem; }
.pn { font-family:var(--mono); font-size:.6rem; color:var(--green); opacity:.5; letter-spacing:.08em; }
.pls { display:flex; gap:.4rem; flex-wrap:wrap; }
.pl {
  font-family:var(--mono); font-size:.6rem; color:var(--muted);
  border:1px solid var(--border2); padding:.24rem .62rem;
  border-radius:3px; text-decoration:none; transition:border-color .2s, color .2s; display:inline-block;
}
.pl:hover { border-color:var(--green); color:var(--green); }
.pl.demo { color:var(--green); border-color:rgba(0,255,136,.3); background:rgba(0,255,136,.05); font-weight:700; }
.pl.demo:hover { background:rgba(0,255,136,.12); border-color:var(--green); }
.ptitle { font-size:1.2rem; font-weight:700; color:var(--text); margin-bottom:.4rem; letter-spacing:-.01em; }
.pmet { display:inline-block; font-family:var(--mono); font-size:.64rem; color:var(--cyan); background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.15); padding:.28rem .65rem; border-radius:3px; margin-bottom:.9rem; }
.pdesc { font-size:.82rem; color:var(--muted); line-height:1.9; margin-bottom:.9rem; font-weight:300; }
.pnote { font-size:.73rem; color:var(--muted2); font-style:italic; border-left:2px solid rgba(34,211,238,.2); padding-left:.8rem; margin-bottom:.7rem; line-height:1.7; }
.ptags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.ptag { font-family:var(--mono); font-size:.6rem; padding:.22rem .58rem; border-radius:3px; border:1px solid var(--border2); color:var(--muted2); }
.ptag.g{border-color:rgba(0,255,136,.2);color:var(--green)} .ptag.c{border-color:rgba(34,211,238,.2);color:var(--cyan)}
/* code panel */
.cpanel { background:#060613; border:1px solid var(--border); border-radius:8px; padding:1.4rem; font-family:var(--mono); font-size:.72rem; overflow:hidden; }
.cph { display:flex; align-items:center; gap:.45rem; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border); }
.cpd { width:10px; height:10px; border-radius:50%; }
.cpf { font-size:.62rem; color:var(--muted2); margin-left:auto; }
.cpl { display:flex; gap:.9rem; margin-bottom:.38rem; line-height:1.65; }
.cln { color:var(--border2); width:18px; text-align:right; flex-shrink:0; user-select:none; font-size:.67rem; }
.kw{color:var(--purple)} .fn2{color:var(--cyan)} .sv{color:var(--green)} .cmt{color:var(--muted2);font-style:italic} .vr{color:var(--amber)}

/* =============================================================
   STATS
   ============================================================= */
#stats { background:var(--bg1); padding:5rem; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.sc2 { background:var(--card); padding:3rem 2rem; text-align:center; position:relative; overflow:hidden; transition:background .3s; }
.sc2::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--green),var(--cyan)); transform:scaleX(0); transition:transform .4s; }
.sc2:hover { background:var(--card2); } .sc2:hover::before { transform:scaleX(1); }
.snum { font-family:var(--display); font-size:3.8rem; color:var(--green); letter-spacing:.02em; line-height:1; margin-bottom:.5rem; }
.sunit { font-size:1.8rem; }
.slbl { font-family:var(--mono); font-size:.63rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.ssub { font-family:var(--mono); font-size:.58rem; color:var(--muted2); margin-top:.35rem; }

/* =============================================================
   ABOUT
   ============================================================= */
.about-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:6rem; align-items:start; }
.at p { font-size:.9rem; color:var(--muted); line-height:2.1; margin-bottom:1.4rem; font-weight:300; }
.at strong { color:var(--text); font-weight:600; }
.at em     { color:var(--cyan); font-style:normal; }
.avatar-wrap { display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; background:var(--gfaint); border:1px solid rgba(0,255,136,.12); border-radius:12px; padding:1.2rem 1.5rem; }
.avatar { width:72px; height:72px; border-radius:50%; border:2px solid var(--green); background:url('../assets/headshot.jpg') center/cover; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.8rem; color:var(--green); overflow:hidden; }
.avatar-info h3 { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.avatar-info p  { font-family:var(--mono); font-size:.65rem; color:var(--muted); margin:0; }
.certs { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0; }
.cert { font-family:var(--mono); font-size:.62rem; color:var(--amber); background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.2); padding:.28rem .72rem; border-radius:100px; }
.tl { margin-top:2.5rem; }
.tl-hd { font-family:var(--mono); font-size:.63rem; color:var(--green); letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.5rem; }
.tli { display:flex; gap:1.5rem; padding-bottom:1.6rem; position:relative; }
.tli:not(:last-child)::before { content:''; position:absolute; left:5px; top:16px; bottom:0; width:1px; background:var(--border2); }
.tldot { width:12px; height:12px; border-radius:50%; border:2px solid var(--green); background:var(--bg); flex-shrink:0; margin-top:4px; position:relative; z-index:1; }
.tldot.alt { border-color:var(--cyan); }
.tly     { font-family:var(--mono); font-size:.6rem; color:var(--green); letter-spacing:.1em; margin-bottom:.2rem; }
.tly.alt { color:var(--cyan); }
.tlr { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:.25rem; }
.tld { font-size:.77rem; color:var(--muted); line-height:1.75; }
.gh-strip { margin-top:2rem; background:var(--gfaint); border:1px solid rgba(0,255,136,.12); border-radius:8px; padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.ghi { display:flex; align-items:center; gap:.8rem; }
.ghicon { font-size:1.4rem; }
.ghlbl { font-family:var(--mono); font-size:.72rem; color:var(--text); font-weight:700; }
.ghsub { font-family:var(--mono); font-size:.61rem; color:var(--muted); margin-top:.1rem; }
.ghlink { font-family:var(--mono); font-size:.7rem; color:var(--green); text-decoration:none; border:1px solid rgba(0,255,136,.2); padding:.42rem .9rem; border-radius:4px; transition:background .2s; white-space:nowrap; }
.ghlink:hover { background:rgba(0,255,136,.06); }
/* contribution heatmap */
.contrib-wrap { margin-top:2rem; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1.5rem; }
.contrib-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.contrib-hd h4 { font-family:var(--mono); font-size:.65rem; color:var(--green); letter-spacing:.18em; text-transform:uppercase; }
.contrib-hd span { font-family:var(--mono); font-size:.6rem; color:var(--muted2); }
#contribCanvas { display:block; border-radius:4px; }
/* language chart */
.lang-wrap { margin-top:1.5rem; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1.5rem; }
.lang-wrap h4 { font-family:var(--mono); font-size:.65rem; color:var(--cyan); letter-spacing:.18em; text-transform:uppercase; margin-bottom:1rem; }
#langChart { display:flex; flex-direction:column; gap:.55rem; }
.lang-row { display:flex; align-items:center; gap:.7rem; }
.lang-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.lang-name { font-family:var(--mono); font-size:.65rem; color:var(--text); width:82px; flex-shrink:0; }
.lang-bar-wrap { flex:1; height:6px; background:var(--border2); border-radius:3px; overflow:hidden; }
.lang-bar  { height:100%; border-radius:3px; opacity:0; transition:opacity .6s, width .8s var(--ease); }
.lang-pct  { font-family:var(--mono); font-size:.6rem; color:var(--muted2); width:36px; text-align:right; flex-shrink:0; }
/* skills */
.skills-wrap { display:flex; flex-direction:column; gap:2rem; }
.sg h4 { font-family:var(--mono); font-size:.62rem; color:var(--green); letter-spacing:.22em; text-transform:uppercase; margin-bottom:.9rem; }
.stags { display:flex; flex-wrap:wrap; gap:.5rem; }
.stag {
  font-family:var(--mono); font-size:.67rem; color:var(--muted);
  background:var(--bg2); border:1px solid var(--border);
  padding:.38rem .78rem; border-radius:4px;
  transition:color .2s, border-color .2s, background .2s;
}
.stag:hover { color:var(--green); border-color:rgba(0,255,136,.25); background:var(--gfaint); }

/* =============================================================
   SOCIAL PROOF
   ============================================================= */
#proof { background:var(--bg1); }
.proof-note { font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-bottom:2rem; line-height:1.8; padding:.9rem 1.2rem; background:rgba(245,158,11,.04); border:1px solid rgba(245,158,11,.18); border-radius:6px; }
.proof-note strong { color:var(--amber); }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.proof-card {
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:1.8rem; position:relative; overflow:hidden;
  transition:border-color .3s, transform .4s var(--ease);
  --gx:50%; --gy:50%;
}
.proof-card > * { position:relative; z-index:2; }
.proof-card:hover { border-color:rgba(0,255,136,.18); transform:translateY(-4px); }
.pq { font-size:.85rem; color:var(--text2); line-height:1.9; margin-bottom:1.4rem; position:relative; font-weight:300; }
.pq::before { content:'"'; font-family:var(--display); font-size:3.5rem; color:rgba(0,255,136,.1); position:absolute; top:-1rem; left:-.5rem; line-height:1; pointer-events:none; }
.pa { display:flex; align-items:center; gap:.9rem; }
.pa-av { width:36px; height:36px; border-radius:50%; background:var(--bg2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.9rem; color:var(--green); flex-shrink:0; }
.pa-name { font-family:var(--mono); font-size:.68rem; color:var(--text); font-weight:700; }
.pa-role { font-family:var(--mono); font-size:.6rem; color:var(--muted); margin-top:.1rem; }
.stars { color:var(--amber); font-size:.75rem; letter-spacing:1px; margin-bottom:.9rem; }
.gh-metrics { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; }
.ghm { display:flex; align-items:center; gap:.6rem; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:.8rem 1.2rem; font-family:var(--mono); font-size:.68rem; color:var(--muted); }
.ghm strong { color:var(--green); }
/* skeleton loader */
.skel { display:inline-block; height:.85em; width:90px; background:linear-gradient(90deg,var(--border) 25%,var(--border2) 50%,var(--border) 75%); background-size:200% 100%; animation:skelShimmer 1.4s infinite; border-radius:3px; vertical-align:middle; }
@keyframes skelShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* =============================================================
   CONTACT
   ============================================================= */
#contact { background:var(--bg1); text-align:center; position:relative; overflow:hidden; }
#contact::before { content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:900px; height:450px; background:radial-gradient(ellipse,rgba(0,255,136,.05) 0%,transparent 65%); pointer-events:none; }
.cont-inner { max-width:640px; margin:0 auto; position:relative; z-index:1; }
.cont-inner .s-label { justify-content:center; }
.crole { font-size:.9rem; color:var(--muted); line-height:2; font-weight:300; }
.crole span { color:var(--cyan); font-weight:600; }
.avail-row { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.5rem 0 2rem; flex-wrap:wrap; }
.abadge  { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.68rem; color:var(--green); background:rgba(0,255,136,.06); border:1px solid rgba(0,255,136,.18); padding:.48rem 1rem; border-radius:100px; }
.tzbadge { font-family:var(--mono); font-size:.68rem; color:var(--cyan); background:rgba(34,211,238,.06); border:1px solid rgba(34,211,238,.18); padding:.48rem 1rem; border-radius:100px; }
.email-blk { position:relative; display:inline-block; margin-bottom:2.5rem; }
.email-a { font-family:var(--mono); font-size:1.05rem; color:var(--green); text-decoration:none; border-bottom:1px solid rgba(0,255,136,.3); padding-bottom:3px; transition:border-color .2s; }
.email-a:hover { border-color:var(--green); }
.copybtn { background:none; border:1px solid var(--border2); color:var(--muted2); font-family:var(--mono); font-size:.61rem; padding:.28rem .58rem; border-radius:3px; margin-left:.6rem; transition:all .2s; vertical-align:middle; }
.copybtn:hover { border-color:var(--green); color:var(--green); }
/* tooltip appears BELOW the email — no mobile clip */
.copytip {
  position:absolute; top:130%; left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--green); color:#000; font-family:var(--mono);
  font-size:.62rem; padding:.3rem .75rem; border-radius:3px;
  white-space:nowrap; opacity:0; font-weight:700; z-index:10;
  pointer-events:none; transition:opacity .25s, transform .25s;
}
.copytip.show { opacity:1; transform:translateX(-50%) translateY(0); }
.copytip::after { content:''; position:absolute; bottom:100%; left:50%; margin-left:-4px; border:4px solid transparent; border-bottom-color:var(--green); }
.cta-row { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.btn-cal { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.78rem; font-weight:700; color:#000; background:var(--green); padding:.95rem 2rem; border-radius:4px; text-decoration:none; letter-spacing:.05em; transition:background .3s, transform .3s, box-shadow .3s; }
.btn-cal:hover { background:var(--gdim); transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,255,136,.28); }
.btn-dl { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.78rem; color:var(--green); background:transparent; border:1px solid rgba(0,255,136,.28); padding:.95rem 2rem; border-radius:4px; text-decoration:none; letter-spacing:.05em; transition:background .2s, border-color .2s, transform .2s; }
.btn-dl:hover { background:var(--gfaint); border-color:var(--green); transform:translateY(-3px); }
.soc-row { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; }
.soc { font-family:var(--mono); font-size:.7rem; color:var(--muted); border:1px solid var(--border2); padding:.62rem 1.3rem; border-radius:4px; text-decoration:none; transition:color .2s, border-color .2s; }
.soc:hover { color:var(--green); border-color:rgba(0,255,136,.25); }
.soc.li { border-color:rgba(34,211,238,.2); color:var(--cyan); } .soc.li:hover { border-color:var(--cyan); }

/* =============================================================
   FOOTER
   ============================================================= */
footer { border-top:1px solid var(--border); padding:2rem 5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
footer p { font-family:var(--mono); font-size:.63rem; color:var(--muted2); }
footer span { color:var(--green); }
footer a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
footer a:hover { color:var(--green); }

/* =============================================================
   ANIMATIONS
   ============================================================= */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; } }

/* =============================================================
   PRINT
   ============================================================= */
@media print {
  .cur-dot,.cur-ring,#trailCanvas,.pbar,.terminal-widget,.scroll-top,
  #heroCanvas,.mob-nav,.hbg,.h-scroll,.h-commit,.h-metrics,.h-metrics-mobile,
  .easter-msg { display:none!important; }
  body { background:#fff; color:#000; }
  section { padding:2rem 1rem; }
  .s-title,.ptitle,.sc-name { color:#000; -webkit-text-stroke:0; }
  .pcard,.sys-card { border:1px solid #ddd; page-break-inside:avoid; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:900px) {
  section, #hero, #stats, footer { padding-left:1.5rem; padding-right:1.5rem; }
  #hero  { padding-top:9rem; padding-bottom:11rem; }
  #stats { padding:4rem 1.5rem; }
  .sys-grid, .proj-grid, .about-grid, .proof-grid { grid-template-columns:1fr; }
  .pcard.feat { grid-column:span 1; grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .h-scroll { left:1.5rem; }
  .h-commit { display:none; }
  .hd-ghost,.hd-solid,.hd-accent { font-size:clamp(3rem,13vw,5.5rem); }
  .h-ctas .btn-cv { display:none; }
  .scroll-top { bottom:1.2rem; right:1.2rem; }
}
@media (max-width:600px) {
  .stats-grid { grid-template-columns:1fr; }
  .proof-grid { grid-template-columns:1fr; }
  .h-metrics-mobile { flex-wrap:wrap; }
  .h-metrics-mobile .m-card { min-width:calc(50% - .25rem); }
}