/* ==========================================================================
   Muhammad Jalal Khan — Portfolio
   Design system: "Signal" — data/AI-native, teal accent, dual theme

   Contents
   01 Tokens (light / dark)          12 Disciplines (3 skill cards)
   02 Base & reset                   13 Cards: service / project / cert
   03 Layout helpers                 14 Filter bar & grids
   04 Header, nav, palette trigger   15 Featured project & case study
   05 Buttons                        16 Process steps
   06 Page transitions & progress    17 Terminal assistant
   07 Home hero + live console       18 About, timeline, chips
   08 Tool marquee                   19 Contact & Find Me Online
   09 Stats                          20 Modal (certifications)
   10 Sections & headings            21 Showpieces: dashboard, ETL, agent, skills graph
   11 Spotlight hover                22 Command palette, WhatsApp, footer, reveal
   ========================================================================== */

/* ---------- 01 Tokens ---------- */
:root {
  --bg: #FAFBFC;
  --surface: #FFFFFF;
  --surface-2: #F1F3F5;
  --text: #14181F;
  --text-muted: #5A6472;
  --accent: #0E8F7E;
  --accent-soft: #E3F5F1;
  --accent-2: #4457D6;
  --border: #E2E5E9;
  --border-strong: #CBD1D8;
  --danger: #C73E3E;
  --danger-soft: #FBEAEA;
  --warn: #B7791F;
  --bronze: #A8672E;
  --silver: #7A8494;
  --gold: #B8911A;
  --on-accent: #04140F;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px rgba(20, 24, 31, 0.05);
  --shadow-lg: 0 2px 4px rgba(20, 24, 31, 0.04), 0 24px 60px rgba(20, 24, 31, 0.10);
  --grid-line: rgba(20, 24, 31, 0.05);
  --cta-bg: #14181F;
  --cta-fg: #FAFBFC;

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0A0E13;
  --surface: #111720;
  --surface-2: #161D27;
  --text: #EAEDF1;
  --text-muted: #8B96A5;
  --accent: #35D0BA;
  --accent-soft: #14312D;
  --accent-2: #7C8CFF;
  --border: #212A36;
  --border-strong: #2F3A48;
  --danger: #FF7676;
  --danger-soft: #3A1C1F;
  --warn: #F0B35A;
  --bronze: #D7925A;
  --silver: #A7B1C0;
  --gold: #E6C458;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.5);
  --grid-line: rgba(234, 237, 241, 0.045);
  --cta-bg: #0E1B1F;
  --cta-fg: #EAEDF1;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0E13;
    --surface: #111720;
    --surface-2: #161D27;
    --text: #EAEDF1;
    --text-muted: #8B96A5;
    --accent: #35D0BA;
    --accent-soft: #14312D;
    --accent-2: #7C8CFF;
    --border: #212A36;
    --border-strong: #2F3A48;
    --danger: #FF7676;
    --danger-soft: #3A1C1F;
    --warn: #F0B35A;
    --bronze: #D7925A;
    --silver: #A7B1C0;
    --gold: #E6C458;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.5);
    --grid-line: rgba(234, 237, 241, 0.045);
    --cta-bg: #0E1B1F;
    --cta-fg: #EAEDF1;
    color-scheme: dark;
  }
}

/* ---------- 02 Base & reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- 03 Layout helpers ---------- */
.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
}

.section-label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0 0 14px;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 16px;
}
.muted { color: var(--text-muted); }
.accent-text { color: var(--accent); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Faint data-grid backdrop used behind heroes and CTA bands */
.grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- 04 Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
  view-transition-name: site-header;
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.logo .logo-short { display: none; }
/* only the very narrowest phones fall back to the short form */
@media (max-width: 370px) {
  .site-header .logo .logo-full { display: none; }
  .site-header .logo .logo-short { display: inline; }
  .site-header .logo { font-size: 14.5px; }
}
.logo .dot { color: var(--accent); }
.logo-mark {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  padding: 7px 11px;
  white-space: nowrap;
  border-radius: 100px;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.active { color: var(--text); background: var(--surface-2); }


/* The nav carries 8 items. Measured before FAQ was added, the bar had only -1px
   of headroom at 1100px and 39px at 1024px, so an extra item overflowed into the
   search button. Rather than drop the item, the horizontal padding tightens on the
   widths where space is actually short. Below 920px the whole bar becomes the
   hamburger menu, so no tightening is needed there. */
@media (max-width: 1220px) {
  .nav-links a { padding: 7px 9px; }
}
@media (max-width: 1080px) {
  .nav-links a { padding: 7px 7px; font-size: 13.5px; }
  .nav-links { gap: 2px; }
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn, .theme-toggle, .nav-toggle {
  width: 38px; height: 38px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, transform .15s ease;
}
.icon-btn:hover, .theme-toggle:hover, .nav-toggle:hover { border-color: var(--border-strong); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 8px 0 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  transition: border-color .15s ease, color .15s ease;
}
.palette-trigger:hover { border-color: var(--border-strong); color: var(--text); }
.palette-trigger svg { width: 15px; height: 15px; }
kbd, .kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .palette-trigger .pt-label, .palette-trigger kbd { display: none; }
  .palette-trigger { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 12px 16px 18px;
    gap: 2px;
  }
  .nav-links.open a { padding: 12px 14px; border-radius: var(--radius); font-size: 15px; }
}

/* ---------- 05 Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .15s var(--ease), box-shadow .2s ease, border-color .15s ease, background .15s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-1px);
}
/* light sweep across primary buttons on hover */
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-muted); transform: translateY(-1px); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- 06 Page transitions & scroll progress ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .38s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 300;
  pointer-events: none;
}

/* ---------- 07 Home hero + live console ---------- */
.hero-shell {
  position: relative;
  overflow: hidden;
}
.hero-shell::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-shell::after {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  opacity: 0.13;
  filter: blur(50px);
  pointer-events: none;
}
.hero {
  position: relative;
  z-index: 1;
  padding-top: 72px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 56px; gap: 40px; }
}

