/* ════════════════════════════════════════════════════
   0xAbhiSec  |  Elite Pentester Portfolio
   Dual-Theme  ·  Dark & Light
   ════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* ──────────────────────────────────────────────────
   DARK THEME  (default)
   ────────────────────────────────────────────────── */
:root {
  --bg:     #080a0f;
  --bg1:    #0c1118;
  --bg2:    #10151e;
  --bg3:    #161d2a;
  --panel:  rgba(12,16,22,0.90);
  --glass:  rgba(12,16,22,0.74);

  /* Primary Colors — Cyan / Green / Blue / Gold */
  --c:   #f5a623;   /* gold (primary accent) */
  --g:   #00ff88;   /* neon green            */
  --p:   #00e5ff;   /* electric cyan         */
  --b:   #2196f3;   /* hacker blue           */
  --r:   #ff3c5a;   /* neon red              */
  --y:   #ffc400;   /* amber                 */
  --o:   #ff6d00;   /* orange                */

  /* Metallic Blues */
  --mb1:  #1e3a5f;
  --mb2:  #2d5a8c;

  /* Enhanced Glows */
  --gc: 0 0 8px rgba(245,166,35,.9), 0 0 20px rgba(245,166,35,.5), 0 0 40px rgba(245,166,35,.2), 0 0 80px rgba(245,166,35,.08);
  --gg: 0 0 8px rgba(0,255,136,.85), 0 0 20px rgba(0,255,136,.4), 0 0 40px rgba(0,255,136,.15);
  --gr: 0 0 8px rgba(255,60,90,.85), 0 0 20px rgba(255,60,90,.35), 0 0 40px rgba(255,60,90,.12);
  --gp: 0 0 8px rgba(0,229,255,.85), 0 0 20px rgba(0,229,255,.4), 0 0 40px rgba(0,229,255,.15);
  --gb: 0 0 8px rgba(33,150,243,.85), 0 0 20px rgba(33,150,243,.4), 0 0 40px rgba(33,150,243,.12);

  /* Gradient Glows */
  --gradient-cp: 0 0 10px rgba(245,166,35,.6), 0 0 20px rgba(0,229,255,.35);
  --gradient-cg: 0 0 10px rgba(245,166,35,.5), 0 0 20px rgba(0,255,136,.35);

  --txt:   #c8d8e8;
  --txt2:  #7a90a8;
  --txt3:  #5a7a95;
  --hi:    #eaf2fa;

  --bdr:  rgba(0,229,255,.10);
  --bdrh: rgba(245,166,35,.55);
  --bdrg: rgba(0,255,136,.40);

  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --T: .28s;

  /* bg-specific — full hacker mode, heavier matrix */
  --matrix-op:   0.32;
  --particle-op: 0.6;
  --hex-op:      0.07;
  --star-op:     1;
  --sweep-op:    0.85;
  --wm-stroke:   rgba(0,255,136,.08);
}

/* ──────────────────────────────────────────────────
   LIGHT THEME
   ────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:    #f0f4fa;
  --bg1:   #e8eef8;
  --bg2:   #dde5f2;
  --bg3:   #cfd9ec;
  --panel: rgba(255,255,255,0.88);
  --glass: rgba(255,255,255,0.70);

  --c:   #c47d0a;   /* gold */
  --g:   #1b8a3a;   /* deep green */
  --p:   #0277bd;   /* cyan/blue */
  --b:   #1565c0;   /* deep blue */
  --r:   #c62828;
  --y:   #b45309;
  --o:   #c05000;

  --gc: 0 0 8px rgba(196,125,10,.28), 0 0 20px rgba(196,125,10,.10);
  --gg: 0 0 8px rgba(27,138,58,.28),  0 0 20px rgba(27,138,58,.10);
  --gr: 0 0 8px rgba(198,40,40,.28),  0 0 20px rgba(198,40,40,.10);
  --gp: 0 0 8px rgba(2,119,189,.24),  0 0 20px rgba(2,119,189,.10);
  --gb: 0 0 8px rgba(21,101,192,.22), 0 0 20px rgba(21,101,192,.08);

  --txt:   #1a2535;
  --txt2:  #3d5a78;
  --txt3:  #7a96b4;
  --hi:    #0d1f30;

  --bdr:  rgba(2,119,189,.14);
  --bdrh: rgba(196,125,10,.46);
  --bdrg: rgba(27,138,58,.36);

  --matrix-op:   0;
  --particle-op: 0.14;
  --hex-op:      0.018;
  --star-op:     0;
  --sweep-op:    0.06;
  --wm-stroke:   rgba(196,125,10,.04);
}

/* ──────────────────────────────────────────────────
   RESET
   ────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:14px; }
body {
  font-family:'Rajdhani',sans-serif;
  background:var(--bg); color:var(--txt);
  overflow-x:hidden; line-height:1.85;
  cursor:crosshair;
  transition:background .55s var(--ease), color .55s var(--ease);
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
::selection { background:rgba(245,166,35,.22); color:var(--c); }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--c); border-radius:2px; }

/* ──────────────────────────────────────────────────
   BACKGROUND SYSTEM
   ────────────────────────────────────────────────── */
#matrix-canvas {
  position:fixed; inset:0; z-index:0;
  opacity:var(--matrix-op);
  pointer-events:none;
  transition:opacity .6s ease;
}

/* Layered ambient orbs */
.bg-scene {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 95%  0%,  rgba(245,166,35,.07)  0%,transparent 52%),
    radial-gradient(ellipse 65% 55% at  0% 100%, rgba(0,229,255,.05) 0%,transparent 52%),
    radial-gradient(ellipse 50% 45% at 50%  55%, rgba(0,255,136,.025)  0%,transparent 62%),
    var(--bg);
  transition:background .55s ease;
}
[data-theme="light"] .bg-scene {
  background:
    radial-gradient(ellipse 80% 60% at 95%  0%,  rgba(196,125,10,.05) 0%,transparent 52%),
    radial-gradient(ellipse 65% 55% at  0% 100%, rgba(0,122,99,.04) 0%,transparent 52%),
    var(--bg);
}

/* Particle canvas */
#particle-canvas {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:var(--particle-op);
  transition:opacity .6s ease;
}

/* Hex grid */
.bg-hex {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:var(--hex-op);
  transition:opacity .6s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='100' viewBox='0 0 58 100'%3E%3Cpath d='M29 2 L56 17.5 L56 47.5 L29 63 L2 47.5 L2 17.5Z' fill='none' stroke='%2300ff88' stroke-width='.6'/%3E%3Cpath d='M29 54 L56 69.5 L56 99.5 L29 115 L2 99.5 L2 69.5Z' fill='none' stroke='%2300e5ff' stroke-width='.6'/%3E%3C/svg%3E");
}

/* Scan line sweep */
.scan-sweep {
  position:fixed; left:0; right:0; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--c) 40%,var(--g) 60%,transparent 100%);
  box-shadow:0 0 8px var(--c),0 0 24px rgba(245,166,35,.28);
  opacity:var(--sweep-op);
  animation:sweep 18s linear infinite;
  transition:opacity .6s ease;
}
@keyframes sweep { 0%{top:-4px} 100%{top:100vh} }

/* Stars */
#stars { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--star-op); transition:opacity .6s ease; }
.star { position:absolute; border-radius:50%; background:var(--c); animation:starwink var(--d,4s) var(--dl,0s) ease-in-out infinite alternate; }
@keyframes starwink { from{opacity:.04;transform:scale(1)} to{opacity:.8;transform:scale(1.6)} }

