/* ============================================================
   AHMED AQEEL — PORTFOLIO CSS
   Professional Design System
   ============================================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600&display=swap');

/* ---- CSS Variables ---- */
:root {
  /* Colors - Neo-Futurist Palette */
  --bg:          #02040a;
  --bg2:         #060a16;
  --bg3:         #0a1024;
  --bg4:         #0f1730;
  --text:        #ffffff;
  --text2:       #d1dbe5;
  --text3:       #8ba3b8;
  --accent:      #00f2fe; /* Electric Cyan */
  --accent-dim:  rgba(0, 242, 254, 0.12);
  --accent-glow: rgba(0, 242, 254, 0.35);
  --blue:        #3b82f6;
  --purple:      #8b5cf6;
  --orange:      #f97316;
  --green:       #10b981;
  --red:         #ef4444;
  --gold:        #f5c842;
  --border:      rgba(0, 242, 254, 0.18);
  --border2:     rgba(255, 255, 255, 0.08);
  --card:        rgba(15, 23, 48, 0.6);
  --glass:       rgba(2, 4, 10, 0.85);

  /* Typography */
  --font-display: 'Outfit', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --section-pad: 80px 60px;
  --nav-h: 80px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Shadows */
  --shadow-card: 0 10px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px rgba(0,242,254,0.15);
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Global overflow & scrollbar guard — removes extra slide bars on all devices */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  cursor: none;
  line-height: 1.72;
  letter-spacing: 0em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide webkit scrollbars & slide bar tracks */
::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  display: none !important;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: none; font-family: inherit; }
ul, ol { list-style: none; }

/* Safety net — nothing should ever widen the page */
section, footer, header, nav, main {
  max-width: 100%;
  overflow-x: clip;   /* clip without creating scroll context */
}

/* Neurolink Matrix Background Canvas */
#sn-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

/* ================================================================
   SKIP LINK  (accessibility)
   ================================================================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 99999;
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--r-md);
  transition: top 0.2s;
  letter-spacing: 0.5px;
}
.skip-link:focus { top: 16px; }

/* ================================================================
   GLOBAL FOCUS STATES  (keyboard navigation)
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Remove outline on mouse click but keep for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* ================================================================
   CONTAINER  (responsive width wrapper)
   Only provides max-width — sections keep their own padding.
   ================================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

/* ================================================================
   CURSOR
   ================================================================ */
#cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%, -50%);
  transition: transform 0.08s, width 0.2s, height 0.2s;
  mix-blend-mode: screen;
}
#cursor-ring {
  position: fixed; width: 38px; height: 38px;
  border: 1.5px solid rgba(0,229,196,0.55); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: left 0.14s ease, top 0.14s ease, width 0.25s, height 0.25s;
}
body:has(a:hover) #cursor        { transform: translate(-50%,-50%) scale(2); }
body:has(button:hover) #cursor   { transform: translate(-50%,-50%) scale(2); }

/* ================================================================
   STACK NETWORK — site-wide background, fixed behind every section.
   Sections already sit at position:relative + z-index:10+ (see
   .section, .hero below), so z-index:0 here is enough separation —
   no stacking-context fights.
   ================================================================ */
#stack-network {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 85% 25%, rgba(0, 242, 254, 0.09) 0%, transparent 50%),
              radial-gradient(circle at 15% 75%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
              #02040a;
  overflow: hidden;
}
#stack-network canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sn-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(2, 4, 10, 0.22) 0%, transparent 82%);
}

#diamond-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.25));
}

#binary-rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  mix-blend-mode: screen;
}

.hero-grid-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 242, 254, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 242, 254, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 90%);
}

/* ── Mobile/tablet perf: filter + blend-mode force a full-layer
   repaint every animation frame on top of the already-throttled
   canvas loops — drop them below 991px to keep scroll at 60fps.
   Desktop/laptop (≥992px) is untouched. ──────────────────────── */
@media (max-width: 991px) {
  #diamond-canvas { filter: none; }
  #binary-rain-canvas { mix-blend-mode: normal; }
  .avatar-wrap {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ================================================================
   NAVIGATION
   ================================================================ */
nav {
  position: fixed; top: 0px; width: 100%; height: var(--nav-h);
  z-index: 1001;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 60px;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
nav.scrolled { 
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 72px;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 900; font-size: 24px;
  letter-spacing: -1px;
  display: flex; align-items: center; gap: 4px;
  color: #fff;
}
.nav-logo .brace { color: var(--accent); }

.nav-links {
  display: flex; gap: 32px; list-style: none;
}
.nav-links a {
  font-family: var(--font-display); font-size: 13px;
  color: var(--text2); letter-spacing: 0.5px;
  transition: all 0.3s;
  font-weight: 500;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--accent); transition: width 0.3s;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active-link { color: var(--accent); font-weight: 700; }

.nav-cta {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; letter-spacing: 1px;
  color: #000; background: var(--accent);
  padding: 10px 24px; border-radius: 100px;
  transition: all 0.3s; white-space: nowrap;
}
.nav-cta:hover {
  background: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--accent-glow);
}

.hamburger {
  display: none; flex-direction: column;
  gap: 5px; cursor: pointer; padding: 8px;
  background: none; border: none;
  border-radius: var(--r-sm);
  transition: background 0.2s;
}
.hamburger:hover { background: rgba(255,255,255,0.06); }
.hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--text2); border-radius: 2px;
  transition: all 0.3s;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 11fr 9fr;
  align-items: flex-start;
  gap: 60px;
  padding: calc(var(--nav-h) + 24px) 60px 60px 60px;
  overflow: visible;
  z-index: 10;
}

.hero-text {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 640px;
}

@media (max-width: 1439px) and (min-width: 1200px) {
  .hero {
    grid-template-columns: 11fr 9fr;
    gap: 40px;
    padding: calc(var(--nav-h) + 24px) 40px 40px 40px;
  }
}

@media (max-width: 1199px) and (min-width: 1024px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: calc(var(--nav-h) + 20px) 30px 30px 30px;
  }
}

@media (max-width: 1023px) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    padding-top: calc(var(--nav-h) + 20px) !important;
    overflow: hidden !important;
  }
  .hero-text {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .hero-title-block { order: 1; }
  .hero-visual {
    order: 2;
    width: 100% !important;
    max-width: 360px !important;
    height: 420px !important;
    margin: 24px auto !important;
  }
  .typing-box { order: 5; width: 100%; }
}


/* Desktop/tablet: invisible to layout — hero-tag and hero-name behave as if
   this wrapper weren't there, so nothing changes above 768px. Only the
   mobile media query below gives it real box behavior. */
.hero-title-block { display: contents; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.hero-tag-bar { width: 36px; height: 1px; background: var(--accent); }
.hero-tag-dot {
  width: 8px; height: 8px; background: var(--green);
  border-radius: 50%; animation: statusBlink 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--green);
}
.hero-tag-text {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--accent); letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 900; line-height: 0.95;
  letter-spacing: -2px;
  margin-bottom: 32px; /* Heading -> Description: 32px */
  word-break: break-word;
}
.hero-name .line-white { display: block; color: #fff; }
.hero-name .line-grad  {
  display: block;
  background: linear-gradient(to right, var(--accent), var(--blue), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradShift 6s ease infinite;
}

.hero-greeting {
  font-family: var(--font-mono); font-size: 14px;
  color: #fff;
  margin-bottom: 24px; /* Description -> Skills: 24px */
  letter-spacing: 0.4px;
  line-height: 1.6;
}
.hero-greeting .highlight { color: var(--gold); font-weight: 600; }

.hero-roles {
  display: flex; flex-wrap: wrap; gap: 6px 0px;
  margin-bottom: 32px; /* Skills -> Terminal: 32px */
}
.role-pill {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text3); letter-spacing: 0.8px;
  background: transparent !important; border: none !important;
  box-shadow: none !important;
  padding: 4px 6px; border-radius: 0;
  transition: color 0.3s, text-shadow 0.3s;
  display: inline-flex;
  align-items: center;
}
.role-pill:hover {
  color: var(--text);
}
.role-pill.active {
  color: var(--accent) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 229, 196, 0.8), 0 0 20px rgba(0, 229, 196, 0.4);
}
.role-pill:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  margin-right: 4px;
  color: var(--text3);
  opacity: 0.5;
  font-weight: normal;
  text-shadow: none;
}

.typing-box {
  position: relative;
  background: rgba(15, 20, 34, 0.7);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: 42px 20px 14px 20px;
  margin-bottom: 32px; /* Terminal -> Bio: 32px */
  font-family: var(--font-mono); font-size: 13px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: text;
  transition: border-color 0.3s, box-shadow 0.3s;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.typing-box.active-shell {
  border-color: rgba(0, 229, 196, 0.5);
  box-shadow: 0 8px 32px var(--accent-glow);
}
.typing-box::before {
  content: '';
  position: absolute;
  top: 16px; left: 18px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 14px 0 0 #f5c842, 28px 0 0 #22c55e;
}
.terminal-header {
  position: absolute;
  top: 10px;
  left: 64px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 4px;
.terminal-title {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.5px;
}
.terminal-action-hint {
  font-size: 11px;
  color: var(--accent);
  opacity: 0.65;
  letter-spacing: 0.5px;
}
  animation: pulseGrad 2.5s infinite;
}
.terminal-body {
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 196, 0.2) transparent;
}
.terminal-body::-webkit-scrollbar {
  width: 4px;
}
.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 196, 0.25);
  border-radius: 100px;
}
#terminal-history {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text2);
  line-height: 1.6;
  font-size: 12px;
  text-align: left;
}
.term-highlight { color: var(--accent); font-weight: 600; }
.term-cmd { color: var(--gold); }
.term-error { color: var(--red); }
.terminal-input-line {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  gap: 6px;
}
.terminal-input-field {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  caret-color: var(--accent);
  box-shadow: none !important;
}
.typing-prompt { color: var(--accent); margin-right: 4px; }
.typing-cursor {
  display: inline-block; width: 6px; height: 13px;
  background: var(--accent); margin-left: 2px;
  vertical-align: middle; animation: blink 1.1s step-end infinite;
}
.typing-box.active-shell #typing-text {
  display: none;
}
.typing-box.active-shell .typing-prompt {
  display: none;
}

@keyframes pulseGrad {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.hero-bio {
  font-size: 15.5px; line-height: 1.9; color: var(--text2);
  max-width: 560px; margin-bottom: 40px;
  font-weight: 400; letter-spacing: -0.01em;
}
.hero-bio strong { color: var(--text); font-weight: 600; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #000;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  padding: 14px 32px; border-radius: 100px;
  transition: all 0.3s; letter-spacing: 0.3px;
  border: none;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px var(--accent-glow);
  background: #1fffd8;
}

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border2); color: var(--text2);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  padding: 14px 28px; border-radius: 100px;
  transition: all 0.3s; letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
}
.btn-outline:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-dim); transform: translateY(-2px);
}

/* Download Resume button — blinking glow to draw attention */
.btn-resume {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--accent);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  padding: 13px 28px; border-radius: 100px;
  border: 1.5px solid var(--accent);
  letter-spacing: 0.4px;
  position: relative; overflow: hidden;
  transition: transform 0.3s, color 0.3s, background 0.3s;
  animation: resume-blink 2.2s ease-in-out infinite;
}
.btn-resume-icon { display: inline-flex; }
.btn-resume-arrow {
  display: inline-flex;
  animation: resume-arrow-bounce 1.4s ease-in-out infinite;
}
.btn-icon, .btn-resume-icon svg, .btn-resume-arrow svg { flex-shrink: 0; display: block; }
.btn-resume:hover {
  transform: translateY(-3px);
  background: var(--accent);
  color: #000;
  animation-play-state: paused;
  box-shadow: 0 12px 40px var(--accent-glow);
}
.btn-resume:active { transform: translateY(-1px); }

@keyframes resume-blink {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); border-color: var(--accent); }
  50% { box-shadow: 0 0 22px 4px var(--accent-glow); border-color: #1fffd8; }
}

@keyframes resume-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-resume, .btn-resume-arrow { animation: none; }
}

/* Hero Visual */
.hero-visual {
  position: relative; height: 540px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  z-index: 4;
  margin-top: 10px;
}

.orbit-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid transparent;
  animation: spin linear infinite;
  z-index: 2;
}
.orbit-1 {
  width: 380px; height: 380px;
  border-color: rgba(255,255,255,0.04);
  animation-duration: 15s;
}
.orbit-2 {
  width: 300px; height: 300px;
  border-color: rgba(255,255,255,0.04);
  animation-duration: 12s; animation-direction: reverse;
  border-style: dashed;
}
.orbit-3 {
  width: 220px; height: 220px;
  border-color: rgba(255,255,255,0.04);
  animation-duration: 10s;
}
.orbit-dot {
  position: absolute; width: 6px; height: 6px;
  border-radius: 50%; top: -3px; left: 50%; margin-left: -3px;
}
.od-1 { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.od-2 { background: var(--purple); box-shadow: 0 0 10px var(--purple); }
.od-3 { background: var(--blue);   box-shadow: 0 0 10px var(--blue); }

.avatar-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  background: rgba(13, 18, 36, 0.75);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 242, 254, 0.15);
  animation: floatUp 6s ease-in-out infinite;
  border: 1px solid rgba(0, 242, 254, 0.35);
  padding: 0;
  z-index: 4;
  /* Technical Dotted Grid Background */
  background-image: radial-gradient(rgba(0, 242, 254, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.avatar-wrap:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 242, 254, 0.6);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 45px rgba(0, 242, 254, 0.25);
}

.avatar-card {
  width: 100%; height: 100%;
  background: rgba(6, 10, 22, 0.85);
  border-radius: inherit;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px; gap: 8px;
  position: relative; overflow: hidden;
}

.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

/* Sharp accent corners */
.avatar-card::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 60px; height: 60px;
  border-top: 4px solid var(--accent);
  border-left: 4px solid var(--accent);
  z-index: 10;
}

.avatar-card::after {
  content: '';
  position: absolute; bottom: 0; right: 0; width: 60px; height: 60px;
  border-bottom: 4px solid var(--blue);
  border-right: 4px solid var(--blue);
  z-index: 10;
}

.avatar-card:hover .avatar-img { 
  transform: scale(1.08); 
}

.avatar-label {
  position: relative;
  z-index: 20;
  background: #fff;
  padding: 6px 16px;
  border-radius: 4px;
  font-family: var(--font-display); font-size: 13px;
  color: #000; letter-spacing: 0.5px; text-transform: uppercase;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.avatar-status-bar {
  position: relative;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border2);
}
.avatar-hint { font-size: 10px; color: var(--text3); }

/* Attached Float Chips - Positioned directly alongside Photo Card frame */
.float-chip {
  position: absolute;
  background: rgba(10, 16, 36, 0.92);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 8px 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 242, 254, 0.2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform 0.3s ease, border-color 0.3s ease;
  z-index: 25;
}
.float-chip:hover {
  transform: scale(1.05);
  border-color: #1fffd8;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 242, 254, 0.35);
}

/* Short 12px Dotted Connecting Lines & Picture Border Anchors */
.fc-top {
  top: 10% !important;
  right: calc(100% + 12px) !important;
  left: auto !important;
  bottom: auto !important;
  animation: sysFloatTop 2.5s ease-in-out infinite;
}
.fc-top::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 100% !important;
  right: auto !important;
  width: 12px !important;
  height: 0 !important;
  border-top: 2px dotted var(--accent) !important;
  opacity: 1 !important;
  z-index: 26 !important;
}
.fc-top::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 9px) !important;
  right: auto !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 27 !important;
  box-shadow: 0 0 10px var(--accent), 0 0 4px var(--accent) !important;
  animation: sysDotBlinkAccent 0.8s infinite !important;
}

.fc-bottom {
  bottom: 10% !important;
  right: calc(100% + 12px) !important;
  left: auto !important;
  top: auto !important;
  animation: sysFloatBottom 2.8s ease-in-out infinite;
}
.fc-bottom::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 100% !important;
  right: auto !important;
  width: 12px !important;
  height: 0 !important;
  border-top: 2px dotted var(--accent) !important;
  opacity: 1 !important;
  z-index: 26 !important;
}
.fc-bottom::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 9px) !important;
  right: auto !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 27 !important;
  box-shadow: 0 0 10px var(--accent), 0 0 4px var(--accent) !important;
  animation: sysDotBlinkAccent 0.8s infinite !important;
}