.hero-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.avatar {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--border);
}
/* the photo sits over the initials; if profile.jpg is missing, onerror removes it */
.avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.hero-now {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
  margin: -14px 0 30px;
  min-height: 1.5em;
}
.avatar-lg { width: 180px; height: 180px; font-size: 52px; }
@media (max-width: 720px) { .avatar-lg { width: 140px; height: 140px; font-size: 42px; } }

/* ---------- Credential badges ----------
   Badge art is designed for white backgrounds, so each badge sits on its own
   light plaque in BOTH themes — otherwise dark badge art vanishes in dark mode. */
.badge-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .badge-strip { grid-template-columns: repeat(2, 1fr); } }
.badge-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;            /* grid items must be allowed to shrink */
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease), border-color .2s ease, box-shadow .25s ease;
}
.badge-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: var(--shadow-lg);
}
.badge-plaque {
  flex-shrink: 0;
  width: 74px; height: 74px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  padding: 7px;
  overflow: hidden;
}
/* max-* rather than width/height:100% — the badges have different aspect ratios,
   and a percentage height against an auto-sized row lets portrait badges spill out */
.badge-plaque img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.badge-item .bi-text { min-width: 0; overflow-wrap: anywhere; }
.badge-item .bi-issuer {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  display: block;
  margin-bottom: 5px;
  letter-spacing: .02em;
}
.badge-item .bi-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  display: block;
}
.badge-item .bi-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block; }
@media (max-width: 520px) {
  .badge-item { padding: 14px; gap: 12px; }
  .badge-plaque { width: 60px; height: 60px; }
  .badge-item .bi-name { font-size: 13px; }
}
/* larger, centred treatment for the Certifications page band */
.badge-strip.featured .badge-item { flex-direction: column; text-align: center; gap: 14px; padding: 26px 18px; }
.badge-strip.featured .badge-plaque { width: 104px; height: 104px; }
@media (max-width: 520px) {
  .badge-strip.featured .badge-item { flex-direction: row; text-align: left; padding: 14px; gap: 12px; }
  .badge-strip.featured .badge-plaque { width: 62px; height: 62px; }
}
/* one column on narrow phones — two would force each card below its content width */
@media (max-width: 460px) { .badge-strip { grid-template-columns: 1fr; } }
.hero-id .who strong { display: block; font-family: var(--display); font-size: 18px; }
.hero-id .who span { font-size: 14px; color: var(--text-muted); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  margin-bottom: 22px;
}
.live-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.live-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(.5); opacity: .9; }
  100% { transform: scale(1.8); opacity: 0; }
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.grad-text {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lede {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 0 32px;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.rotator {
  display: inline-block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.9em;
  border-right: 2px solid var(--accent);
  padding-right: 3px;
  animation: caret 1s steps(1) infinite;
  white-space: nowrap;
}
@keyframes caret { 50% { border-color: transparent; } }

/* The "console" card that frames live visuals (hero canvas, demos) */
.console {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.console-dots { display: flex; gap: 6px; }
.console-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}
.console-bar .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-bar .live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent);
}
.console-bar .live .live-dot { width: 6px; height: 6px; }
.console-bar .live .live-dot::after { inset: -3px; }

.hero-canvas-wrap { position: relative; height: 340px; }
.hero-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 520px) { .hero-canvas-wrap { height: 280px; } }

.console-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.console-foot div {
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
}
.console-foot div:first-child { border-left: none; }
.console-foot b {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 08 Tool marquee ---------- */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 18px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 48px;
}
.marquee-track span::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .6;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 09 Stats ---------- */
.stats { padding: 44px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat { padding-left: 18px; border-left: 2px solid var(--border); }
.stat .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 42px);
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat .label {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ---------- 10 Sections & headings ---------- */
.block { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 720px) { .block { padding-top: 60px; padding-bottom: 60px; } }
.block-tight { padding-top: 0 !important; }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 20px;
  flex-wrap: wrap;
}
.block-head h2, .h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.block-head p { color: var(--text-muted); max-width: 52ch; margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; }
.block-head .see-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.block-head .see-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.band { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.page-hero {
  position: relative;
  padding-top: 64px;
  padding-bottom: 28px;
}
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 52px);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.page-hero p.lede {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 58ch;
  line-height: 1.65;
  margin: 0;
}
.crumb { color: var(--accent); text-decoration: none; }
.crumb:hover { text-decoration: underline; text-underline-offset: 4px; }

.page-hero-visual {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) { .page-hero-visual { grid-template-columns: 1fr; } }
.visual-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.visual-card svg { width: 100%; height: auto; display: block; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }

.check-list li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.check-list li:first-child { border-top: none; padding-top: 0; }
.check-list li:first-child::before { top: 3px; }
.check-list li strong { color: var(--text); display: block; margin-bottom: 2px; font-weight: 600; }
.check-list li::before {
  content: '';
  position: absolute; left: 0; top: 17px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F7E' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- 11 Spotlight hover (cursor-following glow on cards) ---------- */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 45%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1;
}
.spot:hover::before { opacity: 1; }