/* CRT scanlines + flicker overlay */
#crt-scanlines {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,136,.045) 0px,
    rgba(0,255,136,.045) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode:overlay;
  opacity:.55;
  animation:crtFlicker 7s steps(20) infinite;
}
[data-theme="light"] #crt-scanlines { opacity:0; }
@keyframes crtFlicker {
  0%,100%{opacity:.55}
  3%{opacity:.4}
  8%{opacity:.6}
  17%{opacity:.5}
  34%{opacity:.62}
  51%{opacity:.48}
  73%{opacity:.58}
  91%{opacity:.42}
}

/* Cursor glow */
#cursor-glow {
  position:fixed; width:360px; height:360px; border-radius:50%;
  pointer-events:none; z-index:4; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(245,166,35,.055) 0%,transparent 65%);
  mix-blend-mode:screen;
  transition:background .5s ease;
}
[data-theme="light"] #cursor-glow {
  background:radial-gradient(circle,rgba(196,125,10,.05) 0%,transparent 65%);
  mix-blend-mode:multiply;
}

/* Viewport corner marks */
body::before, body::after {
  content:''; position:fixed; width:28px; height:28px;
  z-index:998; pointer-events:none;
  border-color:var(--c); border-style:solid; opacity:.28;
  transition:border-color .5s, opacity .5s;
}
body::before { top:13px; left:13px; border-width:1.5px 0 0 1.5px; }
body::after  { bottom:13px; right:13px; border-width:0 1.5px 1.5px 0; }
[data-theme="light"] body::before,[data-theme="light"] body::after { opacity:.12; }

/* ──────────────────────────────────────────────────
   THEME TOGGLE  (side-mounted pill)
   ────────────────────────────────────────────────── */
#theme-toggle {
  position:fixed; top:50%; right:0; z-index:960;
  transform:translateY(-50%);
  width:46px; height:54px;
  background:var(--panel);
  border:1px solid var(--bdr); border-right:none;
  border-radius:10px 0 0 10px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  cursor:pointer;
  color:var(--c);
  box-shadow:var(--gc);
  transition:all var(--T);
  backdrop-filter:blur(14px);
}
#theme-toggle:hover { width:56px; background:var(--c); color:#000; box-shadow:var(--gc); }
#theme-toggle .tt-icon { font-size:1.1rem; transition:transform .4s var(--spring); }
#theme-toggle:hover .tt-icon { transform:rotate(20deg) scale(1.15); }
#theme-toggle .tt-lbl { font-family:'JetBrains Mono',monospace; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }

/* ──────────────────────────────────────────────────
   LAYOUT
   ────────────────────────────────────────────────── */
.container { max-width:1160px; margin:0 auto; padding:0 32px; }
section { padding:100px 32px; position:relative; z-index:10; }

/* ──────────────────────────────────────────────────
   SECTION HEADER
   ────────────────────────────────────────────────── */
.sh { margin-bottom:60px; }

.sh-pre {
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem; color:var(--g);
  letter-spacing:.25em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.sh-pre::before { content:''; width:36px; height:1px; background:var(--g); box-shadow:var(--gg); }
.sh-pre::after  { content:''; flex:1; max-width:64px; height:1px; background:linear-gradient(90deg,var(--g),transparent); }

.sh-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2.5rem,5.5vw,4rem);
  font-weight:900; color:var(--hi);
  line-height:1.15; letter-spacing:.05em; text-transform:uppercase;
}
.sh-title .c { color:var(--c); text-shadow:var(--gc); }
.sh-title .g { color:var(--g); text-shadow:var(--gg); }

.sh-rule { display:flex; align-items:center; gap:11px; margin-top:13px; }
.sh-rule-line { height:1px; width:160px; max-width:22vw; background:linear-gradient(90deg,var(--c),transparent); }
.sh-rule-dot  { width:5px; height:5px; background:var(--c); transform:rotate(45deg); box-shadow:var(--gc); }
.sh-sub { font-size:1.1rem; color:var(--txt2); max-width:560px; line-height:1.9; margin-top:14px; }

/* ──────────────────────────────────────────────────
   SCROLL REVEAL
   ────────────────────────────────────────────────── */
.rv { opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.rv.in { opacity:1; transform:none; }
.rv:nth-child(1){transition-delay:.04s}.rv:nth-child(2){transition-delay:.09s}
.rv:nth-child(3){transition-delay:.14s}.rv:nth-child(4){transition-delay:.19s}
.rv:nth-child(5){transition-delay:.24s}.rv:nth-child(6){transition-delay:.29s}
.rv:nth-child(7){transition-delay:.34s}.rv:nth-child(8){transition-delay:.39s}
.rv:nth-child(9){transition-delay:.44s}.rv:nth-child(10){transition-delay:.49s}
.rv:nth-child(11){transition-delay:.54s}.rv:nth-child(12){transition-delay:.59s}

/* ──────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 26px; border-radius:3px;
  font-family:'Orbitron',sans-serif; font-size:.68rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; border:none; position:relative; overflow:hidden;
  transition:all var(--T) var(--ease); white-space:nowrap;
  isolation:isolate;
}
/* Shine sweep */
.btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.btn:hover::before { transform:translateX(120%); }
/* Corner notch */
.btn::after {
  content:''; position:absolute; bottom:0; right:0;
  width:7px; height:7px; background:var(--bg);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  transition:background var(--T);
}

.btn-c { color:var(--c); border:1px solid rgba(245,166,35,.44); background:rgba(245,166,35,.05); box-shadow:0 0 14px rgba(245,166,35,.12); }
.btn-c:hover { background:var(--c); color:#000; box-shadow:var(--gc); transform:translateY(-2px); }
.btn-c:hover::after { background:var(--c); }

.btn-g { color:var(--g); border:1px solid rgba(0,255,136,.4);  background:rgba(0,255,136,.05); box-shadow:0 0 14px rgba(0,255,136,.10); }
.btn-g:hover { background:var(--g); color:#000; box-shadow:var(--gg); transform:translateY(-2px); }
.btn-g:hover::after { background:var(--g); }

.btn-r { color:var(--r); border:1px solid rgba(255,60,90,.4);  background:rgba(255,60,90,.05); }
.btn-r:hover { background:var(--r); color:#fff; box-shadow:var(--gr); transform:translateY(-2px); }
.btn-r:hover::after { background:var(--r); }

/* ──────────────────────────────────────────────────
   HEADER / NAV
   ────────────────────────────────────────────────── */
#header {
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(2,6,9,.72);
  border-bottom:1px solid var(--bdr);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  transition:background var(--T),box-shadow var(--T),border-color .5s;
}
[data-theme="light"] #header { background:rgba(242,246,251,.82); }
#header.scrolled { background:rgba(2,6,9,.97); border-bottom-color:rgba(245,166,35,.2); box-shadow:0 4px 44px rgba(0,0,0,.6); }
[data-theme="light"] #header.scrolled { background:rgba(242,246,251,.98); box-shadow:0 4px 24px rgba(196,125,10,.1); }

#progress-bar {
  position:absolute; top:0; left:0; height:2px; width:0; z-index:901;
  background:linear-gradient(90deg,var(--c),var(--g),var(--p));
  box-shadow:var(--gc); transition:width .1s linear;
}

.nav-wrap {
  display:flex; align-items:center; justify-content:space-between;
  height:62px; padding:0 32px; max-width:1300px; margin:0 auto;
}

.logo {
  font-family:'Orbitron',sans-serif; font-size:.9rem; font-weight:900;
  color:var(--c); letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
  text-shadow:var(--gc); cursor:pointer;
  transition:opacity var(--T);
}
.logo:hover { opacity:.75; }
.logo-br { color:var(--g); font-size:1.18em; text-shadow:var(--gg); opacity:.75; }

#nav-links { display:flex; list-style:none; align-items:center; gap:1px; }
#nav-links a {
  color:var(--txt2); font-family:'Rajdhani',sans-serif;
  font-size:.9rem; font-weight:600;
  padding:7px 12px; border-radius:3px;
  transition:all var(--T); letter-spacing:.04em; text-transform:uppercase; position:relative;
}
.nnum { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--c); margin-right:3px; letter-spacing:.1em; }
#nav-links a:hover { color:var(--c); background:rgba(245,166,35,.07); }
#nav-links a.active { color:var(--c); }
#nav-links a.active::after { content:''; position:absolute; bottom:-1px; left:12px; right:12px; height:1.5px; background:var(--c); box-shadow:var(--gc); }
.nav-cta {
  margin-left:10px;
  font-family:'Orbitron',sans-serif!important; font-size:.64rem!important;
  font-weight:700!important; letter-spacing:.12em!important;
  color:var(--c)!important; border:1px solid rgba(245,166,35,.38)!important;
  background:rgba(245,166,35,.06)!important;
}
.nav-cta:hover { background:var(--c)!important; color:#000!important; box-shadow:var(--gc)!important; text-shadow:none!important; }

#menu-icon { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
#menu-icon span { display:block; width:22px; height:1.5px; background:var(--c); border-radius:1px; transition:var(--T); }
#menu-icon.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#menu-icon.open span:nth-child(2){opacity:0}
#menu-icon.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ──────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────── */
#home {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:108px 32px 68px; position:relative; z-index:10; overflow:hidden;
}
#home::before {
  content:'0x'; position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  font-family:'Orbitron',sans-serif; font-size:clamp(13rem,24vw,24rem); font-weight:900;
  color:transparent; -webkit-text-stroke:1px var(--wm-stroke);
  pointer-events:none; z-index:0; line-height:1; user-select:none;
  transition:-webkit-text-stroke-color .55s;
}