.fc-mid {
  top: 50% !important;
  left: calc(100% + 12px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  animation: sysFloatMid 2.4s ease-in-out infinite;
}
.fc-mid::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: 100% !important;
  left: auto !important;
  width: 12px !important;
  height: 0 !important;
  border-top: 2px dotted var(--blue) !important;
  opacity: 1 !important;
  z-index: 26 !important;
}
.fc-mid::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 9px) !important;
  left: auto !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--blue) !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 27 !important;
  box-shadow: 0 0 10px var(--blue), 0 0 4px var(--blue) !important;
  animation: sysDotBlinkBlue 0.8s infinite !important;
}

/* Animations for Floating Chips & Blinking Border Anchors */
@keyframes sysFloatTop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
}
@keyframes sysFloatBottom {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(6px) scale(1.02); }
}
@keyframes sysFloatMid {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1); }
  50% { transform: translateY(-50%) translateX(4px) scale(1.02); }
}
@keyframes sysDotBlinkAccent {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(0.85); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.3); box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent); }
}
@keyframes sysDotBlinkBlue {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(0.85); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.3); box-shadow: 0 0 12px var(--blue), 0 0 4px var(--blue); }
}

.chip-icon { font-size: 16px; margin-bottom: 2px; color: var(--accent); display: flex; }
.chip-icon svg { display: block; }
.chip-val  { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: #fff; }
.chip-lbl  { font-family: var(--font-mono); font-size: 9.5px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
.chip-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff; }
.chip-loc  { font-family: var(--font-mono); font-size: 11px; color: var(--text3); }

/* ================================================================
   STATS BAR
   ================================================================ */
.stats-bar {
  position: relative; z-index: 10;
  padding: 24px 60px;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  background: rgba(5,8,15,0.6);
  display: flex; align-items: center; gap: 0;
  overflow: hidden;
}
.stat-item {
  flex: 0 0 auto;
  padding: 0 48px; text-align: center;
  border-right: 1px solid var(--border2);
}
.stat-item:first-child { padding-left: 0; }
.stat-num {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 900;
  color: var(--accent); line-height: 1;
  display: block;
}
.stat-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text3); letter-spacing: 2px; text-transform: uppercase;
  margin-top: 6px; display: block;
}
.marquee-wrap {
  flex: 1; overflow: hidden; padding-left: 48px;
}
.marquee-inner {
  display: flex; gap: 0;
  animation: marquee 8s linear infinite;
  width: max-content;
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 28px; white-space: nowrap;
}
/* Real tech logo icons in marquee */
.m-logo {
  width: 22px; height: 22px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.m-text {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text2); letter-spacing: 1.8px; text-transform: uppercase;
  font-weight: 500;
}
.m-sep {
  color: rgba(0,229,196,0.3); font-size: 10px;
  margin-left: 2px;
}

/* ================================================================
   SECTION COMMONS
   ================================================================ */
.section {
  position: relative; z-index: 10;
  padding: var(--section-pad);
}
.section.alt-bg { background: rgba(5,8,15,0.72); }

.section-header { margin-bottom: 40px; }
.section-header.centered { text-align: center; }
.section-header.centered .sec-eyebrow { justify-content: center; }
.section-header.centered .sec-sub { margin-left: auto; margin-right: auto; }

/* Eyebrow pill */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03);
  padding: 6px 16px; border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--border2);
}
.sec-eyebrow-text {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase;
}

/* Section title */
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900; line-height: 1;
  letter-spacing: -2px; margin-bottom: 14px;
  color: #fff;
}
.sec-title .grad {
  background: linear-gradient(to right, var(--accent), var(--blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Section sub-heading */
.sec-sub {
  font-size: 17px; line-height: 1.6;
  color: var(--text3); max-width: 620px;
  font-weight: 400;
}

/* ================================================================
   SKILLS SECTION: Modern Bento Refactor
   ================================================================ */

/* ── BENTO GRID: 4 columns, minmax rows ────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
  width: 100%;
  margin-top: 24px;
}

/* ── BENTO CARD: Glassmorphism style ────────────────── */
.bento-card {
  background: rgba(13, 18, 36, 0.6) !important;
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(0, 229, 196, 0.4) !important;
  background: rgba(15, 22, 42, 0.8) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5),
              0 0 30px rgba(0, 229, 196, 0.1) !important;
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
              rgba(255, 255, 255, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.5s;
}
.bento-card:hover::before { opacity: 1; }

/* ── Sizing Helpers ────────────────── */
.bento-lg { 
  grid-column: span 4;
  background: radial-gradient(circle at top right, rgba(0, 229, 196, 0.05), transparent 40%),
              rgba(10, 15, 30, 0.7) !important;
  border-color: rgba(0, 229, 196, 0.15) !important;
}
.bento-md { grid-column: span 2; }
.bento-sm { grid-column: span 1; }

/* ── Bento Header ────────────────── */
.bento-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.bento-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.bento-icon-box {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.4s ease;
}

.bento-card:hover .bento-icon-box {
  background: rgba(0, 229, 196, 0.1);
  border-color: rgba(0, 229, 196, 0.3);
  transform: rotate(-5deg) scale(1.1);
}

/* ── RESPONSIVE BENTO ────────────────────────────────── */
@media (max-width: 1200px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-lg { grid-column: span 2; }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-lg, .bento-md, .bento-sm { grid-column: span 1; }
  .bento-card { padding: 24px !important; }
  .skill-bars-2col { grid-template-columns: 1fr; gap: 20px; }
  .sk-ai { padding: 30px !important; }
}

@media (max-width: 480px) {
}

/* ── AI LOGO ANIMATION ────────────────── */
@keyframes aiLogoBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}
.ai-logo-blink {
  animation: aiLogoBlink 5s ease-in-out infinite;
}

/* Staggered wave across all 12 logos */
.ai-logo-item:nth-child(1)  .ai-logo-blink { animation-delay: 0s; }
.ai-logo-item:nth-child(2)  .ai-logo-blink { animation-delay: 0.23s; }
.ai-logo-item:nth-child(3)  .ai-logo-blink { animation-delay: 0.46s; }
.ai-logo-item:nth-child(4)  .ai-logo-blink { animation-delay: 0.69s; }
.ai-logo-item:nth-child(5)  .ai-logo-blink { animation-delay: 0.92s; }
.ai-logo-item:nth-child(6)  .ai-logo-blink { animation-delay: 1.15s; }
.ai-logo-item:nth-child(7)  .ai-logo-blink { animation-delay: 1.38s; }
.ai-logo-item:nth-child(8)  .ai-logo-blink { animation-delay: 1.61s; }
.ai-logo-item:nth-child(9)  .ai-logo-blink { animation-delay: 1.84s; }
.ai-logo-item:nth-child(10) .ai-logo-blink { animation-delay: 2.07s; }
.ai-logo-item:nth-child(11) .ai-logo-blink { animation-delay: 2.30s; }
.ai-logo-item:nth-child(12) .ai-logo-blink { animation-delay: 2.53s; }

/* Marquee inverted logo - disabled to show original colors */
.m-logo-inv { filter: none; }

/* Marquee inverted logo - disabled to show original colors */
.m-logo-inv { filter: none; }

/* ── SENIOR UI: Advanced Glassmorphism & Logic ────────────────── */
:root {
  --glass-bg: rgba(13, 18, 36, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shine: rgba(255, 255, 255, 0.03);
  --neon-glow: rgba(0, 229, 196, 0.2);
}

.skill-card, .service-card, .project-card, .tl-card, .form-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Hover: Elegant Lift & Glow */
.skill-card:hover, .service-card:hover, .project-card:hover, .tl-card:hover {
  transform: translateY(-10px) scale(1.01);
  background: rgba(18, 24, 48, 0.8) !important;
  border-color: rgba(0, 229, 196, 0.4) !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 
              0 0 40px var(--neon-glow);
}

/* Advanced Border Shine Effect */
.skill-card::after, .service-card::after, .project-card::after, .tl-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, var(--glass-shine) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 200% 200%;
  transition: background-position 0.9s ease;
  pointer-events: none;
}
.skill-card:hover::after, .service-card:hover::after, .project-card:hover::after, .tl-card:hover::after {
  background-position: -50% -50%;
}

/* Senior Typography Hierarchy */
.skill-card-title, .svc-title, .project-title, .tl-title {
  font-family: var(--font-display);
  font-weight: 900; font-size: 23px;
  letter-spacing: -0.6px; color: #fff;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}

.skill-card-sub, .svc-description, .project-desc, .tl-description {
  font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, 0.55);
}

.m-logo { filter: drop-shadow(0 0 2px rgba(255,255,255,0.7)) brightness(1.2) !important; transition: all 0.4s ease; }

/* ================================================================
   SERVICES SECTION
   ================================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  background: radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),
    rgba(0,229,196,0.07), transparent 40%), rgba(8,13,24,0.85);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  position: relative; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              border-color 0.4s, box-shadow 0.4s;
  cursor: default;
  display: flex; flex-direction: column;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0,229,196,0.2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(0,229,196,0.06);
}

.svc-img-banner {
  height: 180px;
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0d1527 0%, #152238 50%, #0a101d 100%);
}
.svc-img-banner img, .project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .svc-img-banner img, .project-card:hover .project-thumb img { transform: scale(1.12); }
.svc-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 15%, rgba(8,13,24,0.95) 100%);
}
.svc-img-badge {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #00f0ff;
  background: rgba(8, 13, 24, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 4px 11px;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.svc-content {
  padding: 24px 20px;
  display: flex; flex-direction: column; flex: 1;
  position: relative;
}
.svc-number {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--font-display);
  font-size: 64px; font-weight: 900;
  color: rgba(255,255,255,0.04);
  line-height: 1; pointer-events: none; user-select: none;
  letter-spacing: -0.04em;
}
.svc-title {
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 700;
  margin-bottom: 12px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--text);
}
.svc-description {
  font-size: 14px; line-height: 1.8;
  color: var(--text2); margin-bottom: 22px;
  letter-spacing: -0.01em; flex: 1;
}
.svc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; margin-bottom: 18px; }
.svc-chip {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent);
  background: rgba(0,229,196,0.08);
  border: 1px solid rgba(0,229,196,0.18);
  padding: 4px 12px; border-radius: 100px;
  letter-spacing: 0.2px; font-weight: 500;
}

/* Service Card Action Link Button */
.svc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #00f0ff;
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.25s ease, transform 0.25s ease;
}
.svc-action-btn svg {
  transition: transform 0.25s ease;
}
.service-card:hover .svc-action-btn {
  color: #ffffff;
  transform: translateX(4px);
}
.service-card:hover .svc-action-btn svg {
  transform: translateX(3px);
}

/* ── CLIENT WORKFLOW PROCESS BANNER ─────────────────── */
.svc-process-banner {
  background: linear-gradient(145deg, rgba(13, 20, 34, 0.9) 0%, rgba(8, 13, 24, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 229, 196, 0.22);
  border-radius: 24px;
  padding: 36px 32px;
  margin-bottom: 48px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.svc-process-banner::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 196, 0.6), rgba(59, 158, 255, 0.6), transparent);
}
.svc-process-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 32px;
}
.svc-process-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.svc-process-heading {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.svc-process-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text2);
}

.svc-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
.svc-step-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px 20px;
  position: relative;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.svc-step-card:hover {
  transform: translateY(-6px);
  background: rgba(0, 229, 196, 0.04);
  border-color: rgba(0, 229, 196, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 196, 0.1);
}
.svc-step-badge {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
}
.svc-step-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.svc-step-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}
.svc-step-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text2);
}

@media (max-width: 1024px) {
  .svc-process-steps { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .svc-process-steps { grid-template-columns: 1fr; gap: 12px; }
  .svc-process-banner { padding: 28px 20px; }
  .svc-process-heading { font-size: 22px; }
}

/* ================================================================
   PROJECTS SECTION
   ================================================================ */
.project-card {
  background: radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),
    rgba(59,158,255,0.07), transparent 40%), var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              border-color 0.4s, box-shadow 0.4s;
  display: flex; flex-direction: column;
}
.project-card:hover {
  transform: translateY(-9px);
  border-color: rgba(59,158,255,0.26);
  box-shadow: 0 28px 64px rgba(0,0,0,0.5), 0 0 48px rgba(59,158,255,0.07);
}

/* Briefly highlighted when arrived at from a Services "Built with this" link */
.project-card.project-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 28px 64px rgba(0,0,0,0.5), 0 0 48px rgba(0,242,254,0.18);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              border-color 0.5s, box-shadow 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .project-card.project-highlight { transition: none; }
}

.project-thumb {
  height: 200px; /* Slightly taller for better detail */
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  flex-shrink: 0;
  background: #050810;
}
.project-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(13, 18, 32, 0.8) 100%);
  z-index: 2;
}

.project-body {
  padding: 18px 20px 22px;
  flex: 1; display: flex; flex-direction: column;
}
.project-type {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--blue);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.9;
}
.project-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  line-height: 1.28; margin-bottom: 10px;
  letter-spacing: -0.015em; color: var(--text);
}
.project-desc {
  font-size: 14px; line-height: 1.78;
  color: var(--text2); margin-bottom: 16px;
  letter-spacing: -0.01em;
  /* No flex:1 here — that made the empty space from equalizing card
     heights land directly under a short description as a dead gap
     before the tech chips. Pushing the gap to sit above the chips
     instead (via margin-top:auto below) keeps title+desc+chips as one
     tight block and puts the footer links at a consistent baseline. */
}
.project-stack {
  display: flex; flex-wrap: wrap;
  gap: 6px; margin-top: auto; margin-bottom: 18px;
}
.project-tech {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(59,158,255,0.9);
  background: rgba(59,158,255,0.08);
  border: 1px solid rgba(59,158,255,0.18);
  padding: 4px 11px; border-radius: 100px;
  font-weight: 500;
}
.project-links {
  display: flex; gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.proj-link {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text2); letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 6px;
  transition: color 0.25s; font-weight: 500;
}
.proj-link svg {
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.3));
}
.proj-link:hover { color: var(--accent); }
.proj-link:hover svg {
  filter: drop-shadow(0 0 8px var(--accent));
}
.proj-link-disabled {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text3); letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 400; cursor: default;
  opacity: 0.6;
  font-style: italic;
}

/* ================================================================
   EXPERIENCE / TIMELINE
   ================================================================ */
.timeline-container {
  max-width: 860px; margin: 0 auto;
  position: relative;
  padding-left: 60px;   /* Space for 40px indicator */
}
.timeline-container::before {
  content: '';
  position: absolute;
  left: 19px;            
  .freelance-cta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 20px;
  }
  /* Centers under the 40px indicator */
  top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,229,196,0.6) 10%,
    rgba(0,229,196,0.6) 90%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(0,229,196,0.25);
}

.tl-entry { position: relative; padding-bottom: 64px; }
.tl-entry:last-child { padding-bottom: 0; }

.tl-indicator {
  position: absolute;
  left: 0px; top: 0px;   
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #0d1425;
  border: 2px solid rgba(0,229,196,0.3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
  box-shadow: 0 0 0 0 transparent;
}
.tl-entry.current .tl-indicator {
  background: rgba(0,229,196,0.1);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 6px rgba(0,229,196,0.08), 0 0 20px rgba(0,229,196,0.4);
}
.tl-entry:hover .tl-indicator {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  transform: scale(1.15) rotate(360deg);
  box-shadow: 0 0 25px var(--accent-glow);
}

.tl-card {
  background: rgba(13, 18, 32, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-entry:hover .tl-card {
  transform: translateX(10px);
  border-color: rgba(0,229,196,0.25);
  background: rgba(13, 18, 32, 0.95);
  box-shadow: 0 20px 48px rgba(0,0,0,0.5), 0 0 30px rgba(0,229,196,0.05);
}
.tl-entry.current .tl-card {
  border-color: rgba(0,229,196,0.2);
  background: radial-gradient(circle at top right, rgba(0,229,196,0.05), transparent 70%), var(--card);
}

.tl-meta {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tl-period {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent); letter-spacing: 0.8px; font-weight: 500;
}
.tl-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent);
  background: rgba(0,229,196,0.08);
  border: 1px solid rgba(0,229,196,0.2);
  padding: 3px 11px; border-radius: 100px;
  letter-spacing: 0.5px; font-weight: 500;
}

.tl-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700; line-height: 1.22;
  margin-bottom: 6px; letter-spacing: -0.02em;
  color: var(--text);
}
.tl-org {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--purple); margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.tl-description {
  font-size: 15px; line-height: 1.82;
  color: var(--text2); max-width: 640px;
  letter-spacing: -0.01em; margin-bottom: 12px;
}
.tl-list {
  list-style: none;
  max-width: 640px;
  display: flex; flex-direction: column; gap: 8px;
}
.tl-list li {
  font-size: 14.5px; line-height: 1.78;
  color: var(--text2);
  padding-left: 18px;
  position: relative;
}
.tl-list li::before {
  content: '▸';
  position: absolute; left: 0;
  color: var(--accent); font-size: 11px; top: 3px;
}

