/* ==========================================================================
   KUBANJA ELIJAH ELDRED — design layer inspired by Ezra Collective
   (gaitanoezra.vercel.app)
   Syne display type · Inter body · mono micro-labels · orange #E85C1A
   Noir surfaces #0A0A0A / #111111 with hairline borders #1E1E1E.
   Loaded last so it wins over the legacy cyan/glass layer.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --kee-orange: #E85C1A;
  --kee-cyan: #E85C1A;
  --kee-blue: #E85C1A;
  --kee-violet: #E85C1A;
  --kee-amber: #E85C1A;
  --kee-green: #E85C1A;
  --kee-grad: linear-gradient(120deg, #E85C1A, #ff7a2e);

  --bg-dark: #0A0A0A;
  --bg-secondary: #111111;
  --card-bg: #111111;
  --text-main: #F4F4F5;
  --text-muted: #A1A1AA;
  --overlay: rgba(10, 10, 10, 0.94);
  --nav-bg: rgba(10, 10, 10, 0.88);
  --glass-border: #1E1E1E;
  --accent-yellow: #E85C1A;
  --accent-cyan: #E85C1A;
  --teal-accent: #E85C1A;

  --kee-bg-2: #0A0A0A;
  --kee-line: #1E1E1E;
  --kee-ink: #F4F4F5;
  --kee-muted: #A1A1AA;
  --kee-faint: #71717A;
  --kee-glass: linear-gradient(180deg, #161616, #111111);
  --kee-radius: 0px;
  --kee-shadow: 0 20px 58px -24px rgba(0, 0, 0, 0.6);
  --kee-shadow-glow: none;

  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
}

[data-theme="light"] {
  --kee-orange: #E85C1A;
  --kee-cyan: #E85C1A;
  --kee-blue: #E85C1A;
  --kee-violet: #E85C1A;
  --kee-amber: #C2410C;
  --kee-green: #B45309;
  --kee-grad: linear-gradient(120deg, #c2410c, #E85C1A);

  --bg-dark: #F8F9FA;
  --bg-secondary: #FFFFFF;
  --card-bg: #FFFFFF;
  --text-main: #111827;
  --text-muted: #4B5563;
  --overlay: rgba(248, 249, 250, 0.94);
  --nav-bg: rgba(248, 249, 250, 0.88);
  --glass-border: #E5E7EB;
  --accent-yellow: #C2410C;
  --accent-cyan: #C2410C;
  --teal-accent: #C2410C;

  --kee-bg-2: #F8F9FA;
  --kee-line: #E5E7EB;
  --kee-ink: #111827;
  --kee-muted: #4B5563;
  --kee-faint: #6B7280;
  --kee-glass: linear-gradient(180deg, #ffffff, #f3f4f6);
}

/* ---------- Base / dark-mode text visibility ---------- */
html { scrollbar-color: #2A2A2A #0A0A0A; }

body {
  font-family: 'Inter', sans-serif !important;
  background-color: #0A0A0A !important;
  color: #E4E4E7 !important;
}

::selection { background: #E85C1A !important; color: #ffffff !important; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #E85C1A; }

[data-theme="light"] { scrollbar-color: #D1D5DB #F8F9FA; }
[data-theme="light"] body {
  background: linear-gradient(165deg, rgba(232, 92, 26, 0.16) 0%, rgba(168, 85, 247, 0.13) 45%, rgba(59, 130, 246, 0.18) 100%), #FFFFFF !important;
  background-attachment: fixed !important;
  color: #111827 !important;
}
[data-theme="light"] ::-webkit-scrollbar-track { background: #F8F9FA; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #D1D5DB; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #E85C1A; }

/* ambient background: hairline grid + faint orange bleed, noir-friendly */
body::before {
  background:
    radial-gradient(60% 45% at 82% 0%, rgba(232, 92, 26, 0.07) 0%, transparent 60%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) !important;
  background-size: cover, 72px 72px, 72px 72px !important;
}
body::after { display: none !important; }

[data-theme="light"] body::before {
  background:
    radial-gradient(60% 45% at 82% 0%, rgba(232, 92, 26, 0.08) 0%, transparent 60%),
    linear-gradient(90deg, rgba(17, 24, 39, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(17, 24, 39, 0.03) 1px, transparent 1px) !important;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.hero-title, .kee-section-title, .section-title,
.project-body h3, .resume-section-title, .gh-card-nums strong,
.hero-stat strong, .stat-item b, .contact-profile-img + * {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .hero-title,
[data-theme="light"] .kee-section-title,
[data-theme="light"] .section-title,
[data-theme="light"] .project-body h3,
[data-theme="light"] .resume-section-title,
[data-theme="light"] .gh-card-nums strong,
[data-theme="light"] .hero-stat strong,
[data-theme="light"] .stat-item b {
  color: #111827 !important;
}

p, li, .flow-text, .hero-text, .kee-section-lede,
.project-body p, .project-content p {
  color: #9CA3AF !important;
}
[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] .flow-text,
[data-theme="light"] .hero-text,
[data-theme="light"] .kee-section-lede,
[data-theme="light"] .project-body p,
[data-theme="light"] .project-content p {
  color: #4B5563 !important;
}

strong, b { color: #ffffff !important; }

/* ---------- Nav ---------- */
nav {
  background: linear-gradient(90deg, #E85C1A 0%, #a855f7 52%, #3b82f6 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  height: 80px;
  line-height: 80px;
}
[data-theme="light"] nav {
  background: linear-gradient(90deg, #E85C1A 0%, #a855f7 52%, #3b82f6 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

.brand-logo {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .brand-logo { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.brand-logo-img {
  display: block;
  height: 50px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

nav ul li a:not(.nav-cta) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: rgba(10, 10, 10, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  padding: 10px 14px !important;
  line-height: 1 !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
nav ul li a:not(.nav-cta):hover { background: #0A0A0A !important; color: #ffffff !important; border-color: #0A0A0A !important; }
[data-theme="light"] nav ul li a:not(.nav-cta) { color: #ffffff !important; background: rgba(10, 10, 10, 0.28) !important; border-color: rgba(255, 255, 255, 0.55) !important; }
[data-theme="light"] nav ul li a:not(.nav-cta):hover { background: #0A0A0A !important; color: #ffffff !important; border-color: #0A0A0A !important; }

.nav-cta {
  font-family: 'Syne', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: rgba(10, 10, 10, 0.28) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 0 !important;
  padding: 11px 18px !important;
  line-height: 1 !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.nav-cta:hover { background: #0A0A0A !important; color: #ffffff !important; border-color: #0A0A0A !important; }
[data-theme="light"] .nav-cta { background: rgba(10, 10, 10, 0.28) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.55) !important; }
[data-theme="light"] .nav-cta:hover { background: #0A0A0A !important; color: #ffffff !important; border-color: #0A0A0A !important; }

.hamburger {
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: rgba(10, 10, 10, 0.28) !important;
}
.hamburger:hover { background: #0A0A0A !important; border-color: #0A0A0A !important; }
[data-theme="light"] .hamburger { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.55) !important; background: rgba(10, 10, 10, 0.28) !important; }
[data-theme="light"] .hamburger:hover { background: #0A0A0A !important; border-color: #0A0A0A !important; color: #ffffff !important; }

.mobile-nav {
  background: linear-gradient(90deg, #E85C1A 0%, #a855f7 52%, #3b82f6 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}
[data-theme="light"] .mobile-nav {
  background: linear-gradient(90deg, #E85C1A 0%, #a855f7 52%, #3b82f6 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}
.mobile-nav-content ul li a {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: block;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(10, 10, 10, 0.28) !important;
}
.mobile-nav-content ul li a:hover { background: #0A0A0A !important; border-color: #0A0A0A !important; }
[data-theme="light"] .mobile-nav-content ul li a { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.35) !important; background: rgba(10, 10, 10, 0.28) !important; }
[data-theme="light"] .mobile-nav-content ul li a:hover { background: #0A0A0A !important; border-color: #0A0A0A !important; color: #ffffff !important; }

/* ---------- Hero ---------- */
.hero { background: #0A0A0A !important; }
[data-theme="light"] .hero { background: transparent !important; }

.hero-glow {
  background:
    radial-gradient(52% 46% at 84% 30%, rgba(232, 92, 26, 0.16) 0%, transparent 62%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: cover, 72px 72px, 72px 72px !important;
}
[data-theme="light"] .hero-glow {
  background: linear-gradient(90deg, rgba(17, 24, 39, 0.04) 1px, transparent 1px), linear-gradient(0deg, rgba(17, 24, 39, 0.03) 1px, transparent 1px) !important;
  background-size: 72px 72px, 72px 72px !important;
}

.hero-badge {
  background: transparent !important;
  border: 1px solid rgba(232, 92, 26, 0.4) !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
}
.hero-badge i { color: #E85C1A !important; }
.hero-badge span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  color: #E85C1A !important;
}

.hero-title {
  font-size: clamp(2.8rem, 7.2vw, 6rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.01em !important;
  margin: 1.1rem 0 1rem !important;
}
[data-theme="light"] .hero-badge span { color: #C2410C !important; }

.kee-grad-text,
.grad-orange {
  background: linear-gradient(120deg, #E85C1A 0%, #a855f7 55%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.grad-text,
.grad-orb {
  background: linear-gradient(115deg, #E85C1A 0%, #f472b6 30%, #a855f7 60%, #60a5fa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.grad-blue {
  background: linear-gradient(115deg, #3b82f6, #8b5cf6 60%, #E85C1A) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Animated heading gradients */
.grad-animated {
  background: linear-gradient(120deg, #E85C1A, #a855f7, #3b82f6, #E85C1A) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradShift 6s linear infinite !important;
}
@keyframes gradShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ---------- Full-bleed layout (no side gutters beyond a small pad) ---------- */
.container,
.hero-content {
  width: 100% !important;
  max-width: none !important;
}
.container { padding: 0 clamp(1.25rem, 4vw, 4rem) !important; }
.hero-content { padding: 0 clamp(1.5rem, 5vw, 5rem) !important; }

/* ---------- Contact: orange + purple over black gradient ---------- */
#contact {
  position: relative;
  border-top: 1px solid #1E1E1E !important;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(139, 92, 246, 0.4) 0%, transparent 58%),
    radial-gradient(820px 480px at 6% 112%, rgba(232, 92, 26, 0.32) 0%, transparent 55%),
    radial-gradient(900px 520px at 55% 55%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
    #0A0A0A !important;
}
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}
#contact > .container { position: relative; z-index: 1; }
[data-theme="light"] #contact {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(139, 92, 246, 0.18) 0%, transparent 58%),
    radial-gradient(820px 480px at 6% 112%, rgba(232, 92, 26, 0.16) 0%, transparent 55%),
    #F8F9FA !important;
}

/* contact channel cards (Email / WhatsApp / GitHub / LinkedIn) */
.contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid #1E1E1E !important;
  border-radius: 0 !important;
  color: #D4D4D8 !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}
.contact-channel:hover {
  border-color: #E85C1A !important;
  background: rgba(232, 92, 26, 0.08) !important;
  transform: translateY(-2px) !important;
}
.contact-channel-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 92, 26, 0.4) !important;
  color: #E85C1A !important;
  font-size: 1.2rem !important;
}
.contact-channel-body { min-width: 0; }
.contact-channel-body b {
  display: block;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  letter-spacing: 0.04em;
}
.contact-channel-body span {
  display: block;
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: #71717A !important;
  margin-top: 2px;
}
.contact-channel .contact-arrow {
  margin-left: auto;
  color: #3F3F46 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}
.contact-channel:hover .contact-arrow { color: #E85C1A !important; transform: translateX(3px) !important; }
[data-theme="light"] .contact-channel { background: rgba(17, 24, 39, 0.04) !important; }
[data-theme="light"] .contact-channel:hover { background: rgba(232, 92, 26, 0.08) !important; }
[data-theme="light"] .contact-channel-body b { color: #111827 !important; }

/* ---------- Contact live map ---------- */
.contact-map {
  margin-top: 2.2rem;
  border: 1px solid #1E1E1E !important;
  background: rgba(255, 255, 255, 0.03) !important;
}
.contact-map-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #1E1E1E !important;
  flex-wrap: wrap;
}
.contact-map-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #E85C1A 0%, #a855f7 55%, #3b82f6 100%) !important;
  color: #ffffff !important;
}
.contact-map-body { min-width: 0; }
.contact-map-body b {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: block;
  font-size: 1rem;
}
.contact-map-body span { color: #A1A1AA !important; font-size: 0.85rem; }
.contact-map-getdirs {
  margin-left: auto;
  font-family: 'Syne', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: #ffffff !important;
  color: #0A0A0A !important;
  padding: 11px 16px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.contact-map-getdirs:hover { background: #0A0A0A !important; color: #ffffff !important; }
.contact-map-frame {
  display: block;
  width: 100%;
  height: 400px;
  border: 0 !important;
  filter: grayscale(0.35) invert(0.9) hue-rotate(180deg) contrast(0.9);
}
[data-theme="light"] .contact-map { background: rgba(17, 24, 39, 0.04) !important; border-color: #E5E7EB !important; }
[data-theme="light"] .contact-map-head { border-bottom-color: #E5E7EB !important; }
[data-theme="light"] .contact-map-body b { color: #111827 !important; }
[data-theme="light"] .contact-map-body span { color: #6B7280 !important; }
[data-theme="light"] .contact-map-frame { filter: none !important; }
[data-theme="light"] .contact-map-getdirs { background: #111827 !important; color: #ffffff !important; }
[data-theme="light"] .contact-map-getdirs:hover { background: #E85C1A !important; color: #ffffff !important; }

/* ---------- Resume certifications ---------- */
.cert-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid #1E1E1E !important;
  background: rgba(255, 255, 255, 0.03) !important;
  margin-bottom: 0.7rem;
}
.cert-item:hover { border-color: #E85C1A !important; }
.cert-item-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E85C1A !important;
  border: 1px solid rgba(232, 92, 26, 0.35) !important;
  font-size: 1rem !important;
}
.cert-item-body { min-width: 0; flex: 1; }
.cert-item-body b {
  display: block;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.02em;
}
.cert-item-body span {
  display: block;
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #71717A !important;
  margin-top: 2px;
}
.cert-item-verify {
  flex: 0 0 auto;
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #E85C1A !important;
  border: 1px solid rgba(232, 92, 26, 0.4) !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap;
}
.cert-item-verify:hover { background: #E85C1A !important; color: #ffffff !important; }
.cert-item-inline {
  color: #E85C1A !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.cert-item-inline:hover { color: #ff7524 !important; }
[data-theme="light"] .cert-item { background: rgba(17, 24, 39, 0.04) !important; }
[data-theme="light"] .cert-item-body b { color: #111827 !important; }

.hero-text { font-size: 1.05rem !important; line-height: 1.75 !important; max-width: 60ch !important; color: #A1A1AA !important; }
[data-theme="light"] .hero-text { color: #4B5563 !important; }

.hero-current {
  border: 1px solid #1E1E1E !important;
  background: #111111 !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
}
.hero-current i { color: #E85C1A !important; }
.hero-current div { color: #D4D4D8 !important; }

.kee-btn {
  border-radius: 0 !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 16px 22px !important;
}
.kee-btn-primary, .btn-primary {
  background: #E85C1A !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px -18px rgba(232, 92, 26, 0.7) !important;
}
.kee-btn-primary:hover, .btn-primary:hover { background: #ff7524 !important; color: #ffffff !important; }
.kee-btn-ghost {
  background: transparent !important;
  border: 1px solid #1E1E1E !important;
  color: #D4D4D8 !important;
}
.kee-btn-ghost:hover { border-color: #E85C1A !important; color: #ffffff !important; }
[data-theme="light"] .kee-btn-ghost { color: #374151 !important; }

/* profile image in the hero */
.hero-content.hero-split {
  align-items: flex-start !important;
}
.hero-profile {
  flex: 0 0 auto !important;
  margin: 4.9rem 0 0 0 !important;
}
.hero-profile-img {
  width: clamp(320px, 34vw, 470px) !important;
  height: clamp(320px, 34vw, 470px) !important;
  border-radius: 0 !important;
  border: 1px solid rgba(232, 92, 26, 0.6) !important;
  box-shadow: 0 0 0 8px rgba(232, 92, 26, 0.08), 0 30px 80px rgba(0, 0, 0, 0.7) !important;
  object-fit: cover;
}

.hero-stats-belt {
  border-top: 1px solid #1E1E1E !important;
  border-bottom: 1px solid #1E1E1E !important;
  background: #0A0A0A !important;
}
[data-theme="light"] .hero-stats-belt { background: transparent !important; }
.hero-stat strong { font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; color: #ffffff !important; }
[data-theme="light"] .hero-stat strong { color: #111827 !important; }
.hero-stat span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #71717A !important;
}
[data-theme="light"] .hero-stat span { color: #6B7280 !important; }

/* ---------- Tech marquee ---------- */
.tech-marquee { border-top: 1px solid #1E1E1E !important; border-bottom: 1px solid #1E1E1E !important; background: #0A0A0A !important; }
[data-theme="light"] .tech-marquee { background: transparent !important; }
.tech-marquee-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  color: #E85C1A !important;
}
.tech-marquee-item {
  border: 1px solid #1E1E1E !important;
  background: #111111 !important;
  color: #D4D4D8 !important;
  border-radius: 0 !important;
}
[data-theme="light"] .tech-marquee-item { background: #FFFFFF !important; color: #374151 !important; }

/* ---------- About / tech badges ---------- */
.tech-badge {
  border: 1px solid #1E1E1E !important;
  background: #111111 !important;
  color: #D4D4D8 !important;
  border-radius: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.tech-badge:hover { border-color: #E85C1A !important; color: #E85C1A !important; }
[data-theme="light"] .tech-badge { background: #FFFFFF !important; }

/* neutralise every per-technology tint */
.badge-python, .badge-django, .badge-flutter, .badge-react, .badge-javascript,
.badge-nodejs, .badge-typescript, .badge-vue, .badge-angular, .badge-tailwind,
.badge-bootstrap, .badge-express, .badge-postgres, .badge-mongodb, .badge-docker,
.badge-git, .badge-aws, .badge-ai {
  color: #D4D4D8 !important;
  background: #111111 !important;
}

/* Core Technologies card: reuses the .gh-card surface so it keeps the same
   ray-lit effects as the GitHub card beside it. */
.tech-card { margin-top: 24px; cursor: default; }
.tech-card h4 { margin: 0 0 16px; font-size: 15px; line-height: 1.2; }
.tech-card div { margin-bottom: 22px; }
.tech-card div:last-child { margin-bottom: 0; }

/* ---------- Ray-lit card surface ----------
   Ported from the .family-card treatment in the "ONE CATALOGUE" section of
   labs.chatoner.com: two soft corner glows that die out by ~50-58% so the card
   face stays clean, plus four thin edge beams ("rays") catching the rim
   instead of a gradient that occupies the whole card.

   Kept inside the noir language — square corners, #0A0A0A/#111111 surfaces,
   orange as the secondary beam against each card's own accent. */
.project-card,
.gh-card {
  --ray-primary: var(--card-accent, #E85C1A);
  --ray-secondary: #E85C1A;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Corner light. Each glow fades to fully transparent well before the far edge,
   so the middle of the card is untouched.

   Four layers. The two glows and the faint diagonal tint are clipped to
   padding-box so they stay on the card face; the saturated orange->violet->blue
   ramp is border-box against a transparent 1px border, which is what draws the
   gradient edge.

   These MUST be longhands. The background shorthand accepts a <box> value only
   once for the whole declaration, so writing "..., padding-box, ..., border-box"
   inside background: is invalid and the browser drops the entire declaration -
   which is exactly why the earlier gradient attempt left cards fully
   transparent. background-clip is a list and has to be set per layer.

   The tint layer is opaque (color-mixed against the surface colour rather than
   layered as an alpha wash) for the same reason: a border-box background is
   painted across the whole border box, so an opaque padding-box layer is what
   hides the ramp from the card interior and leaves it on the 1px rim. */
.project-card,
.gh-card {
  border: 1px solid transparent !important;
  background-image:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--ray-primary) 16%, transparent), transparent 50%),
    radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--ray-secondary) 12%, transparent), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, #E85C1A 7%, #111111) 0%, color-mix(in srgb, #3b82f6 8%, #111111) 100%),
    linear-gradient(135deg, #E85C1A 0%, #a855f7 50%, #3b82f6 100%);
  background-clip: padding-box, padding-box, padding-box, border-box !important;
}

/* Hover lifts the glows and brightens both the tint and the border ramp. The
   border stays transparent on purpose: setting border-color here would paint
   over the border-box gradient and kill the gradient edge. */
.project-card:hover,
.gh-card:hover {
  background-image:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--ray-primary) 22%, transparent), transparent 50%),
    radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--ray-secondary) 18%, transparent), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, #ff7524 12%, #131313) 0%, color-mix(in srgb, #60a5fa 14%, #131313) 100%),
    linear-gradient(135deg, #ff7524 0%, #c084fc 50%, #60a5fa 100%);
  background-clip: padding-box, padding-box, padding-box, border-box !important;
}

[data-theme="light"] .project-card,
[data-theme="light"] .gh-card {
  background-image:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--ray-primary) 11%, transparent), transparent 50%),
    radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--ray-secondary) 8%, transparent), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, #E85C1A 5%, #FFFFFF) 0%, color-mix(in srgb, #3b82f6 6%, #FFFFFF) 100%),
    linear-gradient(135deg, #E85C1A 0%, #a855f7 50%, #3b82f6 100%);
  background-clip: padding-box, padding-box, padding-box, border-box !important;
}

/* The rays themselves: two beams in the card's own accent along the top and
   left, two in orange along the bottom and right, each only 2px and a third of
   the card's length.

   These sit ABOVE the children on purpose. The card's top half is an opaque
   screenshot, so at z-index -1 the top and left beams were completely hidden
   and only a sliver of orange showed at one corner. At z-index 2 the beams
   read as light catching the rim, and because they are only 2px wide against
   1.6rem of body padding they never touch the text. pointer-events keeps the
   whole card clickable. */
.project-card::after,
.gh-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--ray-primary), transparent 15%),
    linear-gradient(180deg, var(--ray-primary), transparent 17%),
    linear-gradient(270deg, var(--ray-secondary), transparent 17%),
    linear-gradient(0deg, var(--ray-secondary), transparent 17%);
  background-size: 36% 2px, 2px 42%, 34% 2px, 2px 40%;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ray-primary) 45%, transparent));
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Blurred orb, kept behind the content at z-index -1 and anchored just below
   the screenshot so it lands on the body rather than being hidden by the image. */
.project-card::before,
.gh-card::before {
  content: "";
  position: absolute;
  top: 44%;
  right: -48px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--ray-primary);
  opacity: 0.16;
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.25s ease;
}

.project-card:hover::after,
.gh-card:hover::after {
  opacity: 1;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ray-primary) 65%, transparent));
}

.project-card:hover::before,
.gh-card:hover::before {
  opacity: 0.26;
}

/* On white the beams need more weight to register at all. */
[data-theme="light"] .project-card::after,
[data-theme="light"] .gh-card::after {
  opacity: 1;
  background-size: 38% 2px, 2px 44%, 36% 2px, 2px 42%;
}

[data-theme="light"] .project-card::before,
[data-theme="light"] .gh-card::before {
  opacity: 0.1;
}

/* border/background come from the ray-lit surface block above. */
.gh-card { border-radius: 0 !important; }
.gh-card-top span, .gh-card-nums span, .gh-card-langs span { color: #71717A !important; }

/* ---------- Projects ---------- */
.kee-projects { border-top: 1px solid #1E1E1E !important; }

.kee-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: #E85C1A !important;
}
.kee-eyebrow i { color: #E85C1A !important; }

.kee-section-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem) !important;
  line-height: 1 !important;
}

.kee-filter button {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #A1A1AA !important;
  background: transparent !important;
  border: 1px solid #1E1E1E !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  transition: all 0.2s ease !important;
}
.kee-filter button:hover { border-color: #E85C1A !important; color: #E85C1A !important; }
.kee-filter button.is-active { background: #E85C1A !important; border-color: #E85C1A !important; color: #ffffff !important; }
[data-theme="light"] .kee-filter button { color: #4B5563 !important; }

/* background and border are owned by the ray-lit surface block above, so they
   are not re-stamped here — that would flatten the corner glows and overwrite
   the gradient border. */
.project-card {
  border-radius: 0 !important;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7) !important;
}
.project-card:hover { transform: translateY(-4px) !important; }
[data-theme="light"] .project-card { box-shadow: 0 24px 60px -30px rgba(17, 24, 39, 0.25) !important; }

/* Gradient title text. The light-mode override that forced a solid fill was
   dropped on purpose so the ramp reads in both themes; at 1.35rem bold the
   orange end still clears 3:1 against white. */
.project-body h3 {
  font-size: 1.35rem !important;
  line-height: 1.1 !important;
  background: linear-gradient(120deg, #E85C1A 0%, #a855f7 55%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.project-body p { font-size: 0.875rem !important; line-height: 1.7 !important; color: #A1A1AA !important; }

/* Tags reuse each card's own accent so they line up with that card's rays
   instead of forcing one colour onto all twenty. Longhands again: background-clip
   is a list, the background shorthand is not. The tint is color-mixed against an
   opaque base so the border-box ramp stays on the tag's 1px edge. */
.project-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background-image:
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent, #E85C1A) 22%, #0A0A0A) 0%, color-mix(in srgb, #E85C1A 18%, #0A0A0A) 100%),
    linear-gradient(135deg, var(--card-accent, #E85C1A) 0%, #E85C1A 100%);
  background-clip: padding-box, border-box !important;
}
[data-theme="light"] .project-tag {
  color: #111827 !important;
  background-image:
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent, #E85C1A) 12%, #FFFFFF) 0%, color-mix(in srgb, #E85C1A 10%, #FFFFFF) 100%),
    linear-gradient(135deg, var(--card-accent, #E85C1A) 0%, #E85C1A 100%);
  background-clip: padding-box, border-box !important;
}

.project-action {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #E85C1A 0%, #a855f7 55%, #3b82f6 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 !important;
  transition: filter 0.2s ease, transform 0.2s ease !important;
}
.project-action:hover { filter: brightness(1.18) !important; transform: translateY(-2px) !important; }
.project-action.is-muted {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(232, 92, 26, 0.5) 0%, rgba(168, 85, 247, 0.5) 55%, rgba(59, 130, 246, 0.5) 100%) !important;
}

.project-live { font-family: ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: 0.14em !important; color: #E85C1A !important; }

/* ---------- IoT deck (full-width research presentation cards) ---------- */
.iot-decks-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  align-items: start;
}
.project-card.iot-deck {
  grid-column: auto;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  min-width: 0;
}
.iot-deck-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.iot-deck-titles h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
  margin: 0 0 4px !important;
  background: linear-gradient(120deg, #E85C1A 0%, #a855f7 55%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.iot-deck-tagline { margin: 0 !important; color: #A1A1AA !important; font-size: 0.95rem !important; }
.iot-deck-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.iot-deck-author,
.iot-deck-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  border: 1px solid rgba(232, 92, 26, 0.5) !important;
  background: rgba(10, 10, 10, 0.5) !important;
  padding: 5px 12px !important;
}
.iot-deck-blurb { color: #A1A1AA !important; line-height: 1.68 !important; font-size: 0.95rem !important; margin: 0.9rem 0 0.4rem !important; }
.iot-deck-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: #71717A !important;
  margin: 0 0 1rem !important;
}
.iot-deck-photo {
  overflow: hidden;
  border: 1px solid rgba(232, 92, 26, 0.35) !important;
  aspect-ratio: 16 / 10;
  background: #0A0A0A;
}
.iot-deck-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.iot-deck-slides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.iot-deck-slides figure { margin: 0 !important; border: 1px solid #1E1E1E !important; aspect-ratio: 16 / 10; overflow: hidden; background: #0A0A0A; }
.iot-deck-slides figure:hover { border-color: #a855f7 !important; }
.iot-deck-slides img { display: block; width: 100%; height: 100%; object-fit: contain; }
.iot-deck-lists { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.iot-deck-lists h4 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #E85C1A !important;
  margin: 0 !important;
  border-bottom: 1px solid #1E1E1E !important;
  padding-bottom: 8px !important;
}
.iot-deck-list {
  list-style: none;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 16px;
}
.iot-deck-list li {
  display: grid;
  grid-template-columns: 10px auto;
  gap: 2px 10px;
  align-items: baseline;
}
.iot-deck-list li::before { content: "▸"; color: #a855f7 !important; font-size: 0.7rem; }
.iot-deck-list li strong { color: #ffffff !important; font-weight: 600; }
.iot-deck-list li span { color: #71717A !important; font-size: 0.8rem !important; }
.iot-deck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

[data-theme="light"] .iot-deck-tagline { color: #6B7280 !important; }
[data-theme="light"] .iot-deck-blurb { color: #4B5563 !important; }
[data-theme="light"] .iot-deck-meta { color: #6B7280 !important; }
[data-theme="light"] .iot-deck-author,
[data-theme="light"] .iot-deck-count { color: #111827 !important; border-color: #D1D5DB !important; background: rgba(17, 24, 39, 0.06) !important; }
[data-theme="light"] .iot-deck-slides figure { border-color: #E5E7EB !important; }
[data-theme="light"] .iot-deck-list li strong { color: #111827 !important; }
[data-theme="light"] .iot-deck-list li span { color: #6B7280 !important; }
[data-theme="light"] .iot-deck-lists h4 { border-bottom-color: #E5E7EB !important; }

@media (max-width: 1100px) {
  .iot-deck-lists { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .iot-decks-grid { grid-template-columns: 1fr; }
  .iot-deck-badges { align-items: flex-start; }
}
@media (max-width: 720px) {
  .iot-deck-list { grid-template-columns: repeat(2, 1fr); }
  .iot-deck-slides { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Experience / resume / contact ---------- */
.resume-paper { background: #111111 !important; border: 1px solid #1E1E1E !important; border-radius: 0 !important; }
.resume-item { border-bottom: 1px solid #1E1E1E !important; }
.resume-section-title { letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #E85C1A !important; font-size: 12px !important; }

.contact-profile-img { border-radius: 0 !important; border: 1px solid rgba(232, 92, 26, 0.6) !important; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7) !important; }

input, textarea {
  color: #E4E4E7 !important;
  background: #111111 !important;
  border: 1px solid #262626 !important;
  border-bottom: 1px solid #262626 !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
}
input:focus, textarea:focus { border-color: #E85C1A !important; }
[data-theme="light"] input,
[data-theme="light"] textarea { color: #111827 !important; background: #ffffff !important; border-color: #E5E7EB !important; }

.btn-large, .btn-github, .btn-linkedin, .btn-whatsapp, .btn-outline {
  border-radius: 0 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.btn-primary { background: #E85C1A !important; }

#contact #download-vcard { border-radius: 0 !important; }

/* ---------- Social / sidebar legacy pieces ---------- */
.social-btn, .social-icon-box {
  border: 1px solid #1E1E1E !important;
  background: #111111 !important;
  color: #D4D4D8 !important;
  border-radius: 0 !important;
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.social-btn:hover, .social-icon-box:hover { border-color: #E85C1A !important; color: #E85C1A !important; }

.sidebar { background: transparent !important; }
.sidebar-dot { border: 1px solid #262626 !important; background: #111111 !important; }
.sidebar-dot:hover, .sidebar-dot.active { background: #E85C1A !important; border-color: #E85C1A !important; }

.hero-visual, .hero-image-frame, .hero-float-card, .float-card-1, .float-card-2 {
  border-radius: 0 !important;
  border-color: #1E1E1E !important;
}

/* ---------- PPT viewer / assistant stay themed ---------- */
.ppt-viewer-panel { border-color: #1E1E1E !important; }
.ppt-nav-btn, .ppt-viewer-close { color: #D4D4D8 !important; border-color: #1E1E1E !important; }
.ppt-nav-btn:hover { border-color: #E85C1A !important; color: #E85C1A !important; }

.assistant-launcher { background: #E85C1A !important; color: #ffffff !important; }
.assistant-panel { background: #111111 !important; border-color: #1E1E1E !important; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid #1E1E1E !important;
  background: #0A0A0A !important;
  color: #71717A !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}
footer a { color: #71717A !important; }
footer a:hover { color: #E85C1A !important; }
[data-theme="light"] footer { background: #F8F9FA !important; }

/* ==========================================================================
   SPLASH SCREEN — animated loader (>5s)
   ========================================================================== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0A0A;
  transition: opacity 0.75s ease;
}

.splash.splash-done { opacity: 0; pointer-events: none; }

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 90vw;
}

.splash-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  animation: splashFade 0.8s ease both;
}

.splash-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(120deg, #ffffff 20%, #ff8b40 70%, #E85C1A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.splash-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #71717A;
  text-align: center;
}

.splash-progress {
  width: min(280px, 70vw);
  height: 2px;
  background: #1E1E1E;
  overflow: hidden;
}
.splash-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: #E85C1A;
}

.splash-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #71717A;
}
.splash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E85C1A;
  animation: splashPulse 1.1s ease-in-out infinite;
}
.splash-pct { color: #A1A1AA; }

@keyframes splashFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes splashPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ---------- Responsive cleanup ---------- */
@media (max-width: 900px) {
  nav { height: 68px; line-height: 68px; }
  #intro { padding-top: 104px; }
  .hero-title { font-size: clamp(2.4rem, 11vw, 3.4rem) !important; }
  .hero-content.hero-split { align-items: center !important; }
  .hero-profile { margin: 0 !important; }
  .hero-profile-img {
    width: clamp(200px, 55vw, 240px) !important;
    height: clamp(200px, 55vw, 240px) !important;
  }
}
@media (max-width: 600px) {
  #intro { padding-top: 84px; }
  .hero { padding: 84px 0 70px; }
}

/* ---------- Light-mode text inversion (white text → near-black for visibility) ---------- */
[data-theme="light"] strong,
[data-theme="light"] b {
  color: #111827 !important;
}

[data-theme="light"] .hero-current { background: #FFFFFF !important; border-color: #E5E7EB !important; }
[data-theme="light"] .hero-current div { color: #374151 !important; }
[data-theme="light"] .hero-current i { color: #C2410C !important; }

[data-theme="light"] .tech-badge,
[data-theme="light"] .badge-python,
[data-theme="light"] .badge-django,
[data-theme="light"] .badge-flutter,
[data-theme="light"] .badge-react,
[data-theme="light"] .badge-javascript,
[data-theme="light"] .badge-nodejs,
[data-theme="light"] .badge-typescript,
[data-theme="light"] .badge-java,
[data-theme="light"] .badge-vue,
[data-theme="light"] .badge-angular,
[data-theme="light"] .badge-tailwind,
[data-theme="light"] .badge-bootstrap,
[data-theme="light"] .badge-express,
[data-theme="light"] .badge-postgres,
[data-theme="light"] .badge-mongodb,
[data-theme="light"] .badge-docker,
[data-theme="light"] .badge-git,
[data-theme="light"] .badge-aws,
[data-theme="light"] .badge-ai {
  color: #374151 !important;
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
}

[data-theme="light"] .project-action {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] .project-action:hover,
[data-theme="light"] .project-action.is-muted:hover {
  filter: brightness(1.18) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] .project-action.is-muted {
  background: linear-gradient(135deg, rgba(232, 92, 26, 0.55) 0%, rgba(168, 85, 247, 0.55) 55%, rgba(59, 130, 246, 0.55) 100%) !important;
}

[data-theme="light"] .gh-card { background: #FFFFFF !important; border-color: #E5E7EB !important; }

[data-theme="light"] .resume-paper { background: #FFFFFF !important; border-color: #E5E7EB !important; }
[data-theme="light"] .resume-item { border-bottom-color: #E5E7EB !important; }

[data-theme="light"] .social-btn,
[data-theme="light"] .social-icon-box {
  background: #FFFFFF !important;
  color: #374151 !important;
  border-color: #E5E7EB !important;
}
[data-theme="light"] .social-btn:hover,
[data-theme="light"] .social-icon-box:hover { color: #C2410C !important; border-color: #C2410C !important; }