.hero-wrap { display:grid; grid-template-columns:1fr auto; gap:88px; align-items:center; max-width:1100px; width:100%; position:relative; z-index:1; }

/* Staggered entrance */
.hero-pill    { animation:fadeUp .7s  .10s var(--ease) both; }
.hero-name    { animation:fadeUp .7s  .20s var(--ease) both; }
.hero-type    { animation:fadeUp .7s  .34s var(--ease) both; }
.hero-desc    { animation:fadeUp .7s  .44s var(--ease) both; }
.hero-stats   { animation:fadeUp .7s  .54s var(--ease) both; }
.cta-row      { animation:fadeUp .7s  .64s var(--ease) both; }
.hero-img-side{ animation:imgIn  .9s  .18s var(--ease) both; }

@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes imgIn  { from{opacity:0;transform:scale(.9) translateY(18px)} to{opacity:1;transform:none} }

/* Status pill */
.hero-pill {
  display:inline-flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono',monospace; font-size:.78rem;
  color:var(--g); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(0,255,136,.28); background:rgba(0,255,136,.05);
  padding:5px 16px; border-radius:2px; margin-bottom:24px;
  box-shadow:0 0 16px rgba(0,255,136,.1);
}
.pill-dot { width:7px; height:7px; border-radius:50%; background:var(--g); box-shadow:var(--gg); animation:blink2 1.8s ease-in-out infinite; }
@keyframes blink2 { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.28;transform:scale(.65)} }

/* Hero name with glitch */
.hero-name {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(3.2rem,7vw,5.2rem);
  font-weight:900; color:var(--hi);
  line-height:1.1; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:6px; display:inline-block; position:relative;
}
.hero-name::before, .hero-name::after {
  content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;
}
.hero-name::before { color:var(--c); clip-path:polygon(0 0,100% 0,100% 33%,0 33%); animation:gl1 6s infinite; text-shadow:var(--gc); }
.hero-name::after  { color:var(--p); clip-path:polygon(0 66%,100% 66%,100% 100%,0 100%); animation:gl2 6s infinite; }
@keyframes gl1 { 0%,88%,100%{opacity:0;transform:none}89%{opacity:.8;transform:translate(-4px,1px) skewX(-3deg)}91%{opacity:.8;transform:translate(4px,-1px) skewX(2deg)}93%{opacity:0;transform:none} }
@keyframes gl2 { 0%,83%,100%{opacity:0;transform:none}84%{opacity:.7;transform:translate(4px,-2px)}86%{opacity:.7;transform:translate(-3px,1px)}88%{opacity:0;transform:none} }

/* Typing line */
.hero-type {
  font-family:'JetBrains Mono',monospace; font-size:1.04rem;
  margin:18px 0 20px; min-height:1.8em; padding:9px 16px;
  border-left:2px solid var(--c); background:rgba(245,166,35,.04);
  display:inline-block;
  transition:background .5s,border-color .5s;
}
[data-theme="light"] .hero-type { background:rgba(196,125,10,.04); }
.tp-pre { color:var(--txt3); }
.tp-txt { color:var(--g); text-shadow:var(--gg); }
.tp-cur { color:var(--c); text-shadow:var(--gc); animation:cur .7s step-end infinite; }
@keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-desc { font-size:1.25rem; color:var(--txt2); line-height:1.95; max-width:490px; margin-bottom:30px; }
.hero-desc strong { color:var(--c); font-weight:700; }

/* Stats */
.hero-stats {
  display:flex; gap:0; margin-bottom:32px; max-width:428px;
  border:1px solid var(--bdr); background:var(--panel);
  position:relative; overflow:hidden;
  transition:background .5s,border-color .5s;
}
.hero-stats::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg,var(--c),var(--g),var(--p)); box-shadow:var(--gc); }
.st-item { flex:1; padding:16px 14px; text-align:center; display:flex; flex-direction:column; gap:5px; border-right:1px solid var(--bdr); transition:background var(--T); cursor:default; }
.st-item:last-child { border-right:none; }
.st-item:hover { background:rgba(245,166,35,.06); }
.st-num  { font-family:'Orbitron',sans-serif; font-size:1.85rem; font-weight:900; color:var(--c); line-height:1; text-shadow:var(--gc); }
.st-plus { color:var(--g); font-family:'Orbitron',sans-serif; font-weight:900; }
.st-lbl  { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--txt3); letter-spacing:.1em; text-transform:uppercase; }

.cta-row { display:flex; gap:13px; flex-wrap:wrap; }

/* Profile ring */
.hero-img-side { position:relative; display:flex; align-items:center; justify-content:center; width:305px; height:305px; flex-shrink:0; }
.ring-outer { width:291px; height:291px; border-radius:50%; background:conic-gradient(from 0deg,var(--c) 0%,var(--p) 26%,var(--g) 53%,var(--r) 79%,var(--c) 100%); padding:3px; animation:spin 10s linear infinite; box-shadow:var(--gc),0 0 70px rgba(245,166,35,.06); }
/* @keyframes spin { to{transform:rotate(360deg)} } */
.ring-inner { width:100%; height:100%; border-radius:50%; background:var(--bg); padding:10px; display:flex; align-items:center; justify-content:center; transition:background .5s; }
.prof-box { width:250px; height:250px; border-radius:50%; overflow:hidden; position:relative; border:1px solid rgba(245,166,35,.22); box-shadow:0 0 50px rgba(245,166,35,.15),0 0 90px rgba(245,166,35,.05); }
.prof-box img { width:100%; height:100%; object-fit:cover; }
.prof-scan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--c),transparent); box-shadow:var(--gc); animation:scanimg 3s linear infinite; }
@keyframes scanimg { 0%{top:0;opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0} }

/* Floating badges */
.fi { position:absolute; width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; background:var(--panel); border:1px solid; animation:floatfi 3s ease-in-out infinite; transition:transform .3s var(--spring); cursor:default; backdrop-filter:blur(8px); }
.fi:hover { transform:scale(1.3) !important; z-index:10; }
.fi-1 { top:4px;left:4px;     color:var(--c); border-color:rgba(245,166,35,.44); box-shadow:var(--gc); }
.fi-2 { top:4px;right:4px;    color:var(--g); border-color:rgba(0,255,136,.44); box-shadow:var(--gg); animation-delay:.75s; }
.fi-3 { bottom:4px;left:4px;  color:var(--p); border-color:rgba(0,229,255,.44); box-shadow:var(--gp); animation-delay:1.5s; }
.fi-4 { bottom:4px;right:4px; color:var(--r); border-color:rgba(255,60,90,.44);   box-shadow:var(--gr); animation-delay:2.25s; }
@keyframes floatfi { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }

