/* ================================================================
   FAIZZYHON.ONLINE — REDESIGN v3.0  (Cyberpunk Dark)
   Palette  : bg-base #050E1D · bg-surface #0A1828
              bg-card #0E1E30 · bg-elevated #132438
              teal #08E8B8 · amber #F6A623 · blue #4B9CF5 · rose #F96070
   Type     : Syne (headings) · DM Sans (body) · JetBrains Mono (code)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --bg-base     : #050E1D;
  --bg-surface  : #0A1828;
  --bg-card     : #0E1E30;
  --bg-elevated : #132438;
  --bg-glass    : rgba(10,24,40,.75);

  --teal        : #08E8B8;
  --teal-dim    : rgba(8,232,184,.10);
  --teal-mid    : rgba(8,232,184,.35);
  --amber       : #F6A623;
  --amber-dim   : rgba(246,166,35,.10);
  --blue        : #4B9CF5;
  --blue-dim    : rgba(75,156,245,.10);
  --rose        : #F96070;

  --text-1      : #EAF0FA;
  --text-2      : #7A92B0;
  --text-3      : #3D5470;

  --border-faint: rgba(8,232,184,.07);
  --border-soft : rgba(8,232,184,.14);
  --border-med  : rgba(8,232,184,.28);

  --r-sm  : 6px;
  --r-md  : 12px;
  --r-lg  : 20px;
  --r-xl  : 28px;

  --shadow-card : 0 4px 24px rgba(0,0,0,.55);
  --shadow-teal : 0 0 32px rgba(8,232,184,.22);
  --shadow-amber: 0 0 32px rgba(246,166,35,.22);

  --neon-glow   : 0 0 20px rgba(8,232,184,.5), 0 0 40px rgba(8,232,184,.25), 0 0 80px rgba(8,232,184,.1);
  --neon-amber  : 0 0 20px rgba(246,166,35,.5), 0 0 40px rgba(246,166,35,.25);
  --glass       : rgba(14,30,48,0.6);

  --ease        : cubic-bezier(.4,0,.2,1);
  --t           : .3s var(--ease);
  --t-fast      : .15s var(--ease);
  --t-slow      : .55s var(--ease);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans', sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  line-height: 1.65;
  overflow-x: hidden;
}
/* Custom cursor disabled — OS cursor used on all pages. */
/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(8,232,184,.012) 2px,
    rgba(8,232,184,.012) 4px
  );
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* ── Background Canvas ──────────────────────────────────────── */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Custom Cursor ──────────────────────────────────────────── */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
}
#cursor-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--teal), 0 0 16px rgba(8,232,184,.5);
  transition: width .15s var(--ease), height .15s var(--ease), background .15s var(--ease);
}
#cursor-ring {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--teal);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  transition: width .12s var(--ease), height .12s var(--ease), opacity .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease);
}
#cursor.cursor-hover #cursor-dot {
  width: 10px;
  height: 10px;
  background: var(--teal);
}
#cursor.cursor-hover #cursor-ring {
  width: 50px;
  height: 50px;
  background: rgba(8,232,184,.08);
  border-color: var(--teal);
  opacity: 1;
}

/* ── Scroll-progress bar ────────────────────────────────────── */
#scroll-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--amber));
  z-index:10000;
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(8,232,184,.6);
}

/* ── Typography helpers ─────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family:'Syne', sans-serif; font-weight:700; line-height:1.15; }
.mono { font-family:'JetBrains Mono', monospace; }

/* ── Container ──────────────────────────────────────────────── */
.container { max-width:1220px; margin:0 auto; padding:0 1.75rem; position: relative; z-index: 1; }