/* ---------- 12 Disciplines (the three skills) ---------- */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) { .disc-grid { grid-template-columns: 1fr; } }
.disc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .2s ease, box-shadow .25s ease;
}
.disc-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: var(--shadow-lg);
}
.disc-visual {
  height: 190px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.disc-visual svg { width: 100%; height: 100%; }
.disc-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.disc-body .tag {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  margin-bottom: 12px;
}
.disc-body h3 { font-family: var(--display); font-size: 21px; margin-bottom: 10px; letter-spacing: -0.01em; }
.disc-body p { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 18px; flex: 1; }
.disc-body .chip-row { margin-bottom: 20px; }
.disc-link {
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.disc-link svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.disc-card:hover .disc-link svg { transform: translateX(4px); }

/* mini animated visuals inside discipline cards */
.mv-bar { transform-box: fill-box; transform-origin: bottom; animation: mv-grow 3.2s var(--ease) infinite alternate; }
.mv-bar:nth-child(2) { animation-delay: .2s; }
.mv-bar:nth-child(3) { animation-delay: .4s; }
.mv-bar:nth-child(4) { animation-delay: .6s; }
.mv-bar:nth-child(5) { animation-delay: .8s; }
.mv-bar:nth-child(6) { animation-delay: 1s; }
@keyframes mv-grow { 0% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }
.mv-line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: mv-draw 3.2s var(--ease) infinite alternate; }
@keyframes mv-draw { to { stroke-dashoffset: 0; } }
.mv-flow { stroke-dasharray: 4 6; animation: mv-dash 1s linear infinite; }
@keyframes mv-dash { to { stroke-dashoffset: -20; } }
.mv-pulse { transform-box: fill-box; transform-origin: center; animation: mv-pulse 2s ease-in-out infinite; }
@keyframes mv-pulse { 50% { transform: scale(1.12); opacity: .8; } }
.mv-packet { animation: mv-packet 2.4s linear infinite; }
@keyframes mv-packet { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 13 Cards: service / project / cert ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  transition: transform .25s var(--ease), border-color .2s ease, box-shadow .25s ease;
}
.service-card .tag {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.service-card h3 {
  font-family: var(--display);
  font-size: 18px;
  margin-bottom: 10px;
}
.service-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), border-color .2s ease, box-shadow .25s ease, opacity .3s ease;
}
/* Thumbnails never crop: the whole screenshot sits inside a fixed frame. */
.project-card .thumb-sm {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  text-align: center;
  overflow: hidden;
}
.project-card .thumb-sm img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 3px;
  filter: drop-shadow(0 2px 8px rgba(20, 24, 31, .10));
}
[data-theme="dark"] .project-card .thumb-sm img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }

/* hover gallery: a single image fading between screenshots, with progress dots */
.project-card .thumb-sm { position: relative; }
.project-card .thumb-sm img { transition: opacity .22s ease; }
.thumb-dots {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px;
  padding: 4px 7px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
.thumb-sm.cycling .thumb-dots, .project-card:hover .thumb-dots { opacity: 1; }
.thumb-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background .25s ease;
}
.thumb-dots i.on { background: var(--accent); }
.project-card .thumb-sm svg { width: 100%; height: 100%; }
.project-card .pc-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.project-card .pc-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  margin-bottom: 10px;
}
.project-card h3 {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.project-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}
.project-card .pc-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.project-card .pc-link::after { content: ''; position: absolute; inset: 0; } /* whole card clickable */

.service-card:hover,
.project-card:hover,
.cert-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
  .service-card:hover, .project-card:hover, .cert-card:hover, .disc-card:hover { transform: none; }
}

.cert-card { cursor: pointer; }
.cert-card .thumb-sm { height: 150px; padding: 18px; }
.cert-card .thumb-sm img { width: auto; height: 100%; object-fit: contain; }
.cert-card .cert-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
}
.cert-card .cert-meta .view { color: var(--accent); }

.placeholder-note {
  grid-column: 1 / -1;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 22px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}
.placeholder-note strong { color: var(--text); }

/* ---------- 14 Filter bar & grids ---------- */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 28px 0 36px;
}
.filter-btn {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: all .15s ease;
}
.filter-btn:hover { color: var(--text); border-color: var(--text-muted); }
.filter-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.filter-btn .count { opacity: .6; margin-left: 4px; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-bottom: 96px;
}
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3 { grid-template-columns: 1fr; } }