/* White Hat Hacker tag under profile */
.hat-tag {
  position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 18px;
  font-family:'Orbitron',sans-serif; font-size:.72rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  color:#0a0a0a;
  background:linear-gradient(135deg,var(--c) 0%, #ffd55a 50%, var(--c) 100%);
  border:1px solid rgba(245,166,35,.7);
  border-radius:3px;
  box-shadow:var(--gc), 0 6px 22px rgba(0,0,0,.55);
  white-space:nowrap;
  z-index:6;
  animation:hatpulse 2.6s ease-in-out infinite;
}
.hat-tag i { color:#0a0a0a; font-size:.95rem; }
.hat-tag::before,.hat-tag::after{
  content:''; position:absolute; top:50%; width:14px; height:1px;
  background:linear-gradient(90deg,transparent,var(--c));
  box-shadow:var(--gc);
}
.hat-tag::before{ left:-18px; transform:translateY(-50%); }
.hat-tag::after { right:-18px; transform:translateY(-50%) scaleX(-1); }
@keyframes hatpulse { 0%,100%{box-shadow:var(--gc),0 6px 22px rgba(0,0,0,.55)} 50%{box-shadow:0 0 14px rgba(245,166,35,1),0 0 32px rgba(245,166,35,.6),0 6px 22px rgba(0,0,0,.55)} }
[data-theme="light"] .hat-tag { box-shadow:0 4px 14px rgba(196,125,10,.35); }

.scroll-hint { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--txt3); font-family:'JetBrains Mono',monospace; font-size:.59rem; letter-spacing:.2em; text-transform:uppercase; animation:bob 2.5s ease-in-out infinite; z-index:2; }
.scroll-line { width:1px; height:32px; background:linear-gradient(180deg,var(--c),transparent); }
@keyframes bob { 0%,100%{opacity:.45;transform:translateX(-50%) translateY(0)} 50%{opacity:1;transform:translateX(-50%) translateY(9px)} }

/* ──────────────────────────────────────────────────
   SKILLS
   ────────────────────────────────────────────────── */
#skills { background:linear-gradient(180deg,var(--bg),var(--bg1)); border-top:1px solid var(--bdr); }

.sk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(192px,1fr)); gap:14px; perspective:1200px; }

.sk-card {
  background:var(--panel); border:1px solid var(--bdr);
  border-radius:4px; padding:26px 20px; text-align:center;
  position:relative; overflow:hidden; cursor:default;
  transition:transform var(--T) var(--ease),border-color var(--T),box-shadow var(--T);
  backdrop-filter:blur(10px); transform-style:preserve-3d;
}
.sk-glow-bar { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--c),transparent); box-shadow:var(--gc); transform:scaleX(0); transform-origin:center; transition:transform .38s ease; }
.sk-card::before { content:''; position:absolute; top:5px; left:5px; width:11px; height:11px; border-top:1.5px solid var(--c); border-left:1.5px solid var(--c); opacity:0; transition:opacity .3s,top .3s,left .3s; }
.sk-card::after  { content:''; position:absolute; bottom:5px; right:5px; width:11px; height:11px; border-bottom:1.5px solid var(--c); border-right:1.5px solid var(--c); opacity:0; transition:opacity .3s,bottom .3s,right .3s; background:transparent; clip-path:none; }
.sk-card:hover::before { opacity:1; top:7px; left:7px; }
.sk-card:hover::after  { opacity:1; bottom:7px; right:7px; }
.sk-card:hover .sk-glow-bar { transform:scaleX(1); }
.sk-card:hover { border-color:var(--bdrh); box-shadow:0 0 10px rgba(245,166,35,.3), 0 0 25px rgba(245,166,35,.15), 0 20px 40px rgba(0,0,0,.4), 0 0 50px rgba(0,229,255,.1); transform:translateY(-11px) translateZ(20px) rotateX(4deg); }

.sk-ic { font-size:2.3rem; color:var(--c); margin-bottom:13px; display:block; text-shadow:var(--gc); transition:all .38s var(--spring); position:relative; z-index:1; }
.sk-card:hover .sk-ic { transform:scale(1.2) rotate(8deg); color:var(--g); text-shadow:var(--gg); }
.sk-name { font-family:'Rajdhani',sans-serif; font-size:1.05rem; font-weight:700; color:var(--hi); margin-bottom:13px; text-transform:uppercase; letter-spacing:.06em; position:relative; z-index:1; }
.sk-bar  { background:rgba(245,166,35,.07); height:4px; border-radius:2px; overflow:hidden; margin-bottom:5px; border:1px solid rgba(245,166,35,.09); }
.sk-fill { height:100%; width:0; border-radius:2px; background:linear-gradient(90deg,var(--c),var(--g)); box-shadow:0 0 10px rgba(245,166,35,.6); transition:width 1.8s cubic-bezier(.4,0,.2,1); }
.sk-pct  { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--g); }

/* ──────────────────────────────────────────────────
   TOOLS
   ────────────────────────────────────────────────── */
#tools { background:var(--bg1); border-top:1px solid var(--bdr); }

.tl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:15px; perspective:1200px; }

.tl-card {
  background:var(--panel); border:1px solid var(--bdr);
  border-radius:4px; padding:26px; transition:all var(--T) var(--ease);
  position:relative; overflow:hidden; backdrop-filter:blur(10px); transform-style:preserve-3d;
}
.tl-side-bar { position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--c),var(--g),transparent); box-shadow:0 0 15px rgba(245,166,35,.5), 0 0 30px rgba(0,255,136,.25); transform:scaleY(0); transform-origin:top; transition:transform .4s ease; }
.tl-card:hover .tl-side-bar { transform:scaleY(1); }
.tl-card:hover { border-color:var(--bdrh); box-shadow:0 0 15px rgba(245,166,35,.25), 0 0 35px rgba(245,166,35,.1), 0 25px 50px rgba(0,0,0,.4); transform:translateY(-7px) rotateX(3deg); }

.tl-head { display:flex; align-items:center; gap:12px; margin-bottom:15px; padding-bottom:13px; border-bottom:1px solid var(--bdr); }
.tl-ic { width:36px; height:36px; border-radius:4px; background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.18); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--c); flex-shrink:0; transition:all var(--T); }
.tl-card:hover .tl-ic { background:rgba(245,166,35,.15); box-shadow:var(--gc); }
.tl-head h3 { font-family:'Rajdhani',sans-serif; font-size:1.02rem; font-weight:700; color:var(--hi); text-transform:uppercase; letter-spacing:.07em; }
.tl-card ul { list-style:none; }
.tl-card li { font-size:1rem; color:var(--txt2); padding:7px 0; position:relative; line-height:1.55; border-bottom:1px solid rgba(255,255,255,.04); transition:color var(--T),padding-left var(--T),background var(--T); display:flex; align-items:flex-start; gap:11px; border-radius:3px; }
.tl-card li:hover { color:var(--txt); padding-left:6px; background:rgba(245,166,35,.04); }
.tl-card li:last-child { border-bottom:none; }
.tl-li-ic { flex-shrink:0; width:22px; text-align:center; font-size:1.05rem; margin-top:3px; filter:drop-shadow(0 0 4px currentColor); transition:transform .25s ease; }
.tl-card li:hover .tl-li-ic { transform:scale(1.2) rotate(-6deg); }
.tl-nm { color:var(--c); font-weight:700; }