/* ── Utility ────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.gradient-text {
  background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 60%, var(--amber) 100%);
  background-size: 200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation: gradient-shift 6s ease infinite;
}
.teal  { color: var(--teal); }
.amber { color: var(--amber); }

/* ── Glitch effect ──────────────────────────────────────────── */
.glitch-text { position: relative; }
.glitch-text.glitch-active::before,
.glitch-text.glitch-active::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, var(--teal) 0%, var(--blue) 60%, var(--amber) 100%);
  background-size: 200% 200%;
}
.glitch-text.glitch-active::before {
  animation: glitch 0.2s steps(2) forwards;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-2px, 0);
  opacity: 0.8;
}
.glitch-text.glitch-active::after {
  animation: glitch 0.2s steps(2) reverse forwards;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(2px, 0);
  opacity: 0.8;
}

/* ── Typing cursor ──────────────────────────────────────────── */
.typing-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--teal);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 1s step-end infinite;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.6rem; border-radius: var(--r-md);
  font-family:'Syne', sans-serif; font-weight:600; font-size:.9rem;
  letter-spacing:.03em; transition: var(--t);
  border:none; text-decoration:none;
  position: relative; overflow: hidden;
}
/* Ripple layer */
.btn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  width: 0; height: 0;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.btn.ripple-active::after {
  animation: ripple-out .5s var(--ease) forwards;
}
.btn-primary {
  background: var(--teal);
  color: var(--bg-base);
}
.btn-primary:hover {
  background: #0FFFC7;
  box-shadow: var(--neon-glow);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--border-med);
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: var(--teal-dim);
  border-color: var(--teal);
  box-shadow: 0 0 20px rgba(8,232,184,.2);
  transform: translateY(-2px);
}
.btn-amber {
  background: var(--amber);
  color: #0A0600;
}
.btn-amber:hover {
  background: #FFBB44;
  box-shadow: var(--neon-amber);
  transform: translateY(-2px);
}

/* ── Section shared ─────────────────────────────────────────── */
section { padding:5.5rem 0; }

.section-header { margin-bottom:3.5rem; }
.section-label {
  font-family:'JetBrains Mono', monospace; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--teal); margin-bottom:.6rem; display:block;
}
.section-title {
  font-family:'Syne', sans-serif; font-size:clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight:800; color: var(--text-1);
}
.section-subtitle {
  font-size:1.05rem; color: var(--text-2); margin-top:.75rem; max-width:560px;
}
.divider {
  display: block;
  width: 80px;
  height: 3px;
  margin-top: 1.2rem;
  background: linear-gradient(90deg, var(--teal), var(--blue) 50%, transparent);
  border-radius: 2px;
  position: relative;
  box-shadow: 0 0 12px rgba(8,232,184,.4);
}
.divider::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--teal);
  border-radius: 2px;
  animation: flicker 4s ease-in-out infinite;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:.9rem 0;
  background: rgba(5,14,29,.88);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--border-faint);
  transition: var(--t);
}
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8,232,184,.25), transparent);
  pointer-events: none;
}
.navbar.scrolled {
  box-shadow: 0 4px 40px rgba(0,0,0,.6), 0 0 1px rgba(8,232,184,.1);
  background: rgba(5,14,29,.96);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1320px; margin:0 auto; padding:0 2rem;
}
.logo {
  font-family:'Syne', sans-serif; font-weight:800; font-size:1.3rem;
  color: var(--text-1); display:flex; align-items:center; gap:.1rem;
  transition: var(--t);
}
.logo:hover { color: var(--teal); text-shadow: 0 0 20px rgba(8,232,184,.5); }
.logo-chevron { color: var(--teal); font-size:1.1rem; }

.nav-menu {
  display:flex; align-items:center; gap:2.2rem; list-style:none;
}
.nav-link {
  font-family:'DM Sans', sans-serif; font-weight:500; font-size:.88rem;
  color: var(--text-2); transition: var(--t); letter-spacing:.01em;
  position:relative; padding-bottom:2px;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  border-radius:2px; transition: var(--t);
}
.nav-link:hover, .nav-link.active { color: var(--text-1); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

.nav-cta {
  display:flex; align-items:center; gap:.8rem;
}
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:.4rem;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background: var(--text-1); border-radius:2px; transition: var(--t);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding-top:90px;
}
.hero-bg {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}