/* ================================================================
   CONTACT SECTION
   ================================================================ */
/* ================================================================
   CONTACT SECTION — Two-column grid layout
   ================================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  align-items: start;
}

/* ── Contact Info Column ── */
.contact-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-headline {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  color: var(--text);
}

.contact-subtext {
  font-size: 15px;
  line-height: 1.84;
  color: var(--text2);
  margin-bottom: 28px;
  max-width: 100%;
}

/* ── Contact Item Row ── */
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  transition: transform 0.25s ease, border-color 0.25s, background 0.25s;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.contact-item:hover {
  transform: translateX(4px);
  border-color: rgba(0,229,196,0.24);
  background: rgba(0,229,196,0.03);
}
/* Two-class specificity beats enhancement layer's single-class .contact-item:hover */
.contact-item.ci-linkedin-item:hover {
  border-color: rgba(0,119,181,0.35) !important;
  background: rgba(0,119,181,0.05) !important;
  transform: translateX(4px);
}
.contact-item.ci-trustpilot-item:hover {
  border-color: rgba(0,182,122,0.35) !important;
  background: rgba(0,182,122,0.05) !important;
  transform: translateX(4px);
}

/* ── Icon box ── */
.ci-icon-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(0,229,196,0.1), rgba(59,158,255,0.06));
  border: 1px solid rgba(0,229,196,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
/* Two-class selector beats the single-class enhancement layer override */
.ci-icon-box.ci-icon-linkedin {
  background: linear-gradient(135deg, rgba(0,119,181,0.16), rgba(0,119,181,0.06)) !important;
  border-color: rgba(0,119,181,0.3) !important;
  color: #0a93d1 !important;
}
.ci-icon-box.ci-icon-trustpilot {
  background: linear-gradient(135deg, rgba(0,182,122,0.16), rgba(0,182,122,0.06)) !important;
  border-color: rgba(0,182,122,0.3) !important;
  color: #00b67a !important;
}

/* Trustpilot 5-star row — mirrors the brand's green star-square mark */
.tp-stars {
  display: inline-flex;
  gap: 3px;
  margin-top: 5px;
}
.tp-star {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: #00b67a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  border-radius: 3px;
  transition: transform 0.25s ease;
}
.ci-trustpilot-item:hover .tp-star {
  transform: scale(1.12);
}
.ci-trustpilot-item:hover .tp-star:nth-child(1) { transition-delay: 0s; }
.ci-trustpilot-item:hover .tp-star:nth-child(2) { transition-delay: 0.03s; }
.ci-trustpilot-item:hover .tp-star:nth-child(3) { transition-delay: 0.06s; }
.ci-trustpilot-item:hover .tp-star:nth-child(4) { transition-delay: 0.09s; }
.ci-trustpilot-item:hover .tp-star:nth-child(5) { transition-delay: 0.12s; }

.ci-icon-box svg {
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.3));
}
.contact-item:hover .ci-icon-box svg {
  filter: drop-shadow(0 0 8px currentColor);
}
/* ── Contact meta (label + value) ── */
.ci-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ci-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  display: block;
}
.ci-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: block;
  min-width: 0;
}

/* ================================================================
   TRUSTPILOT / TRUST SECTION
   ================================================================ */
.trust-card {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 40px;
  background: rgba(8,13,24,0.88);
  border: 1px solid rgba(0,182,122,0.22);
  border-radius: var(--r-xl);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s, box-shadow 0.35s;
}
.trust-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(0,182,122,0.12), transparent 55%);
  pointer-events: none;
}
.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,182,122,0.45);
  box-shadow: 0 20px 60px rgba(0,182,122,0.18);
}

.trust-card-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(0,182,122,0.18), rgba(0,182,122,0.06));
  border: 1px solid rgba(0,182,122,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00b67a;
  position: relative;
  z-index: 1;
}

.trust-card-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.trust-card-brand {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00b67a;
  margin-bottom: 6px;
}
.trust-card-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.trust-card-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text2);
  max-width: 480px;
  margin-bottom: 14px;
}

.trust-stars-lg { display: inline-flex; gap: 4px; }
.trust-star {
  width: 22px;
  height: 22px;
  background: #00b67a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 4px;
  animation: trust-star-pulse 2.4s ease-in-out infinite;
}
.trust-star:nth-child(1) { animation-delay: 0s; }
.trust-star:nth-child(2) { animation-delay: 0.1s; }
.trust-star:nth-child(3) { animation-delay: 0.2s; }
.trust-star:nth-child(4) { animation-delay: 0.3s; }
.trust-star:nth-child(5) { animation-delay: 0.4s; }

@keyframes trust-star-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,182,122,0.5); }
  50%      { box-shadow: 0 0 10px 2px rgba(0,182,122,0.5); }
}

.trust-card-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #00b67a 0%, #00d68f 100%);
  color: #04140d;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(0,182,122,0.28);
  transition: transform 0.3s, box-shadow 0.3s, gap 0.3s;
  position: relative;
  z-index: 1;
}
.trust-card:hover .trust-card-cta {
  transform: translateX(2px);
  box-shadow: 0 12px 36px rgba(0,182,122,0.4);
  gap: 12px;
}

@media (max-width: 720px) {
  .trust-card { flex-direction: column; text-align: center; padding: 28px 24px; }
  .trust-card-desc { margin-left: auto; margin-right: auto; }
  .trust-stars-lg { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .trust-star { animation: none; }
}

/* ── Social links row ── */
.social-links {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.social-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, color 0.25s;
  background: transparent;
  text-decoration: none;
  color: var(--text2);
  flex-shrink: 0;
}
.social-btn svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.3));
}
.social-btn:hover svg {
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
}
.social-btn-linkedin {
  color: var(--text2);
}
.social-btn-linkedin:hover {
  border-color: #0077b5 !important;
  background: rgba(0,119,181,0.12) !important;
  color: #0a93d1 !important;
}
.social-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-glow);
}

/* ── Form Card ── */
.form-card {
  background: rgba(8,13,24,0.88);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text3);
  opacity: 1;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(0,229,196,0.55);
  background: rgba(0,229,196,0.03);
  box-shadow: 0 0 0 3px rgba(0,229,196,0.09);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-group select {
  cursor: pointer;
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364809a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form-group select option {
  background: #080d18;
  color: var(--text);
  font-size: 14px;
}

/* Placeholder option (first disabled option) */
.form-group select option[value=""] {
  color: var(--text3);
}

.form-submit {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  color: #000;
  border: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: var(--r-md);
  transition: all 0.3s;
  cursor: pointer;
  margin-top: 4px;
}
.form-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,229,196,0.32);
  filter: brightness(1.1);
}
.form-submit:active { transform: translateY(-1px); }

/* Form status message */
.form-status {
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  line-height: 1.5;
}
.form-status.success {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.28);
  color: #4ade80;
}
.form-status.error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.28);
  color: #f87171;
}

/* Required asterisk */
.req { color: var(--red); margin-left: 2px; }

/* Input error highlight */
.input-error {
  border-color: rgba(239,68,68,0.65) !important;
  background: rgba(239,68,68,0.05) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.08) !important;
}

/* CLI neofetch pre block */
.neo-pre {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text2);
  margin: 0;
  white-space: pre;
}

/* ================================================================
   MAIN FOOTER — Clean, Responsive 4-Column Grid
   ================================================================ */
.main-footer {
  position: relative;
  z-index: 20; /* higher to stay above canvas/reveal */
  background: #02040a;
  color: #fff;
  padding: 40px 0 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 0;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* prevents flex items from overflowing grid */
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #fff;
}

.footer-logo .brace { color: var(--accent); }

.footer-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
  max-width: 300px;
}

.footer-social-links {
  display: flex;
  gap: 12px;
}

.footer-social-links a {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.footer-social-links a:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
}

.footer-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 24px;
  color: var(--accent);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 12px;
}

.footer-list a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-list a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer-contact-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-contact-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.footer-contact-item a:hover {
  color: #fff;
}

.footer-linkedin {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  display: inline-block;
}

.f-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
  display: flex;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.3));
}
.footer-contact-item:hover .f-icon {
  filter: drop-shadow(0 0 8px var(--accent));
}

.footer-bottom-bar {
  background: #010206;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
}

/* --- Responsive Breakpoints --- */

@media (max-width: 1440px) {
  .footer-container { padding: 0 40px; }
  .footer-bottom-inner { padding: 0 40px; }
}

@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
}

@media (max-width: 768px) {
  .main-footer { padding-top: 60px; }
  .footer-container {
    padding: 0 24px 40px;
    gap: 40px;
  }
  .footer-bottom-inner {
    padding: 0 24px;
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-tagline { max-width: 100%; }
}

@media (max-width: 360px) {
  .footer-container { padding: 0 16px 36px; }
  .footer-logo { font-size: 20px; }
}

/* ================================================================
   REVEAL ANIMATIONS
   ================================================================ */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */
@keyframes statusBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70%       { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
@keyframes gradShift {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.05); }
}
@keyframes chipFloat1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes chipFloat2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(10px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ================================================================
   RESPONSIVE — LARGE TABLET / SMALL DESKTOP  ≤ 1200px
   Side padding: 60px — matches nav + hero + stats + footer
   ================================================================ */
@media (max-width: 1200px) {
  :root { --section-pad: 60px 60px; }
  nav        { padding: 0 60px; }
  .hero      { padding: 0 60px; padding-top: calc(var(--nav-h) + 24px);
               grid-template-columns: 1fr 340px; gap: 48px; }
  .stats-bar { padding: 20px 60px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .contact-layout { gap: 48px; }
}

/* (600px breakpoint moved after 480px — see end of responsive section) */

/* ================================================================
   RESPONSIVE — TABLET  ≤ 1024px
   Side padding: 48px — single-column hero, visual on top
   ================================================================ */
@media (max-width: 1024px) {
  /* Hide fancy cursor, restore auto cursor for touch */
  #cursor, #cursor-ring { display: none !important; }
  body, button, a, input, select, textarea { cursor: auto !important; }
  /* Hide connector lines on tablet range to prevent overflow */
  @media (min-width: 769px) {
    .fc-top::before, .fc-top::after,
    .fc-bottom::before, .fc-bottom::after,
    .fc-mid::before, .fc-mid::after {
      display: none !important;
    }
  }

  :root { --section-pad: 50px 48px; }
  nav { padding: 0 48px; }

  /* Hero: single column, visual above text */
  .hero {
    grid-template-columns: 1fr;
    padding: 0 48px;
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 40px;
    text-align: center;
    min-height: auto;
    gap: 40px;
  }
  .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-tag { 
    order: 1; 
    justify-content: center;
    background: rgba(0, 242, 254, 0.05);
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(0, 242, 254, 0.15);
    margin-bottom: 24px;
  }
  .hero-greeting { display: none !important; }
  .hero-name { order: 3; margin-bottom: 20px; }
  .hero-roles { order: 4; justify-content: center; margin-bottom: 20px; }
  .hero-bio { order: 5; margin: 0 auto 28px; max-width: 580px; text-align: center; }
  .typing-box { order: 6; width: 100%; max-width: 560px; margin-bottom: 28px; }
  .hero-actions { order: 7; justify-content: center; }

  .hero-visual  { height: 390px; order: -1; overflow: visible; }

  /* Orbit rings: scaled to fit within 390px hero-visual */
  .orbit-1 { width: 350px; height: 350px; }
  .orbit-2 { width: 275px; height: 275px; }
  .orbit-3 { width: 200px; height: 200px; }

  /* Avatar: proportionally smaller for single-col centered layout */
  .avatar-wrap  { max-width: 280px; width: 100%; height: auto !important; aspect-ratio: 3 / 4 !important; }
  .avatar-emoji { font-size: 80px; }

  /* Float chips — tighter positions so they don't overflow */
  .fc-top    { top: 16px; left: -64px; }
  .fc-bottom { bottom: 16px; left: auto; right: -64px; }
  .fc-mid    { top: 120px; right: -78px; }

  /* Stats bar — wrap marquee to new row */
  .stats-bar   { padding: 28px 48px; flex-wrap: wrap; gap: 20px; }
  .stat-item   { padding: 0 20px; border-right: none; }
  .marquee-wrap {
    flex: 0 0 100%;
    padding-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border2);
  }

  /* Skills: flatten to single column and reorder */
  .skills-columns-row { flex-direction: column; }
  .skills-column      { display: contents; }
  .sk-ml     { order: 1; }
  .sk-mobile { order: 2; }
  .sk-web    { order: 3; }
  .sk-tools  { order: 4; }
  .sk-seo    { order: 5; }
  .sk-design { order: 6; }
  .skill-bars-2col { grid-template-columns: 1fr 1fr; }

  /* Grids */
  .projects-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-layout   { grid-template-columns: 1fr; gap: 40px; }
  .contact-subtext  { max-width: 100%; }
  .form-row         { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   RESPONSIVE — MOBILE  ≤ 768px
   Side padding: 24px — hamburger menu, all sections full width
   ================================================================ */
/* ================================================================
   RESPONSIVE — MOBILE  ≤ 768px
   ================================================================ */
@media (max-width: 768px) {
  :root { --section-pad: 40px 24px; }

  /* Nav */
  nav { padding: 0 16px; height: 60px; justify-content: space-between; }
  .nav-logo .name { font-size: 18px; }
  .nav-links { display: none; }
  .nav-cta { 
    display: flex; 
    padding: 8px 14px; 
    font-size: 11px; 
    margin-left: auto;
    margin-right: 12px;
    background: var(--accent);
    color: #000;
    font-weight: 800;
    border-radius: 100px;
  }
  .hamburger { display: flex; }

  /* Mobile slide-down menu */
  .mobile-menu {
    position: fixed; top: 60px; left: 0; right: 0;
    background: rgba(4,7,15,0.98);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-bottom: 1px solid var(--border2);
    padding: 20px 24px;
    display: none; flex-direction: column; gap: 4px;
    z-index: 999;
  }
  .mobile-menu.open {
    display: flex;
    animation: mobileMenuIn 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  @keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mobile-menu a {
    font-family: var(--font-mono); font-size: 14px;
    color: #fff;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 13px 16px; border-radius: var(--r-md);
    border: 1px solid transparent; transition: all 0.3s; display: block;
    font-weight: 700;
  }
  .mobile-menu a:hover {
    border-color: var(--border); background: var(--accent-dim); color: var(--accent);
  }
  .mobile-hire {
    margin-top: 8px; padding: 14px 16px;
    background: var(--accent); color: #000;
    font-family: var(--font-display); font-size: 14px; font-weight: 800;
    border-radius: var(--r-md); text-align: center;
  }

  /* Hero — single-column flex on mobile so we can reorder children */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    padding-top: calc(var(--nav-h) + 16px);
    padding-bottom: 52px;
    gap: 0;
    text-align: center;
    min-height: unset;
  }

  /* Hero title block: the DevOrbit sphere is a fixed, full-viewport
     background layer (js/diamond-bg.js), so it always renders centered
     in whatever the browser is currently showing. Giving this block the
     same height as that first viewport and centering its content with
     flex makes the title land exactly where the sphere is, on any phone,
     without touching desktop (this rule only exists in this ≤768px
     query — .hero-title-block is `display:contents` everywhere else). */
  /* ================================================================
     PROFESSIONAL MOBILE HERO LAYOUT — Profile Photo at very top
     ================================================================ */
  .hero-visual {
    height: 360px;
    width: 260px;
    order: -1;
    margin: 0 auto 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 30; /* ensure avatar container sits above 3D sphere */
    flex-shrink: 0;
  }

  .hero-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    order: 2;
    width: 100%;
    margin-bottom: 24px;
    padding: 0 16px;
    transform: translateZ(0);
    will-change: transform;
  }
  .hero-title-block .hero-tag { 
    margin-bottom: 14px; 
    justify-content: center;
    text-align: center;
  }
  .hero-title-block .hero-name { 
    margin-bottom: 0;
    text-align: center;
    align-items: center;
  }

  .hero-greeting { font-size: 13px; text-align: center; order: 3; }
  .hero-roles    { justify-content: center; gap: 6px; order: 4; }
  .typing-box    { order: 5; }
  .hero-bio      { font-size: 15px; margin: 0 auto 28px; max-width: 100%; order: 6; }
  .hero-actions  { justify-content: center; flex-wrap: wrap; order: 7; }

  .orbit-1  { width: 340px; height: 340px; }
  .orbit-2  { width: 270px; height: 270px; }
  .orbit-3  { width: 200px; height: 200px; }
  
  /* Professional Mobile Avatar Card — fixed pixel dimensions so it always renders */
  .avatar-wrap { 
    width: 220px !important;
    height: 293px !important;
    max-width: unset !important;
    aspect-ratio: unset !important;
    position: relative;
    margin: 0 auto;
    display: block !important;
    border-radius: 20px !important;
    overflow: visible !important;
    box-shadow: 0 20px 60px rgba(0, 242, 254, 0.25), 0 0 40px rgba(0, 0, 0, 0.9) !important;
    border: 1.5px solid rgba(0, 242, 254, 0.5) !important;
    z-index: 40; /* bring avatar above other layers */
  }
  .avatar-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #05080f !important;
  }
  .avatar-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 20px !important;
  }
  
  .avatar-emoji { display: none !important; }
  .freelance-cta {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    z-index: 45;
  }
  
  /* Hide messy connector lines on mobile for clean UI */
  .fc-top::before, .fc-top::after,
  .fc-bottom::before, .fc-bottom::after,
  .fc-mid::before, .fc-mid::after {
    display: none !important;
  }
  
  /* Position Floating Status Chips neatly inside screen bounds */
  .fc-top {
    top: -14px !important;
    left: -10px !important;
    right: auto !important;
    bottom: auto !important;
    transform: scale(0.82) !important;
    transform-origin: top left !important;
    animation: sysFloatTop 3s ease-in-out infinite !important;
    z-index: 12 !important;
  }
  .fc-mid {
    top: -14px !important;
    right: -10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: scale(0.82) !important;
    transform-origin: top right !important;
    animation: sysFloatMid 3.2s ease-in-out infinite !important;
    display: flex !important;
    z-index: 12 !important;
  }
  .fc-bottom {
    bottom: -34px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) scale(0.85) !important;
    transform-origin: bottom center !important;
    animation: sysFloatBottom 3.5s ease-in-out infinite !important;
    z-index: 12 !important;
  }

  /* Hide the interactive typing/coding box on mobile and tablet */
  .typing-box {
    display: none !important;
  }
  
  /* Center specialty text tags on mobile/tablet */
  .hero-roles {
    order: 4 !important;
    justify-content: center !important;
    margin-bottom: 20px;
    width: 100%;
  }

  /* Biography and About Me heading orders to ensure correct mobile placement */
  .hero-about-header {
    order: 5 !important;
  }

  /* Polish hero bio and actions spacing */
  .hero-bio {
    order: 6 !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
    margin: 0 auto 20px !important;
    max-width: 100% !important;
    text-align: center !important;
    color: var(--text2) !important;
  }
  
  .hero-actions {
    order: 7 !important;
    margin-top: 12px !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Stats bar — 3-col grid + full-width marquee row */
  .stats-bar {
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
  }
  .stat-item   { padding: 0; border-right: none; }
  .stat-num    { font-size: 26px; }
  .stat-label  { font-size: 9.5px; letter-spacing: 1px; margin-top: 4px; }
  .marquee-wrap {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border2);
    overflow: hidden;
  }

  /* Sections */
  .section-header { margin-bottom: 36px; }
  .sec-title { font-size: clamp(26px, 7vw, 36px); }
  .sec-sub   { font-size: 14.5px; }

  /* Skills */
  .skill-bars-2col { grid-template-columns: 1fr; }

  /* Services — single column */
  .services-grid { grid-template-columns: 1fr; }

  /* Projects — single column */
  .projects-grid { grid-template-columns: 1fr; }

  /* Timeline */
  .timeline-container { padding-left: 28px; }
  .tl-indicator  { left: -34px; }
  .tl-title      { font-size: 20px; }
  .tl-description { font-size: 14px; }

  /* Contact */
  .contact-layout   { gap: 32px; }
  .contact-headline { font-size: clamp(20px, 6vw, 26px); }
  .contact-subtext  { font-size: 15px; margin-bottom: 22px; }
  .contact-item     { padding: 11px 14px; gap: 12px; }
  .ci-icon-box      { width: 40px; height: 40px; }
  .ci-label         { font-size: 9.5px; }
  .ci-value         { font-size: 13.5px; }
  .social-links     { margin-top: 20px; gap: 8px; }
  .social-btn       { width: 42px; height: 42px; font-size: 18px; }
  .form-card        { padding: 28px 22px; }
  .form-row         { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 480px) {
  :root { --section-pad: 30px 18px; }

  .hero {
    padding: 0 18px;
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 25px;
    gap: 26px;
  }
  
  .avatar-wrap { 
    max-width: 165px !important; 
    display: block !important; /* WebKit/Safari fix: disable flex centering on absolute child chips */
  }
  .hero-visual { height: 260px !important; }
  .fc-top {
    top: -10px !important;
    left: -8px !important;
    right: auto !important;
    bottom: auto !important;
    transform: scale(0.72) !important;
    transform-origin: top left !important;
  }
  .fc-bottom {
    bottom: -26px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) scale(0.72) !important;
    transform-origin: bottom center !important;
  }
  .fc-mid {
    top: -10px !important;
    right: -8px !important;
    left: auto !important;
    bottom: auto !important;
    transform: scale(0.72) !important;
    transform-origin: top right !important;
  }
  
  /* High-visibility glowing dotted lines on narrow mobile (expanded to 44px to bridge the 20px gap perfectly) */
  .fc-top::after,
  .fc-bottom::after {
    width: 44px !important;
    right: -44px !important;
  }
  .fc-mid::after {
    width: 44px !important;
    left: -44px !important;
  }
  .fc-top::before,
  .fc-bottom::before {
    right: -47px !important;
  }
  .fc-mid::before {
    left: -47px !important;
  }
}