/* ──────────────────────────────────────────────────
   CERTIFICATIONS
   ────────────────────────────────────────────────── */
#certifications { background:linear-gradient(180deg,var(--bg1),var(--bg2)); border-top:1px solid var(--bdr); }

.ce-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(332px,1fr)); gap:15px; perspective:1200px; }

.ce-card {
  background:var(--panel); border:1px solid var(--bdr);
  border-radius:4px; padding:26px; display:flex; gap:18px; align-items:flex-start;
  position:relative; overflow:hidden; transition:all var(--T) var(--ease); backdrop-filter:blur(10px); transform-style:preserve-3d;
}
.ce-top-bar { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--c),var(--g)); box-shadow:0 0 12px rgba(245,166,35,.6), 0 0 24px rgba(0,255,136,.3); transform:scaleX(0); transform-origin:left; transition:transform .44s ease; }
.ce-card:hover .ce-top-bar { transform:scaleX(1); }
.ce-card:hover { border-color:var(--bdrh); box-shadow:0 0 15px rgba(245,166,35,.2), 0 0 35px rgba(245,166,35,.08), 0 25px 50px rgba(0,0,0,.45); transform:translateY(-8px) rotateX(3deg); }
.ce-card:hover .ce-ic { transform:rotate(8deg) scale(1.15); }

.ce-ic { width:50px; height:50px; min-width:50px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:var(--c); background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.18); box-shadow:0 0 14px rgba(245,166,35,.14); transition:all var(--T); }
.ce-ic.prog { color:var(--y); background:rgba(255,196,0,.08); border-color:rgba(255,196,0,.22); box-shadow:0 0 14px rgba(255,196,0,.16); }
.ce-issuer { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--c); letter-spacing:.15em; text-transform:uppercase; margin-bottom:4px; display:block; }
.ce-name   { font-family:'Rajdhani',sans-serif; font-size:1.1rem; font-weight:700; color:var(--hi); margin-bottom:7px; text-transform:uppercase; letter-spacing:.04em; }
.ce-desc   { font-size:1rem; color:var(--txt2); line-height:1.65; margin-bottom:12px; }
.ce-foot   { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ce-yr     { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--txt3); display:flex; align-items:center; gap:4px; }
.badge     { font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:700; padding:2px 9px; border-radius:2px; display:inline-flex; align-items:center; gap:4px; letter-spacing:.05em; }
.badge-ok  { background:rgba(0,255,136,.09); color:var(--g); border:1px solid rgba(0,255,136,.26); }
.badge-wip { background:rgba(255,196,0,.09); color:var(--y); border:1px solid rgba(255,196,0,.26); }


/* ──────────────────────────────────────────────────
   TIMELINE — FUTURISTIC HOLOGRAPHIC
   ────────────────────────────────────────────────── */
#timeline { background:linear-gradient(180deg,var(--bg2),var(--bg1)); border-top:1px solid var(--bdr); }

.timeline-wrap { position:relative; max-width:980px; margin:0 auto; perspective:1200px; }

.timeline-line {
  position:absolute; left:50%; top:0; width:3px; height:0;
  background:linear-gradient(180deg,#f5a623,#00ff88 50%,#00e5ff);
  box-shadow:0 0 14px rgba(245,166,35,.55), 0 0 28px rgba(0,255,136,.35), 0 0 44px rgba(0,229,255,.18);
  transform:translateX(-50%);
  border-radius:2px;
}
.timeline-wrap.tl-spine-active .timeline-line { animation:tlSpine 1.8s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes tlSpine { from { height:0 } to { height:100% } }

.timeline-items { position:relative; padding:30px 0; }

.timeline-item {
  position:relative; margin-bottom:74px;
  opacity:0; transform:translateX(-60px) scale(.94);
  transition:opacity .7s cubic-bezier(.34,1.56,.64,1), transform .7s cubic-bezier(.34,1.56,.64,1);
}
.timeline-item:nth-child(even) { transform:translateX(60px) scale(.94); }
.timeline-item.tl-revealed { opacity:1; transform:none; }

.timeline-item:nth-child(odd)  { padding-right:calc(50% + 60px); text-align:right; }
.timeline-item:nth-child(even) { padding-left:calc(50% + 60px); text-align:left; }

/* Node */
.timeline-node {
  position:absolute; left:50%; top:30px; transform:translateX(-50%);
  width:40px; height:40px; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.timeline-node::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--c);
  animation:tlPing 2.2s ease-out infinite;
}
@keyframes tlPing {
  0% { transform:scale(.7); opacity:1; }
  100% { transform:scale(1.7); opacity:0; }
}
.timeline-node::after {
  content:''; width:14px; height:14px; background:var(--c);
  transform:rotate(45deg);
  box-shadow:0 0 12px rgba(245,166,35,.9), 0 0 24px rgba(245,166,35,.45), 0 0 40px rgba(0,255,136,.25);
}
.tl-num {
  position:absolute; left:50%; top:-22px; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:700;
  color:var(--c); letter-spacing:.12em;
  text-shadow:0 0 8px rgba(245,166,35,.6);
}

/* Connector line */
.timeline-item::before {
  content:''; position:absolute; top:50px; height:1px;
  border-top:1px dashed rgba(245,166,35,.4);
  width:calc(50% - 60px); z-index:1;
}
.timeline-item:nth-child(odd)::before  { right:calc(50% + 20px); }
.timeline-item:nth-child(even)::before { left:calc(50% + 20px); }
.timeline-item::after {
  content:''; position:absolute; top:46px; width:6px; height:6px; border-radius:50%;
  background:var(--c); box-shadow:0 0 10px rgba(245,166,35,.8);
  opacity:0;
}
.timeline-item.tl-revealed::after { animation:tlDot 1.2s ease-out .3s forwards; }
.timeline-item:nth-child(odd).tl-revealed::after  { animation-name:tlDotL; }
.timeline-item:nth-child(even).tl-revealed::after { animation-name:tlDotR; }
@keyframes tlDotL { from{opacity:1; right:calc(50% + 20px);} to{opacity:0; right:calc(100% - 20px);} }
@keyframes tlDotR { from{opacity:1; left:calc(50% + 20px);} to{opacity:0; left:calc(100% - 20px);} }

/* Card */
.timeline-card {
  position:relative; display:inline-block; text-align:left;
  background:var(--panel); border:1px solid var(--bdr); border-radius:6px;
  padding:26px 28px 24px; max-width:100%;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transform-style:preserve-3d; perspective:1000px;
  transition:transform .5s var(--spring), border-color .35s, box-shadow .35s;
  overflow:visible; cursor:default;
}
.timeline-card > .timeline-inner-clip { position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.timeline-item:nth-child(odd) .timeline-card:hover {
  transform:translateY(-14px) rotateX(6deg) rotateY(4deg);
}
.timeline-item:nth-child(even) .timeline-card:hover {
  transform:translateY(-14px) rotateX(6deg) rotateY(-4deg);
}
.timeline-card:hover {
  border-color:rgba(245,166,35,.55);
  box-shadow:0 0 22px rgba(245,166,35,.28), 0 0 50px rgba(0,255,136,.18), 0 30px 60px rgba(0,0,0,.55);
}
/* Top accent bar w/ shimmer on hover */
.timeline-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--c),var(--g));
  background-size:200% 100%;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s ease;
}
.timeline-card:hover::before { transform:scaleX(1); animation:tlShimmer 1.6s linear infinite; }
@keyframes tlShimmer { from{background-position:0% 0} to{background-position:200% 0} }

/* Scan line */
.timeline-card::after {
  content:''; position:absolute; left:0; right:0; top:-2px; height:1px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);
  box-shadow:0 0 8px rgba(245,166,35,.7);
  opacity:0; pointer-events:none;
}
.timeline-card:hover::after { opacity:1; animation:tlScan 1.6s linear infinite; }
@keyframes tlScan { from{top:-2px} to{top:100%} }