/* Animated grid */
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(8,232,184,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,232,184,.04) 1px, transparent 1px);
  background-size:60px 60px;
  animation: grid-pan 30s linear infinite;
}
.hero-glow {
  position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none;
  animation: glow-drift 18s ease-in-out infinite;
}
.glow-1 { width:700px; height:700px; background:radial-gradient(circle, rgba(8,232,184,.22) 0%, transparent 65%); top:-200px; left:-200px; animation-delay:0s; }
.glow-2 { width:500px; height:500px; background:radial-gradient(circle, rgba(75,156,245,.18) 0%, transparent 65%); bottom:-150px; right:-100px; animation-delay:8s; }
.glow-3 { width:400px; height:400px; background:radial-gradient(circle, rgba(246,166,35,.12) 0%, transparent 65%); top:40%; right:15%; animation-delay:16s; }

/* Hero layout — two column */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}
.hero-left { position: relative; z-index: 1; }
.hero-right {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}

.hero-content { position:relative; z-index:1; }
.hero-eyebrow {
  font-family:'JetBrains Mono', monospace; font-size:.8rem;
  color: var(--teal); letter-spacing:.15em; margin-bottom:1.2rem;
  display:flex; align-items:center; gap:.8rem;
}
.hero-eyebrow::before {
  content:''; display:block; width:32px; height:2px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  border-radius:2px;
  box-shadow: 0 0 8px rgba(8,232,184,.6);
}
.hero-h1 {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(2.4rem, 5vw, 4.2rem); line-height:1.05;
  margin-bottom:.6rem;
}
.hero-role {
  font-family:'Syne', sans-serif; font-size:clamp(1rem, 2.2vw, 1.4rem);
  font-weight:500; color: var(--text-2); margin-bottom:1.4rem;
}
.hero-desc {
  font-size:1.05rem; color: var(--text-2); max-width:520px;
  line-height:1.8; margin-bottom:2.4rem;
}
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats {
  display:flex; gap:2.5rem; margin-top:3.5rem; padding-top:3rem;
  border-top:1px solid var(--border-faint);
  flex-wrap:wrap;
}
.stat-number {
  font-family:'Syne', sans-serif; font-size:2rem; font-weight:800;
  color: var(--teal); line-height:1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(8,232,184,.4);
}
.stat-label { font-size:.82rem; color: var(--text-3); margin-top:.3rem; }

/* ── Terminal Widget ────────────────────────────────────────── */
.terminal-widget {
  width: 100%;
  max-width: 480px;
  background: rgba(5, 10, 20, 0.85);
  border: 1px solid rgba(8,232,184,.2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(8,232,184,.05),
    0 20px 60px rgba(0,0,0,.6),
    0 0 40px rgba(8,232,184,.06);
  backdrop-filter: blur(16px);
  animation: float 6s ease-in-out infinite;
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background: rgba(14,30,48,.9);
  border-bottom: 1px solid rgba(8,232,184,.12);
}
.t-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.t-red    { background: #FF5F57; box-shadow: 0 0 6px rgba(255,95,87,.5); }
.t-yellow { background: #FFBD2E; box-shadow: 0 0 6px rgba(255,189,46,.5); }
.t-green  { background: #28C840; box-shadow: 0 0 6px rgba(40,200,64,.5); }
.t-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--text-3);
  margin-left: .5rem;
  letter-spacing: .04em;
}
.terminal-body {
  padding: 1rem 1.2rem 1.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  line-height: 1.9;
  min-height: 220px;
  color: var(--text-2);
}
.t-line {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
}
.t-line.t-cmd {
  color: var(--teal);
}
.t-line.t-cmd::before {
  content: '$ ';
  color: rgba(8,232,184,.5);
}
.t-line.t-out {
  color: #7A92B0;
  padding-left: .5rem;
}
.t-line.t-success {
  color: #28C840;
}
.t-line.t-info {
  color: var(--amber);
}
.t-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--teal);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink-cursor 1s step-end infinite;
  box-shadow: 0 0 6px var(--teal);
}