/* ================================================================
   FIXES & ENHANCEMENTS v4.0
   All-screen alignment, new hero name design, avatar fix,
   mobile-menu bug fix, proper responsive breakpoints
   ================================================================ */

/* ── CRITICAL: Mobile menu hidden on desktop by default ───────── */
.mobile-menu { display: none; }

/* ── Hero: correct padding handled in global styles ───────── */

/* ================================================================
   HERO NAME — SPLIT DISPLAY HEADING  (v6.0)
   "AI Full Stack"  → Line 1 — massive white, Syne 900
   "Developer."     → Line 2 — same size, animated teal-blue-purple
   Sizes carefully clamped so they never overflow at any viewport.
   ================================================================ */
.hero-name {
  font-family: var(--font-display);
  font-size: unset;
  line-height: unset;
  letter-spacing: unset;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* LINE 1 — solid white, full-weight display text */
.hero-name .line-white {
  display: block;
  font-family: var(--font-display);
  /* Desktop: 5vw scales with viewport; 78px hard cap prevents overflow */
  font-size: clamp(40px, 5vw, 78px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  text-transform: none;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  align-self: unset;
  backdrop-filter: none;
  white-space: nowrap;
}
.hero-name .line-white::before { display: none; }

/* LINE 2 — animated teal → blue → purple gradient */
.hero-name .line-grad {
  display: block;
  font-size: clamp(40px, 5vw, 78px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.04em;
  background: linear-gradient(110deg,
    var(--accent) 0%,
    var(--blue)   46%,
    var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradShift 6s ease infinite;
  margin-top: 8px;
}

/* ── 1200px: slightly smaller so it fits the narrow text column ── */
@media (max-width: 1200px) {
  .hero-name .line-white,
  .hero-name .line-grad {
    font-size: clamp(36px, 4.4vw, 62px);
    white-space: normal;
  }
}

/* ── 1024px: single-column → centred, more horizontal room ─────── */
@media (max-width: 1024px) {
  .hero-name { margin-bottom: 24px; }
  .hero-name .line-white,
  .hero-name .line-grad {
    font-size: clamp(38px, 7vw, 64px);
    text-align: center;
    white-space: normal;
  }
  .avatar-wrap {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    width: 218px !important;
  }
}

/* ── 768px: mobile phones ───────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-name { gap: 0; margin-bottom: 20px; }
  .hero-name .line-white,
  .hero-name .line-grad {
    font-size: clamp(34px, 9.5vw, 56px);
    line-height: 0.96;
  }
  .hero-name .line-grad { margin-top: 4px; }
  .avatar-wrap {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-width: 200px !important;
    width: 100% !important;
  }
}

/* ── 480px: small phones ────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-name { gap: 0; margin-bottom: 16px; }
  .hero-name .line-white,
  .hero-name .line-grad {
    font-size: clamp(28px, 8.5vw, 44px);
    line-height: 0.97;
    letter-spacing: -0.03em;
  }
  .hero-name .line-grad { margin-top: 3px; }
  .avatar-wrap {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-width: 160px !important;
    width: 100% !important;
  }
}

/* ================================================================
   AVATAR STATUS BADGE (replaces developer hint text)
   ================================================================ */
.avatar-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 100px;
  padding: 5px 14px;
  margin-top: 4px;
}
.av-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: statusBlink 2s ease-in-out infinite;
  flex-shrink: 0;
}
.av-status {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ================================================================
   GENERAL OVERFLOW & ALIGNMENT FIXES
   ================================================================ */
html, body { overflow-x: hidden; }

/* Float chip: tighter on 1100px when not yet single-column */
@media (max-width: 1100px) {
  .fc-top    { left: -90px; }
  .fc-bottom { left: -70px; }
  .fc-mid    { right: -90px; }
}

/* Footer handled in its own responsive block above */

/* Stats bar — handled in 768px breakpoint above */

/* Contact + timeline responsive — consolidated in main breakpoints above */

/* ── Skills section fix: prevent card overflow ──────────────── */
.skill-card { min-width: 0; }

/* ================================================================
   BELOW-HERO SECTIONS — RESPONSIVE ALIGNMENT & SEQUENCE
   ================================================================ */

/* Large tablet (≤1200px) */
@media (max-width: 1200px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .timeline-container { max-width: 100%; }
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .section-header { margin-bottom: 40px; }
  .tl-entry { padding-bottom: 44px; }
  .timeline-container { padding-left: 56px; }
  .tl-indicator { left: 0px; width: 36px; height: 36px; }
  .timeline-container::before { left: 17px; }
  .tl-card { padding: 28px; }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  /* Services: single column */
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc-content  { padding: 20px 16px; }
  .svc-title     { font-size: 16px; margin-bottom: 8px; }
  .svc-description { font-size: 13.5px; margin-bottom: 16px; }
  .svc-number    { font-size: 48px; top: 8px; right: 10px; }

  /* Projects: single column */
  .projects-grid  { grid-template-columns: 1fr; gap: 16px; }
  .project-thumb  { height: 160px; }
  .project-body   { padding: 16px 18px 20px; }
  .project-title  { font-size: 17px; margin-bottom: 8px; }
  .project-desc   { font-size: 13.5px; margin-bottom: 12px; }
  .project-links  { padding-top: 10px; }

  /* Timeline */
  .timeline-container { padding-left: 48px; }
  .tl-indicator   { left: 0px; width: 32px; height: 32px; }
  .timeline-container::before { left: 15px; }
  .tl-card { padding: 20px; }
  .tl-title       { font-size: 18px; margin-bottom: 4px; }
  .tl-meta        { margin-bottom: 8px; }
  .tl-org         { margin-bottom: 8px; font-size: 12px; }
  .tl-description { font-size: 14px; line-height: 1.78; margin-bottom: 8px; }
  .tl-entry       { padding-bottom: 32px; }

  /* Section headers */
  .section-header { margin-bottom: 24px; }
  .sec-title      { font-size: clamp(24px, 7vw, 34px); margin-bottom: 10px; }
  .sec-sub        { font-size: 14.5px; }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  /* Services */
  .services-grid   { gap: 12px; }
  .svc-content    { padding: 18px 14px; }
  .svc-title       { font-size: 15.5px; }
  .svc-description { font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
  .svc-chip        { font-size: 9.5px; padding: 3px 8px; }

  /* Projects */
  .projects-grid   { gap: 12px; }
  .project-thumb   { height: 140px; }
  .project-body    { padding: 14px 16px 18px; }
  .project-title   { font-size: 16px; margin-bottom: 6px; }
  .project-desc    { font-size: 13px; margin-bottom: 10px; }
  .project-links   { gap: 12px; padding-top: 8px; }

  /* Timeline */
  .timeline-container { padding-left: 42px; }
  .tl-indicator   { left: 0px; width: 28px; height: 28px; top: 0px; }
  .timeline-container::before { left: 13px; }
  .tl-card { padding: 16px; }
  .tl-title       { font-size: 16.5px; margin-bottom: 2px; }
  .tl-meta        { gap: 6px; margin-bottom: 6px; }
  .tl-description { font-size: 13px; margin-bottom: 6px; }
  .tl-meta .tl-tag { font-size: 9px; padding: 2px 8px; }
  .tl-entry       { padding-bottom: 24px; }

  /* Section headers */
  .section-header { margin-bottom: 20px; }
  .sec-title      { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 8px; }
  .sec-sub        { font-size: 14px; line-height: 1.6; }
}

/* Very small (≤400px) — merged into one block */
@media (max-width: 400px) {
  .svc-chips       { gap: 4px; }
  .svc-chip        { font-size: 9.5px; padding: 3px 8px; }
  .project-stack   { gap: 4px; }
  .project-tech    { font-size: 9.5px; padding: 3px 8px; }

  .form-card  { padding: 18px 12px; }
  .form-row   { grid-template-columns: 1fr; }
  .form-group input,
  .form-group textarea,
  .form-group select { font-size: 13.5px; padding: 11px 12px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline,
  .hero-actions .btn-resume { width: 100%; justify-content: center; }

  /* Contact — 400px */
  .contact-item     { padding: 10px 12px; gap: 10px; }
  .ci-icon-box      { width: 36px; height: 36px; }
  .ci-value         { font-size: 12.5px; }
  .social-btn       { width: 38px; height: 38px; font-size: 16px; }
}

/* ================================================================
   RESPONSIVE — 600px  (between 480px and 768px, placed AFTER both)
   ================================================================ */
@media (min-width: 481px) and (max-width: 600px) {
  :root { --section-pad: 35px 20px; }
  nav        { padding: 0 20px; height: 60px; }
  .hero      { padding: 0 20px; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 35px; gap: 28px; }
  .stats-bar { padding: 20px; }
  footer     { padding: 0 20px; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-row  { grid-template-columns: 1fr; }
  .contact-layout { gap: 30px; }
}

/* ================================================================
   RESPONSIVE — 360px  (very small phones, placed LAST)
   ================================================================ */
@media (max-width: 360px) {
  :root { --section-pad: 25px 14px; }
  nav        { padding: 0 14px; }
  .hero      { padding: 0 14px; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 25px; }
  .stats-bar { padding: 14px; }
  footer     { padding: 0 14px; }
  .form-card { padding: 18px 14px; }
  .skill-card { padding: 18px 14px; } .svc-content { padding: 18px 14px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline,
  .hero-actions .btn-resume { width: 100%; justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   VISUAL ENHANCEMENT LAYER — v7.0
   Every section polished: orbs · glass · gradients · micro-fx
   ══════════════════════════════════════════════════════════════ */

/* ── 1. HERO: background radial orb glows ─────────────────────── */
.hero { 
  position: relative; 
  overflow: hidden; 
  padding-top: calc(var(--nav-h) + 60px); 
}

.hero::before {
  content: '';
  position: absolute;
  top: 10%; left: -12%;
  width: 65%; height: 80%;
  background: radial-gradient(ellipse at 30% 40%,
    rgba(0,229,196,0.075) 0%,
    rgba(59,158,255,0.04) 40%,
    transparent 68%);
  pointer-events: none; z-index: 0;
  animation: orbFloat 9s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0%; right: 0%;
  width: 50%; height: 70%;
  background: radial-gradient(ellipse at 65% 65%,
    rgba(139,92,246,0.08) 0%,
    rgba(59,158,255,0.04) 40%,
    transparent 68%);
  pointer-events: none; z-index: 0;
  animation: orbFloat 12s ease-in-out infinite 3s;
}
@keyframes orbFloat {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.06); }
}

/* ── 2. HERO TEXT: subtle top glow behind heading ─────────────── */
.hero-text { position: relative; z-index: 1; }

/* ── 3. HERO TAG: gradient bar ────────────────────────────────── */
.hero-tag-bar {
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  border-radius: 2px;
}
.hero-tag-text { font-size: 11px; letter-spacing: 2px; font-weight: 500; }

/* ── 4. NAV: gradient bottom border + better glass ───────────── */
nav {
  border-bottom: none;
  background: rgba(2,4,10,0.72);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
}
nav.scrolled { background: rgba(2,4,10,0.96); }
nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,196,0.22) 25%,
    rgba(59,158,255,0.18) 55%,
    rgba(139,92,246,0.14) 80%,
    transparent 100%);
}

/* Status Bar Responsiveness */
@media (max-width: 768px) {
  .sys-hide-mobile {
    display: none !important;
  }
}

/* ── 6. SECTION EYEBROW: pill badge with animated dot ────────── */
.sec-eyebrow {
  display: inline-flex; align-items: center;
  gap: 8px;
  background: rgba(0,229,196,0.07);
  border: 1px solid rgba(0,229,196,0.18);
  padding: 5px 14px 5px 10px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.sec-eyebrow::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0,229,196,0.9), 0 0 18px rgba(0,229,196,0.4);
  animation: statusBlink 2s ease-in-out infinite;
  flex-shrink: 0;
}
.sec-eyebrow-bar  { display: none; }
.sec-eyebrow-text { font-size: 10.5px; letter-spacing: 2px; }

/* ── 7. SECTION ALT-BG: richer separation ────────────────────── */
/* Lowered from 0.82 — the neural background (js/neural-bg.js) should read
   through every section, not just the hero; text contrast checked against this. */
.section.alt-bg {
  background: rgba(4,7,15,0.62);
  border-top: 1px solid rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* ── 8. SECTION HEADER: gradient underline ────────────────────── */
.sec-title {
  position: relative;
  padding-bottom: 2px;
}
.section-header { margin-bottom: 56px; }

/* ── 9. STATS BAR: darker glass + gradient numbers ───────────── */
.stats-bar {
  background: rgba(2,5,12,0.9);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.035);
}
.stat-num {
  background: linear-gradient(120deg, var(--accent) 0%, var(--blue) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 40px;
}
.stat-label { color: var(--text2); letter-spacing: 1.5px; font-size: 10.5px; }

/* ── 10. BUTTONS: shine sweep + glow shadows ─────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #00c8ae 100%);
  box-shadow: 0 4px 20px rgba(0,229,196,0.22), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}
.btn-primary:hover::after { left: 140%; }
.btn-primary:hover {
  box-shadow: 0 8px 36px rgba(0,229,196,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-outline {
  border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}
.btn-outline:hover {
  border-color: var(--accent);
  background: rgba(0,229,196,0.07);
  box-shadow: 0 0 22px rgba(0,229,196,0.12), inset 0 0 16px rgba(0,229,196,0.04);
}

/* ── 11. SKILL CARDS: premium glass morphism ─────────────────── */
.skill-card {
  background: linear-gradient(145deg,
    rgba(15,21,40,0.93) 0%,
    rgba(10,14,28,0.97) 100%);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 32px rgba(0,0,0,0.32);
}
.skill-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 38%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 12%, transparent),
    0 0 48px color-mix(in srgb, var(--card-accent) 8%, transparent);
}
.skill-card-title {
  font-size: 16.5px; letter-spacing: -0.015em;
  color: var(--text);
}

/* ── 12. PROGRESS BARS: thicker + glowing tip dot ───────────── */
.skill-track {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 100px;
  overflow: visible;
  position: relative;
}
.skill-fill {
  position: relative;
  border-radius: 100px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--card-accent) 40%, transparent);
}
.skill-fill::after {
  content: '';
  position: absolute;
  top: 50%; right: -1px;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18),
              0 0 12px rgba(255,255,255,0.7);
  opacity: 0;
  transition: opacity 0.3s 2s;
}
.reveal.visible .skill-fill::after { opacity: 1; }

