/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Navy Liquid Glass
   iOS 26-inspired material language: deep navy surfaces, frosted
   glass layers with specular top edges, calm purposeful motion.
   Accent: iOS system blue (#0A84FF) on navy.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Palette — navy base + iOS blue accents */
  --navy-950:  #04091A;
  --navy-900:  #071226;
  --navy-800:  #0B1B3A;
  --accent:    #0A84FF;
  --accent-2:  #6EB4FF;
  --accent-3:  #8482FF;
  --grad:      linear-gradient(120deg, #0A84FF, #64D2FF);
  --grad-135:  linear-gradient(135deg, #0A84FF 0%, #3FA2FF 55%, #64D2FF 100%);
  --grad-180:  linear-gradient(180deg, #0A84FF, #64D2FF);

  /* Liquid Glass material */
  --glass-bg:         rgba(13, 27, 58, 0.52);
  --glass-bg-strong:  rgba(9, 19, 42, 0.74);
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-edge:       inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glass-shadow:     0 12px 32px rgba(2, 8, 23, 0.45), 0 2px 8px rgba(2, 8, 23, 0.30);
  --glass-blur:       blur(20px) saturate(160%);
  --glass-blur-card:  blur(12px) saturate(150%);

  /* Radii — continuous iOS-like curvature */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  /* Motion */
  --ease-ios:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation with accent tint (used sparingly) */
  --shadow-accent:    0 8px 24px rgba(10, 132, 255, 0.28);
  --shadow-accent-sm: 0 4px 14px rgba(10, 132, 255, 0.20);

  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Custom Scrollbar — thin, neutral, iOS-like ── */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(110, 180, 255, 0.45); }

/* ── Text Selection ── */
::selection {
  background: rgba(10, 132, 255, 0.30);
  color: #fff;
}

/* ── Keyboard focus ── visible outline for keyboard/tab navigation,
   suppressed for mouse/touch via :focus-visible support */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCENT TEXT COLOR
   ═══════════════════════════════════════════════════════════════════ */
.text-accent,
.text-accent-hover:hover,
#menuToggle .active,
#menu li.active a {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — Ambient navy glow blobs (pure CSS, no images)
   ═══════════════════════════════════════════════════════════════════ */
#home::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 12% 58%, rgba(10, 84, 200, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 88% 38%, rgba(10, 132, 255, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 55% 85%, rgba(100, 210, 255, 0.05) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BACKGROUND ACCENT — gradient replaces flat color
   ═══════════════════════════════════════════════════════════════════ */
.bg-accent,
.bg-accent-hover:hover,
.line:before,
h1:before,
.header .desktop-nav-element h2 {
  background: var(--grad);
}

/* Nav active / hover: frosted glass pill, calm accent edge */
.header ul.icon-menu li.desktop-nav-element.active,
.header ul.icon-menu li.desktop-nav-element:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-left: 2px solid var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.header ul.icon-menu li.desktop-nav-element.active i,
.header ul.icon-menu li.desktop-nav-element:hover i {
  color: var(--accent-2) !important;
  transition: color 0.25s var(--ease-ios) !important;
}

/* Nav label — gradient text + mono font */
.header .desktop-nav-element h2 {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ── Button before-element (hover fill) — static, no looping motion ── */
.button:before {
  background: var(--grad) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TRANSITION REVEALER
   ═══════════════════════════════════════════════════════════════════ */
.revealer__layer:nth-child(2) {
  background: var(--grad-135) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTON — hairline border, soft lift, restrained accent shadow
   ═══════════════════════════════════════════════════════════════════ */
.button {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  transition: box-shadow 0.3s var(--ease-ios), border-color 0.3s var(--ease-ios), transform 0.3s var(--ease-ios) !important;
  position: relative;
  overflow: hidden !important;
  /* iOS Safari / WebKit fix: border-radius + overflow:hidden doesn't clip
     absolutely-positioned children unless a compositing layer is forced */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}
.button:hover {
  box-shadow: var(--shadow-accent) !important;
  border-color: rgba(110, 180, 255, 0.55) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT — Form focus ring (iOS style: solid border + soft halo)
   ═══════════════════════════════════════════════════════════════════ */
#contact input[type="text"]:focus,
#contact input[type="email"]:focus,
#contact textarea:focus {
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22) !important;
  outline: none !important;
  transition: border-color 0.25s var(--ease-ios), box-shadow 0.25s var(--ease-ios) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG POST THUMB
   ═══════════════════════════════════════════════════════════════════ */
.post-thumb {
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.20);
}

/* ═══════════════════════════════════════════════════════════════════
   STAT / TECH STACK CARDS — Liquid Glass panels
   ═══════════════════════════════════════════════════════════════════ */
.border-black-3,
.border-grey {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-card) !important;
  -webkit-backdrop-filter: var(--glass-blur-card) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-edge), 0 6px 20px rgba(2, 8, 23, 0.30) !important;
  transition: transform 0.3s var(--ease-ios), box-shadow 0.3s var(--ease-ios) !important;
  /* Equal-height cards */
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 148px !important;
  box-sizing: border-box !important;
}
.border-black-3:hover,
.border-grey:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--glass-edge), 0 14px 36px rgba(2, 8, 23, 0.45), 0 4px 14px rgba(10, 132, 255, 0.10) !important;
}

/* Card heading — prevent text overflow, clamp font size */
.border-black-3 h3,
.border-grey h3 {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  font-size: clamp(1.5rem, 5vw, 3.125rem) !important;
  line-height: 1.1 !important;
}

/* Stat number — gradient text */
h3.text-accent {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-variant-numeric: tabular-nums !important;
  filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION WATERMARK (big bg text)
   ═══════════════════════════════════════════════════════════════════ */
.text-muted {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 0.05 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HR DIVIDERS — soft hairline
   ═══════════════════════════════════════════════════════════════════ */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(110, 180, 255, 0.45), transparent) !important;
  opacity: 0.35 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SKILLS — Progress Circles (c100)
   ═══════════════════════════════════════════════════════════════════ */
.pie,
.c100 .bar,
.c100.p51 .fill,
.c100.p52 .fill,
.c100.p53 .fill,
.c100.p54 .fill,
.c100.p55 .fill,
.c100.p56 .fill,
.c100.p57 .fill,
.c100.p58 .fill,
.c100.p59 .fill,
.c100.p60 .fill,
.c100.p61 .fill,
.c100.p62 .fill,
.c100.p63 .fill,
.c100.p64 .fill,
.c100.p65 .fill,
.c100.p66 .fill,
.c100.p67 .fill,
.c100.p68 .fill,
.c100.p69 .fill,
.c100.p70 .fill,
.c100.p71 .fill,
.c100.p72 .fill,
.c100.p73 .fill,
.c100.p74 .fill,
.c100.p75 .fill,
.c100.p76 .fill,
.c100.p77 .fill,
.c100.p78 .fill,
.c100.p79 .fill,
.c100.p80 .fill,
.c100.p81 .fill,
.c100.p82 .fill,
.c100.p83 .fill,
.c100.p84 .fill,
.c100.p85 .fill,
.c100.p86 .fill,
.c100.p87 .fill,
.c100.p88 .fill,
.c100.p89 .fill,
.c100.p90 .fill,
.c100.p91 .fill,
.c100.p92 .fill,
.c100.p93 .fill,
.c100.p94 .fill,
.c100.p95 .fill,
.c100.p96 .fill,
.c100.p97 .fill,
.c100.p98 .fill,
.c100.p99 .fill,
.c100.p100 .fill {
  border: 0.08em solid var(--accent) !important;
  filter: none !important;
}

/* Skill circle container — gentle hover lift */
.c100 {
  transition: transform 0.3s var(--ease-ios), filter 0.3s var(--ease-ios) !important;
  cursor: default;
}
.c100:hover {
  transform: scale(1.04) !important;
  filter: drop-shadow(0 6px 14px rgba(10, 132, 255, 0.30)) !important;
}

/* Percentage text inside circle — gradient */
.c100 > span {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  font-family: var(--mono) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TIMELINE — Experience & Education
   ═══════════════════════════════════════════════════════════════════ */

/* Vertical line — gradient */
li.relative.pr-20.pl-60::after {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 60%, transparent 100%) !important;
  width: 2px !important;
  opacity: 0.30 !important;
}

/* Date badges — mono font */
.font-Open-sans.text-fs-12,
span.opacity-80.font-Open-sans.uppercase {
  font-family: var(--mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PORTFOLIO GRID — Hover overlay
   ═══════════════════════════════════════════════════════════════════ */

/* Portfolio card lift on hover */
.gridlist li figure {
  transition: transform 0.3s var(--ease-ios), box-shadow 0.3s var(--ease-ios) !important;
}
.gridlist li:hover figure {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 16px 40px rgba(2, 8, 23, 0.55) !important;
}

/* Navy translucent overlay instead of flat blue */
.gridlist li div {
  background: linear-gradient(150deg, rgba(7, 22, 48, 0.92), rgba(10, 84, 200, 0.85)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SOCIAL ICONS — calm gradient hover
   ═══════════════════════════════════════════════════════════════════ */
.social-item {
  transition: transform 0.3s var(--ease-ios), box-shadow 0.3s var(--ease-ios), background 0.3s var(--ease-ios) !important;
}
.social-item:hover {
  background: var(--grad) !important;
  box-shadow: var(--shadow-accent-sm) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOUSE CURSOR — soft blue
   ═══════════════════════════════════════════════════════════════════ */
.cursor-inner {
  background-color: var(--accent-2);
  box-shadow: none;
}
.cursor-inner.cursor-hover {
  background-color: rgba(110, 180, 255, 0.20);
  box-shadow: none;
}
.cursor-outer {
  border: 2px solid rgba(110, 180, 255, 0.55);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME EXTRAS — 4 decorative UI blocks (injected by home-extras.js)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Typewriter cursor ── */
.he-typewriter-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-2);
  font-weight: 300;
  animation: heCursorBlink 0.9s step-end infinite;
}
@keyframes heCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 3. Available badge — floating glass pill ── */
.he-available-badge {
  /* Reset native <button> chrome — this is a real <button> for a11y */
  appearance: none;
  -webkit-appearance: none;
  outline: none;

  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 14px;
  border-radius: 99px;
  background: var(--glass-bg-strong);
  border: 1px solid rgba(48, 209, 88, 0.30);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 8px 24px rgba(2, 8, 23, 0.40);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-ios), transform 0.5s var(--ease-ios);
  cursor: default;
  pointer-events: none;
}
.he-available-badge--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  cursor: pointer;
}
.he-avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30D158;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.45);
  animation: heAvailPulse 2.4s ease-out infinite;
}
@keyframes heAvailPulse {
  0%   { box-shadow: 0 0 0 0   rgba(48, 209, 88, 0.40); }
  70%  { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(48, 209, 88, 0);    }
}

/* ── 4. Floating code card — deep glass panel ──
   Anchored top-centre over the left hero photo (photo sits ~x40, ~567 wide;
   168 + 155 ≈ its horizontal centre). Only shown ≥1600px. */
.he-code-card {
  position: fixed;
  top: 430px;
  left: 168px;
  z-index: 100;
  width: 310px;
  border-radius: 18px;
  background: rgba(8, 17, 38, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 60px rgba(2, 8, 23, 0.55),
    0 2px 10px rgba(2, 8, 23, 0.35);
  pointer-events: auto;
  animation: heCardFloat 7s ease-in-out infinite;
  /* Hidden below 1600px to avoid overlapping hero text */
  display: none;
}
@media (min-width: 1600px) {
  .he-code-card { display: block; }
}
@keyframes heCardFloat {
  0%,100% { transform: translateY(-4px); }
  50%      { transform: translateY( 4px); }
}
.he-code-card--minimized .he-code-body { display: none !important; }
.he-code-card--minimized { animation: none !important; }
.he-code-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.he-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.he-dot--red    { background: #ff5f57; }
.he-dot--yellow { background: #febc2e; }
.he-dot--green  { background: #28c840; }
.he-code-filename {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
}
.he-code-body {
  padding: 14px 16px 16px;
}
.he-code-line, .he-code-empty {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  /* Wrap long values (e.g. the Stack array) inside the fixed-width card
     instead of overflowing; keep the 2-space property indent, and give
     wrapped continuation lines a hanging indent so they read like code. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-left: 1.4em;
  text-indent: -1.4em;
}
.he-code-empty { height: 0.75rem; }
.he-c-kw   { color: #569cd6; }
.he-c-name { color: #9cdcfe; }
.he-c-op   { color: rgba(255,255,255,0.50); }
.he-c-type { color: #4ec9b0; }
.he-c-prop { color: #9cdcfe; }
.he-c-val  { color: #ce9178; }

/* Mobile — shrink badge */
@media (max-width: 767px) {
  .he-available-badge { bottom: 16px; right: 16px; font-size: 0.72rem; padding: 7px 13px 7px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Cards equal height & single column
   ═══════════════════════════════════════════════════════════════════ */

/* Card column wrapper: flex column so card stretches to row height */
.w-1\/2.px-15 {
  display: flex !important;
  flex-direction: column !important;
}

/* ≤575px — single column, full width */
@media (max-width: 575px) {
  .w-1\/2.px-15 {
    width: 100% !important;
    display: block !important;
  }
  .border-black-3,
  .border-grey {
    min-height: auto !important;
  }
  /* More gap between skill card boxes */
  #about .border-black-3.rounded-5 {
    padding-bottom: 14px !important;
  }
  /* Gap between card wrappers (must target wrapper, not inner card, to avoid margin collapse) */
  #about .w-1\/2.px-15 {
    margin-bottom: 36px !important;
  }
}

/* ≤399px — reduce padding & heading size further */
@media (max-width: 399px) {
  .border-black-3,
  .border-grey {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .border-black-3 h3,
  .border-grey h3 {
    font-size: clamp(1.25rem, 8vw, 2rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TECH STACK HIGHLIGHT — iOS inset-grouped list
   One glass card; groups separated by hairlines; label above pills;
   pills wrap so nothing hides behind horizontal scroll.
   Monochrome: neutral chips + a single iOS-blue tint for primaries.
   ═══════════════════════════════════════════════════════════════════ */
.he-tech-stack {
  display: flex;
  flex-direction: column;
  margin: 18px 0 24px;
  padding: 4px 16px;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ── Group: label left, pills wrap right; hairline between groups ──
   Desktop keeps rows shallow so the home page still fits one viewport;
   mobile stacks the label above (see ≤767px block). */
.he-ts-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.he-ts-row + .he-ts-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Category label — uniform muted section header ── */
.he-ts-label {
  flex-shrink: 0;
  width: 92px;
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

/* ── Pills container — wraps, nothing hidden ── */
.he-ts-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* ── Base pill — neutral frosted chip ── */
.he-ts-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.25s var(--ease-ios), border-color 0.25s var(--ease-ios);
  cursor: default;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.he-ts-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Overflow items hidden until the group is expanded */
.he-ts-pill--hidden { display: none; }
.he-ts-pills.he-more-expanded .he-ts-pill--hidden { display: inline-flex; }

/* "+N" / "Less" — real <button>, reads as interactive */
.he-ts-pill--more {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: normal;
  color: rgba(255, 255, 255, 0.50);
  font-style: italic;
  cursor: pointer;
}
.he-ts-pill--more:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 132, 255, 0.14);
  border-color: rgba(10, 132, 255, 0.40);
}

/* ── Primary pills (key strengths) — single iOS-blue tint ── */
.he-ts-pill--primary {
  color: #EAF4FF;
  font-weight: 700;
  background: rgba(10, 132, 255, 0.16);
  border-color: rgba(10, 132, 255, 0.45);
}
.he-ts-pill--primary:hover {
  background: rgba(10, 132, 255, 0.24);
  border-color: rgba(110, 180, 255, 0.70);
}

/* ── Responsive — mobile (≤767px): label stacks above pills ── */
@media (max-width: 767px) {
  .he-tech-stack {
    margin: 14px 0 20px;
    padding: 2px 14px;
  }
  .he-ts-row {
    flex-direction: column;
    gap: 6px;
    padding: 9px 0;
  }
  .he-ts-label {
    width: auto;
    padding-top: 0;
  }
  .he-ts-pill {
    font-size: 0.72rem;
    padding: 3px 10px;
  }
}

/* ── Very small screens (≤399px) ── */
@media (max-width: 399px) {
  .he-ts-pill {
    font-size: 0.70rem;
    padding: 2px 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME LAYOUT — intro text, seek line, word spans, spotlight
   ═══════════════════════════════════════════════════════════════════ */

/* Typewriter block — always reserve 2-line height so typing/deleting never causes reflow */
#home h1 span.block {
  display: block;
  min-height: 124px; /* 2 × 62px line-height at 45px font */
}

/* ── Title split: name / sep / alias ── */
.he-name,
.he-alias {
  display: inline;
  cursor: default;
  transition: color 0.25s var(--ease-ios), text-shadow 0.25s var(--ease-ios);
}
.he-sep {
  display: inline;
  opacity: 0.40;
}
/* Soft blue lift on name hover — no neon */
.he-name:hover {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(10, 132, 255, 0.35);
}
/* Soft indigo lift on alias hover */
.he-alias:hover {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(132, 130, 255, 0.35);
}

/* ── Watermark decorative text — never intercepts pointer events ── */
.text-fs-110 {
  pointer-events: none;
}

/* ── Word spans (for mouse FX + hover lift) ── */
.he-word {
  display: inline;
  transition: text-shadow 0.20s var(--ease-ios), color 0.20s var(--ease-ios);
  cursor: default;
}
.he-word:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(110, 180, 255, 0.30);
}

/* ── Description + seek word hover — explicit high-specificity rule ── */
.he-intro .he-word:hover,
.he-seek .he-word:hover {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(110, 180, 255, 0.30) !important;
}

/* ── Short intro paragraph ── */
.he-intro {
  margin: 14px 0 0;
  font-size: clamp(0.88rem, 0.80rem + 0.35vw, 1.0rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.90);
  letter-spacing: 0.01em;
}

/* ── Proof strip — "Trusted at" credibility line ── */
.he-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.he-proof-label {
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.45);
}
.he-proof-orgs {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.he-proof-dot {
  opacity: 0.35;
  margin: 0 1px;
}

@media (max-width: 767px) {
  .he-proof { font-size: 0.72rem; margin-top: 8px; }
}

/* ── "Seeking" line ── */
.he-seek {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: center;
  gap: 10px;
  margin: 14px 0 24px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  padding-left: 14px;
  border-left: 2px solid;
  border-image: var(--grad-180) 1;
  cursor: grab;
  white-space: nowrap;
}
.he-seek::-webkit-scrollbar { display: none; }
.he-seek.is-dragging { user-select: none; cursor: grabbing; }
.he-seek-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(110, 180, 255, 0.45);
}

/* ── Mouse spotlight overlay — whisper of ambient light ── */
.he-spotlight {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  /* offset so it's centered on cursor */
  margin-left: -160px;
  margin-top: -160px;
  background: radial-gradient(
    circle at center,
    rgba(10, 132, 255, 0.06) 0%,
    rgba(10, 84, 200, 0.035) 45%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease-ios);
  will-change: left, top;
}

/* ── Responsive mobile ── */
@media (max-width: 767px) {
  /* Typewriter block: 124px is designed for 45px desktop font — reduce for mobile */
  #home h1 span.block {
    min-height: 36px;
  }
  .he-intro {
    line-height: 1.75;
    margin-top: 10px;
  }
  .he-seek {
    font-size: 0.75rem;
    margin: 10px 0 18px;
    padding-left: 10px;
  }
  /* No spotlight on mobile (touch) — hidden via JS, but safety net */
  .he-spotlight { display: none; }
}

@media (max-width: 399px) {
  .he-seek  { font-size: 0.72rem; }
}

/* ── Standard desktop — single-viewport fit (800–1200px tall monitors) ── */
@media (min-width: 1024px) and (min-height: 801px) {
  #home h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
  /* Typewriter block: 2 × 36px × 1.2 */
  #home h1 span.block {
    min-height: 86px;
  }
  .he-intro {
    line-height: 1.65;
    margin-top: 8px;
  }
  .he-tech-stack {
    margin: 10px 0 12px !important;
    padding: 4px 16px !important;
  }
  .he-ts-row {
    padding: 6px 0 !important;
  }
  .he-ts-label {
    font-size: 0.68rem !important;
  }
  .he-ts-pill {
    font-size: 0.70rem !important;
    padding: 2px 9px !important;
    white-space: nowrap;
  }
  .he-seek {
    font-size: 0.74rem;
    margin: 6px 0 12px;
  }
}

/* ── Compact layout for short desktop viewports (e.g. 1280×768) ── */
@media (min-width: 1024px) and (max-height: 800px) {
  /* Shrink h1 so name+alias fits on 1 line, typewriter on 1 line */
  #home h1 {
    font-size: 30px !important;
    line-height: 42px !important;
  }
  /* Shrink reserved typewriter height to match new line-height */
  #home h1 span.block {
    min-height: 42px;
  }
  /* Tighten intro */
  .he-intro {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-top: 6px;
  }
  /* Tighten tech stack */
  .he-tech-stack {
    margin: 6px 0 6px !important;
    padding: 2px 14px !important;
  }
  .he-ts-row { padding: 3px 0 !important; }
  .he-ts-label { font-size: 0.64rem !important; }
  .he-proof { margin-top: 4px; }
  .he-ts-pill {
    font-size: 0.66rem !important;
    padding: 1px 7px !important;
  }
  /* Tighten seek */
  .he-seek {
    font-size: 0.70rem;
    margin: 2px 0 8px;
  }
}

/* Hide "personal infos" section heading — keep image only */
#about h3.text-fs-26 { display: none; }

/* Hide stats cards column (4.5 yrs / 5.5 yrs / 4 companies / 100%) only — not skills column */
#about .flex-row > [class*="basis-7/12"] { display: none; }

/* Expand info/bio column to full width when stats column is hidden */
#about .flex-row > [class*="basis-5/12"],
#about .flex-row > [class*="basis-1/2"]:first-child {
  flex: 1 1 100%;
  max-width: 100%;
}

/* About avatar — fix flex-stretch issue, lock to 230×230 */
#about .rounded-full.border-black-3 {
  width: 230px !important;
  height: 230px !important;
  max-height: 230px !important;
  align-self: flex-start;
  object-fit: cover;
  flex-shrink: 0;
}

/* Prevent home content from bleeding off left edge on mobile */
/* Mobile home: prevent content wrapper from centering outside viewport left edge */
@media (max-width: 1023px) {
  #home .flex.items-center {
    justify-content: flex-start;
    overflow-x: hidden;
  }
  /* Constrain the direct flex item (from-lg:ml-100/3 from-lg:w-2/3) to parent width */
  #home .flex.items-center > div {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #home .max-w-550 {
    width: 100%;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT IMAGE LAYOUT — photo beside info grid on wide screens
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper: image LEFT, info columns RIGHT */
.he-about-imgrow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 36px;
}

/* The photo — hairline ring, no glow */
.he-about-imgrow img {
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.14);
  object-fit: cover;
  display: block;
}

/* Info grid takes remaining width */
.he-about-imgrow .flex.justify-between {
  flex: 1 1 0;
  min-width: 0;
}

/* Narrow: stack photo above info, centered */
@media (max-width: 600px) {
  .he-about-imgrow {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .he-about-imgrow img {
    width: 120px;
    height: 120px;
  }
  .he-about-imgrow .flex.justify-between {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT BIO — description block above CV download button
   ═══════════════════════════════════════════════════════════════ */
.he-about-bio {
  margin-bottom: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.he-about-para {
  font-size: clamp(0.95rem, 0.82rem + 0.55vw, 1.2rem);
  line-height: 1.80;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
  margin: 0;
}

@media (max-width: 767px) {
  .he-about-bio { gap: 12px; }
}

/* ── Divider line — soft blue hairline ── */
.he-neon-line {
  border: none;
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(10, 132, 255, 0.40) 20%,
    rgba(100, 210, 255, 0.50) 50%,
    rgba(10, 132, 255, 0.40) 80%,
    transparent 100%
  );
  opacity: 0.6;
}

@media (max-width: 767px) {
  .he-neon-line { margin: 16px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT INFO ROWS — calm field highlight on hover
   ═══════════════════════════════════════════════════════════════ */
@keyframes heInfoReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.he-info-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 0.4rem 8px !important;
  padding-left: 10px !important;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition:
    background 0.25s var(--ease-ios),
    border-color 0.25s var(--ease-ios);
  cursor: default;
}
.he-info-row:hover {
  background: rgba(10, 132, 255, 0.08);
  border-left-color: var(--accent-2);
}

/* Entrance animation */
.he-info-row--anim {
  opacity: 0;
  animation: heInfoReveal 0.45s var(--ease-expo) forwards;
}

/* Label — mono, small, muted */
.he-info-label {
  font-family: var(--mono) !important;
  font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.85rem) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0.55 !important;
  transition: opacity 0.20s var(--ease-ios), color 0.20s var(--ease-ios) !important;
  flex-shrink: 0;
}
.he-info-row:hover .he-info-label {
  opacity: 1 !important;
  color: var(--accent-2) !important;
}

/* Value — bright, semibold, gentle lift on hover */
.he-info-val {
  font-family: var(--mono) !important;
  font-size: clamp(0.92rem, 0.84rem + 0.35vw, 1.05rem) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  letter-spacing: 0.02em !important;
  transition: color 0.20s var(--ease-ios), text-shadow 0.20s var(--ease-ios) !important;
}
.he-info-row:hover .he-info-val {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(10, 132, 255, 0.30) !important;
}

/* Mobile: tighter padding */
@media (max-width: 575px) {
  .he-info-row   { padding: 4px 6px 4px 8px; margin: 0 -8px; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION PAGE TITLES — calm word lift (About / Portfolio / Contact)
   Hover-only: subtle brightness, no neon bloom
   ═══════════════════════════════════════════════════════════════ */

/* Entrance: simple slide-up fade */
@keyframes heTitleNeonIn {
  0%   { opacity: 0; transform: translateY(-8px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Base h2 — no shadow on the container; all effects are per-word */
#about h2.text-fs-56,
#portfolio h2.text-fs-56,
#contact h2.text-fs-56 {
  text-shadow: none;
  cursor: default;
}

/* Per-word span — base state */
.he-h2-word {
  display: inline;
  transition: text-shadow 0.25s var(--ease-ios), color 0.25s var(--ease-ios);
  cursor: default;
}

/* Plain word hover — gentle glow */
.he-h2-word:hover {
  color: #fff;
  text-shadow: 0 0 22px rgba(10, 132, 255, 0.30);
}

/* Accent word (the coloured span, e.g. "me", "portfolio", "touch") hover */
.he-h2-word--accent:hover {
  color: var(--accent-2);
  text-shadow: 0 0 26px rgba(10, 132, 255, 0.40);
}

/* Page entrance animation — slide-up fade only */
.js .page--current h2.text-fs-56 {
  animation: heTitleNeonIn 0.60s var(--ease-expo) both;
}
/* Do not animate h2 when inside a non-current page (prevents stale keyframe) */
.js .page:not(.page--current) h2.text-fs-56 {
  animation: none;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON ROW — Download CV + Contact Me on one horizontal line
   ═══════════════════════════════════════════════════════════════ */
.he-btn-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  flex-wrap: wrap;
}
/* Single-viewport fit — tighter CTA spacing on desktop heights */
@media (min-width: 1024px) and (min-height: 801px) {
  .he-btn-row { margin-top: 18px; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .he-btn-row { margin-top: 8px; }
}
/* Neutralise the mt-30 the CV button carries on its own */
.he-btn-row > a,
.he-btn-row > .he-contact-btn {
  margin-top: 0 !important;
}
.he-contact-btn {
  margin-left: 0;
  /* Reset native <button> chrome — this is a real <button> for a11y */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  border: none;
}

/* ═══════════════════════════════════════════════════════════════
   CTA HIERARCHY — one primary action per view, rest read as ghost
   ═══════════════════════════════════════════════════════════════ */
.he-btn-primary {
  background: var(--grad) !important;
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.30) !important;
}
.he-btn-primary:hover {
  box-shadow: 0 10px 30px rgba(10, 132, 255, 0.40) !important;
}
/* The template's own ::before gradient-fill sweep would otherwise
   duplicate the always-on gradient background — suppress it here */
.he-btn-primary::before {
  content: none !important;
}

.he-btn-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.he-btn-ghost:hover {
  color: #fff !important;
}

/* ── Mobile: equal-width buttons, stacked ── */
@media (max-width: 575px) {
  .he-btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .he-btn-row > a,
  .he-btn-row > .he-contact-btn {
    display: block !important;
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
  }

  /* ── "More about me" button — full-width, icon contained ── */
  #link-about {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  /* Keep icon circle flush inside right edge (not -1px outside) on mobile */
  #link-about .fa-arrow-right,
  #link-about span[class*="fa-arrow-right"] {
    right: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AVAILABLE BADGE — hover state (clickable, navigates to Contact)
   ═══════════════════════════════════════════════════════════════ */
.he-available-badge--visible:hover {
  background: rgba(9, 19, 42, 0.90);
  border-color: rgba(48, 209, 88, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 28px rgba(2, 8, 23, 0.50);
  transform: translateY(-2px);
}
.he-available-badge--visible:hover .he-avail-text {
  color: rgba(255, 255, 255, 1);
}

/* ═══════════════════════════════════════════════════════════════
   WORK EXPERIENCE TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.he-timeline {
  position: relative;
  padding-bottom: 16px;
}
.he-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(10, 132, 255, 0.50) 0%,
    rgba(10, 132, 255, 0.25) 50%,
    rgba(10, 132, 255, 0.06) 100%
  );
  border-radius: 2px;
}

/* ── Tabbed wrapper ── */
.he-tl-tabbed {
  margin-top: 54px;
}

/* Tab bar — segmented, underline accent */
.he-tl-tabbar {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0;
}
.he-tl-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: color 0.25s var(--ease-ios), border-color 0.25s var(--ease-ios), background 0.25s var(--ease-ios);
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
}
.he-tl-tab:hover {
  color: rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.04);
}
.he-tl-tab--active {
  color: var(--accent-2);
  border-bottom-color: var(--accent);
  background: rgba(10, 132, 255, 0.07);
}
.he-tl-tab-icon {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Panels */
.he-tl-panel {
  display: none;
}
.he-tl-panel--active {
  display: block;
}

/* Individual timeline entry */
.he-tl-item {
  position: relative;
  padding-left: 46px;
  margin-bottom: 28px;
  /* Scroll-reveal initial state */
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity 0.50s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.50s cubic-bezier(0.16, 1, 0.3, 1);
}
.he-tl-item--visible {
  opacity: 1;
  transform: translateX(0);
}
.he-tl-item:last-child {
  margin-bottom: 0;
}

/* Dot on the track */
.he-tl-dot {
  position: absolute;
  left: 7px;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(10, 132, 255, 0.50);
  background: #071226;
  transition: border-color 0.25s var(--ease-ios), box-shadow 0.25s var(--ease-ios);
  z-index: 1;
}
.he-tl-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.8;
  transition: opacity 0.25s var(--ease-ios), transform 0.25s var(--ease-ios);
}
/* Dot color variants — iOS system tints */
.he-tl-dot--blue  { border-color: rgba(10, 132, 255, 0.55); }
.he-tl-dot--blue::after  { background: #0A84FF; }
.he-tl-dot--teal  { border-color: rgba(50, 200, 190, 0.55); }
.he-tl-dot--teal::after  { background: #32C8BE; }
.he-tl-dot--purple{ border-color: rgba(132, 130, 255, 0.55); }
.he-tl-dot--purple::after{ background: #8482FF; }
.he-tl-dot--sky   { border-color: rgba(100, 210, 255, 0.55); }
.he-tl-dot--sky::after   { background: #64D2FF; }
.he-tl-dot--orange{ border-color: rgba(255, 159, 10, 0.55); }
.he-tl-dot--orange::after{ background: #FF9F0A; }
.he-tl-dot--red   { border-color: rgba(255, 105, 97, 0.55); }
.he-tl-dot--red::after   { background: #FF6961; }

/* Card content — frosted glass */
.he-tl-card {
  padding: 16px 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 0.3s var(--ease-ios),
    border-color 0.3s var(--ease-ios),
    box-shadow 0.3s var(--ease-ios),
    transform 0.3s var(--ease-ios);
  cursor: default;
}
/* Hover: raise the card + focus-ring the dot */
.he-tl-item:hover .he-tl-card {
  background: rgba(16, 33, 66, 0.62);
  border-color: rgba(110, 180, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(2, 8, 23, 0.45);
  transform: translateX(2px);
}
.he-tl-item:hover .he-tl-dot {
  border-color: rgba(110, 180, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15);
}
.he-tl-item:hover .he-tl-dot::after {
  opacity: 1;
  transform: scale(1.1);
}

/* Top row: period + company */
.he-tl-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.he-tl-period {
  font-family: var(--mono);
  font-size: 0.93rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.60);
  text-transform: uppercase;
  flex-shrink: 0;
}
.he-tl-company {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  border-radius: 99px;
  border: 1px solid;
  transition: opacity 0.25s var(--ease-ios);
}
.he-tl-company--blue   { color: #6EB4FF; border-color: rgba(10,132,255,0.30);  background: rgba(10,132,255,0.08); }
.he-tl-company--teal   { color: #66D4CF; border-color: rgba(50,200,190,0.28);  background: rgba(50,200,190,0.07); }
.he-tl-company--purple { color: #A7A5FF; border-color: rgba(132,130,255,0.28); background: rgba(132,130,255,0.07); }
.he-tl-company--sky    { color: #64D2FF; border-color: rgba(100,210,255,0.28); background: rgba(100,210,255,0.07); }
.he-tl-company--orange { color: #FFB340; border-color: rgba(255,159,10,0.28);  background: rgba(255,159,10,0.07); }
.he-tl-company--red    { color: #FF8A80; border-color: rgba(255,105,97,0.28);  background: rgba(255,105,97,0.07); }

/* Role title */
.he-tl-role {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

/* Project name row */
.he-tl-project {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
  margin-bottom: 5px;
}
.he-tl-project-icon {
  color: var(--accent-2);
  font-size: 0.62rem;
  opacity: 0.70;
  flex-shrink: 0;
}

/* Summary description */
.he-tl-summary {
  font-size: 0.82rem;
  line-height: 1.60;
  color: rgba(255, 255, 255, 0.64);
  margin-bottom: 10px;
}

/* Tech stack — chip pills per category */
.he-tl-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 11px;
}
.he-tl-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-family: var(--mono);
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.62);
  transition: background 0.2s var(--ease-ios), color 0.2s var(--ease-ios), border-color 0.2s var(--ease-ios);
  white-space: nowrap;
}
.he-tl-item:hover .he-tl-chip {
  background: rgba(10, 132, 255, 0.10);
  border-color: rgba(10, 132, 255, 0.25);
  color: rgba(255, 255, 255, 0.80);
}

/* Overflow chips hidden until expanded */
.he-tl-chip--hidden { display: none; }
.he-tl-tech.he-more-expanded .he-tl-chip--hidden { display: inline-block; }

/* "+N" / "Less" — real <button>, reads as interactive */
.he-tl-chip--more {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: normal;
  color: rgba(255, 255, 255, 0.52);
  font-style: italic;
  cursor: pointer;
}
.he-tl-chip--more:hover {
  color: rgba(255, 255, 255, 0.90);
  background: rgba(10, 132, 255, 0.16);
  border-color: rgba(10, 132, 255, 0.40);
}

/* Bullet descriptions */
.he-tl-desc {
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
}
.he-tl-desc li {
  position: relative;
  font-size: clamp(0.85rem, 0.78rem + 0.3vw, 0.95rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 5px;
  padding-left: 12px;
  transition: color 0.20s var(--ease-ios);
}
.he-tl-desc li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-2);
  opacity: 0.55;
}
.he-tl-item:hover .he-tl-desc li {
  color: rgba(255, 255, 255, 0.72);
}
.he-tl-item:hover .he-tl-desc li::before {
  opacity: 1;
}

/* Mobile */
@media (max-width: 767px) {
  .he-timeline::before { left: 10px; top: 48px; }
  .he-tl-item { padding-left: 34px; }
  .he-tl-dot  { left: 3px; width: 14px; height: 14px; top: 14px; }
  .he-tl-card { padding: 12px 14px 10px; }
  .he-tl-project { font-size: 0.78rem; }
  .he-tl-summary { font-size: 0.76rem; }
  .he-tl-chip { font-size: 0.72rem; padding: 2px 7px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOBBIES SECTION
   ═══════════════════════════════════════════════════════════════ */
.he-hobbies {
  margin-top: 40px;
  padding-bottom: 48px;
}

/* Reduce oversized bottom padding of About section title heading */
#about .py-80 {
  padding-bottom: 20px !important;
}
.he-hobbies-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.he-hobbies-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.he-hobbies-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.he-hobby-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 140px;
  min-width: 120px;
  padding: 20px 16px 18px;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
  transition: background 0.25s var(--ease-ios), border-color 0.25s var(--ease-ios), transform 0.25s var(--ease-ios);
  cursor: default;
}
.he-hobby-card:hover {
  background: rgba(16, 33, 66, 0.60);
  border-color: rgba(110, 180, 255, 0.25);
  transform: translateY(-3px);
}
.he-hobby-icon {
  font-size: 2rem;
  line-height: 1;
}
.he-hobby-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.he-hobby-desc {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 767px) {
  .he-hobbies-grid { gap: 10px; }
  .he-hobby-card { padding: 14px 10px; flex: 1 1 100px; min-width: 90px; }
  .he-hobby-icon { font-size: 1.6rem; }
  .he-hobby-label { font-size: 0.72rem; }
  .he-hobby-desc { font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO — case-study cards (replaces the video gallery)
   ═══════════════════════════════════════════════════════════════ */
.he-projects {
  margin-top: 8px;
}
.he-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.he-project-card {
  padding: 20px 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.3s var(--ease-ios), border-color 0.3s var(--ease-ios),
              box-shadow 0.3s var(--ease-ios), transform 0.3s var(--ease-ios);
}
.he-project-card:hover {
  background: rgba(16, 33, 66, 0.62);
  border-color: rgba(110, 180, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(2, 8, 23, 0.45);
  transform: translateY(-3px);
}
.he-project-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.he-project-name {
  font-size: clamp(1.0rem, 0.92rem + 0.3vw, 1.15rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.he-project-desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.64);
  margin: 0 0 12px;
}

@media (max-width: 767px) {
  .he-projects-grid { grid-template-columns: 1fr; gap: 14px; }
  .he-project-card { padding: 16px 18px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO TABS — Experience · Live Websites
   Reuses the timeline tab styling (.he-tl-tabbar / .he-tl-tab /
   .he-tl-panel); only the wrapper spacing is portfolio-specific.
   ═══════════════════════════════════════════════════════════════ */
.he-pf-tabbed {
  margin-top: 10px;
}
/* Inside a tab panel the block leads the panel — drop its top margin */
.he-pf-tabbed .he-sites,
.he-pf-tabbed .he-projects {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LIVE WEBSITES — clickable product cards (screenshot · tech · URL)
   Injected into #portfolio above the experience case-study cards.
   ═══════════════════════════════════════════════════════════════ */
.he-sites {
  margin: 8px 0 40px;
}
.he-sites-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.he-sites-title {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.he-sites-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.he-sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

/* ── Card: whole card is a link ── */
.he-site-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-card);
  -webkit-backdrop-filter: var(--glass-blur-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--glass-shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s var(--ease-ios), border-color 0.3s var(--ease-ios),
              box-shadow 0.3s var(--ease-ios);
}
.he-site-card:hover {
  transform: translateY(-4px);
  border-color: rgba(110, 180, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 18px 40px rgba(2, 8, 23, 0.55), var(--shadow-accent-sm);
}

/* ── Thumbnail (16:10 screenshot) ── */
.he-site-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(4, 9, 26, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.he-site-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s var(--ease-ios);
}
.he-site-card:hover .he-site-thumb img {
  transform: scale(1.04);
}

/* ── Body ── */
.he-site-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px 18px;
}
.he-site-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.he-site-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.01em;
}
.he-site-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #30D158;
}
.he-site-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30D158;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5);
  animation: heAvailPulse 2.4s ease-out infinite;
}
.he-site-tagline {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Tech chips ── */
.he-site-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1px;
}
.he-site-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 99px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(10, 132, 255, 0.10);
  border: 1px solid rgba(10, 132, 255, 0.24);
}

/* ── URL row ── */
.he-site-url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  transition: color 0.22s var(--ease-ios);
}
.he-site-arrow {
  font-size: 0.85rem;
  transition: transform 0.25s var(--ease-ios);
}
.he-site-card:hover .he-site-url {
  color: #A9D3FF;
}
.he-site-card:hover .he-site-arrow {
  transform: translate(2px, -2px);
}

@media (max-width: 767px) {
  .he-sites-grid { grid-template-columns: 1fr; gap: 16px; }
  .he-site-name { font-size: 1rem; }
}

/* ── Light mode ── */
.home:not(.dark) .he-sites-header {
  border-bottom-color: rgba(10, 60, 140, 0.15);
}
.home:not(.dark) .he-sites-sub {
  color: rgba(0, 0, 0, 0.42);
}
.home:not(.dark) .he-site-card {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(10, 60, 140, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 8px 24px rgba(11, 27, 58, 0.10);
}
.home:not(.dark) .he-site-card:hover {
  border-color: rgba(10, 107, 224, 0.30);
}
.home:not(.dark) .he-site-name {
  color: rgba(0, 0, 0, 0.88);
}
.home:not(.dark) .he-site-tagline {
  color: rgba(0, 0, 0, 0.60);
}
.home:not(.dark) .he-site-chip {
  color: #0A5BD8;
  background: rgba(10, 107, 224, 0.08);
  border-color: rgba(10, 107, 224, 0.22);
}
.home:not(.dark) .he-site-url {
  color: #0A5BD8;
}

/* ── Contact page: calm hover on each "via" item ── */
.he-contact-item {
  transition: transform 0.2s var(--ease-ios);
}
.he-contact-item:hover {
  transform: translateX(4px);
}
.he-contact-item:hover i,
.he-contact-item:hover .fa {
  color: var(--accent-2) !important;
  filter: drop-shadow(0 2px 8px rgba(10, 132, 255, 0.35));
  transition: color 0.22s var(--ease-ios), filter 0.22s var(--ease-ios);
}
.he-contact-item:hover span:first-of-type {
  color: var(--accent-2) !important;
  transition: color 0.22s var(--ease-ios);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — injected into all pages except #home
   ═══════════════════════════════════════════════════════════════ */
.he-footer {
  width: 100%;
  margin-top: auto;          /* pushes to bottom of flex page */
  padding: 28px 40px 20px;
  background: rgba(6, 12, 28, 0.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.he-ft-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}

/* ── Left: name + tagline ── */
.he-ft-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.he-ft-name {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.04em;
}
.he-ft-tagline {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.05em;
}

/* ── Mid: contact links ── */
.he-ft-mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.he-ft-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.20s var(--ease-ios);
}
.he-ft-link i {
  color: var(--accent-2);
  font-size: 0.85rem;
  flex-shrink: 0;
  opacity: 0.80;
}
.he-ft-link:hover {
  color: var(--accent-2);
}

/* ── Right: social icons ── */
.he-ft-socials {
  display: flex;
  gap: 12px;
}
.he-ft-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.25s var(--ease-ios), border-color 0.25s var(--ease-ios),
              color 0.25s var(--ease-ios), transform 0.25s var(--ease-ios);
}
.he-ft-social:hover {
  background: var(--grad);
  border-color: rgba(110, 180, 255, 0.60);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-accent-sm);
}

/* ── Bottom: copyright ── */
.he-ft-bottom {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.06em;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .he-footer { padding: 22px 20px 16px; }
  .he-ft-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .he-ft-name { font-size: 0.85rem; }
  .he-ft-link { font-size: 0.70rem; }
  .he-ft-social { width: 32px; height: 32px; font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Selector anchor: .home:not(.dark)  (toggled by .dark-switch JS)
   ═══════════════════════════════════════════════════════════════ */

/* ── Home section ── */
/* Bio intro — was white on white (invisible) in light mode */
.home:not(.dark) .he-intro {
  color: rgba(0, 0, 0, 0.72);
}
.home:not(.dark) .he-intro .he-word:hover,
.home:not(.dark) .he-word:hover {
  color: rgba(0, 0, 0, 0.92) !important;
  text-shadow: 0 0 12px rgba(10, 132, 255, 0.20) !important;
}
/* "Trusted at" proof strip */
.home:not(.dark) .he-proof-label {
  color: rgba(0, 0, 0, 0.45);
}
.home:not(.dark) .he-proof-orgs {
  color: rgba(0, 0, 0, 0.68);
}
.home:not(.dark) .he-seek {
  color: rgba(0, 0, 0, 0.60);
  border-color: rgba(0, 0, 0, 0.12);
}
.home:not(.dark) .he-tech-stack {
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(10, 60, 140, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.home:not(.dark) .he-ts-row + .he-ts-row {
  border-top-color: rgba(10, 60, 140, 0.10);
}
.home:not(.dark) .he-ts-label {
  color: rgba(0, 0, 0, 0.45);
}
.home:not(.dark) .he-ts-pill {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(10, 60, 140, 0.05);
  border-color: rgba(10, 60, 140, 0.14);
}
.home:not(.dark) .he-ts-pill:hover {
  background: rgba(10, 60, 140, 0.09);
  border-color: rgba(10, 60, 140, 0.25);
}
.home:not(.dark) .he-ts-pill--more {
  color: rgba(0, 0, 0, 0.50);
}
.home:not(.dark) .he-ts-pill--more:hover {
  color: #0A5BD8;
  background: rgba(10, 107, 224, 0.10);
  border-color: rgba(10, 107, 224, 0.35);
}
.home:not(.dark) .he-ts-pill--primary {
  color: #0A5BD8;
  background: rgba(10, 107, 224, 0.10);
  border-color: rgba(10, 107, 224, 0.35);
}
.home:not(.dark) .he-ts-pill--primary:hover {
  background: rgba(10, 107, 224, 0.16);
  border-color: rgba(10, 107, 224, 0.55);
}
.home:not(.dark) .he-available-badge {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(52, 199, 89, 0.40);
  color: rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 4px 16px rgba(11, 27, 58, 0.12);
}
.home:not(.dark) .he-code-card {
  background: rgba(245, 248, 255, 0.92);
  border-color: rgba(10, 60, 140, 0.14);
  color: #1a2540;
}
/* ── About section ── */
/* Skill / stat cards — were dark navy glass (muddy) on the light page */
.home:not(.dark) .border-black-3,
.home:not(.dark) .border-grey {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(10, 60, 140, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 6px 20px rgba(11, 27, 58, 0.06) !important;
}
.home:not(.dark) .border-black-3:hover,
.home:not(.dark) .border-grey:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 30px rgba(11, 27, 58, 0.10) !important;
}
/* Info rows */
.home:not(.dark) .he-info-label {
  color: rgba(0, 0, 0, 0.50) !important;
}
.home:not(.dark) .he-info-val {
  color: rgba(0, 0, 0, 0.85) !important;
}
.home:not(.dark) .he-info-row:hover .he-info-val {
  color: #0A5BD8 !important;
  text-shadow: none !important;
}

/* Bio text */
.home:not(.dark) .he-about-para {
  color: rgba(0, 0, 0, 0.70);
}

/* Profile photo border */
.home:not(.dark) .he-about-imgrow img {
  border-color: rgba(10, 60, 140, 0.18);
}

/* Divider line */
.home:not(.dark) .he-neon-line {
  background: linear-gradient(90deg, transparent, rgba(10, 107, 224, 0.25), transparent);
  opacity: 1;
}

/* ── Timeline ── */
.home:not(.dark) .he-tl-tabbar {
  border-bottom-color: rgba(10, 60, 140, 0.15);
}
.home:not(.dark) .he-tl-tab {
  color: rgba(0, 0, 0, 0.40);
}
.home:not(.dark) .he-tl-tab:hover {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(10, 107, 224, 0.05);
}
.home:not(.dark) .he-tl-tab--active {
  color: #0A5BD8;
  border-bottom-color: #0A5BD8;
  background: rgba(10, 107, 224, 0.06);
}
.home:not(.dark) .he-timeline::before {
  background: rgba(10, 60, 140, 0.15);
}
.home:not(.dark) .he-tl-card,
.home:not(.dark) .he-project-card {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(10, 60, 140, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.home:not(.dark) .he-tl-card:hover,
.home:not(.dark) .he-project-card:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(10, 107, 224, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 24px rgba(11, 27, 58, 0.10);
}
.home:not(.dark) .he-project-name {
  color: rgba(0, 0, 0, 0.85);
}
.home:not(.dark) .he-project-desc {
  color: rgba(0, 0, 0, 0.60);
}
.home:not(.dark) .he-tl-period {
  color: rgba(0, 0, 0, 0.40);
}
.home:not(.dark) .he-tl-company {
  color: #0A5BD8;
  background: rgba(10, 107, 224, 0.08);
  border-color: rgba(10, 107, 224, 0.22);
}
.home:not(.dark) .he-tl-role {
  color: rgba(0, 0, 0, 0.80);
}
/* Tech chips — were white on the light card (invisible) */
.home:not(.dark) .he-tl-chip {
  color: #0A5BD8;
  background: rgba(10, 107, 224, 0.08);
  border-color: rgba(10, 107, 224, 0.20);
}
.home:not(.dark) .he-tl-item:hover .he-tl-chip {
  color: #0A5BD8;
  background: rgba(10, 107, 224, 0.14);
  border-color: rgba(10, 107, 224, 0.32);
}
.home:not(.dark) .he-tl-chip--more {
  color: rgba(0, 0, 0, 0.55);
}
.home:not(.dark) .he-tl-chip--more:hover {
  color: #0A5BD8;
  background: rgba(10, 107, 224, 0.12);
  border-color: rgba(10, 107, 224, 0.30);
}
.home:not(.dark) .he-tl-desc li {
  color: rgba(0, 0, 0, 0.55);
}
.home:not(.dark) .he-tl-item:hover .he-tl-desc li {
  color: rgba(0, 0, 0, 0.72);
}
.home:not(.dark) .he-tl-desc li::before {
  background: #0A5BD8;
  opacity: 0.45;
}
.home:not(.dark) .he-tl-dot {
  border-color: rgba(10, 107, 224, 0.35);
  background: #EAF2FE;
}
.home:not(.dark) .he-tl-dot::after { background: #0A5BD8; }
.home:not(.dark) .he-tl-dot--blue  { border-color: rgba(10, 107, 224, 0.45); }
.home:not(.dark) .he-tl-dot--blue::after  { background: #0A6BE0; }
.home:not(.dark) .he-tl-dot--teal  { border-color: rgba(14, 152, 136, 0.45); }
.home:not(.dark) .he-tl-dot--teal::after  { background: #0E9888; }
.home:not(.dark) .he-tl-dot--purple{ border-color: rgba(94, 92, 230, 0.45); }
.home:not(.dark) .he-tl-dot--purple::after{ background: #5E5CE6; }
.home:not(.dark) .he-tl-dot--sky   { border-color: rgba(10, 132, 200, 0.45); }
.home:not(.dark) .he-tl-dot--sky::after   { background: #0A84C8; }

/* ── Hobbies ── */
.home:not(.dark) .he-hobbies-title {
  color: rgba(0, 0, 0, 0.40);
}
.home:not(.dark) .he-hobbies-header {
  border-bottom-color: rgba(10, 60, 140, 0.14);
}
.home:not(.dark) .he-hobby-card {
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(10, 60, 140, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.home:not(.dark) .he-hobby-card:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(10, 107, 224, 0.28);
}
.home:not(.dark) .he-hobby-label {
  color: #0A5BD8;
}
.home:not(.dark) .he-hobby-desc {
  color: rgba(0, 0, 0, 0.50);
}

/* ── Contact / buttons ── */
/* "view cv" is a ghost button (transparent bg) — needs dark text in
   light mode, same as the template's own "download cv" link */
.home:not(.dark) .he-view-cv span.relative {
  color: rgba(0, 0, 0, 0.80);
}
/* "contact me" is the primary CTA — its gradient background is opaque
   in both themes, so its text must stay white regardless of theme
   (overrides the ghost-era rule below via higher selector specificity) */
.home:not(.dark) .he-contact-btn.he-btn-primary span.relative {
  color: #fff;
}
.home:not(.dark) .he-contact-btn span.relative {
  color: rgba(0, 0, 0, 0.80);
}

/* ── Spotlight (disable in light mode) ── */
.home:not(.dark) .he-spotlight {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SCROLL-REVEAL — subtle fade-up (used by hobbies cards)
   Both classes are added by JS, so cards stay visible if JS fails
   ═══════════════════════════════════════════════════════════════ */
.he-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s var(--ease-expo),
    transform 0.55s var(--ease-expo);
}
.he-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — kill decorative animation for users who ask
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .he-reveal { opacity: 1; transform: none; }
  .he-code-card { animation: none; }
}