/* ── About ──────────────────────────────────────────────────── */
.about { background: var(--bg-surface); position: relative; }
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(75,156,245,.04) 0%, transparent 60%);
  pointer-events: none;
}
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start;
}
.about-intro {
  font-size:1.05rem; color: var(--text-2); line-height:1.85; margin-bottom:2rem;
}
.about-intro strong { color: var(--text-1); }
.cert-badges { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.badge {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .9rem; border-radius:100px;
  border:1px solid var(--border-soft); font-size:.8rem; color: var(--text-2);
  background: var(--bg-card);
  transition: var(--t);
  animation: float 5s ease-in-out infinite;
}
.badge:nth-child(1) { animation-delay: 0s; }
.badge:nth-child(2) { animation-delay: 0.8s; }
.badge:nth-child(3) { animation-delay: 1.6s; }
.badge:nth-child(4) { animation-delay: 2.4s; }
.badge:hover {
  border-color: var(--teal);
  color: var(--text-1);
  box-shadow: 0 0 16px rgba(8,232,184,.15);
}
.badge .dot { width:7px; height:7px; border-radius:50%; background: var(--teal); box-shadow: 0 0 6px rgba(8,232,184,.6); }
.badge.amber-badge .dot { background: var(--amber); box-shadow: 0 0 6px rgba(246,166,35,.6); }
.badge.blue-badge  .dot { background: var(--blue);  box-shadow: 0 0 6px rgba(75,156,245,.6); }

/* ── Skills panel ───────────────────────────────────────────── */
.skill-group { margin-bottom:1.8rem; }
.skill-group-label {
  font-family:'JetBrains Mono', monospace; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--text-3);
  margin-bottom:.9rem;
}
.skill-tags { display:flex; flex-wrap:wrap; gap:.5rem; }

/* Skill tag with level bar */
.skill-tag {
  display: inline-block;
  padding: .35rem .8rem .5rem;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  font-size: .82rem;
  color: var(--text-2);
  transition: var(--t);
  position: relative;
  cursor: default;
}
.skill-tag::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: linear-gradient(90deg, var(--teal), var(--blue));
  width: 0%;
  transition: width .6s var(--ease);
  box-shadow: 0 0 6px rgba(8,232,184,.4);
}
.skill-tag.level-shown::after {
  width: var(--skill-level, 0%);
}
.skill-tag:hover {
  border-color: var(--border-med);
  color: var(--text-1);
  background: var(--teal-dim);
  transform: translateY(-1px);
}

/* ── Projects ───────────────────────────────────────────────── */
.projects-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:1.5rem;
}
.project-card {
  background: var(--glass);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  backdrop-filter: blur(8px);
}
.project-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--teal), var(--blue), transparent);
  opacity:0; transition: opacity .3s var(--ease);
}
.project-card:hover {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-card), 0 0 30px rgba(8,232,184,.08);
}
.project-card:hover::before { opacity:1; box-shadow: 0 0 12px rgba(8,232,184,.5); }
.project-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.project-badge {
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.25rem .65rem;
  border-radius:100px; background: var(--teal-dim); color: var(--teal);
  border:1px solid var(--border-soft);
}
.project-badge.ai      { background:rgba(75,156,245,.1); color:var(--blue);  border-color:rgba(75,156,245,.2); }
.project-badge.sec     { background:rgba(249,96,112,.1); color:var(--rose);  border-color:rgba(249,96,112,.2); }
.project-badge.islamic { background: var(--amber-dim);  color:var(--amber); border-color:rgba(246,166,35,.2); }
.project-arrow { color: var(--text-3); font-size:1.1rem; transition: var(--t); }
.project-card:hover .project-arrow { color: var(--teal); transform:translate(3px,-3px); text-shadow: 0 0 8px rgba(8,232,184,.7); }
.project-name { font-family:'Syne', sans-serif; font-size:1.15rem; font-weight:700; margin-bottom:.6rem; }
.project-desc { font-size:.9rem; color: var(--text-2); line-height:1.7; margin-bottom:1.2rem; }
.project-stack { display:flex; flex-wrap:wrap; gap:.45rem; }
.stack-tag {
  font-size:.75rem; padding:.22rem .6rem; border-radius: var(--r-sm);
  background: var(--bg-elevated); color: var(--text-3);
  font-family:'JetBrains Mono', monospace;
  border: 1px solid var(--border-faint);
  transition: var(--t);
}
.project-card:hover .stack-tag {
  border-color: var(--border-faint);
}