/* ── 13. SERVICE CARDS: colored icons + animated icon on hover ─── */
.svc-icon-wrap {
  width: 56px; height: 56px; font-size: 26px;
  border-radius: var(--r-md);
  margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s;
  /* MAXIMUM CLARITY visibility helper */
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.4));
}
.service-card:hover .svc-icon-wrap {
  transform: scale(1.14) rotate(-6deg);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.5));
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.service-card:nth-child(1) .svc-icon-wrap {
  background: linear-gradient(135deg, rgba(0,229,196,0.14), rgba(59,158,255,0.07));
  border-color: rgba(0,229,196,0.25);
}
.service-card:nth-child(2) .svc-icon-wrap {
  background: linear-gradient(135deg, rgba(59,158,255,0.14), rgba(139,92,246,0.07));
  border-color: rgba(59,158,255,0.25);
}
.service-card:nth-child(3) .svc-icon-wrap {
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(239,68,68,0.07));
  border-color: rgba(139,92,246,0.25);
}
.service-card:nth-child(4) .svc-icon-wrap {
  background: linear-gradient(135deg, rgba(245,200,66,0.14), rgba(249,115,22,0.07));
  border-color: rgba(245,200,66,0.25);
}
/* ── 15. TIMELINE: pulse on active + line glow ───────────────── */
.tl-entry.current .tl-indicator {
  animation: tl-pulse 2.4s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,196,0); }
  50%      { box-shadow: 0 0 0 10px rgba(0,229,196,0.07); }
}
.timeline-container::before {
  background: linear-gradient(to bottom,
    transparent,
    rgba(0,229,196,0.5) 8%,
    rgba(0,229,196,0.4) 92%,
    transparent);
}
.tl-title { letter-spacing: -0.02em; }

/* ── 16. CONTACT: slide-in hover + gradient icons ────────────── */
.contact-item {
  transition: transform 0.25s ease, border-color 0.25s, background 0.25s;
}
/* Default (cyan) hover — does NOT apply when .ci-linkedin-item overrides */
.contact-item:hover {
  transform: translateX(4px);
  border-color: rgba(0,229,196,0.22);
  background: rgba(0,229,196,0.03);
}
/* Default icon box teal gradient */
.ci-icon-box {
  background: linear-gradient(135deg, rgba(0,229,196,0.1), rgba(59,158,255,0.06));
  border-color: rgba(0,229,196,0.2);
  color: var(--accent);
}
/* LinkedIn icon box — higher specificity wins over the rule above */
.ci-icon-box.ci-icon-linkedin {
  background: linear-gradient(135deg, rgba(0,119,181,0.16), rgba(0,119,181,0.06)) !important;
  border-color: rgba(0,119,181,0.3) !important;
  color: #0a93d1 !important;
}
/* Trustpilot icon box — higher specificity wins over the rule above */
.ci-icon-box.ci-icon-trustpilot {
  background: linear-gradient(135deg, rgba(0,182,122,0.16), rgba(0,182,122,0.06)) !important;
  border-color: rgba(0,182,122,0.3) !important;
  color: #00b67a !important;
}
/* Default (cyan) hover must not apply once the Trustpilot card overrides it */
.contact-item.ci-trustpilot-item:hover {
  border-color: rgba(0,182,122,0.35) !important;
  background: rgba(0,182,122,0.05) !important;
}
.contact-headline { letter-spacing: -0.025em; }

/* ── 17. FORM CARD: glass + gradient top accent line ─────────── */
.form-card {
  background: linear-gradient(160deg,
    rgba(10,16,30,0.92) 0%,
    rgba(7,11,22,0.97) 100%);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 24px 64px rgba(0,0,0,0.42);
  position: relative;
}
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(0,229,196,0.35), var(--blue) 50%, rgba(0,229,196,0.35), transparent);
  border-radius: 100px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(0,229,196,0.55);
  box-shadow: 0 0 0 3px rgba(0,229,196,0.09);
  background: rgba(0,229,196,0.025);
}
.form-submit {
  background: linear-gradient(135deg, var(--accent) 0%, var(--blue) 100%);
  box-shadow: 0 4px 20px rgba(0,229,196,0.2);
  letter-spacing: 0.3px;
  position: relative; overflow: hidden;
}
.form-submit::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}
.form-submit:hover::after { left: 140%; }
.form-submit:hover {
  box-shadow: 0 8px 32px rgba(0,229,196,0.32);
}

/* ── 18. SOCIAL BUTTONS: gradient glow on hover ──────────────── */
.social-btn:not(.social-btn-linkedin):hover {
  background: linear-gradient(135deg, rgba(0,229,196,0.12), rgba(59,158,255,0.08));
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 28px rgba(0,229,196,0.15);
  border-color: rgba(0,229,196,0.32);
  color: var(--accent);
}
.social-btn-linkedin:hover {
  background: rgba(0,119,181,0.14) !important;
  border-color: #0077b5 !important;
  color: #0a93d1 !important;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 28px rgba(0,119,181,0.2);
}

/* ── 19. AVATAR CARD: richer gradient + glow ─────────────────── */
.avatar-card {
  background: linear-gradient(150deg,
    rgba(18,26,52,0.96) 0%,
    rgba(12,18,40,0.99) 50%,
    rgba(14,10,32,0.96) 100%);
  border: 1px solid rgba(0,229,196,0.15);
  box-shadow:
    0 0 0 1px rgba(0,229,196,0.04),
    0 28px 64px rgba(0,0,0,0.55),
    inset 0 0 48px rgba(0,229,196,0.025),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.avatar-glow-bg {
  background: radial-gradient(ellipse at 50% 40%,
    rgba(0,229,196,0.14) 0%,
    rgba(59,158,255,0.07) 45%,
    transparent 70%);
}
.avatar-emoji {
  font-size: 96px;
}

/* ── 20. FLOAT CHIPS: premium glass morphism ─────────────────── */
.float-chip {
  background: rgba(8,13,28,0.9);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(0,229,196,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 10px 36px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,229,196,0.03);
}
.float-chip:hover {
  border-color: rgba(0,229,196,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 14px 44px rgba(0,229,196,0.1),
    0 0 0 1px rgba(0,229,196,0.08);
}
.chip-val { font-size: 22px; }

/* ── 22. SCROLL REVEAL: smoother entrance ────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
              transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── 23. CURSOR: more visible ring ───────────────────────────── */
#cursor {
  width: 8px; height: 8px;
  box-shadow: 0 0 8px rgba(0,229,196,0.8);
}
#cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(0,229,196,0.5);
  background: rgba(0,229,196,0.025);
}

/* ── 24. AI CARD: separator line below ──────────────────────── */
.skills-grid > .sk-ai {
  position: relative;
}
.skills-grid > .sk-ai::after {
  content: '';
  position: absolute;
  bottom: -28px; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(168,85,247,0.2) 25%,
    rgba(0,229,196,0.15) 50%,
    rgba(59,158,255,0.2) 75%,
    transparent);
}

/* ── 25. MARQUEE: original logos ─────────────────────────── */
.m-logo {
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.4)) brightness(1.1);
}
.marquee-item:hover .m-logo {
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.6)) brightness(1.2);
}

/* ── 26. CARD entrance: smoother stagger ────────────────────── */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(36px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── 28. NAV CTA: gradient border ring on hover ──────────────── */
.nav-cta {
  box-shadow: 0 2px 12px rgba(0,229,196,0.18);
}
.nav-cta:hover {
  background: var(--text);
  box-shadow: 0 6px 24px rgba(0,229,196,0.28);
}

/* ── 29. ROLE PILLS: better hover glow ──────────────────────── */
.role-pill.active {
  box-shadow: none !important;
}

/* ── 30. CARD SKILL ICON GLOW: original icons ───────────────── */
@keyframes iconGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0px transparent;
    border-color: rgba(255,255,255,0.07);
  }
  50% {
    box-shadow: 0 0 22px color-mix(in srgb, var(--card-accent) 70%, transparent),
                inset 0 0 10px color-mix(in srgb, var(--card-accent) 28%, transparent);
    border-color: color-mix(in srgb, var(--card-accent) 75%, transparent);
  }
}

/* ── 31. HERO GRID MESH: subtle dot-grid depth ───────────────── */
.hero-grid-mesh {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 40% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 40% 50%, black 0%, transparent 70%);
}

/* ── 32. SECTION backgrounds: faint dot grid ─────────────────── */
.section::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
}
.section > * { position: relative; z-index: 1; }

/* ── 33. HOVER: card tilt improved ─────────────────────────── */
.skill-card:hover  { transform: translateY(-7px) rotateX(1.5deg) rotateY(-1deg); }
.service-card:hover { transform: translateY(-9px); }
.project-card:hover { transform: translateY(-10px); }

/* ── 34. SKILL icon container: bigger on AI card ─────────────── */
.sk-ai .skill-icon {
  width: 64px; height: 64px;
}

/* ── Responsive: keep enhancements on mobile ────────────────── */
@media (max-width: 768px) {
  .hero::before, .hero::after { display: none; }
  .hero-grid-mesh { display: none; }
  .section::before { display: none; }
  .form-card::before { left: 8%; right: 8%; }
  .chip-val { font-size: 18px; }
  .stat-num { font-size: 30px; }
}
@media (max-width: 480px) {
  .avatar-emoji { font-size: 72px; }
  .svc-icon-wrap { width: 48px; height: 48px; font-size: 22px; }
}

/* ================================================================
   SCROLL TO TOP BUTTON
   ================================================================ */
.scroll-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(8,12,26,0.92);
  border: 1px solid rgba(0,229,196,0.32);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 0;
  transform: translateY(18px) scale(0.82);
  transition:
    opacity 0.38s cubic-bezier(0.22,1,0.36,1),
    transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
    border-color 0.3s,
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
  pointer-events: none;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,229,196,0.06);
  cursor: pointer;
}
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.scroll-top-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  box-shadow:
    0 10px 36px rgba(0,229,196,0.38),
    0 0 0 6px rgba(0,229,196,0.1);
  transform: translateY(-5px) scale(1.1);
}
.scroll-top-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .scroll-top-btn {
    bottom: 20px;
    right: 18px;
    width: 44px;
    height: 44px;
  }
  .scroll-top-btn svg { width: 18px; height: 18px; }
}

/* ================================================================
   TYPOGRAPHY REFINEMENTS — Plus Jakarta Sans overrides
   ================================================================ */

/* Better body text with Plus Jakarta Sans */
.hero-bio,
.sec-sub,
.svc-description,
.project-desc,
.tl-description,
.contact-subtext,
.footer-tagline {
  font-family: var(--font-body);
  font-weight: 400;
}

/* Better strong/bold rendering */
strong, b { font-weight: 700; }

/* Improved label font-weights for plus jakarta sans */
.ci-label,
.stat-label,
.chip-lbl,
.project-type {
  font-weight: 600;
  letter-spacing: 1.2px;
}

/* Hero bio text — slightly larger base size for readability */
.hero-bio { font-size: 15.5px; font-weight: 400; line-height: 1.92; }

/* Section subtitles */
.sec-sub { font-size: 15.5px; line-height: 1.84; font-weight: 400; }

/* Contact subtext */
.contact-subtext { font-size: 15.5px; line-height: 1.88; }

/* Improved form labels */
.form-group label { font-weight: 600; letter-spacing: 1.3px; }

/* Better nav link weight */
.nav-links a { font-weight: 500; }

/* Better btn text weight */
.btn-primary { font-weight: 800; letter-spacing: 0.2px; }
.btn-outline  { font-weight: 600; letter-spacing: 0.3px; }

/* Better hero-greeting readability */
.hero-greeting { font-size: 13.5px; letter-spacing: 0.3px; }

/* Better skill name readability */
.skill-name { font-size: 12.5px; }

/* Better section title */
.sec-title { letter-spacing: -0.03em; }

/* Service card description */
.svc-description { font-size: 14px; line-height: 1.82; }

/* Project description */
.project-desc { font-size: 14px; line-height: 1.8; }

/* Timeline description */
.tl-description { font-size: 15px; line-height: 1.84; }

/* ================================================================
   PREFERS REDUCED MOTION — Accessibility
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
    scroll-behavior: auto !important;
  }
  .hero-name .line-grad { animation: none; background-position: 0% center; }
  .orbit-ring           { animation: none !important; }
  .marquee-inner        { animation: none; }
  .avatar-wrap          { animation: none; }
  .float-chip           { animation: none !important; }
  .ai-logo-blink        { animation: none !important; opacity: 1 !important; }
  .skill-icon           { animation: none !important; }
  .skill-fill           { transition: width 0.5s ease !important; }
  html                  { scroll-behavior: auto; }
}

/* ================================================================
   IMPROVED MOBILE SECTION SPACING
   ================================================================ */