.is-filtered-out { display: none !important; }
.filter-in { animation: filter-in .45s var(--ease) both; }
@keyframes filter-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- 15 Featured project & case study ---------- */
.project-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.project-feature:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: var(--shadow-lg); }
@media (max-width: 860px) { .project-feature { grid-template-columns: 1fr; } }
.project-feature .thumb {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@media (max-width: 860px) { .project-feature .thumb { border-right: none; border-bottom: 1px solid var(--border); } }
.project-feature .thumb svg { width: 100%; max-width: 440px; height: auto; }
.project-feature .body { padding: 36px; }
.pf-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.project-feature h3 {
  font-family: var(--display);
  font-size: 23px;
  margin-bottom: 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.project-feature p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 18px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag-row span {
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
}

/* star schema diagram: tables draw in, links animate */
.schema .tbl rect.head { fill: var(--accent); }
.schema .tbl rect.box { fill: var(--surface); stroke: var(--border-strong); }
.schema .tbl.fact rect.box { stroke: var(--accent); stroke-width: 1.5; }
.schema .tbl text { font-family: var(--mono); font-size: 9.5px; fill: var(--text-muted); }
.schema .tbl text.name { fill: var(--on-accent); font-weight: 500; font-size: 10px; }
.schema .tbl text.key { fill: var(--accent); }
.schema .link { stroke: var(--accent); stroke-width: 1.3; fill: none; stroke-dasharray: 4 5; animation: mv-dash 1.2s linear infinite; opacity: .8; }

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-top: 32px;
}
@media (max-width: 720px) { .case-meta { grid-template-columns: 1fr 1fr; } }
.case-meta div { padding: 18px 20px; border-left: 1px solid var(--border); }
.case-meta div:first-child { border-left: none; }
@media (max-width: 720px) {
  .case-meta div:nth-child(3) { border-left: none; }
  .case-meta div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
.case-meta span { display: block; font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.case-meta strong { font-size: 14.5px; font-weight: 600; }

.case-section { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 40px 0; border-top: 1px solid var(--border); }
@media (max-width: 760px) { .case-section { grid-template-columns: 1fr; gap: 12px; } }
.case-section h2 { font-family: var(--display); font-size: 20px; }
.case-section .n { font-family: var(--mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 8px; }
.case-section p { font-size: 16px; color: var(--text-muted); line-height: 1.8; margin: 0 0 14px; max-width: 68ch; }

/* ---------- 16 Process steps ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
  position: relative;
}
@media (max-width: 900px) { .process { grid-template-columns: 1fr; } }
.process-step {
  position: relative;
  padding: 0 20px 0 0;
}
.process-step .dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.process-step::before {
  content: '';
  position: absolute;
  top: 19px; left: 38px; right: 0;
  height: 1px;
  background: var(--border);
}
.process-step:last-child::before { display: none; }
.process-step.visible .dot { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.process-step h3 { font-family: var(--display); font-size: 17px; margin-bottom: 8px; }
.process-step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .process-step { padding: 0 0 28px 56px; }
  .process-step .dot { position: absolute; left: 0; top: 0; }
  .process-step::before { top: 38px; bottom: 0; left: 19px; right: auto; width: 1px; height: auto; }
}

/* ---------- 17 Terminal assistant ---------- */
.terminal {
  background: #0B1017;
  color: #D6DEE8;
  border: 1px solid #1F2934;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13px;
}
.terminal .console-bar { background: #0F151E; border-bottom-color: #1F2934; color: #7F8B9B; }
.terminal .console-dots i:nth-child(1) { background: #FF5F57; }
.terminal .console-dots i:nth-child(2) { background: #FEBC2E; }
.terminal .console-dots i:nth-child(3) { background: #28C840; }
.term-body {
  height: 340px;
  overflow-y: auto;
  padding: 18px 18px 8px;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: #2A3542 transparent;
}
.term-line { margin: 0 0 10px; white-space: pre-wrap; word-wrap: break-word; }
.term-line .prompt { color: #35D0BA; }
.term-line .path { color: #7C8CFF; }
.term-line.user { color: #FFFFFF; }
.term-line.sys { color: #7F8B9B; }
.term-line.bot a { color: #35D0BA; }
.term-line.bot strong { color: #FFFFFF; font-weight: 500; }
.term-cursor::after {
  content: 'â–‹';
  color: #35D0BA;
  animation: caret 1s steps(1) infinite;
  margin-left: 2px;
}
.term-suggest {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid #1F2934;
}
.term-suggest button {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #AAB5C3;
  background: #131B25;
  border: 1px solid #243140;
  border-radius: 100px;
  padding: 5px 11px;
  transition: color .15s ease, border-color .15s ease;
}
.term-suggest button:hover { color: #35D0BA; border-color: #35D0BA; }
.term-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px 14px;
  border-top: 1px solid #1F2934;
}
.term-input label { color: #35D0BA; white-space: nowrap; }
.term-input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 13px;
  caret-color: #35D0BA;
}
.term-input input::placeholder { color: #56626F; }

/* ---------- 18 About, timeline, chips ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p, .prose p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.about-grid strong, .prose strong { color: var(--text); }

.about-hero {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) { .about-hero { grid-template-columns: 260px 1fr; gap: 36px; } }
@media (max-width: 640px) { .about-hero { grid-template-columns: 1fr; gap: 28px; } }

/* About page portrait — full 3:4 photo, not a small circle */
.portrait {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.portrait img { width: 100%; height: auto; display: block; }
/* subtle brand wash so the studio white doesn't read as a cut-out */
.portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--accent) 16%, transparent) 100%);
  pointer-events: none;
}
@media (max-width: 640px) {
  .portrait { max-width: 300px; }
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* grouped stack (About page) — reads as a toolkit, not a pile of logos */
.stack-groups { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.stack-group .sg-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.chip {
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--border);
  padding: 6px 11px;
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip-sm { font-size: 11px; padding: 4px 9px; }

.timeline { position: relative; padding-left: 36px; display: flex; flex-direction: column; gap: 36px; }
.timeline::before, .timeline-progress {
  content: '';
  position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline-progress {
  background: linear-gradient(var(--accent), var(--accent-2));
  transform-origin: top;
  transform: scaleY(var(--tl, 0));
  transition: transform .1s linear;
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: '';
  position: absolute; left: -36px; top: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
  z-index: 1;
}
.timeline-item.visible::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
}
.timeline-item .t-date { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-bottom: 6px; display: block; }
.timeline-item h3 { font-family: var(--display); font-size: 19px; margin-bottom: 6px; }
.timeline-item p { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin: 0; max-width: 62ch; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 64px 40px;
  text-align: center;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.cta-band::after {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  left: 50%; top: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent), transparent 65%);
  opacity: .35;
  filter: blur(40px);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.cta-band p { color: color-mix(in srgb, var(--cta-fg) 70%, var(--cta-bg)); margin: 0 auto 28px; max-width: 52ch; line-height: 1.6; }
.cta-band .cta-row { justify-content: center; }
.cta-band .btn-ghost { background: transparent; color: var(--cta-fg); border-color: color-mix(in srgb, var(--cta-fg) 30%, transparent); }
.cta-band .btn-ghost:hover { border-color: var(--cta-fg); }
@media (max-width: 620px) { .cta-band { padding: 48px 22px; } }

/* ---------- 19 Contact & Find Me Online ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  box-shadow: var(--shadow);
}
@media (max-width: 520px) { .form-card { padding: 22px; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-family: var(--body); font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.topic-group { display: flex; flex-wrap: wrap; gap: 8px; }
/* visually hidden, but NOT width:100% — these inherit the .form-field input rule,
   and an absolutely positioned 100%-wide input overflows the page */
.topic-group input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.topic-group label {
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  padding: 8px 13px; margin: 0;
  border: 1px solid var(--border); border-radius: 100px;
  color: var(--text-muted); cursor: pointer;
  transition: all .15s ease;
}
.topic-group input:checked + label { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.topic-group input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-note { font-size: 12.5px; color: var(--text-muted); margin: 14px 0 0; }
.form-status {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 14px;
}
.form-status.show { display: block; }
.form-status.ok { background: var(--accent-soft); color: var(--accent); }
.form-status.err { background: var(--danger-soft); color: var(--danger); }

.contact-side { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 26px; }
.contact-info-card .row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.contact-info-card .row:first-child { border-top: none; padding-top: 0; }
.contact-info-card .row span:first-child { color: var(--text-muted); }
.contact-info-card .row a { color: var(--accent); text-decoration: none; font-weight: 600; }

.find-online-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 26px;
}
.find-online-card h3 {
  font-family: var(--display);
  font-size: 18px;
  margin-bottom: 18px;
}
.link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
@media (max-width: 400px) { .link-grid { grid-template-columns: 1fr; } }
.link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 0;
  transition: color .15s ease, transform .15s ease;
}
.link-row:hover { color: var(--accent); transform: translateX(3px); }
.link-icon {
  width: 34px; height: 34px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.link-icon svg { width: 16px; height: 16px; }

/* ---------- 20 Modal (certifications) ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 8, 12, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 400; padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  max-width: 480px; width: 100%; padding: 30px; position: relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.98);
  transition: transform .3s var(--ease);
}
.modal-overlay.open .modal-box { transform: none; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.modal-box .modal-thumb {
  height: 190px; background: var(--surface-2); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  margin-bottom: 20px; text-align: center; padding: 14px;
}
.modal-box .modal-thumb img { max-height: 100%; width: auto; object-fit: contain; }
.modal-box h3 { font-family: var(--display); font-size: 20px; margin-bottom: 8px; padding-right: 30px; }
.modal-box p.issuer { font-size: 13.5px; color: var(--text-muted); margin: 0 0 22px; }
.cert-note {
  border: 1px dashed var(--border-strong); border-radius: 8px;
  padding: 16px 20px; font-size: 13.5px; color: var(--text-muted);
  margin-bottom: 28px;
}
.cert-note strong { color: var(--text); }

/* ==========================================================================
   21 Showpieces
   ========================================================================== */

/* ---------- Shared demo chrome ---------- */
.demo-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.demo-head h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.015em; }
.demo-head p { margin: 10px 0 0; color: var(--text-muted); max-width: 60ch; line-height: 1.6; font-size: 15px; }
.demo-badge {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 100px; padding: 5px 11px;
  display: inline-flex; align-items: center; gap: 7px;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
  background: var(--surface);
}
.seg button {
  font-family: var(--mono);
  font-size: 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 100px;
  transition: all .15s ease;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--text); color: var(--bg); }

/* ---------- Dashboard (Data Analytics & BI) ---------- */
.dash {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dash-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.dash-toolbar .sp { flex: 1; }
.dash-toolbar .lbl { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.dash-filter-chip {
  display: none;
  align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 100px; padding: 5px 6px 5px 11px;
}
.dash-filter-chip.show { display: inline-flex; }
.dash-filter-chip button {
  border: none; background: transparent; color: inherit; padding: 0 4px; font-size: 14px; line-height: 1;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
.dash-grid > * { background: var(--surface); }
.kpi { padding: 18px 20px; background: var(--surface); min-width: 0; }
.kpi .k-label { font-size: 12.5px; color: var(--text-muted); }
.kpi .k-val {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  margin: 6px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.kpi .k-delta { font-family: var(--mono); font-size: 11.5px; }
.k-delta.up { color: var(--accent); }
.k-delta.down { color: var(--danger); }
.kpi svg { width: 100%; height: 28px; margin-top: 8px; display: block; }
.panel { padding: 18px 20px 14px; min-width: 0; }
.panel-wide { grid-column: span 3; }
.panel-full { grid-column: 1 / -1; }
.panel-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 12px;
}
.panel-title span { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--text-muted); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg text { font-family: var(--mono); font-size: 10px; fill: var(--text-muted); }
.chart-svg .gridline { stroke: var(--border); stroke-width: 1; }
.chart-svg .bar { fill: var(--accent); transition: opacity .2s ease, fill .2s ease; cursor: pointer; }
.chart-svg .bar.dim { opacity: .25; }
.chart-svg .bar-bg { fill: var(--surface-2); }
.chart-svg .line-actual { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line-forecast { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 5 5; }
.chart-svg .band-forecast { fill: var(--accent-2); opacity: .1; }
.chart-svg .area-actual { fill: url(#areaGrad); }
.chart-svg .hover-line { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.chart-svg .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.chart-svg .val { fill: var(--text); font-size: 10.5px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--accent); }
.legend i.fc { background: repeating-linear-gradient(90deg, var(--accent-2) 0 4px, transparent 4px 7px); }
.chart-tip {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  background: var(--text);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity .12s ease;
  white-space: nowrap;
}
.chart-tip.show { opacity: 1; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.dash-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table .num { text-align: right; }
.dash-table .mini-bar { height: 5px; border-radius: 3px; background: var(--accent); opacity: .8; }
/* variance bars grow out from a centre line: right = gain, left = loss */
.waterfall { position: relative; height: 8px; background: var(--surface-2); border-radius: 3px; }
.waterfall::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-strong); }
.waterfall i { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.waterfall i.pos { left: 50%; background: var(--accent); }
.waterfall i.neg { right: 50%; background: var(--danger); }
/* anomaly markers on the trend line */
.chart-svg .anom { fill: none; stroke: var(--warn); stroke-width: 2; opacity: .9; }
.chart-svg .anom-dot { fill: var(--warn); }
.chart-svg .anom-label { fill: var(--warn); font-size: 9.5px; font-family: var(--mono); }
.legend i.an { background: var(--warn); border-radius: 50%; width: 9px; height: 9px; }
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .panel-wide, .panel-side { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .kpi .k-val { font-size: 21px; }
  .kpi { padding: 14px; }
}

/* ---------- ETL explorer (Data Engineering) ---------- */
.etl {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.etl-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}
.etl-step {
  position: relative;
  text-align: left;
  border: none;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  padding: 16px 18px;
  color: var(--text-muted);
  transition: background .2s ease, color .2s ease;
}
.etl-step:first-child { border-left: none; }
.etl-step .n { font-family: var(--mono); font-size: 11px; display: block; margin-bottom: 4px; }
.etl-step strong { font-family: var(--display); font-size: 15px; color: var(--text); display: block; }
.etl-step small { font-size: 12px; display: block; margin-top: 2px; }
.etl-step::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--layer, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.etl-step.active { background: var(--surface); }
.etl-step.active::after { transform: scaleX(1); }
.etl-step.done .n { color: var(--accent); }
.etl-step[data-step="0"] { --layer: var(--bronze); }
.etl-step[data-step="1"] { --layer: var(--silver); }
.etl-step[data-step="2"] { --layer: var(--gold); }
.etl-step[data-step="3"] { --layer: var(--accent); }
@media (max-width: 720px) {
  .etl-steps { grid-template-columns: 1fr 1fr; }
  .etl-step:nth-child(3) { border-left: none; }
  .etl-step:nth-child(n+3) { border-top: 1px solid var(--border); }
  .etl-step small { display: none; }
}
.etl-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  min-height: 420px;
}
@media (max-width: 960px) { .etl-body { grid-template-columns: 1fr; } }
.etl-main { padding: 20px; min-width: 0; border-right: 1px solid var(--border); }
@media (max-width: 960px) { .etl-main { border-right: none; border-bottom: 1px solid var(--border); } }
.etl-side { padding: 20px; background: var(--surface-2); min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.etl-caption { font-size: 14px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.6; }
.etl-caption strong { color: var(--text); }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.data-table th {
  text-align: left; font-weight: 500; color: var(--text-muted);
  background: var(--surface-2); padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr { animation: row-in .35s var(--ease) both; }
.data-table tr:nth-child(2) { animation-delay: .03s; } .data-table tr:nth-child(3) { animation-delay: .06s; }
.data-table tr:nth-child(4) { animation-delay: .09s; } .data-table tr:nth-child(5) { animation-delay: .12s; }
.data-table tr:nth-child(6) { animation-delay: .15s; } .data-table tr:nth-child(7) { animation-delay: .18s; }
.data-table tr:nth-child(8) { animation-delay: .21s; } .data-table tr:nth-child(9) { animation-delay: .24s; }
@keyframes row-in { from { opacity: 0; transform: translateX(-6px); } }
.cell-bad { background: var(--danger-soft); color: var(--danger) !important; }
.cell-fixed { background: var(--accent-soft); color: var(--accent) !important; }
.row-dupe td { text-decoration: line-through; opacity: .55; }
.cell-null { color: var(--text-muted) !important; font-style: italic; }
.etl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.etl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.etl-log {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.8;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; min-height: 120px;
}
.etl-log div { animation: row-in .3s var(--ease) both; }
.etl-log .ok { color: var(--accent); }
.etl-log .warn { color: var(--warn); }
.etl-log .muted { color: var(--text-muted); }
.code {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  background: #0B1017; color: #C9D3DF;
  border-radius: var(--radius); padding: 14px 16px;
  overflow-x: auto; white-space: pre; margin: 0;
}
.code .kw { color: #7C8CFF; }
.code .fn { color: #35D0BA; }
.code .str { color: #F0B35A; }
.code .cm { color: #5E6B7B; font-style: italic; }
.side-label { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-bottom: 8px; display: block; }
.etl-controls { display: flex; gap: 10px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.etl-controls .sp { flex: 1; }
.run-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; width: 140px; }
.run-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s linear; }
.star-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 12px; }
.star-wrap svg { width: 100%; height: auto; display: block; }
.star-wrap .tbl { opacity: 0; animation: tbl-in .5s var(--ease) forwards; }
.star-wrap .tbl:nth-of-type(2) { animation-delay: .25s; } .star-wrap .tbl:nth-of-type(3) { animation-delay: .35s; }
.star-wrap .tbl:nth-of-type(4) { animation-delay: .45s; } .star-wrap .tbl:nth-of-type(5) { animation-delay: .55s; }
@keyframes tbl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Agent workflow (Generative AI) ---------- */
.agent {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.agent-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.agent-toolbar .sp { flex: 1; }
.agent-body { display: grid; grid-template-columns: 1.5fr 1fr; }
@media (max-width: 960px) { .agent-body { grid-template-columns: 1fr; } }
.agent-canvas {
  position: relative;
  padding: 18px;
  border-right: 1px solid var(--border);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 18px 18px;
  min-width: 0;
}
@media (max-width: 960px) { .agent-canvas { border-right: none; border-bottom: 1px solid var(--border); } }
.agent-canvas svg { width: 100%; height: auto; display: block; }
.agent-canvas .edge { fill: none; stroke: var(--border-strong); stroke-width: 1.6; transition: stroke .3s ease, opacity .3s ease; }
.agent-canvas .edge.active { stroke: var(--accent); stroke-dasharray: 5 5; animation: mv-dash .6s linear infinite; }
.agent-canvas .edge.done { stroke: var(--accent); }
.agent-canvas .edge.skipped { opacity: .3; }
.agent-canvas .node rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; transition: stroke .3s ease, fill .3s ease; }
.agent-canvas .node .ico { fill: var(--surface-2); stroke: none; transition: fill .3s ease; }
.agent-canvas .node text { font-family: var(--mono); font-size: 10px; fill: var(--text-muted); }
.agent-canvas .node text.nm { font-family: var(--body); font-size: 11.5px; font-weight: 600; fill: var(--text); }
.agent-canvas .node text.glyph { font-size: 12px; fill: var(--text-muted); }
.agent-canvas .node.running rect.card { stroke: var(--accent); stroke-width: 2; }
.agent-canvas .node.running .ico { fill: var(--accent-soft); }
.agent-canvas .node.done rect.card { stroke: var(--accent); }
.agent-canvas .node.done .ico { fill: var(--accent); }
.agent-canvas .node.done text.glyph { fill: var(--on-accent); }
.agent-canvas .node.skipped { opacity: .35; }
.agent-canvas .node .status { fill: var(--border-strong); transition: fill .3s ease; }
.agent-canvas .node.running .status { fill: var(--warn); }
.agent-canvas .node.done .status { fill: var(--accent); }
.agent-side { display: flex; flex-direction: column; min-width: 0; }
.agent-input { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.agent-input .side-label { margin-bottom: 6px; }
.agent-input blockquote {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text);
  border-left: 2px solid var(--accent); padding: 4px 0 4px 12px;
}
.agent-log {
  flex: 1;
  padding: 14px 18px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.8;
  min-height: 170px; max-height: 230px; overflow-y: auto;
  border-bottom: 1px solid var(--border);
}
.agent-log div { animation: row-in .3s var(--ease) both; }
.agent-log .t { color: var(--text-muted); margin-right: 8px; }
.agent-log .ok { color: var(--accent); }
.agent-log .run { color: var(--warn); }
.agent-out { padding: 16px 18px; background: var(--surface-2); }
.agent-out .draft {
  font-size: 13.5px; line-height: 1.65; color: var(--text); min-height: 90px; white-space: pre-wrap;
}
.agent-meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; }
.agent-meta b { color: var(--text); font-weight: 500; }

/* ---------- Skills graph ---------- */
.skills-graph {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.skills-graph .sg-canvas {
  position: relative;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
}
.skills-graph svg { width: 100%; height: auto; display: block; }
.sg-edge { stroke: var(--border-strong); stroke-width: 1; transition: stroke .2s ease, opacity .2s ease, stroke-width .2s ease; }
.sg-node circle { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; transition: all .2s ease; }
.sg-node text { font-family: var(--mono); font-size: 11px; fill: var(--text-muted); transition: fill .2s ease, opacity .2s ease; pointer-events: none; }
.sg-node { cursor: pointer; transition: opacity .2s ease; }
.sg-node.hub circle { fill: var(--text); stroke: none; }
.sg-node.hub text { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--text); }
.sg-node.shared circle { stroke: var(--accent-2); stroke-width: 1.8; }
.sg-node.key circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.sg-node.key text { fill: var(--text); font-weight: 500; font-size: 11.5px; }
.sg-dim .sg-edge { opacity: .15; }
.sg-dim .sg-node { opacity: .28; }
.sg-dim .sg-edge.hl { opacity: 1; stroke: var(--accent); stroke-width: 1.8; }
.sg-dim .sg-node.hl { opacity: 1; }
.sg-dim .sg-node.hl circle { stroke: var(--accent); fill: var(--accent-soft); }
.sg-dim .sg-node.hub.hl circle { fill: var(--accent); }
.sg-dim .sg-node.hl text { fill: var(--text); }
.sg-info {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-muted); min-height: 52px;
}
.sg-info strong { color: var(--text); font-family: var(--display); }
.sg-key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; }
.sg-key i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-block; }
.sg-key i.shared { border-color: var(--accent-2); }
.sg-key i.hub { background: var(--text); border-color: var(--text); }

/* ---------- FAQ accordion ----------
   Built on <details>/<summary>: native disclosure semantics, keyboard accessible
   and open-by-default when printed or when a browser searches the page. No JS,
   so it also works if scripts fail and needs no CSP allowance. */
.faq-list { display: grid; gap: 10px; max-width: 900px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; transition: border-color .15s ease;
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 17px 48px 17px 20px; position: relative;
  font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the +/- indicator, drawn rather than an icon font */
.faq-item summary::after,
.faq-item summary::before {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 12px; height: 2px; background: var(--accent); border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}
.faq-item summary::before { transform: translateY(-50%) rotate(90deg); }
.faq-item summary::after  { transform: translateY(-50%); }
.faq-item[open] summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq-a { padding: 0 20px 18px; }
.faq-a p { font-size: 14.5px; line-height: 1.72; color: var(--text-muted); margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--accent); text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after, .faq-item summary::before { transition: none; }
}

.skill-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* Cards size to their own content: the ML column is shorter than the rest,
     and stretching it would leave a card that is mostly empty space. */
  align-items: start;
}
@media (max-width: 1040px) { .skill-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .skill-cols { grid-template-columns: 1fr; } }
.skill-col {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 26px;
}
.skill-col .tag { font-family: var(--mono); font-size: 11.5px; color: var(--accent); display: block; margin-bottom: 10px; }
.skill-col h3 { font-family: var(--display); font-size: 19px; margin-bottom: 8px; }
.skill-col > p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; }
/* Default row: name left, mono tag right on one line. Used on About too. */
.skill-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px;
}
.skill-list li span { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); text-align: right; }
/* Links inside a skill list (the 404 page uses them as signposts) must read as
   links — in body-text colour they are indistinguishable from the labels. */
.skill-list a { color: var(--accent); text-decoration: none; }
.skill-list a:hover, .skill-list a:focus-visible { text-decoration: underline; }

/* Skills-page 4-column grid ONLY: at ~263px a card is too narrow for name + tag
   on one line, so stack them, both hard left. Scoped to `.skill-cols` so the
   About page's cards keep the single-line row, and placed AFTER the base rules
   so it is not silently overridden by them. */
@media (min-width: 1041px) {
  .skill-col { padding: 22px 20px; }
  .skill-cols .skill-list li {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
  }
  .skill-cols .skill-list li span { text-align: left; margin-left: 0; }
}

/* chart entry animations (charts re-render on every filter change) */
.chart-svg .bar-v { transform-box: fill-box; transform-origin: bottom; animation: grow-y .55s var(--ease) both; }
.chart-svg .bar-h { transform-box: fill-box; transform-origin: left; animation: grow-x .55s var(--ease) both; }
.chart-svg .draw-in { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.2s var(--ease) forwards; }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes sg-in { from { opacity: 0; } }
.etl-caption code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 2px; }
.mini-bar { height: 5px; border-radius: 3px; background: var(--accent); }

/* ---------- Screenshot gallery + lightbox ---------- */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.shots.one { grid-template-columns: 1fr; }
.shot {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .25s var(--ease), border-color .2s ease, box-shadow .25s ease;
}
.shot:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: var(--shadow-lg); }
.shot img { width: 100%; height: auto; display: block; background: var(--surface-2); }
.shot figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) { .shot:hover { transform: none; } }

.lightbox {
  position: fixed; inset: 0;
  z-index: 500;
  background: rgba(5, 8, 12, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure { margin: 0; max-width: 1200px; width: 100%; }
.lightbox img {
  width: 100%; height: auto;
  max-height: 82vh; object-fit: contain;
  border-radius: 6px;
}
.lightbox figcaption {
  font-family: var(--mono); font-size: 12px; color: #C9D3DF;
  text-align: center; padding-top: 14px;
}
.lb-close, .lb-nav {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-close { position: absolute; top: 20px; right: 20px; }
@media (max-width: 720px) {
  .lightbox { padding: 12px; gap: 4px; }
  .lb-nav { position: absolute; bottom: 20px; }
  .lb-prev { left: 24px; } .lb-next { right: 24px; }
}

/* ---------- Certification groups ---------- */
.cert-group { margin-bottom: 44px; }
.cert-group-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cert-group-head h2 { font-family: var(--display); font-size: 19px; }
.cert-group-head span { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }
.cert-card .thumb-sm { background: var(--surface-2); padding: 16px; }
.cert-card .thumb-sm img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.cert-card.no-img .thumb-sm {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  color: var(--accent); background: var(--accent-soft);
}
.modal-box .modal-thumb { background: var(--surface-2); padding: 10px; }
.modal-box .modal-thumb img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

/* ---------- GenAI build list ---------- */
.build {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 90px;
}
.build:first-of-type { border-top: none; }
.build:nth-child(even) .build-media { order: 2; }
@media (max-width: 860px) {
  .build { grid-template-columns: 1fr; gap: 22px; padding: 32px 0; }
  .build:nth-child(even) .build-media { order: 0; }
}
.build-media { margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; transition: border-color .2s ease; }
.build-media:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.build-media img { width: 100%; height: auto; display: block; }
.build .n { font-family: var(--mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 10px; }
.build h3 { font-family: var(--display); font-size: 22px; line-height: 1.25; margin-bottom: 16px; letter-spacing: -0.01em; }
.build dt { font-family: var(--mono); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.build dd { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.build dd strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   22 Command palette, WhatsApp, footer, reveal
   ========================================================================== */

/* ---------- Command palette ---------- */
.palette-overlay {
  position: fixed; inset: 0;
  z-index: 600;
  background: rgba(5, 8, 12, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}
.palette-overlay.open { opacity: 1; visibility: visible; }
.palette {
  width: 100%; max-width: 580px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-8px) scale(.98);
  transition: transform .2s var(--ease);
}
.palette-overlay.open .palette { transform: none; }
.palette-search {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.palette-search svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.palette-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  color: var(--text); font-size: 16px; font-family: var(--body);
}
.palette-list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.palette-group {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-muted);
  padding: 10px 10px 6px; text-transform: uppercase; letter-spacing: .06em;
}
.palette-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: none; background: transparent;
  color: var(--text); font-size: 14px; text-align: left;
  cursor: pointer;
}
.palette-item .pi-ico {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-muted);
  display: grid; place-items: center; flex-shrink: 0;
}
.palette-item .pi-ico svg { width: 15px; height: 15px; }
.palette-item .pi-hint { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.palette-item.sel { background: var(--accent-soft); }
.palette-item.sel .pi-ico { background: var(--accent); color: var(--on-accent); }
.palette-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 14px; }
.palette-foot {
  display: flex; gap: 16px; padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-muted);
}
.palette-foot span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 520px) { .palette-foot { display: none; } }

/* ---------- Floating action buttons (assistant + WhatsApp) ---------- */
.fab-stack {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  color: #fff;
  display: grid; place-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s ease;
}
.fab svg { width: 27px; height: 27px; }
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab-assistant {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}
.fab-assistant:hover { box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 55%, transparent); }
.fab-wa { background: #25D366; box-shadow: 0 10px 28px rgba(37, 211, 102, .38); }
.fab-wa:hover { box-shadow: 0 14px 36px rgba(37, 211, 102, .5); }
/* soft pulse so the pair reads as interactive, not decorative */
.fab-assistant::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: fab-ping 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes fab-ping {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
.fab-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--text); color: var(--bg);
  font-size: 12.5px; font-weight: 500;
  padding: 7px 11px; border-radius: var(--radius);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.fab:hover .fab-tip { opacity: 1; transform: translateY(-50%); }
@media (max-width: 520px) {
  .fab-stack { right: 16px; bottom: 16px; gap: 10px; }
  .fab { width: 50px; height: 50px; }
  .fab svg { width: 24px; height: 24px; }
}

/* ---------- Assistant dock (the terminal, on any page) ---------- */
.assistant-dock {
  position: fixed;
  right: 22px;
  bottom: 160px;          /* clears the whole 2-button stack below it */
  z-index: 260;
  width: 400px;
  max-width: calc(100vw - 32px);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .28s var(--ease), visibility .22s ease;
}
.assistant-dock.open { opacity: 1; visibility: visible; transform: none; }
.assistant-dock .terminal { box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
.assistant-dock .term-body { height: 300px; }
.dock-close {
  border: none;
  background: transparent;
  color: #7F8B9B;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.dock-close:hover { color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 520px) {
  .assistant-dock { right: 16px; left: 16px; bottom: 138px; width: auto; }
  .assistant-dock .term-body { height: 42vh; }
}
@media (max-height: 560px) { .assistant-dock .term-body { height: 200px; } }

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
  margin-top: 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: 14px 0 18px; max-width: 36ch; }
.footer-col h2 { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: var(--text); text-decoration: none; padding: 5px 0; opacity: .85; transition: color .15s ease, opacity .15s ease; }
.footer-col a:hover { color: var(--accent); opacity: 1; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}
.footer-bottom p { margin: 0; }
.footer-hint { font-family: var(--mono); font-size: 11.5px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Word-by-word headline reveal (JS splits the heading into spans) */
.split-word { display: inline-block; opacity: 0; transform: translateY(0.4em); animation: word-in .7s var(--ease) forwards; }
@keyframes word-in { to { opacity: 1; transform: none; } }