/* Card shine overlay */
.card-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.tilt-card:hover .card-shine { opacity: 1; }

/* ── Tools ──────────────────────────────────────────────────── */
.tools { background: var(--bg-surface); position: relative; }
.tools::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(8,232,184,.03) 0%, transparent 60%);
  pointer-events: none;
}
.tools-controls {
  display:flex; gap:1rem; align-items:center;
  margin-bottom:2rem; flex-wrap:wrap;
}
.tool-search {
  flex:1; min-width:240px; padding:.75rem 1.2rem;
  background: var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family:'DM Sans', sans-serif; font-size:.92rem;
  outline:none; transition: var(--t);
}
.tool-search::placeholder { color: var(--text-3); }
.tool-search:focus {
  border-color: var(--teal);
  box-shadow:0 0 0 3px var(--teal-dim), 0 0 16px rgba(8,232,184,.1);
}
.category-filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.cat-btn {
  padding:.4rem .9rem; border-radius:100px;
  border:1px solid var(--border-soft);
  background:transparent; color: var(--text-3); font-size:.82rem;
  transition: var(--t);
}
.cat-btn.active, .cat-btn:hover {
  background: var(--teal-dim);
  color: var(--teal);
  border-color: var(--border-med);
  box-shadow: 0 0 12px rgba(8,232,184,.1);
}
.tools-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1.2rem;
}
.tool-card {
  background: var(--glass);
  border:1px solid var(--border-faint);
  border-radius: var(--r-md);
  padding:1.4rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column; gap:.7rem;
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  backdrop-filter: blur(8px);
}
.tool-card:hover {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-card), 0 0 20px rgba(8,232,184,.06);
}
.tool-icon-wrap {
  width:44px; height:44px; border-radius: var(--r-sm);
  background: var(--teal-dim); display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-size:.7rem; color: var(--teal);
  font-weight:700; letter-spacing:.05em;
  box-shadow: 0 0 12px rgba(8,232,184,.1);
  transition: var(--t);
}
.tool-card:hover .tool-icon-wrap {
  box-shadow: 0 0 20px rgba(8,232,184,.2);
}
.tool-icon-wrap.amber { background: var(--amber-dim); color: var(--amber); box-shadow: 0 0 12px rgba(246,166,35,.1); }
.tool-icon-wrap.blue  { background: var(--blue-dim);  color: var(--blue);  box-shadow: 0 0 12px rgba(75,156,245,.1); }
.tool-name { font-family:'Syne', sans-serif; font-weight:700; font-size:1rem; }
.tool-desc { font-size:.85rem; color: var(--text-2); line-height:1.6; flex:1; }
.tool-link {
  display:inline-flex; align-items:center; gap:.4rem;
  color: var(--teal); font-size:.82rem; font-weight:600;
  font-family:'DM Sans', sans-serif; transition: var(--t);
}
.tool-link:hover { gap:.65rem; text-shadow: 0 0 10px rgba(8,232,184,.5); }
.tool-link svg { transition: var(--t); }
.tools-empty { text-align:center; color: var(--text-3); padding:2rem; grid-column:1/-1; display:none; }