/* 360px rules merged into the block above */

/* ================================================================
   ULTRA-WIDE SCREEN CONTAINMENT (>1440px)
   Use max-width on inner containers — avoids 100vw scrollbar bug.
   The footer-inner / contact-layout already have max-width: 1280px.
   Nav and hero are constrained by their padding + grid max column.
   ================================================================ */
@media (min-width: 1440px) {
  .footer-container,
  .footer-bottom-bar { max-width: 1280px; }
}

/* ================================================================
   COMPREHENSIVE LAYOUT FIXES v8.0
   Hero pic section, float chips, projects grid, skills grid,
   missing thumbnails, AI tools mobile, all devices clean
   ================================================================ */

/* ── HERO VISUAL: strict containment so nothing spills ──────── */
.hero-visual {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prevent hero from creating horizontal scroll */
.hero {
  overflow-x: clip;
}

/* ── AVATAR WRAP: proper sizing, no random heights ──────────── */
.avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── FLOAT CHIPS: keep them INSIDE the hero-visual bounds ───── */
/* Desktop: chips float beside the avatar card only */
.fc-top {
  top: 18%;
  right: calc(100% + 20px);
  left: auto;
  min-width: 120px;
  white-space: nowrap;
}
.fc-bottom {
  bottom: 18%;
  right: calc(100% + 20px);
  left: auto;
  min-width: 120px;
  white-space: nowrap;
}
.fc-mid {
  top: 50%;
  left: calc(100% + 20px);
  right: auto;
  transform: translateY(-50%);
  min-width: 110px;
  white-space: nowrap;
}

/* Connector dots and lines: hidden on tablet range to prevent overflow, but enabled on mobile under tighter scaling */
@media (max-width: 1200px) and (min-width: 769px) {
  .fc-top::before, .fc-top::after,
  .fc-bottom::before, .fc-bottom::after,
  .fc-mid::before, .fc-mid::after {
    display: none !important;
  }
}

/* ── PROJECTS GRID: proper desktop 3-column layout ───────────── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 1200px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── SKILLS GRID: full width, proper display ─────────────────── */
.skills-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* ── SKILLS COLUMNS: responsive ─────────────────────────────── */
.skills-columns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

@media (max-width: 1024px) {
  .skills-columns-row { grid-template-columns: 1fr; gap: 24px; }
}

/* ── PROJECT THUMBNAIL: proper aspect ratio, no broken images ─ */
.project-thumb {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1020 0%, #0f1838 50%, #080d1e 100%);
  flex-shrink: 0;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback placeholder when image fails to load */
.project-thumb img[src=""],
.project-thumb img:not([src]),
.project-thumb img[src$="undefined"] {
  display: none;
}

/* Pseudo-element tech pattern fallback background */
.project-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,229,196,0.06) 0%, transparent 50%),
    radial-gradient(circle at 30% 50%, rgba(59,130,246,0.08) 0%, transparent 60%),
    radial-gradient(rgba(0,229,196,0.04) 1px, transparent 1px);
  background-size: 100%, 100%, 20px 20px;
  z-index: 0;
}

.project-thumb img { position: relative; z-index: 1; }
.project-thumb::after { z-index: 2; }

/* Thumbnail icon overlay (always visible as fallback) */
.project-thumb .pt-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

/* ── SERVICE CARD BANNER: consistent height ─────────────────── */
.svc-img-banner {
  height: 160px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1020 0%, #0f1838 100%);
}

.svc-img-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── AI TOOLS GRID: better mobile wrapping ──────────────────── */
/* Covered by inline responsive rules above; these override any remaining conflicts */
@media (max-width: 360px) {
  .ai-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ai-tool-card { min-height: 120px; padding: 8px 4px; border-radius: 10px !important; }
  .ai-tool-icon-wrapper { width: 32px; height: 32px; margin-bottom: 6px; }
  .ai-tool-icon { width: 22px; height: 22px; }
  .ai-tool-name { font-size: 10px; }
  .ai-tool-label { font-size: 8px; }
}

/* ── SECTION CONTAINERS: strict overflow prevention ─────────── */
.container {
  padding-inline: clamp(16px, 4vw, 60px);
}

/* Sections that might overflow */
#skills, #services, #projects, #experience, #contact {
  overflow-x: clip;
}

/* ── SKILL CARDS: better mobile layout ──────────────────────── */
@media (max-width: 768px) {
  .skill-head { gap: 18px; margin-bottom: 24px; }
  .skill-icon { width: 60px; height: 60px; }
  .skill-icon img, .skill-icon svg { width: 44px !important; height: 44px !important; }
  .skill-tech-list { gap: 10px; flex-wrap: wrap; }
  .skill-tech-list img, .skill-tech-list svg { width: 22px !important; height: 22px !important; }
}

@media (max-width: 480px) {
  .skill-icon { width: 52px; height: 52px; }
  .skill-icon img, .skill-icon svg { width: 38px !important; height: 38px !important; }
}

/* ── SECTION HEADER: fix centered alignment on mobile ────────── */
@media (max-width: 768px) {
  .section-header.centered .sec-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 8px;
  }
}

/* ── HERO NAME: prevent text overlap on small screens ───────── */
@media (max-width: 360px) {
  .hero-name .line-white,
  .hero-name .line-grad {
    font-size: clamp(24px, 8vw, 38px);
    white-space: normal;
    word-break: break-word;
  }
}

/* ── STATS BAR: proper desktop flex ──────────────────────────── */
@media (min-width: 769px) {
  .stats-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .stat-item {
    flex-shrink: 0;
    border-right: 1px solid var(--border2);
    padding: 0 36px;
  }
  .stat-item:first-child { padding-left: 0; }
  .marquee-wrap { flex: 1; min-width: 0; }
}

/* ── CONTACT LAYOUT: ensure it never overflows ───────────────── */
.contact-layout {
  min-width: 0;
}
.contact-info, .form-card {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── FOOTER: no horizontal scroll ────────────────────────────── */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 0 32px 48px;
  }
}

@media (max-width: 640px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px 40px;
  }
}

/* ── GLOBAL BODY: hard overflow clip ─────────────────────────── */
body { overflow-x: hidden; }

/* Ensure nothing bleeds beyond viewport width */
* { max-width: 100%; box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ================================================================
   ICON FIX LAYER v9.0
   All icons visible, correct sizing, no invisible icons on dark bg
   ================================================================ */

/* ── Tech icon inline: always visible, correct size ─────────── */
.tech-icon-inline {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: none !important;
  opacity: 1 !important;
}

/* Override the global filter that dims icons */
.skill-bar .tech-icon-inline,
.skill-bar img,
.skill-bar svg {
  filter: none !important;
  opacity: 1 !important;
}

/* ── Skill tech list icons ────────────────────────────────────── */
.skill-tech-list img,
.skill-tech-list svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  min-height: 26px;
  object-fit: contain;
  display: inline-block;
  filter: none !important;
  opacity: 1 !important;
  flex-shrink: 0;
}

/* ── Skill icon cycler container: correct size ───────────────── */
.skill-icon img,
.skill-icon svg {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain;
}

/* ── AI tool icons: prevent filter override ──────────────────── */
.ai-tool-icon {
  filter: none !important;
  opacity: 1 !important;
}
/* Apply specific color filters ONLY for monochrome icons */
.ai-tool-icon.filter-white    { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
.ai-tool-icon.filter-gemini   { filter: invert(60%) sepia(85%) saturate(1500%) hue-rotate(190deg) brightness(105%) contrast(100%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-copilot  { filter: invert(72%) sepia(70%) saturate(1800%) hue-rotate(170deg) brightness(105%) contrast(100%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-cursor   { filter: invert(53%) sepia(85%) saturate(1800%) hue-rotate(240deg) brightness(100%) contrast(100%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-ollama   { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
.ai-tool-icon.filter-n8n      { filter: invert(36%) sepia(90%) saturate(1800%) hue-rotate(310deg) brightness(100%) contrast(100%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-huggingface { filter: invert(75%) sepia(60%) saturate(1000%) hue-rotate(5deg) brightness(105%) contrast(105%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-perplexity  { filter: invert(72%) sepia(70%) saturate(1800%) hue-rotate(170deg) brightness(105%) contrast(100%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-replit   { filter: invert(53%) sepia(85%) saturate(1800%) hue-rotate(5deg) brightness(100%) contrast(100%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-claude   { filter: invert(37%) sepia(85%) saturate(1600%) hue-rotate(15deg) brightness(95%) contrast(98%) !important; opacity: 1 !important; }
.ai-tool-icon.filter-openai-green { filter: invert(48%) sepia(74%) saturate(3000%) hue-rotate(130deg) brightness(95%) contrast(90%) !important; opacity: 1 !important; }

/* ── Marquee logo icons: always show in color ────────────────── */
.marquee-item img.m-logo {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 1 !important;
}

/* ── Avatar image: correct display ───────────────────────────── */
.avatar-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* ── SEO section: all simpleicons show with brand colors ─────── */
.si-seo .skill-icon img,
.si-seo .skill-icon svg {
  filter: none !important;
  opacity: 1 !important;
}

/* ── Canva icon: always colored ──────────────────────────────── */
img[src*="canva"] {
  filter: none !important;
  opacity: 1 !important;
}

/* ── broken-image guard: hide alt text for missing icons ─────── */
img:not([src]),
img[src=""],
img[src$="undefined"],
img[src$="null"] {
  display: none !important;
}

/* ── Service card image banners: consistent sizing ───────────── */
.svc-img-banner {
  height: 160px !important;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1020 0%, #0f1838 100%);
}
.svc-img-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Avatar status bar fix: show above image ─────────────────── */
.avatar-label,
.avatar-status-bar {
  position: absolute;
  z-index: 25;
}
.avatar-label { bottom: 48px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.avatar-status-bar { bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* ── Mobile: no invisible icons ──────────────────────────────── */
@media (max-width: 768px) {
  .tech-icon-inline {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
  }
  .skill-tech-list img,
  .skill-tech-list svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
  }
  .ai-tool-icon {
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 480px) {
  .tech-icon-inline {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
  }
  .ai-tool-icon {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ── HERO ABOUT HEADER ───────────────────────────────────────── */
.hero-about-header {
  margin-top: 36px;
  margin-bottom: 12px;
  text-align: left;
  width: 100%;
}
.hero-about-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hero-about-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}

/* Centered layout for tablet and mobile views */
@media (max-width: 1024px) {
  .hero-about-header {
    text-align: center !important;
    margin-top: 28px;
    margin-bottom: 10px;
  }
}

/* Premium laptop & desktop hero spacing fix */
@media (min-width: 1024px) {
  .hero {
    padding-bottom: 110px !important;
  }
}

/* ================================================================
   TECH STACK SECTION
   ================================================================ */
.techstack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.techstack-card {
  background: radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),
    color-mix(in srgb, var(--ts-color, var(--accent)) 10%, transparent), transparent 40%),
    rgba(8,13,24,0.85);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  padding: 24px 22px;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              border-color 0.4s, box-shadow 0.4s;
}
.techstack-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--ts-color, var(--accent)) 45%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45),
              0 0 40px color-mix(in srgb, var(--ts-color, var(--accent)) 12%, transparent);
}
.techstack-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.techstack-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ts-color, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ts-color, var(--accent)) 25%, transparent);
}
.techstack-title {
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text);
}
.techstack-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.techstack-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text2);
  background: color-mix(in srgb, var(--ts-color, var(--accent)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ts-color, var(--accent)) 20%, transparent);
  padding: 4px 12px 4px 8px; border-radius: 100px;
  letter-spacing: 0.2px; font-weight: 500;
}
.techstack-chip-icon { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 1024px) {
  .techstack-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .techstack-grid { grid-template-columns: 1fr; gap: 14px; }
  .techstack-card { padding: 20px 18px; }
}

/* Skill-card tech lists reusing the Tech Stack pill style */
.skill-tech-list.techstack-chips {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.skill-tech-list.techstack-chips .techstack-chip-icon {
  width: 14px !important; height: 14px !important;
  opacity: 1 !important;
  filter: none !important;
}
.skill-tech-list.techstack-chips .techstack-chip:hover {
  transform: translateY(-2px);
}

/* Match Skill boxes' size & hover lighting to the Tech Stack boxes */
.skill-card {
  padding: 24px 22px !important;
  border-radius: var(--r-xl) !important;
}
.skill-card:hover {
  transform: translateY(-8px) !important;
}
@media (max-width: 640px) {
  .skill-card { padding: 20px 18px !important; }
}

/* ================================================================
   SKILLS SECTION v2 — rebuilt from scratch.
   Disciplined, single-accent, no percentage bars.
   Tokens are scoped to .skills-v2 only — the rest of the site's
   --accent / --border / --bg tokens are untouched.
   ================================================================ */
.skills-v2 {
  --sk-bg-base:      #070B12;
  --sk-surface-1:    #0D1420;
  --sk-surface-2:    #141D2B;
  --sk-border:       #1E2A3C;
  --sk-border-hover: #2C3E56;
  --sk-text-hi:      #E8EEF7;
  --sk-text-mid:     #93A3B8;
  --sk-text-low:     #7C8CA3; /* 5.4:1 on --sk-surface-1 — passes WCAG AA. Was #5B6B80 (3.4:1, fails) — same bug as .services-v2 */
  --sk-text-faint:   #5B6B80;
  --sk-accent:       #22D3EE;

  /* No padding here — the parent .section already applies the
     site's responsive --section-pad; this just centers/caps width
     like .container does everywhere else. */
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  overflow-x: hidden; /* safety net; root cause is the auto-fill grid below */
}

/* ---- Header ---- */
.sk2-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sk-accent);
  margin-bottom: 14px;
}
.sk2-heading {
  font-family: 'Space Grotesk', var(--font-display), sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sk-text-hi);
  margin-bottom: 14px;
}
.sk2-heading em { color: var(--sk-accent); font-style: normal; }
.sk2-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--sk-text-mid);
  max-width: 560px;
  margin-bottom: 36px;
}

/* ---- Filter chips ---- */
.sk2-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 32px;
  padding: 4px 0 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.sk2-filters::-webkit-scrollbar { display: none; }

.sk2-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--sk-text-mid);
  background: transparent;
  border: 1px solid var(--sk-border);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s cubic-bezier(.2,.8,.2,1),
              border-color 0.18s cubic-bezier(.2,.8,.2,1),
              color 0.18s cubic-bezier(.2,.8,.2,1);
}
.sk2-chip:hover { border-color: var(--sk-border-hover); color: var(--sk-text-hi); }
.sk2-chip.is-active {
  background: rgba(34, 211, 238, 0.12);
  border-color: var(--sk-accent);
  color: var(--sk-accent);
}
.sk2-chip:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

/* ---- Category box — each topic gets its own clearly separated card ---- */
.sk2-category {
  background: linear-gradient(145deg, rgba(13, 20, 32, 0.85) 0%, rgba(8, 13, 22, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 40px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sk2-category::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
}
.sk2-category:hover {
  border-color: rgba(34, 211, 238, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(34, 211, 238, 0.05);
}
.sk2-category:last-child { margin-bottom: 0; }

.sk2-category-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.sk2-category-title {
  font-family: 'Space Grotesk', var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sk2-category-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #22d3ee;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.28);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.15);
}

/* ---- Grid ---- */
.sk2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}

/* ---- Tile — Premium Animated Glass Box ---- */
.sk2-tile {
  position: relative;
  list-style: none;
  background: linear-gradient(135deg, rgba(20, 29, 43, 0.9) 0%, rgba(13, 19, 31, 0.95) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 22px 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(.2,.8,.2,1),
              transform 0.4s cubic-bezier(.2,.8,.2,1),
              border-color 0.25s ease,
              background 0.25s ease,
              box-shadow 0.25s ease;
  overflow: hidden;
}

/* Subtle Breathing Glow for tiles */
@keyframes sk2TileBreathe {
  0%, 100% { border-color: rgba(255, 255, 255, 0.09); }
  50% { border-color: rgba(34, 211, 238, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 20px rgba(0, 240, 255, 0.08); }
}

.sk2-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sk2-tile.is-visible {
  animation: sk2TileBreathe 6s ease-in-out infinite;
}

/* Staggered breathing delays */
.sk2-tile:nth-child(2n) { animation-delay: 1.5s; }
.sk2-tile:nth-child(3n) { animation-delay: 3s; }
.sk2-tile:nth-child(4n) { animation-delay: 4.5s; }

.sk2-tile--out {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

/* Glass Light Streak on Hover */
.sk2-tile::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 70%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .sk2-tile:hover {
    border-color: rgba(34, 211, 238, 0.6) !important;
    background: linear-gradient(135deg, #162436 0%, #0f1a28 100%) !important;
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 25px rgba(34, 211, 238, 0.25) !important;
    animation: none;
  }
  .sk2-tile:hover::before {
    left: 150%;
  }
  .sk2-tile:hover .sk2-tile-icon {
    transform: scale(1.12) rotate(-4deg);
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
  }
  .sk2-tile:hover .sk2-tile-note {
    opacity: 1;
    transform: translateY(0);
  }
}

.sk2-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(.2,1.5,.4,1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.sk2-icon-img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.sk2-icon-mask {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--sk2-icon-color, var(--sk-text-hi));
  opacity: 0.95;
  -webkit-mask-image: var(--sk2-mask-url);
          mask-image: var(--sk2-mask-url);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.3));
}

.sk2-tile-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sk2-tile-cat {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--sk-text-low);
  margin-top: -6px;
}
.sk2-tile-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: #22d3ee;
  opacity: 0.85;
  margin-top: -2px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ---- High-Tech Radar Blinking Dot Animation ---- */
@keyframes sk2PulseDot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.8), 0 0 8px rgba(34, 211, 238, 0.9);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(34, 211, 238, 0), 0 0 14px rgba(34, 211, 238, 1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0), 0 0 8px rgba(34, 211, 238, 0.9);
  }
}

.sk2-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.9);
  animation: sk2PulseDot 1.8s ease-in-out infinite;
  z-index: 5;
}