/* Corner brackets */
.tl-corner { position:absolute; width:14px; height:14px; border-color:var(--c); border-style:solid; transition:all .4s ease; opacity:.55; }
.tl-corner.tl{top:6px;left:6px;border-width:1.5px 0 0 1.5px}
.tl-corner.tr{top:6px;right:6px;border-width:1.5px 1.5px 0 0}
.tl-corner.bl{bottom:6px;left:6px;border-width:0 0 1.5px 1.5px}
.tl-corner.br{bottom:6px;right:6px;border-width:0 1.5px 1.5px 0}
.timeline-card:hover .tl-corner { opacity:1; width:20px; height:20px; box-shadow:0 0 8px rgba(245,166,35,.6); }
.timeline-card:hover .tl-corner.tl{top:2px;left:2px}
.timeline-card:hover .tl-corner.tr{top:2px;right:2px}
.timeline-card:hover .tl-corner.bl{bottom:2px;left:2px}
.timeline-card:hover .tl-corner.br{bottom:2px;right:2px}

/* Floating year pill */
.timeline-date {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  display:inline-block; padding:4px 14px;
  font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:700;
  color:var(--c); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  background:var(--bg2); border:1px solid rgba(245,166,35,.55);
  border-radius:999px;
  box-shadow:0 0 12px rgba(245,166,35,.35);
}
.timeline-title { font-family:'Rajdhani',sans-serif; font-size:1.25rem; font-weight:700; color:var(--hi); margin:14px 0 10px; letter-spacing:.03em; }
.timeline-desc  { font-size:1rem; color:var(--txt2); line-height:1.8; }

/* Responsive: collapse to left rail on mobile */
@media(max-width:768px){
  .timeline-line { left:20px; }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-left:60px; padding-right:0; text-align:left;
    transform:translateX(-30px) scale(.96);
  }
  .timeline-node { left:20px; }
  .timeline-item::before,
  .timeline-item::after { display:none; }
  .timeline-date { left:0; transform:none; }
}

/* ──────────────────────────────────────────────────
   PROJECTS
   ────────────────────────────────────────────────── */
#projects { background:linear-gradient(180deg,var(--bg2),var(--bg1)); border-top:1px solid var(--bdr); }

.pr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:17px; perspective:1200px; }

.pr-card { background:var(--panel); border:1px solid var(--bdr); border-radius:4px; overflow:hidden; transition:all var(--T) var(--ease); backdrop-filter:blur(10px); position:relative; transform-style:preserve-3d; }
.pr-card:hover { border-color:var(--bdrh); box-shadow:0 0 15px rgba(245,166,35,.25), 0 0 40px rgba(245,166,35,.12), 0 30px 60px rgba(0,0,0,.5); transform:translateY(-12px) rotateX(4deg); }
.pr-img { position:relative; height:192px; overflow:hidden; }
.pr-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; filter:brightness(.7) saturate(.75); }
.pr-card:hover .pr-img img { transform:scale(1.08); filter:brightness(.55) saturate(1.1); }
.pr-img::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(245,166,35,.022) 3px,rgba(245,166,35,.022) 4px); opacity:0; transition:opacity var(--T); }
.pr-card:hover .pr-img::before { opacity:1; }
.pr-overlay { position:absolute; inset:0; z-index:3; background:linear-gradient(135deg,rgba(245,166,35,.85),rgba(0,255,136,.72)); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .26s; }
.pr-card:hover .pr-overlay { opacity:1; }
.pr-view { padding:9px 22px; background:rgba(0,0,0,.82); color:#fff; border-radius:3px; font-family:'Orbitron',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.2); transition:background var(--T); }
.pr-view:hover { background:#000; }
.pr-bdg { position:absolute; top:10px; right:10px; z-index:4; background:rgba(245,166,35,.9); color:#000; font-family:'Orbitron',sans-serif; font-size:.58rem; font-weight:700; padding:2px 10px; border-radius:2px; letter-spacing:.1em; text-transform:uppercase; box-shadow:var(--gc); }
.pr-info { padding:17px 22px; }
.pr-info h3 { font-family:'Rajdhani',sans-serif; font-size:1.04rem; font-weight:700; color:var(--hi); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.pr-info p  { font-size:1rem; color:var(--txt2); line-height:1.6; }

/* ──────────────────────────────────────────────────
   BLOG
   ────────────────────────────────────────────────── */
#blog { background:var(--bg1); border-top:1px solid var(--bdr); }
.blog-inner { max-width:800px; margin:0 auto; }
.blog-card { background:var(--panel); border:1px solid var(--bdr); border-radius:4px; padding:36px 40px; display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; transition:all var(--T); position:relative; overflow:hidden; backdrop-filter:blur(10px); transform-style:preserve-3d; perspective:1200px; }
.blog-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--c),var(--g),var(--p)); box-shadow:0 0 12px rgba(245,166,35,.6), 0 0 24px rgba(0,229,255,.3); }
.blog-card:hover { border-color:var(--bdrh); box-shadow:0 0 18px rgba(245,166,35,.2), 0 0 40px rgba(245,166,35,.08), 0 25px 50px rgba(0,0,0,.45); transform:translateY(-6px) rotateX(2deg); }

/* Bug Hunt Link Card - Medium Style */
.bug-hunt-link { text-decoration:none; color:inherit; display:block; }
.blog-card .blog-icon { font-size:2.5rem; color:var(--c); flex-shrink:0; }
.blog-content { flex:1; }
.blog-title { font-size:1.4rem; font-weight:700; color:var(--hi); margin-bottom:10px; }
.blog-excerpt { font-size:.95rem; color:var(--txt2); line-height:1.8; margin-bottom:14px; }
.blog-meta { display:flex; gap:16px; font-size:.8rem; color:var(--txt3); }
.blog-category { background:rgba(245,166,35,.1); border:1px solid var(--bdr); padding:4px 10px; border-radius:3px; }
.blog-arrow { font-size:1.2rem; color:var(--c); opacity:0.6; transition:all var(--T); align-self:center; }
.blog-card:hover .blog-arrow { opacity:1; transform:translateX(4px); }
.blog-ic { font-size:3.8rem; color:var(--txt3); transition:all var(--T); line-height:1; }
.blog-card:hover .blog-ic { color:var(--c); text-shadow:var(--gc); transform:scale(1.08); }
.blog-card h3 { font-family:'Orbitron',sans-serif; font-size:1.06rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:9px; color:var(--hi); }
.blog-card p  { font-size:.92rem; color:var(--txt2); line-height:1.78; margin-bottom:14px; }
.topic-wrap { display:flex; gap:7px; flex-wrap:wrap; }
.topic { font-family:'JetBrains Mono',monospace; font-size:.78rem; padding:3px 10px; border-radius:2px; background:rgba(0,255,136,.07); border:1px solid rgba(0,255,136,.21); color:var(--g); transition:all var(--T); cursor:default; }
.topic:hover { background:rgba(0,255,136,.16); }

/* ──────────────────────────────────────────────────
   ABOUT
   ───────────────────��────────────────────────────── */
#about { background:linear-gradient(180deg,var(--bg1),var(--bg2)); border-top:1px solid var(--bdr); }
.ab-grid { display:grid; grid-template-columns:264px 1fr; gap:66px; align-items:start; }
.ab-img-wrap { position:relative; }
.ab-img-frame { position:relative; border-radius:4px; border:1px solid rgba(245,166,35,.18); overflow:hidden; box-shadow:0 0 36px rgba(245,166,35,.08); transition:box-shadow var(--T); }
.ab-img-frame:hover { box-shadow:0 0 56px rgba(245,166,35,.18); }
.ab-img-frame img { width:100%; display:block; filter:brightness(.88) saturate(.88); transition:filter var(--T); }
.ab-img-frame:hover img { filter:brightness(1.02) saturate(1.06); }
.ab-corner { position:absolute; width:16px; height:16px; border-color:var(--c); border-style:solid; transition:all .36s ease; }
.ab-corner.tl{top:-4px;left:-4px;border-width:2px 0 0 2px}
.ab-corner.tr{top:-4px;right:-4px;border-width:2px 2px 0 0}
.ab-corner.bl{bottom:-4px;left:-4px;border-width:0 0 2px 2px}
.ab-corner.br{bottom:-4px;right:-4px;border-width:0 2px 2px 0}
.ab-img-frame:hover .ab-corner{width:22px;height:22px}
.ab-img-frame:hover .ab-corner.tl{top:-7px;left:-7px}
.ab-img-frame:hover .ab-corner.tr{top:-7px;right:-7px}
.ab-img-frame:hover .ab-corner.bl{bottom:-7px;left:-7px}
.ab-img-frame:hover .ab-corner.br{bottom:-7px;right:-7px}
.ab-text p { font-size:1.05rem; color:var(--txt2); line-height:1.9; margin-bottom:14px; }
.ab-text strong { color:var(--c); font-weight:700; }
.ab-links { display:flex; gap:11px; flex-wrap:wrap; margin-top:26px; }
.ab-link { display:inline-flex; align-items:center; gap:7px; font-family:'Orbitron',sans-serif; font-size:.67rem; font-weight:700; color:var(--c); padding:9px 20px; letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(245,166,35,.28); border-radius:3px; transition:all var(--T); }
.ab-link:hover { background:var(--c); color:#000; box-shadow:var(--gc); transform:translateY(-2px); }

/* ──────────────────────────────────────────────────
   HIRE ME
   ────────────────────────────────────────────────── */
#hire-me { background:var(--bg2); border-top:1px solid var(--bdr); }
.hire-form { max-width:610px; margin:0 auto; background:var(--panel); border:1px solid var(--bdr); border-radius:4px; padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:17px; position:relative; overflow:hidden; backdrop-filter:blur(12px); }
.hire-form::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--c),var(--g),var(--p)); box-shadow:var(--gc); }
.fg { display:flex; flex-direction:column; gap:6px; }
.fg.full { grid-column:1/-1; }
.fg label { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--c); text-transform:uppercase; letter-spacing:.15em; }
.fg input,.fg textarea { width:100%; padding:11px 15px; background:rgba(245,166,35,.03); border:1px solid var(--bdr); border-radius:3px; color:var(--hi); font-family:'Rajdhani',sans-serif; font-size:.98rem; transition:all var(--T); }
.fg input::placeholder,.fg textarea::placeholder { color:var(--txt3); }
.fg input:focus,.fg textarea:focus { outline:none; border-color:var(--c); background:rgba(245,166,35,.06); box-shadow:0 0 0 3px rgba(245,166,35,.07); }
[data-theme="light"] .fg input,[data-theme="light"] .fg textarea { background:rgba(255,255,255,.8); color:var(--hi); }
.hire-form .h-captcha { grid-column:1/-1; display:flex; justify-content:center; }
.hire-form .sub-wrap  { grid-column:1/-1; display:flex; justify-content:center; }