/* ── Games ──────────────────────────────────────────────────── */
.games-intro-text { color: var(--text-2); font-size:1rem; margin-bottom:2rem; }
.games-hub-btn-wrap { margin-bottom:2.5rem; }
.games-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.2rem;
}
.game-card {
  background: var(--glass);
  border:1px solid var(--border-faint);
  border-radius: var(--r-lg);
  padding:1.8rem;
  transition: var(--t);
  position:relative; overflow:hidden; display:block;
  text-decoration:none;
  backdrop-filter: blur(8px);
}
.game-card:hover {
  border-color: rgba(246,166,35,.25);
  transform:translateY(-4px);
  box-shadow:0 8px 40px rgba(246,166,35,.12);
}
.game-chip {
  display:inline-block; font-family:'JetBrains Mono', monospace;
  font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:100px;
  background: var(--amber-dim); color: var(--amber);
  border:1px solid rgba(246,166,35,.2); margin-bottom:1rem;
}
.game-name { font-family:'Syne', sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:.5rem; }
.game-desc { font-size:.88rem; color: var(--text-2); line-height:1.65; margin-bottom:1.2rem; }
.game-play {
  color: var(--amber); font-weight:600; font-size:.85rem;
  display:flex; align-items:center; gap:.4rem;
  transition: var(--t);
}
.game-card:hover .game-play { gap:.65rem; text-shadow: 0 0 10px rgba(246,166,35,.5); }