/* Staggered pulse timing for dots */
.sk2-tile:nth-child(odd) .sk2-dot { animation-delay: 0.4s; }
.sk2-tile:nth-child(3n) .sk2-dot { animation-delay: 0.8s; }

.sk2-legend {
  display: none !important;
}
.sk2-legend-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.9);
  animation: sk2PulseDot 1.8s ease-in-out infinite;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .sk2-category { padding: 20px 16px; border-radius: 16px; }
  .sk2-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sk2-tile { min-height: 125px; padding: 16px 14px; }
  .sk2-tile-icon { width: 38px; height: 38px; border-radius: 10px; }
  .sk2-icon-img { width: 22px; height: 22px; }
  .sk2-icon-mask { width: 20px; height: 20px; }
  .sk2-tile-name { font-size: 14px; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .sk2-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .sk2-filters { flex-wrap: wrap; overflow: visible; justify-content: center; -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sk2-tile, .sk2-chip, .sk2-tile-icon, .sk2-tile-note, .sk2-dot {
    transition: none !important;
    animation: none !important;
  }
  .sk2-tile { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   SERVICES SECTION v2 — rebuilt: coded SVG scenes (no more broken
   data-URI <img> hacks), one icon-tile treatment, no ghost numbers.
   Same token system as .skills-v2 so the two sections read as one.
   ================================================================ */
.services-v2 {
  --sv-bg-base:      #070B12;
  --sv-surface-1:    #0D1420;
  --sv-surface-2:    #141D2B;
  --sv-border:       #1E2A3C;
  --sv-border-hover: #2C3E56;
  --sv-text-hi:      #E8EEF7;
  --sv-text-mid:     #93A3B8;
  --sv-text-low:     #7C8CA3; /* 5.4:1 on --sv-surface-1 — passes WCAG AA at body size. Was #5B6B80 (3.4:1, fails) */
  --sv-text-faint:   #5B6B80; /* the old value — large decorative type / disabled states only, never body text */
  --sv-accent:       #22D3EE;

  /* Isometric face shading — one light source, upper-left, shared by all six scenes */
  --face-top:   #1E2A3C;
  --face-left:  #16202E;
  --face-right: #0F1622;
  --face-edge:  #2C3E56;

  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  overflow-x: hidden; /* safety net; grid below is auto-fit and never overflows */
}

.sv2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
  perspective: 1200px; /* shared vanishing point for the tilt effect below */
}

.sv2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sv-surface-1);
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  translate: 0 8px; /* scroll-reveal + hover-lift live here, CSS-eased */
  transform-style: preserve-3d;
  /* `transform` (rotateX/rotateY) is deliberately NOT transitioned here —
     js/services-tilt.js drives it frame-by-frame with real spring physics;
     a CSS transition on top would double-ease and feel mushy. */
  transition: opacity 0.4s cubic-bezier(.2,.8,.2,1),
              translate 0.4s cubic-bezier(.2,.8,.2,1),
              border-color 0.2s cubic-bezier(.2,.8,.2,1),
              background 0.2s cubic-bezier(.2,.8,.2,1);
}
.sv2-card.visible { opacity: 1; translate: 0 0; }
.services-v2[data-tier="full"] .sv2-card.is-tilting { translate: 0 -3px; }

@media (hover: hover) and (pointer: fine) {
  .sv2-card:hover {
    border-color: var(--sv-border-hover);
    background: var(--sv-surface-2);
  }
  .sv2-card:hover .sv2-cta svg { transform: translateX(4px); }
}

/* Specular highlight — driven by the ONE shared light (services-light.js),
   not this card's own cursor position. --mx/--my/--sv-light-intensity are
   written by that single section-level listener; this is purely a reader.
   Intensity is 0 (invisible) whenever services-light.js hasn't attached —
   i.e. on any tier other than 'full' — so no extra gating needed here. */
.sv2-specular {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 55%);
  opacity: var(--sv-light-intensity, 0);
}

/* ---- Coded SVG scene panel ---- */
.sv2-scene {
  margin: 16px 16px 0;
  background: linear-gradient(180deg, #0F1724 0%, #0A101B 100%);
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 480 / 320; /* intrinsic ratio — zero CLS, no image to load */
  transform: translateZ(24px);
}
.sv2-scene svg { display: block; width: 100%; height: 100%; }

/* Isometric face shading (shared by all six scenes) */
.iso-face   { stroke: var(--face-edge); stroke-width: 2; stroke-linejoin: round; }
.iso-top    { fill: var(--face-top); }
.iso-left   { fill: var(--face-left); }
.iso-right  { fill: var(--face-right); }
.iso-accent.iso-top   { fill: var(--sv-accent); }
.iso-accent.iso-left  { fill: var(--sv-accent); opacity: .75; }
.iso-accent.iso-right { fill: var(--sv-accent); opacity: .55; }
.iso-accent-outline { fill: rgba(34,211,238,.14); stroke: var(--sv-accent); stroke-width: 2; }
.iso-shadow { fill: #000; opacity: .35; filter: blur(8px); }
.iso-accent-line { stroke: var(--sv-accent); stroke-width: 2; fill: none; filter: drop-shadow(0 0 4px rgba(34,211,238,.6)); }
.iso-pipe  { stroke: rgba(255,255,255,.3); stroke-width: 1.5; fill: none; }
.iso-guide { stroke: rgba(255,255,255,.25); stroke-width: 1.5; stroke-dasharray: 3 3; fill: none; }
.iso-scene-accent { transform-origin: center; }
/* Accent pulse — capability table calls for this on 'full' AND 'reduced'
   ("scroll-driven assembly + accent pulse"), off entirely on 'static'. */
.services-v2[data-tier="full"] .iso-scene-accent,
.services-v2[data-tier="reduced"] .iso-scene-accent {
  animation: sv2Pulse 3s ease-in-out infinite;
}
@keyframes sv2Pulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

/* ================================================================
   SCROLL-DRIVEN SCENE ASSEMBLY (js/services-assembly.js)
   Ground → base → accent, each along a valid isometric screen axis.
   Native path uses animation-timeline: view() (off main thread, free).
   Fallback path (no view() support) uses IntersectionObserver + a
   once-only .is-assembled class. `translate` is used instead of
   `transform` deliberately — the ambient ground-loop transforms below
   use `transform`, and these are independent CSS properties so the
   one-time assembly and the infinite loop never fight over one value.
   ============================================================ */
@keyframes iso-assemble-up      { from { opacity: 0; translate: 0 24px; }     to { opacity: 1; translate: 0 0; } }
@keyframes iso-assemble-upleft  { from { opacity: 0; translate: -16px -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes iso-assemble-upright { from { opacity: 0; translate: 16px -10px; }  to { opacity: 1; translate: 0 0; } }

.services-v2:not([data-tier="static"]).sv-assembly-native .iso-layer-ground {
  animation: iso-assemble-up 0.42s cubic-bezier(.2,.8,.2,1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
.services-v2:not([data-tier="static"]).sv-assembly-native .iso-layer-base {
  animation: iso-assemble-upleft 0.42s cubic-bezier(.2,.8,.2,1) both;
  animation-timeline: view();
  animation-range: entry 5% cover 35%;
}
.services-v2:not([data-tier="static"]).sv-assembly-native .iso-scene-accent {
  animation: iso-assemble-upright 0.42s cubic-bezier(.2,.8,.2,1) both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

.services-v2:not([data-tier="static"]).sv-assembly-fallback .iso-layer-ground,
.services-v2:not([data-tier="static"]).sv-assembly-fallback .iso-layer-base,
.services-v2:not([data-tier="static"]).sv-assembly-fallback .iso-scene-accent {
  opacity: 0;
}
.services-v2:not([data-tier="static"]).sv-assembly-fallback .sv2-scene.is-assembled .iso-layer-ground {
  animation: iso-assemble-up 0.4s cubic-bezier(.2,.8,.2,1) 0ms both;
}
.services-v2:not([data-tier="static"]).sv-assembly-fallback .sv2-scene.is-assembled .iso-layer-base {
  animation: iso-assemble-upleft 0.4s cubic-bezier(.2,.8,.2,1) 40ms both;
}
.services-v2:not([data-tier="static"]).sv-assembly-fallback .sv2-scene.is-assembled .iso-scene-accent {
  animation: iso-assemble-upright 0.4s cubic-bezier(.2,.8,.2,1) 80ms both;
}

/* ================================================================
   AMBIENT LOOPS — one continuous 4s micro-demo per scene, showing
   the service actually working rather than just illustrating it.
   CSS/offset-path only, no JS animation loop. Paused via
   .sv-in-view (toggled by services-tier.js's IntersectionObserver)
   and gated to the 'full' tier only, per the capability table.
   ================================================================ */
.iso-loop {
  fill: var(--sv-accent);
  filter: drop-shadow(0 0 4px rgba(34,211,238,.75));
  opacity: 0;
  animation-play-state: paused;
}

.iso-loop-web    { offset-path: path('M180 222.4 L293.5 110.3'); }
.iso-loop-mobile { offset-path: path('M205.3 43.1 Q240.0 9.1 274.7 116.6'); }
.iso-loop-python { offset-path: path('M268.5 197.2 L319.2 185.0 L369.8 172.8 L407.6 176.5'); }
.iso-loop-ai-1   { offset-path: path('M352.0 86.4 L240.0 89.7'); }
.iso-loop-ai-2   { offset-path: path('M394.0 220.6 L240.0 89.7'); }
.iso-loop-ai-3   { offset-path: path('M128.0 225.5 L240.0 89.7'); }
.iso-loop-ai-4   { offset-path: path('M86.0 52.5 L240.0 89.7'); }
.iso-loop-db-1   { offset-path: path('M338.5 42.4 L135.8 143.9'); }
.iso-loop-db-2   { offset-path: path('M338.5 42.4 L262.5 163.4'); }
.iso-loop-db-3   { offset-path: path('M338.5 42.4 L338.5 268.8'); }

.services-v2[data-tier="full"].sv-in-view .iso-loop-web    { animation: iso-offset-web 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-mobile { animation: iso-offset-mobile 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-python { animation: iso-offset-python 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-ai-1   { animation: iso-offset-ai1 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-ai-2   { animation: iso-offset-ai2 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-ai-3   { animation: iso-offset-ai3 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-ai-4   { animation: iso-offset-ai4 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-db-1   { animation: iso-offset-db1 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-db-2   { animation: iso-offset-db2 4s linear infinite; animation-play-state: running; }
.services-v2[data-tier="full"].sv-in-view .iso-loop-db-3   { animation: iso-offset-db3 4s linear infinite; animation-play-state: running; }

/* Full Stack Web — packet travels server↔browser and back */
@keyframes iso-offset-web {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  45%  { offset-distance: 100%; opacity: 1; }
  50%  { opacity: 0; offset-distance: 100%; }
  60%  { opacity: 1; }
  95%  { offset-distance: 0%;   opacity: 1; }
  100% { opacity: 0; }
}
/* Mobile — shared-code sync travels between the two phone slabs */
@keyframes iso-offset-mobile {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  50%  { offset-distance: 100%; opacity: 1; }
  60%  { opacity: 0; offset-distance: 100%; }
  100% { offset-distance: 0%; opacity: 0; }
}
/* Python — data plate flows terminal → bin */
@keyframes iso-offset-python {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  70%  { offset-distance: 100%; opacity: 1; }
  80%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 0%; }
}
/* AI nodes — token visits each node in turn, quarter of the cycle each */
@keyframes iso-offset-ai1 {
  0%   { offset-distance: 0%; opacity: 0; }
  2%   { opacity: 1; }
  22%  { offset-distance: 100%; opacity: 1; }
  25%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 0%; }
}
@keyframes iso-offset-ai2 {
  0%, 25% { offset-distance: 0%; opacity: 0; }
  27%  { opacity: 1; }
  47%  { offset-distance: 100%; opacity: 1; }
  50%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 0%; }
}
@keyframes iso-offset-ai3 {
  0%, 50% { offset-distance: 0%; opacity: 0; }
  52%  { opacity: 1; }
  72%  { offset-distance: 100%; opacity: 1; }
  75%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 0%; }
}
@keyframes iso-offset-ai4 {
  0%, 75% { offset-distance: 0%; opacity: 0; }
  77%  { opacity: 1; }
  97%  { offset-distance: 100%; opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}
/* Cloud DB — write lands on db1, then replicates sideways to db2+db3 together */
@keyframes iso-offset-db1 {
  0%   { offset-distance: 0%; opacity: 0; }
  3%   { opacity: 1; }
  30%  { offset-distance: 100%; opacity: 1; }
  35%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 0%; }
}
@keyframes iso-offset-db2 {
  0%, 38% { offset-distance: 0%; opacity: 0; }
  42%  { opacity: 1; }
  68%  { offset-distance: 100%; opacity: 1; }
  73%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 0%; }
}
@keyframes iso-offset-db3 {
  0%, 38% { offset-distance: 0%; opacity: 0; }
  42%  { opacity: 1; }
  68%  { offset-distance: 100%; opacity: 1; }
  73%  { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 0%; }
}

/* UI layers — converge into one assembled screen, hold, explode back out.
   `transform` here, deliberately independent of the `translate`-based
   assembly reveal above, so a freshly-assembled scene can start looping
   immediately without the two animations fighting over one property. */
.iso-obj-l1, .iso-obj-l3 { animation-play-state: paused; }
.services-v2[data-tier="full"].sv-in-view .iso-obj-l1 {
  animation: iso-converge-l1 4s ease-in-out infinite;
  animation-play-state: running;
}
/* .iso-obj-l3 is also .iso-scene-accent — `animation` is a single shorthand,
   so a separate rule here would win outright and silently drop the pulse
   rather than combine with it. Declare both together explicitly instead. */
.services-v2[data-tier="full"].sv-in-view .iso-obj-l3 {
  animation: iso-converge-l3 4s ease-in-out infinite, sv2Pulse 3s ease-in-out infinite;
  animation-play-state: running, running;
}
@keyframes iso-converge-l1 {
  0%, 15%   { transform: translateY(0); }
  40%, 60%  { transform: translateY(-30px); }
  85%, 100% { transform: translateY(0); }
}
@keyframes iso-converge-l3 {
  0%, 15%   { transform: translateY(0); }
  40%, 60%  { transform: translateY(30px); }
  85%, 100% { transform: translateY(0); }
}

/* ---- Body ---- */
.sv2-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 24px;
}

.sv2-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sv-text-low);
  margin-bottom: 14px;
}
.sv2-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--sv-text-mid); }

.sv2-title {
  font-family: 'Space Grotesk', var(--font-display), sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--sv-text-hi);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

.sv2-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--sv-text-mid);
  max-width: 46ch;
  margin-bottom: 16px;
}

.sv2-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sv-text-low);
}
.sv2-stack span:not(:last-child)::after { content: '·'; margin-left: 10px; color: var(--sv-border-hover); }

.sv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sv-accent);
  text-decoration: none;
  width: fit-content;
}
.sv2-cta svg { transition: transform 0.2s cubic-bezier(.2,.8,.2,1); }
.sv2-cta:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 2px; border-radius: 2px; }