/* ──────────────────────────────────────────────────
   CV
   ────────────────────────────────────────────────── */
#cv { background:var(--bg1); border-top:1px solid var(--bdr); padding:70px 32px; }
.cv-box { display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--panel); border:1px solid var(--bdr); border-radius:4px; padding:44px 52px; max-width:880px; margin:0 auto; position:relative; overflow:hidden; backdrop-filter:blur(12px); transition:all var(--T); }
.cv-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--c),var(--g)); box-shadow:var(--gc); }
.cv-box:hover { border-color:var(--bdrh); box-shadow:0 0 36px rgba(245,166,35,.09),0 20px 40px rgba(0,0,0,.35); transform:translateY(-3px); }
.cv-btn { min-width:180px; justify-content:center; }

/* ──────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────── */
footer { background:rgba(1,4,8,.99); border-top:1px solid var(--bdr); padding:32px; transition:background .5s; }
[data-theme="light"] footer { background:rgba(210,222,238,.99); }
.foot-inner { max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.foot-brand { font-family:'Orbitron',sans-serif; font-size:.86rem; font-weight:900; color:var(--c); letter-spacing:.12em; text-shadow:var(--gc); display:flex; align-items:center; gap:8px; text-transform:uppercase; }
.foot-copy  { font-size:.77rem; color:var(--txt3); font-family:'JetBrains Mono',monospace; letter-spacing:.05em; }
.soc-links { display:flex; gap:9px; }
.soc-links a { width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--txt3); border:1px solid var(--bdr); border-radius:3px; transition:all var(--T); }
.soc-links a:hover { color:var(--c); border-color:var(--c); background:rgba(245,166,35,.08); box-shadow:var(--gc); transform:translateY(-3px); }

/* ──────────────────────────────────────────────────
   CHATBOT
   ────────────────────────────────────────────────── */
#chatbot-toggle { position:fixed; bottom:26px; right:26px; width:52px; height:52px; border-radius:8px; background:rgba(245,166,35,.08); color:var(--c); border:1px solid rgba(245,166,35,.4); font-size:1.1rem; cursor:pointer; z-index:990; display:flex; align-items:center; justify-content:center; box-shadow:var(--gc); transition:all var(--T); animation:ctpulse 3.5s ease-in-out infinite; }
@keyframes ctpulse { 0%,100%{box-shadow:var(--gc)} 50%{box-shadow:0 0 28px rgba(245,166,35,.9),0 0 56px rgba(245,166,35,.28)} }
#chatbot-toggle:hover { background:var(--c); color:#000; transform:scale(1.08) rotate(-8deg); animation:none; }