/* ── Blog ───────────────────────────────────────────────────── */
.blog { background: var(--bg-surface); }
.blog-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:1.5rem;
}
.blog-card {
  background: var(--glass);
  border:1px solid var(--border-faint);
  border-radius: var(--r-lg); overflow:hidden;
  transition: var(--t);
  display:flex; flex-direction:column;
  backdrop-filter: blur(8px);
}
.blog-card:hover {
  border-color: var(--border-soft);
  transform:translateY(-4px);
  box-shadow: var(--shadow-card), 0 0 24px rgba(8,232,184,.06);
}
.blog-card-top {
  padding:1.8rem 1.8rem 0;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.blog-cat {
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.25rem .65rem;
  border-radius:100px;
}
.blog-cat.tools    { background: var(--teal-dim); color: var(--teal); border:1px solid var(--border-soft); }
.blog-cat.security { background:rgba(249,96,112,.1); color:var(--rose); border:1px solid rgba(249,96,112,.2); }
.blog-cat.ai       { background: var(--blue-dim); color: var(--blue); border:1px solid rgba(75,156,245,.2); }
.blog-cat.dev      { background: var(--amber-dim); color:var(--amber); border:1px solid rgba(246,166,35,.2); }
.blog-cat.adsense  { background: var(--teal-dim); color: var(--teal); border:1px solid var(--border-soft); }
.blog-cat.services { background: var(--amber-dim); color:var(--amber); border:1px solid rgba(246,166,35,.2); }
.blog-card-body { padding:1.2rem 1.8rem 1.8rem; flex:1; display:flex; flex-direction:column; gap:.7rem; }
.blog-date { font-size:.78rem; color: var(--text-3); font-family:'JetBrains Mono', monospace; }
.blog-title { font-family:'Syne', sans-serif; font-weight:700; font-size:1.05rem; line-height:1.35; color: var(--text-1); }
.blog-excerpt { font-size:.88rem; color: var(--text-2); line-height:1.7; flex:1; }
.blog-meta {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:.5rem; padding-top:1rem;
  border-top:1px solid var(--border-faint);
}
.blog-author { font-size:.78rem; color: var(--text-3); }
.blog-read-link {
  display:inline-flex; align-items:center; gap:.35rem;
  color: var(--teal); font-size:.82rem; font-weight:600;
  transition: var(--t);
}
.blog-read-link:hover { gap:.6rem; text-shadow: 0 0 10px rgba(8,232,184,.5); }

/* Individual blog post page */
.blog-post-page { padding-top:110px; padding-bottom:5rem; }
.blog-post-header { margin-bottom:3rem; }
.blog-post-meta { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin:1rem 0 1.5rem; }
.blog-post-meta .blog-date, .blog-post-meta .blog-author { color: var(--text-3); font-size:.85rem; }
.blog-post-body {
  max-width:760px; font-size:1.05rem; line-height:1.85; color: var(--text-2);
}
.blog-post-body h2 { font-family:'Syne',sans-serif; font-size:1.5rem; color:var(--text-1); margin:2.5rem 0 1rem; }
.blog-post-body h3 { font-family:'Syne',sans-serif; font-size:1.2rem; color:var(--text-1); margin:2rem 0 .7rem; }
.blog-post-body p { margin-bottom:1.2rem; }
.blog-post-body strong { color: var(--text-1); font-weight:600; }
.blog-post-body ul, .blog-post-body ol { margin:1rem 0 1.2rem 1.5rem; }
.blog-post-body li { margin-bottom:.5rem; }
.blog-post-body code {
  font-family:'JetBrains Mono',monospace; font-size:.85em;
  background: var(--bg-elevated); color: var(--teal); padding:.15rem .4rem;
  border-radius: var(--r-sm); border:1px solid var(--border-faint);
}
.blog-post-body blockquote {
  border-left:3px solid var(--teal); padding-left:1.2rem;
  margin:1.5rem 0; color: var(--text-2); font-style:italic;
  box-shadow: -3px 0 12px rgba(8,232,184,.15);
}
.back-link {
  display:inline-flex; align-items:center; gap:.45rem;
  color: var(--teal); font-size:.88rem; font-weight:600;
  margin-bottom:2rem; transition: var(--t);
}
.back-link:hover { gap:.65rem; }

/* ── Contact ────────────────────────────────────────────────── */
.contact-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start;
}
.contact-intro { font-size:1rem; color: var(--text-2); line-height:1.8; margin-bottom:2rem; }
.contact-links-list { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.contact-link-item {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.2rem; border-radius: var(--r-md);
  background: var(--glass);
  border:1px solid var(--border-faint);
  backdrop-filter: blur(8px);
  transition: var(--t); color: var(--text-2); font-size:.9rem;
}
.contact-link-item:hover {
  border-color: var(--border-soft);
  color: var(--text-1);
  transform:translateX(4px);
  box-shadow: 0 0 20px rgba(8,232,184,.08);
}
.contact-link-icon {
  width:36px; height:36px; border-radius: var(--r-sm);
  background: var(--teal-dim); display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; font-family:'JetBrains Mono', monospace;
  color: var(--teal); flex-shrink:0;
  box-shadow: 0 0 10px rgba(8,232,184,.12);
}
.form-group { margin-bottom:1.2rem; }
.form-label {
  display:block; font-size:.82rem; color: var(--text-3); margin-bottom:.45rem;
  font-family:'JetBrains Mono', monospace; letter-spacing:.05em;
}
.form-input, .form-textarea {
  width:100%; padding:.8rem 1rem;
  background: var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius: var(--r-md); color: var(--text-1);
  font-family:'DM Sans', sans-serif; font-size:.92rem; outline:none;
  transition: var(--t);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
.form-input:focus, .form-textarea:focus {
  border-color: var(--teal);
  box-shadow:0 0 0 3px var(--teal-dim), 0 0 16px rgba(8,232,184,.1);
}
.form-textarea { resize:vertical; min-height:130px; line-height:1.65; }
.form-submit { width:100%; margin-top:.4rem; }
.form-success {
  display:none; padding:1rem; border-radius: var(--r-md);
  background: var(--teal-dim); border:1px solid var(--border-med);
  color: var(--teal); font-size:.9rem; text-align:center; margin-top:.8rem;
  box-shadow: 0 0 20px rgba(8,232,184,.15);
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-faint);
  padding: 3.5rem 0 2rem;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--blue), transparent);
  box-shadow: 0 0 16px rgba(8,232,184,.3);
}
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem;
  margin-bottom:3rem;
}
.footer-brand-logo {
  font-family:'Syne', sans-serif; font-weight:800; font-size:1.25rem; margin-bottom:.7rem;
}
.footer-brand-desc { font-size:.88rem; color: var(--text-3); line-height:1.7; }
.footer-col-title {
  font-family:'Syne', sans-serif; font-size:.85rem; font-weight:700;
  color: var(--text-2); margin-bottom:1rem; letter-spacing:.04em;
}
.footer-links-list { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-links-list a {
  font-size:.85rem; color: var(--text-3); transition: var(--t);
}
.footer-links-list a:hover { color: var(--teal); padding-left: 4px; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:2rem; border-top:1px solid var(--border-faint);
  font-size:.82rem; color: var(--text-3); flex-wrap:wrap; gap:1rem;
}

/* ── AdSense containers ─────────────────────────────────────── */
.ad-unit { padding:1.5rem 0; }
.ad-label {
  text-align:center; font-size:.68rem; font-family:'JetBrains Mono', monospace;
  letter-spacing:.1em; color: var(--text-3); text-transform:uppercase; margin-bottom:.5rem;
}

/* ── Scroll-reveal ──────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ════════════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════════════ */

@keyframes grid-pan {
  0%   { transform:translateY(0); }
  100% { transform:translateY(60px); }
}

@keyframes glow-drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(30px,-40px) scale(1.05); }
  66%     { transform:translate(-20px,20px) scale(.95); }
}