/* ---- Meta strip — the three facts every client checks before emailing ---- */
.sv2-meta-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sv-text-mid);
  margin: -8px 0 32px;
}
.sv2-meta-strip span:not(:last-child)::after { content: '·'; margin-left: 10px; color: var(--sv-text-low); }

/* ---- Proof line — a real shipped project backing the claim ---- */
.sv2-proof {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--sv-text-low);
  margin-bottom: 10px;
}
.sv2-proof a { color: var(--sv-accent); text-decoration: none; }
.sv2-proof a:hover, .sv2-proof a:focus-visible { text-decoration: underline; }
.sv2-proof.sv2-proof-neutral { color: var(--sv-text-low); font-style: italic; }

/* ---- Progressive disclosure — grid-template-rows accordion, no
   max-height hack, no layout shift on siblings (the row itself grows). ---- */
.sv2-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sv-text-mid);
  cursor: pointer;
  width: fit-content;
  margin-bottom: 4px;
}
.sv2-disclosure-toggle:hover,
.sv2-disclosure-toggle:focus-visible { color: var(--sv-text-hi); }
.sv2-disclosure-toggle svg { transition: transform 0.25s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; }
.sv2-disclosure-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.sv2-disclosure-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(.2,.8,.2,1);
}
.sv2-disclosure-panel.is-open { grid-template-rows: 1fr; }
.sv2-disclosure-inner { overflow: hidden; }
.sv2-disclosure-content { padding-top: 14px; }
.sv2-disclosure-content h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sv-text-low);
  margin: 0 0 8px;
}
.sv2-disclosure-content h4:not(:first-child) { margin-top: 14px; }
.sv2-disclosure-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv2-disclosure-content li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sv-text-mid);
  padding-left: 14px;
  position: relative;
}
.sv2-disclosure-content li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sv-accent);
  opacity: 0.6;
}
.sv2-disclosure-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sv-text-low);
}
.sv2-disclosure-stack span:not(:last-child)::after { content: '·'; margin-left: 10px; color: var(--sv-border-hover); }

/* ---- Process strip ---- */
.sv2-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--sv-border);
}
.sv2-process-step { display: flex; gap: 12px; align-items: baseline; }
.sv2-process-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sv-text-low);
  flex-shrink: 0;
}
.sv2-process-label { font-size: 13.5px; color: var(--sv-text-mid); line-height: 1.4; }
@media (max-width: 900px) {
  .sv2-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sv2-process { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .sv2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sv2-grid { grid-template-columns: 1fr; }
  .sv2-scene { aspect-ratio: 480 / 260; margin: 14px 14px 0; transform: none; }
  .sv2-body { padding: 16px; }
  .sv2-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv2-card, .sv2-cta svg, .iso-scene-accent,
  .sv2-image-box::before, .sv2-image-box::after, .sv2-card-img {
    transition: none !important;
    animation: none !important;
  }
  .sv2-card { opacity: 1 !important; transform: none !important; }
  .sv2-specular { display: none !important; }
  .sv2-disclosure-panel, .sv2-disclosure-toggle svg { transition: none !important; }
}

/* ================================================================
   UNIVERSAL RESPONSIVE MASTER RULES (ALL MOBILE & LAPTOP DEVICES)
   ================================================================ */

/* Ultra-Wide Displays (1440px+) */
@media (min-width: 1440px) {
  .hero-container, .services-container, .skills-container, .projects-container, .contact-container, .footer-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Laptops & Standard Desktops (1024px - 1439px) */
@media (max-width: 1200px) {
  .sv2-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .hero-title { font-size: clamp(2.5rem, 5vw, 3.8rem); }
}

/* Tablets & Mobile Landscape (768px - 1023px) */
@media (max-width: 1023px) {
  section { padding: 60px 24px; }
  .sv2-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hero-buttons { flex-wrap: wrap; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* Mobile Devices (Under 768px) */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Header & Navigation Fixes */
  nav {
    padding: 0 16px !important;
    height: 64px !important;
  }
  .nav-logo {
    font-size: 20px !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-cta {
    display: none !important; /* Hide Header Pill on mobile to avoid squeezing; Hire Me is inside mobile-menu */
  }
  .hamburger {
    display: flex !important;
    z-index: 1002;
  }
  .mobile-menu {
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    width: 100%;
    max-width: 100%;
    background: rgba(6, 10, 22, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    padding: 24px 20px 32px;
    display: none;
    flex-direction: column;
    gap: 16px;
    z-index: 1000;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
  }
  .mobile-menu.active, .mobile-menu.open {
    display: flex !important;
  }
  .mobile-menu a {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .mobile-menu a.mobile-hire {
    margin-top: 8px;
    background: var(--accent);
    color: #000;
    text-align: center;
    border-radius: 100px;
    padding: 12px;
    font-weight: 700;
    border: none;
  }

  section { padding: 48px 16px; }

  /* Hero Section */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    padding-top: 84px !important;
  }
  .hero-visual {
    order: 1 !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .hero-text {
    order: 2 !important;
    width: 100% !important;
  }
  .orbit-1 { width: 320px !important; height: 320px !important; }
  .orbit-2 { width: 250px !important; height: 250px !important; }
  .orbit-3 { width: 180px !important; height: 180px !important; }
  .avatar-wrap { max-width: 240px !important; margin: 0 auto !important; }
  .hero-title { font-size: 2.2rem; line-height: 1.2; }
  .hero-subtitle { font-size: 1rem; margin-bottom: 24px; }
  .hero-cta-btn { width: 100%; text-align: center; justify-content: center; }

  /* Services Grid */
  .sv2-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .sv2-card { width: 100%; margin: 0; }
  .sv2-body { padding: 18px 16px; }

  /* Skills & Projects */
  .skills-grid, .projects-grid { grid-template-columns: 1fr !important; gap: 16px; }

  /* Contact Form */
  .form-card { padding: 20px 16px; }
  .form-group input, .form-group textarea, .form-group select { font-size: 16px; } /* Prevents iOS zoom */

  /* Mobile Footer Fixes — 2 Column Grid for Links, Left Aligned */
  .main-footer {
    padding: 48px 16px 24px !important;
  }
  .footer-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 20px !important;
    text-align: left !important;
  }
  .footer-col-brand, .footer-col-contact {
    grid-column: 1 / -1 !important;
  }
  .footer-social-links {
    justify-content: flex-start !important;
  }
  .footer-title {
    font-size: 13px !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
  }
  .footer-list {
    gap: 8px !important;
  }
  .footer-list a, .footer-contact-item {
    font-size: 13.5px !important;
  }
}

/* Small Screen Phones (Under 400px) */
@media (max-width: 400px) {
  section { padding: 40px 12px; }
  .nav-logo { font-size: 18px !important; }
  .hero-title { font-size: 1.85rem; }
  .sec-title { font-size: 1.65rem; }
  .footer-container { gap: 24px 16px !important; }
}

/* ================================================================
   MOBILE SCROLL SMOOTHNESS & VISUAL DATA FLOW ANIMATION STYLING
   ================================================================ */

/* Ensure zero mobile scroll lock or section freezing */
.section, .services-v2, .sv2-grid, .sv2-card {
  touch-action: pan-y !important;
  content-visibility: visible !important;
  contain: none !important;
}

/* Pass touch swipes through service images to allow uninterrupted scrolling */
.sv2-image-box, .sv2-card-video, .sv2-card-img, .sv2-specular {
  pointer-events: none !important;
  touch-action: pan-y !important;
}

/* Animated Live Video-like Data Stream Overlay for Service Pictures */
.sv2-image-box {
  position: relative;
  margin: 16px 16px 0;
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 480 / 320;
  background: #060a16;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 242, 254, 0.08);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.sv2-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sv2-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.96) contrast(1.05);
}

@keyframes pictureVideoPan {
  0% {
    transform: scale(1.0) translate(0, 0);
  }
  50% {
    transform: scale(1.04) translate(-4px, -2px);
  }
  100% {
    transform: scale(1.02) translate(4px, 2px);
  }
}

.sv2-card:hover .sv2-card-img {
  transform: scale(1.06);
  filter: brightness(1.06) contrast(1.1);
}

/* Clean Video Frame Laser Sweep Across Picture */
.sv2-image-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(0, 242, 254, 0.15) 48%,
    rgba(0, 242, 254, 0.3) 50%,
    rgba(139, 92, 246, 0.2) 52%,
    transparent 60%
  );
  z-index: 3;
  pointer-events: none;
  animation: dataLaserSweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes dataLaserSweep {
  0% { transform: translate(-35%, -35%); }
  100% { transform: translate(35%, 35%); }
}

/* Circuit-grid data-flow overlay: drifting node grid to read as live data movement */
.sv2-image-box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.65;
  transition: opacity 0.35s ease;
  background-image:
    radial-gradient(circle, rgba(0, 242, 254, 0.65) 1px, transparent 1.6px),
    repeating-linear-gradient(90deg, rgba(0, 242, 254, 0.09) 0, rgba(0, 242, 254, 0.09) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(0deg, rgba(139, 92, 246, 0.07) 0, rgba(139, 92, 246, 0.07) 1px, transparent 1px, transparent 28px);
  background-size: 28px 28px, 28px 28px, 28px 28px;
  animation: dataFlowDrift 7s linear infinite;
  mix-blend-mode: screen;
}

@keyframes dataFlowDrift {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: -56px -56px, -56px 0, 0 -56px; }
}

.sv2-card:hover .sv2-image-box::after {
  opacity: 1;
}

.sv2-card:hover .sv2-image-box {
  border-color: rgba(0, 242, 254, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 242, 254, 0.2), inset 0 0 26px rgba(0, 242, 254, 0.16);
}

/* Mobile Scroll Lag & Horizontal Overflow Fixes (max-width: 991px) */
@media (max-width: 991px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-behavior: auto !important; /* Fast natural touch fling on mobile */
  }

  nav {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .nav-container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body {
    cursor: auto !important;
  }

  button, a {
    cursor: pointer !important;
  }

  /* Disable heavy backdrop blurs on mobile scrolling elements to keep scroll 60FPS smooth */
  .sv2-card,
  .skill-card,
  .project-card,
  .stat-item,
  .float-chip,
  .hero-card,
  .sk2-tile,
  .sk2-category,
  .form-card,
  .terminal-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 16, 36, 0.94) !important;
  }

  .sv2-image-box::before,
  .sv2-image-box::after {
    animation: none !important;
    pointer-events: none !important;
  }

  .nav-container {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

/* ================================================================
   HERO AVATAR CARD + STAT CHIPS — FINAL RESPONSIVE PASS
   Single source of truth for mobile/tablet (≤1023px). Placed last
   on purpose so it wins over every earlier scattered chip/avatar
   override in this file. Re-enables the dotted connector lines on
   mobile (previously hidden) and scales the card + chips down
   smoothly tier by tier so nothing clips off-screen, down to 320px.
   Desktop/laptop (≥1024px) rules earlier in the file are untouched.
   ================================================================ */
@media (max-width: 1023px) {
  .fc-top::before, .fc-top::after,
  .fc-bottom::before, .fc-bottom::after,
  .fc-mid::before, .fc-mid::after {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .avatar-wrap {
    width: 240px !important;
    max-width: 240px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 auto !important;
  }
  .fc-top, .fc-bottom, .fc-mid { white-space: nowrap !important; }
  .fc-top {
    top: 14% !important;
    right: calc(100% + 10px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: scale(0.8) !important;
    transform-origin: right center !important;
  }
  .fc-top::after  { width: 10px !important; }
  .fc-top::before { left: calc(100% + 7px) !important; }
  .fc-bottom {
    bottom: 14% !important;
    right: calc(100% + 10px) !important;
    left: auto !important;
    top: auto !important;
    transform: scale(0.8) !important;
    transform-origin: right center !important;
  }
  .fc-bottom::after  { width: 10px !important; }
  .fc-bottom::before { left: calc(100% + 7px) !important; }
  .fc-mid {
    top: 50% !important;
    left: calc(100% + 10px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) scale(0.8) !important;
    transform-origin: left center !important;
  }
  .fc-mid::after  { width: 10px !important; left: auto !important; }
  .fc-mid::before { right: calc(100% + 7px) !important; left: auto !important; }
}

@media (max-width: 480px) {
  .avatar-wrap { width: 210px !important; max-width: 210px !important; }
  .fc-top, .fc-bottom {
    right: calc(100% + 8px) !important;
    transform: scale(0.68) !important;
  }
  .fc-mid {
    left: calc(100% + 8px) !important;
    transform: translateY(-50%) scale(0.68) !important;
  }
  .fc-top::after, .fc-bottom::after { width: 8px !important; }
  .fc-mid::after { width: 8px !important; left: auto !important; }
  .fc-top::before, .fc-bottom::before { left: calc(100% + 5px) !important; }
  .fc-mid::before { right: calc(100% + 5px) !important; left: auto !important; }
}

@media (max-width: 400px) {
  .avatar-wrap { width: 185px !important; max-width: 185px !important; }
  .fc-top, .fc-bottom {
    right: calc(100% + 7px) !important;
    transform: scale(0.58) !important;
  }
  .fc-mid {
    left: calc(100% + 7px) !important;
    transform: translateY(-50%) scale(0.58) !important;
  }
  .fc-top::after, .fc-bottom::after, .fc-mid::after { width: 7px !important; }
}

@media (max-width: 340px) {
  .avatar-wrap { width: 165px !important; max-width: 165px !important; }
  .fc-top, .fc-bottom {
    right: calc(100% + 6px) !important;
    transform: scale(0.5) !important;
  }
  .fc-mid {
    left: calc(100% + 6px) !important;
    transform: translateY(-50%) scale(0.5) !important;
  }
  .fc-top::after, .fc-bottom::after, .fc-mid::after { width: 6px !important; }
}

/* ================================================================
   MOBILE HERO — FINAL POLISH (≤767px only, laptop/tablet untouched)
   1) Remove the spinning orbit rings — cleaner, calmer mobile hero
   2) Nicer glass card + soft ambient glow behind the photo (fills
      the space the rings used to occupy)
   3) Slightly lighter background scrim so the canvas layers read
      clearer instead of being crushed dark behind the card
   4) Fluid, consistently centered text sizing/spacing so headline,
      role pills, bio and buttons scale smoothly 320→767px
   ================================================================ */
@media (max-width: 767px) {
  /* 1) No more moving rings on mobile */
  .orbit-ring, .orbit-dot { display: none !important; }

  /* 2) Glass card back, tuned lighter than desktop so it stays smooth */
  .avatar-wrap {
    backdrop-filter: blur(10px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.6) !important;
    background: rgba(13, 18, 36, 0.6) !important;
    border-color: rgba(0, 242, 254, 0.4) !important;
  }
  .hero-visual::before {
    content: '';
    position: absolute;
    inset: 10% 8%;
    background: radial-gradient(ellipse 60% 55% at 50% 50%,
      rgba(0, 242, 254, 0.16) 0%,
      rgba(139, 92, 246, 0.08) 45%,
      transparent 75%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
  }

  /* 3) Lighter scrim = clearer background behind the card */
  .sn-scrim { background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(2, 4, 10, 0.14) 0%, transparent 82%) !important; }

  /* 4) Text: fluid sizing + consistent centering + clean rhythm */
  .hero-title-block, .hero-text { text-align: center !important; }
  .hero-tag { margin: 0 auto 18px !important; justify-content: center !important; }
  .hero-name {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 16px !important;
    text-align: center !important;
  }
  .hero-greeting {
    font-size: clamp(12.5px, 3.4vw, 14px) !important;
    text-align: center !important;
    line-height: 1.55 !important;
    padding: 0 8px;
  }
  .hero-roles {
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto 20px !important;
    max-width: 92%;
    row-gap: 8px !important;
  }
  .role-pill { font-size: clamp(10.5px, 2.8vw, 12px); }
  .hero-bio {
    font-size: clamp(13.5px, 3.6vw, 15.5px) !important;
    line-height: 1.65 !important;
    text-align: center !important;
    max-width: 94% !important;
    margin: 0 auto 22px !important;
  }
  .typing-box {
    font-size: clamp(11.5px, 3vw, 13px) !important;
    padding: 38px 16px 14px 16px !important;
    margin: 0 auto 24px !important;
  }
  .hero-actions {
    justify-content: center !important;
    gap: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual::before { display: none; }
}