#chatbot-container { position:fixed; bottom:90px; right:26px; width:350px; height:460px; background:rgba(1,8,16,.97); border:1px solid rgba(245,166,35,.22); border-radius:8px; display:none; flex-direction:column; z-index:990; overflow:hidden; box-shadow:0 0 60px rgba(245,166,35,.13),0 28px 60px rgba(0,0,0,.6); backdrop-filter:blur(22px); }
[data-theme="light"] #chatbot-container { background:rgba(3,12,24,.97); }
#chatbot-container::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--c),var(--g),var(--p)); box-shadow:var(--gc); }
#chatbot-container.active { display:flex; animation:cbshow .26s var(--ease); }
@keyframes cbshow { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }
.cb-head { background:rgba(245,166,35,.06); padding:12px 16px; border-bottom:1px solid rgba(245,166,35,.11); display:flex; justify-content:space-between; align-items:center; }
.cb-head-l { display:flex; align-items:center; gap:10px; }
.cb-head-l span { font-family:'Orbitron',sans-serif; font-size:.69rem; font-weight:700; color:var(--c); letter-spacing:.12em; text-transform:uppercase; }
.cb-dot { width:7px; height:7px; border-radius:50%; background:var(--g); box-shadow:var(--gg); animation:blink2 2s ease-in-out infinite; }
.cb-x { background:none; border:none; color:var(--txt3); font-size:.9rem; cursor:pointer; padding:3px 7px; border-radius:3px; transition:all var(--T); }
.cb-x:hover { color:var(--r); background:rgba(255,60,90,.1); }
.cb-msgs { flex:1; overflow-y:auto; padding:13px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; scrollbar-color:rgba(245,166,35,.18) transparent; }
.cb-msg { display:flex; animation:msgpop .22s var(--ease); }
@keyframes msgpop { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }
.cb-bot { justify-content:flex-start; }
.cb-bot p { background:rgba(245,166,35,.07); border:1px solid rgba(245,166,35,.14); border-left:2px solid var(--c); padding:9px 13px; border-radius:0 7px 7px 7px; max-width:84%; font-size:.86rem; color:#bdd8f0; line-height:1.65; font-family:'Rajdhani',sans-serif; }
.cb-user { justify-content:flex-end; }
.cb-user p { background:linear-gradient(120deg,var(--c),var(--g)); color:#000; padding:9px 13px; border-radius:7px 0 7px 7px; max-width:84%; font-size:.86rem; font-weight:700; line-height:1.65; font-family:'Rajdhani',sans-serif; }
.cb-inp { display:flex; gap:8px; padding:12px; border-top:1px solid rgba(245,166,35,.08); background:rgba(0,0,0,.2); }
.cb-inp input { flex:1; padding:9px 12px; background:rgba(245,166,35,.04); border:1px solid rgba(245,166,35,.14); border-radius:3px; color:#e8f4ff; font-family:'Rajdhani',sans-serif; font-size:.92rem; }
.cb-inp input::placeholder { color:var(--txt3); }
.cb-inp input:focus { outline:none; border-color:var(--c); box-shadow:0 0 0 2px rgba(245,166,35,.1); }
.cb-inp button { padding:9px 12px; background:linear-gradient(120deg,var(--c),var(--g)); color:#000; border:none; border-radius:3px; cursor:pointer; font-weight:700; font-size:.86rem; transition:all var(--T); }
.cb-inp button:hover { box-shadow:var(--gg); transform:scale(1.06); }

/* ──────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────── */
@media(max-width:1024px){
  .hero-wrap{grid-template-columns:1fr;gap:50px;text-align:center}
  .hero-desc,.hero-pill{margin-left:auto;margin-right:auto}
  .hero-stats{margin:0 auto 30px;max-width:388px}
  .cta-row{justify-content:center}
  .hero-img-side{margin:0 auto}
  .ab-grid{grid-template-columns:1fr}
  .ab-img-frame{max-width:238px;margin:0 auto}
  .cv-box{flex-direction:column;text-align:center}
  .blog-card{grid-template-columns:1fr;text-align:center}
  .blog-card .btn-c{margin:0 auto}
  .scroll-hint{display:none}
  #home::before{display:none}
}
@media(max-width:768px){
  section{padding:72px 18px}
  #nav-links{display:none;position:absolute;top:64px;right:14px;flex-direction:column;gap:2px;background:rgba(2,6,9,.98);padding:12px;border:1px solid rgba(245,166,35,.22);border-radius:4px;width:212px;z-index:800;box-shadow:0 24px 48px rgba(0,0,0,.5)}
  [data-theme="light"] #nav-links{background:rgba(235,242,252,.98)}
  #nav-links.open{display:flex}
  #menu-icon{display:flex}
  .hero-name{font-size:clamp(1.9rem,8.5vw,2.9rem)}
  .ring-outer{width:220px;height:220px}
  .prof-box{width:192px;height:192px}
  .hero-img-side{width:220px;height:220px}
  .fi{display:none}
  .sk-grid{grid-template-columns:repeat(auto-fill,minmax(153px,1fr));gap:11px}
  .tl-grid,.ce-grid{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:13px}
  
  .hire-form{grid-template-columns:1fr;padding:24px}
  .cv-box{padding:28px 22px}
  #chatbot-container{width:calc(100% - 28px);right:14px}
  #theme-toggle{top:auto;bottom:26px;right:88px;transform:none;border-radius:8px;border:1px solid var(--bdr);width:44px;height:44px}
  body::before,body::after{display:none}
}
@media(max-width:480px){
  section{padding:58px 14px}
  .nav-wrap{padding:0 14px}
  .hero-name{font-size:clamp(1.7rem,9.5vw,2.4rem)}
  .ring-outer{width:188px;height:188px}
  .prof-box{width:164px;height:164px}
  .hero-img-side{width:188px;height:188px}
  .sk-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  
  .bug-plat{margin-left:0}
  .term-body{padding:13px 15px;font-size:.71rem}
  .foot-inner{flex-direction:column;text-align:center;gap:13px}
  .hire-form{padding:18px;gap:12px}
  .cv-box{padding:20px 16px}
  .blog-card{padding:22px 18px}
  .sh-title{font-size:clamp(1.65rem,7.5vw,2.3rem)}
}
/* ─────────────────────────────────────────��────────
   DOWNLOAD CV HERO BUTTON
   ────────────────────────────────────────────────── */
.btn-cv-hero {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:22px;
  padding:8px 22px;
  font-family:'JetBrains Mono',monospace; font-size:.7rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g); border:1px solid rgba(0,255,136,.38);
  background:rgba(0,255,136,.05);
  border-radius:3px; cursor:pointer; position:relative; overflow:hidden;
  transition:all var(--T) var(--ease);
  animation:fadeUp .7s .28s var(--ease) both;
}
.btn-cv-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.btn-cv-hero:hover::before { transform:translateX(120%); }
.btn-cv-hero:hover {
  background:var(--g); color:#000;
  box-shadow:var(--gg); transform:translateY(-2px);
}


/* ──────────────────────────────────────────────────
   REBRAND POLISH — gold/magenta overrides
   ────────────────────────────────────────────────── */
::selection { background:rgba(245,166,35,.22); color:var(--c); }
::-webkit-scrollbar-thumb { background:var(--c); }

/* Skill bars: gold -> magenta + gold glow */
.sk-fill { background:linear-gradient(90deg,var(--c),var(--g)) !important; box-shadow:0 0 12px rgba(245,166,35,.7) !important; }

/* Skill card hover pulse */
@keyframes skPulse {
  0%   { box-shadow:0 0 0 0 rgba(245,166,35,0); }
  60%  { box-shadow:0 0 0 12px rgba(245,166,35,.18); }
  100% { box-shadow:0 0 0 0 rgba(245,166,35,0); }
}
.sk-card:hover { animation:skPulse 1.6s ease-out infinite; }

/* Progress bar: gold -> magenta -> teal */
#progress-bar { background:linear-gradient(90deg,var(--c),var(--g),var(--p)) !important; }

/* Chatbot send button gradient */
.cb-inp button { background:linear-gradient(120deg,var(--c),var(--g)) !important; color:#000 !important; }
.cb-user p { background:linear-gradient(120deg,var(--c),var(--g)) !important; color:#000 !important; }

/* Hero stats top bar */
.hero-stats::before { background:linear-gradient(90deg,var(--c),var(--g)) !important; }

/* sh-rule diamond */
.sh-rule-diamond { width:8px; height:8px; background:var(--c); transform:rotate(45deg); box-shadow:0 0 10px rgba(245,166,35,.7); }

/* Section rule line gradient */
.sh-rule-line { background:linear-gradient(90deg,var(--c),transparent) !important; }

/* Hero 3D canvas */
#hero-3d {
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  width:100%; height:100%;
}
#home .hero-wrap, #home .scroll-hint { position:relative; z-index:1; }

/* Glitch slices (rebrand) */
.hero-name::before { color:var(--c) !important; text-shadow:0 0 10px rgba(245,166,35,.7) !important; }
.hero-name::after  { color:var(--g) !important; text-shadow:0 0 10px rgba(0,255,136,.6) !important; }

/* Hero pill: amber tone */
.hero-pill { color:var(--c) !important; border-color:rgba(245,166,35,.32) !important; background:rgba(245,166,35,.05) !important; box-shadow:0 0 16px rgba(245,166,35,.12) !important; }
.pill-dot { background:var(--c) !important; box-shadow:0 0 8px rgba(245,166,35,.9) !important; }

/* Body base */
body { font-size:1rem; }
.tl-card li, .ce-desc, .pr-info p, .ab-text p { font-size:1rem; }
.nnum { font-size:.78rem !important; }