@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  8%        { opacity: .85; }
  9%        { opacity: 1; }
  40%       { opacity: 1; }
  41%       { opacity: .7; }
  42%       { opacity: 1; }
  60%       { opacity: 1; }
  61%       { opacity: .9; }
  62%       { opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--shadow-teal);
  }
  50% {
    transform: scale(1.02);
    box-shadow: var(--neon-glow);
  }
}

@keyframes scan-line {
  0%   { top: -4px; }
  100% { top: 100vh; }
}

@keyframes glitch {
  0%  { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);   transform: translate(-2px, 0); }
  20% { clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%); transform: translate(2px, 0); }
  40% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); transform: translate(-1px, 0); }
  60% { clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); transform: translate(2px, 0); }
  80% { clip-path: polygon(0 88%, 100% 88%, 100% 92%, 0 92%); transform: translate(-2px, 0); }
  100%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  transform: translate(0); }
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes ripple-out {
  0%   { width: 0; height: 0; opacity: .5; transform: translate(-50%, -50%) scale(0); }
  100% { width: 400px; height: 400px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .about-grid, .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .hero-layout { grid-template-columns:1fr; }
  .hero-right { display: none; }
}
@media (max-width:768px) {
  .nav-menu {
    position:fixed; top:0; right:-100%; width:280px; height:100vh;
    background: var(--bg-surface); flex-direction:column; justify-content:center;
    padding:2rem; gap:1.5rem; border-left:1px solid var(--border-faint);
    transition: var(--t-slow); z-index:999;
    backdrop-filter: blur(24px);
  }
  .nav-menu.open { right:0; }
  .nav-link { font-size:1.05rem; }
  .nav-cta { display:none; }
  .hamburger { display:flex; z-index:1000; }

  section { padding:3.5rem 0; }
  .hero-h1 { font-size:clamp(2.2rem, 8vw, 3.5rem); }
  .hero-stats { gap:1.5rem; }
  .projects-grid, .blog-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .tools-grid { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
  .hero-right { display: none; }

  /* Disable custom cursor on mobile */
  body { cursor: auto; }
  #cursor { display: none; }
  a, button, .cat-btn, .tool-link, .contact-link-item, .footer-links-list a,
  .nav-link, .hamburger, .btn { cursor: auto; }
}
@media (max-width:480px) {
  .container { padding:0 1.2rem; }
  .hero-cta { flex-direction:column; }
  .btn { width:100%; justify-content:center; }
}