/* ============================================================================
   PrajniX Labs — public site design system
   Palette: "Warm & rooted" — saffron + coral + ink-navy on warm canvas.
   Per-offering accents: Praxis=saffron · Studio=coral · Campus=green ·
   Healthcare=crimson. Light-first with a dark toggle.
   One stylesheet, shared by every page (index/praxis/studio/campus/healthcare).
   ========================================================================== */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand accents (stable across themes) */
  --saffron:    #F59E0B;
  --saffron-d:  #D97706;
  --saffron-l:  #FBBF24;
  --coral:      #EF4444;
  --coral-d:    #DC2626;
  --green:      #15A06A;
  --green-d:    #0E7C50;
  --crimson:    #E11D48;
  --crimson-d:  #BE123C;
  --purple:     #7F77DD;
  --purple-d:   #534AB7;
  --purple-l:   #AFA9EC;
  --purple-dd:  #3C3489;

  /* Fixed dark band background — stays dark in BOTH themes (never flips). */
  --band-bg:    #1E2A4A;
  --navy:       #1E2A4A;

  /* Type */
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', 'Space Mono', ui-monospace, monospace;

  /* Radii */
  --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;

  /* Layout */
  --wrap: 1140px;
  --nav-h: 66px;
}

/* LIGHT (default) */
:root, [data-theme="light"] {
  --canvas:    #FAF7F0;
  --surface:   #FFFFFF;
  --surface-2: #F4EEE2;
  --surface-3: #ECE4D5;
  --ink:       #1E2A4A;
  --ink-2:     #535B71;
  --ink-3:     #898F9F;
  --line:      rgba(30, 42, 74, 0.10);
  --line-2:    rgba(30, 42, 74, 0.17);
  --line-3:    rgba(30, 42, 74, 0.28);
  --shadow:    0 1px 2px rgba(30,42,74,.04), 0 8px 24px rgba(30,42,74,.06);
  --shadow-lg: 0 2px 6px rgba(30,42,74,.06), 0 24px 60px rgba(30,42,74,.12);
  --grid-line: rgba(30, 42, 74, 0.045);
  --on-accent: #FFFFFF;
}

/* DARK */
[data-theme="dark"] {
  --canvas:    #111219;
  --surface:   #1A1C26;
  --surface-2: #22242F;
  --surface-3: #2C2F3C;
  --ink:       #F2EFE8;
  --ink-2:     #AEB3C0;
  --ink-3:     #767B8A;
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);
  --line-3:    rgba(255, 255, 255, 0.22);
  --shadow:    0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
  --grid-line: rgba(255, 255, 255, 0.04);
  --on-accent: #14110A;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  transition: background .25s ease, color .25s ease;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
p { color: var(--ink-2); }
::selection { background: var(--saffron); color: #1a1205; }

/* ─── Helpers ────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; width: 100%; padding: 0 28px; }
.section { padding: 92px 0; }
.section-sm { padding: 60px 0; }
.bg-surface { background: var(--surface); }
.bg-canvas  { background: var(--canvas); }
.bg-ink     { background: var(--ink); }
.divide-top { border-top: 1px solid var(--line); }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 1.5px; background: currentColor; opacity: .5; }
.eyebrow.c-saffron  { color: var(--saffron-d); }
.eyebrow.c-coral    { color: var(--coral-d); }
.eyebrow.c-green    { color: var(--green-d); }
.eyebrow.c-crimson  { color: var(--crimson-d); }
.eyebrow.c-purple   { color: var(--purple-d); }
.eyebrow.no-dash::before { display: none; }

h1, h2, h3, h4, h5 { font-family: var(--display); color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.h-sec { font-size: clamp(28px, 4vw, 42px); }
.h-sub { font-family: var(--sans); font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-2); font-weight: 400; line-height: 1.7; margin-top: 14px; max-width: 620px; }
.center .h-sub { margin-left: auto; margin-right: auto; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  padding: 11px 20px; border-radius: var(--r-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap; line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { font-size: 15.5px; padding: 14px 26px; border-radius: var(--r-md); }

.btn-saffron { background: var(--saffron); color: #1a1205; }
.btn-saffron:hover { background: var(--saffron-d); color: #fff; }
.btn-coral   { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-d); }
.btn-purple  { background: var(--purple-d); color: #fff; }
.btn-purple:hover { background: var(--purple-dd); }
.btn-green   { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-d); }
.btn-crimson { background: var(--crimson); color: #fff; }
.btn-crimson:hover { background: var(--crimson-d); }
.btn-ink     { background: var(--ink); color: var(--canvas); }
.btn-ink:hover { opacity: .9; }

.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--line-3); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.btn-outline-saffron { background: transparent; border-color: color-mix(in srgb, var(--saffron) 50%, transparent); color: var(--saffron-d); }
.btn-outline-saffron:hover { background: color-mix(in srgb, var(--saffron) 10%, transparent); }
.btn-outline-coral { background: transparent; border-color: color-mix(in srgb, var(--coral) 50%, transparent); color: var(--coral-d); }
.btn-outline-coral:hover { background: color-mix(in srgb, var(--coral) 10%, transparent); }
.btn-on-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.btn-on-dark:hover { background: rgba(255,255,255,.16); }

/* ─── Pills & tags ───────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 30px; border: 1px solid transparent;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-saffron { color: var(--saffron-d); background: color-mix(in srgb, var(--saffron) 13%, transparent); border-color: color-mix(in srgb, var(--saffron) 30%, transparent); }
.pill-coral   { color: var(--coral-d);   background: color-mix(in srgb, var(--coral) 11%, transparent);   border-color: color-mix(in srgb, var(--coral) 28%, transparent); }
.pill-green   { color: var(--green-d);   background: color-mix(in srgb, var(--green) 13%, transparent);   border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.pill-crimson { color: var(--crimson-d); background: color-mix(in srgb, var(--crimson) 12%, transparent); border-color: color-mix(in srgb, var(--crimson) 30%, transparent); }
.pill-purple  { color: var(--purple-d);  background: color-mix(in srgb, var(--purple) 13%, transparent);  border-color: color-mix(in srgb, var(--purple) 32%, transparent); }
[data-theme="dark"] .pill-saffron { color: var(--saffron-l); }
[data-theme="dark"] .pill-coral   { color: #fca5a5; }
[data-theme="dark"] .pill-green   { color: #4ade80; }
[data-theme="dark"] .pill-crimson { color: #fb7185; }
[data-theme="dark"] .pill-purple  { color: var(--purple-l); }

.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-size: 12.5px; padding: 4px 11px; border-radius: 30px;
  border: 1px solid var(--line-2); color: var(--ink-3);
}
.tag.t-saffron { color: var(--saffron-d); border-color: color-mix(in srgb, var(--saffron) 35%, transparent); }
.tag.t-coral   { color: var(--coral-d);   border-color: color-mix(in srgb, var(--coral) 35%, transparent); }
.tag.t-green   { color: var(--green-d);   border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.tag.t-crimson { color: var(--crimson-d); border-color: color-mix(in srgb, var(--crimson) 35%, transparent); }
.tag.t-purple  { color: var(--purple-d);  border-color: color-mix(in srgb, var(--purple) 38%, transparent); }
[data-theme="dark"] .tag.t-saffron { color: var(--saffron-l); }
[data-theme="dark"] .tag.t-coral   { color: #fca5a5; }
[data-theme="dark"] .tag.t-green   { color: #4ade80; }
[data-theme="dark"] .tag.t-crimson { color: #fb7185; }
[data-theme="dark"] .tag.t-purple  { color: var(--purple-l); }

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease;
}
.brand { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: var(--ink); }
.brand .x { color: var(--saffron); }
.brand .labs { color: var(--ink-3); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  padding: 8px 13px; border-radius: var(--r-xs);
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--ink-2); cursor: pointer; font-size: 16px;
  transition: border-color .18s, color .18s, background .18s;
}
.icon-btn:hover { border-color: var(--line-3); color: var(--ink); }
.nav-toggle { display: none; }

/* Mobile menu (checkbox hack-free; toggled by JS) */
.mobile-menu {
  display: none; position: fixed; top: var(--nav-h); inset-inline: 0; z-index: 99;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 14px 28px 22px; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 16px; font-weight: 500; color: var(--ink-2); padding: 11px 8px; border-radius: var(--r-xs); }
.mobile-menu a:hover { background: var(--surface-2); color: var(--ink); }

/* ─── Page hero (sub-pages) ──────────────────────────────────────────────── */
.page-top { padding-top: var(--nav-h); }
.hero, .phero { position: relative; overflow: hidden; }
.hero-grid, .phero-grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 54px 54px;
}
.hero-grid { mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000, transparent); }
.phero-grid-bg { mask-image: radial-gradient(ellipse 80% 90% at 12% 50%, #000 25%, transparent 78%); }
.glow {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(20px);
}
.hero-inner { position: relative; z-index: 1; }

/* Home hero */
.hero { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; padding: 80px 0 60px; }
.hero h1 { font-size: clamp(42px, 6.6vw, 80px); letter-spacing: -.035em; max-width: 18ch; }
.hero h1 .accent { color: var(--saffron); }
.hero h1 .accent-c { color: var(--coral); }
.hero-lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-2); max-width: 56ch; margin: 22px 0 34px; line-height: 1.7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sub-page hero */
.phero { padding: 56px 0 52px; border-bottom: 1px solid var(--line); }
.phero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.phero h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -.03em; }
.phero-lead { font-size: clamp(15px, 1.7vw, 18px); color: var(--ink-2); max-width: 54ch; margin: 18px 0 28px; line-height: 1.7; }
.phero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* mini stat stack */
.mini-stats { display: grid; gap: 12px; }
.mini-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow); }
.mini-stat .v { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink); }
.mini-stat .l { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* ─── Ticker ─────────────────────────────────────────────────────────────── */
.ticker { display: flex; align-items: center; gap: 18px; margin-top: 52px; border-top: 1px solid var(--line); padding-top: 20px; overflow: hidden; }
.ticker-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-right: 18px; border-right: 1px solid var(--line-2); flex-shrink: 0; }
.ticker-mask { overflow: hidden; flex: 1; }
.ticker-track { display: flex; gap: 44px; width: max-content; animation: tick 34s linear infinite; }
.ticker-item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ─── Stats bar ──────────────────────────────────────────────────────────── */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.stat { padding: 34px 28px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat .v { font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1; color: var(--ink); }
.stat .v.saffron { color: var(--saffron-d); }
.stat .v.coral { color: var(--coral-d); }
.stat .v.green { color: var(--green-d); }
.stat .v.crimson { color: var(--crimson-d); }
[data-theme="dark"] .stat .v.saffron { color: var(--saffron-l); }
[data-theme="dark"] .stat .v.coral { color: #fca5a5; }
[data-theme="dark"] .stat .v.green { color: #4ade80; }
[data-theme="dark"] .stat .v.crimson { color: #fb7185; }
.stat .l { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }

/* ─── Grids ──────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Vertical (home) split cards */
.vert-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 34px; box-shadow: var(--shadow); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.vert-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vert-card.edu:hover { border-color: color-mix(in srgb, var(--saffron) 50%, transparent); }
.vert-card.health:hover { border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.vert-card h3 { font-size: 25px; margin: 16px 0 9px; }
.vert-card > p { font-size: 15px; line-height: 1.65; margin-bottom: 24px; }

/* Offering mini-cards inside vertical card */
.offer-row { display: grid; gap: 10px; margin-bottom: 22px; }
.offer-mini { display: flex; align-items: center; gap: 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; transition: border-color .18s, transform .18s; }
.offer-mini:hover { border-color: var(--line-3); transform: translateX(2px); }
.offer-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.offer-mini .nm { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.offer-mini .ds { font-size: 12.5px; color: var(--ink-3); }
.offer-mini .arr { margin-left: auto; color: var(--ink-3); font-size: 15px; }

/* ─── Product cards (offering pages link-outs) ──────────────────────────── */
.product-card { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.product-card.praxis:hover  { border-color: color-mix(in srgb, var(--saffron) 55%, transparent); }
.product-card.studio:hover  { border-color: color-mix(in srgb, var(--purple) 55%, transparent); }
.product-card.campus:hover  { border-color: color-mix(in srgb, var(--coral) 55%, transparent); }
.pcard-head { padding: 26px 28px 22px; border-bottom: 1px solid var(--line); }
.pcard-head.praxis { background: color-mix(in srgb, var(--saffron) 7%, var(--surface)); }
.pcard-head.studio { background: color-mix(in srgb, var(--purple) 8%, var(--surface)); }
.pcard-head.campus { background: color-mix(in srgb, var(--coral) 7%, var(--surface)); }
.pcard-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.pcard-kicker.praxis { color: var(--saffron-d); }
.pcard-kicker.studio { color: var(--purple-d); }
.pcard-kicker.campus { color: var(--coral-d); }
[data-theme="dark"] .pcard-kicker.praxis { color: var(--saffron-l); }
[data-theme="dark"] .pcard-kicker.studio { color: var(--purple-l); }
[data-theme="dark"] .pcard-kicker.campus { color: #fca5a5; }
.pcard-head h3 { font-size: 23px; margin-bottom: 8px; }
.pcard-head p { font-size: 14px; line-height: 1.6; }
.pcard-body { padding: 24px 28px; flex: 1; }
.pcard-foot { padding: 16px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pcard-foot .url { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* Feature list */
.feat-list { list-style: none; }
.feat-list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.feat-list li:last-child { border-bottom: none; padding-bottom: 0; }
.f-ic { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.f-saffron { background: color-mix(in srgb, var(--saffron) 14%, transparent); }
.f-coral   { background: color-mix(in srgb, var(--coral) 13%, transparent); }
.f-purple  { background: color-mix(in srgb, var(--purple) 14%, transparent); }
.f-green   { background: color-mix(in srgb, var(--green) 14%, transparent); }
.f-crimson { background: color-mix(in srgb, var(--crimson) 13%, transparent); }
.f-ink     { background: var(--surface-3); }
.feat-list .ft { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.feat-list .fd { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ─── Steps / phases ─────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
.step-n { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.step h5 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 13.5px; line-height: 1.6; }
.step.s-saffron { border-top: 3px solid var(--saffron); }
.step.s-coral   { border-top: 3px solid var(--coral); }
.step.s-green   { border-top: 3px solid var(--green); }
.step.s-crimson { border-top: 3px solid var(--crimson); }
.step.s-purple  { border-top: 3px solid var(--purple); }

/* meta strip */
.meta-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.meta-item { background: var(--surface); padding: 22px 26px; }
.meta-item .l { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.meta-item .v { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink); }

/* ─── Testimonials ───────────────────────────────────────────────────────── */
.quote-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.quote-card .mark { font-family: var(--display); font-size: 44px; line-height: .6; color: color-mix(in srgb, var(--purple) 45%, transparent); margin-bottom: 6px; }
.quote-card blockquote { font-size: 14.5px; color: var(--ink); line-height: 1.7; flex: 1; }
.quote-card .proj { font-size: 12.5px; color: var(--ink-2); margin-top: 14px; padding: 9px 12px; background: var(--surface-2); border-radius: var(--r-sm); border-left: 3px solid var(--purple); }
.quote-card .who { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-card .av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; }
.quote-card .nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.quote-card .rl { font-size: 12px; color: var(--ink-3); }

/* ─── Courses ────────────────────────────────────────────────────────────── */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.course-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow); transition: border-color .18s, transform .18s; }
.course-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
.course-lvl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.lvl-beginner { color: var(--green-d); }
.lvl-inter { color: var(--saffron-d); }
.lvl-advanced { color: var(--coral-d); }
.lvl-self { color: var(--ink-3); }
[data-theme="dark"] .lvl-beginner { color: #4ade80; }
[data-theme="dark"] .lvl-inter { color: var(--saffron-l); }
[data-theme="dark"] .lvl-advanced { color: #fca5a5; }
.course-card h5 { font-size: 15px; margin-bottom: 7px; }
.course-card p { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.course-foot { display: flex; justify-content: space-between; align-items: center; }
.course-foot .price { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); }
.course-foot .dur { font-size: 12px; color: var(--ink-3); }

/* ─── Compare (traditional vs PrajniX) ───────────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.compare-head { padding: 17px 22px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.compare-col.win .compare-head { background: color-mix(in srgb, var(--green) 9%, var(--surface)); color: var(--green-d); }
[data-theme="dark"] .compare-col.win .compare-head { color: #4ade80; }
.compare-row { padding: 15px 22px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; }
.compare-row:last-child { border-bottom: none; }
.compare-row .k { font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 96px; flex-shrink: 0; }
.compare-row .v { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.compare-row .v.dim { color: var(--ink-3); }
.compare-row .v.good { color: var(--green-d); font-weight: 500; }
[data-theme="dark"] .compare-row .v.good { color: #4ade80; }

/* ─── Healthcare: 8 classes ──────────────────────────────────────────────── */
.class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.class-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow); }
.class-badge { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .03em; margin-bottom: 7px; }
.class-card p { font-size: 12px; line-height: 1.5; }
.cls-malignant { color: var(--crimson-d); }
.cls-precancer { color: var(--saffron-d); }
.cls-benign { color: var(--green-d); }
[data-theme="dark"] .cls-malignant { color: #fb7185; }
[data-theme="dark"] .cls-precancer { color: var(--saffron-l); }
[data-theme="dark"] .cls-benign { color: #4ade80; }

/* ─── Healthcare: paper card ─────────────────────────────────────────────── */
.paper-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.paper-head { padding: 32px 36px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.paper-head h2 { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.32; margin: 16px 0 14px; }
.authors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.author { background: var(--surface); border: 1px solid var(--line-2); padding: 5px 13px; border-radius: 30px; font-size: 12.5px; color: var(--ink-2); }
.paper-meta { display: flex; flex-wrap: wrap; gap: 20px; }
.paper-meta span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.paper-body { padding: 32px 36px; display: grid; grid-template-columns: 1.9fr 1fr; gap: 38px; }
.abstract h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; }
.abstract p { font-size: 14px; line-height: 1.75; margin-bottom: 14px; }
.abstract strong { color: var(--ink); font-weight: 600; }
.kw-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.kw { background: color-mix(in srgb, var(--green) 7%, transparent); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); color: var(--green-d); padding: 4px 11px; border-radius: 6px; font-size: 11.5px; }
[data-theme="dark"] .kw { color: #4ade80; }
.paper-side { display: flex; flex-direction: column; gap: 12px; }
.side-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 17px; }
.side-card h5 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.side-card p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.side-card strong { color: var(--ink); }
.side-card a { color: var(--green-d); font-size: 12.5px; display: inline-flex; gap: 4px; margin-top: 7px; }
[data-theme="dark"] .side-card a { color: #4ade80; }

/* ─── News grid ──────────────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.news-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 23px; box-shadow: var(--shadow); transition: border-color .2s, transform .2s; }
.news-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
.news-src { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.news-src b { color: var(--green-d); font-weight: 500; }
[data-theme="dark"] .news-src b { color: #4ade80; }
.news-card h4 { font-size: 15px; line-height: 1.4; margin-bottom: 9px; font-weight: 700; }
.news-card p { font-size: 12.5px; line-height: 1.6; }

/* ─── Capabilities ───────────────────────────────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cap-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; gap: 18px; box-shadow: var(--shadow); }
.cap-ic { font-size: 26px; line-height: 1; flex-shrink: 0; }
.cap-card h4 { font-size: 16px; margin-bottom: 8px; }
.cap-card p { font-size: 13.5px; line-height: 1.6; }

/* ─── Philosophy ─────────────────────────────────────────────────────────── */
.phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.phil-item { background: var(--surface); padding: 30px; }
.phil-ic { font-size: 24px; margin-bottom: 14px; }
.phil-item h4 { font-size: 16px; margin-bottom: 8px; }
.phil-item p { font-size: 13.5px; line-height: 1.65; }

/* ─── CTA band ───────────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; background: var(--band-bg); color: #fff; padding: 80px 0; text-align: center; }
.cta-band::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000, transparent); }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.7); font-size: 16px; margin: 0 auto 30px; max-width: 56ch; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 40px; }
.footer-brand p { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; max-width: 280px; line-height: 1.65; }
.fcol h5 { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 15px; }
.fcol a { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; transition: color .18s; }
.fcol a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); gap: 16px; flex-wrap: wrap; }
.footer-bottom p { font-size: 12.5px; color: var(--ink-3); }
.footer-bottom .mono { font-family: var(--mono); }

/* ─── Courses note ───────────────────────────────────────────────────────── */
.courses-note { text-align: center; margin-top: 30px; font-size: 14.5px; color: var(--ink-2); }
.courses-note .lead { color: var(--ink); font-weight: 600; }

/* ─── Enquiry modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 18, 30, 0.6); backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; }
.modal {
  width: 100%; max-width: 480px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); max-height: calc(100vh - 40px); overflow-y: auto;
  animation: modalIn .25s ease both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 26px 0; }
.modal-head h3 { font-size: 21px; }
.modal-head p { font-size: 13.5px; margin-top: 6px; line-height: 1.55; }
.modal-close {
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: 8px; font-size: 17px; line-height: 1;
  cursor: pointer; flex-shrink: 0; transition: border-color .18s, color .18s;
}
.modal-close:hover { border-color: var(--line-3); color: var(--ink); }
.modal-body { padding: 20px 26px 26px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field label .req { color: var(--coral-d); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--canvas); border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: 11px 13px; transition: border-color .18s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--saffron); }
.field textarea { resize: vertical; min-height: 94px; }
.field .err { display: none; font-size: 12px; color: var(--coral-d); margin-top: 5px; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--coral); }
.modal .btn { width: 100%; justify-content: center; margin-top: 4px; }
.modal .btn[disabled] { opacity: .6; cursor: progress; }
.modal-note { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 14px; line-height: 1.5; }
.modal-note a { color: var(--ink-2); text-decoration: underline; }
.modal-error { display: none; font-size: 13px; color: var(--coral-d); text-align: center; margin-top: 12px; }
.modal-success { display: none; padding: 36px 26px 34px; text-align: center; }
.modal-success .ic {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-d);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
[data-theme="dark"] .modal-success .ic { color: #4ade80; }
.modal-success h3 { font-size: 20px; margin-bottom: 8px; }
.modal-success p { font-size: 14px; line-height: 1.6; }
.modal.sent .modal-head, .modal.sent .modal-body { display: none; }
.modal.sent .modal-success { display: block; }

/* ─── Scroll reveal (progressive enhancement) ────────────────────────────── */
/* Hidden state is gated behind `.js` (added by site.js). With no JS, or if the
   script fails, all content stays fully visible — the animation is enhancement
   only, never a prerequisite for seeing the page. */
.js .reveal       { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.in    { opacity: 1; transform: none; }
.js .reveal-left  { opacity: 0; transform: translateX(-22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal-left.in  { opacity: 1; transform: none; }
.js .reveal-scale { opacity: 0; transform: scale(.95); transition: opacity .5s ease, transform .5s ease; }
.js .reveal-scale.in { opacity: 1; transform: none; }

/* ─── Brochure / infographic animations ──────────────────────────────────── */
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes shimmer-sweep {
  0%          { transform: translateX(-130%); opacity: 0; }
  10%         { opacity: 1; }
  80%         { opacity: 1; }
  100%        { transform: translateX(130%); opacity: 0; }
}

.brochure-frame { position: relative; transition: box-shadow .35s ease, filter .35s ease; }
.brochure-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.26) 50%, transparent 75%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 2;
}
.brochure-frame.in::before  { animation: shimmer-sweep 1.1s ease-out .35s 1 forwards; }
.brochure-frame img         { animation: float-bob 7s ease-in-out infinite; will-change: transform; }
.brochure-frame:hover       { box-shadow: 0 16px 64px rgba(0,0,0,.15); filter: brightness(1.03) saturate(1.04); }
.brochure-frame:hover img   { animation-play-state: paused; }
[data-theme="dark"] .brochure-frame:hover { box-shadow: 0 16px 64px rgba(0,0,0,.50); }

/* ─── Brand X glow ────────────────────────────────────────────────────────── */
@keyframes x-pulse {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 18px color-mix(in srgb, var(--saffron) 60%, transparent); }
}
.brand .x { animation: x-pulse 4s ease-in-out infinite; }

/* ─── Edge-fade masks on scroll strips ───────────────────────────────────── */
.co-scroll-wrap {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.ticker-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* ─── Nav scroll shadow ───────────────────────────────────────────────────── */
.nav.scrolled { box-shadow: 0 2px 24px rgba(30,42,74,.10); }
[data-theme="dark"] .nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.4); }

/* ─── Reduced motion — all new animations off ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-left, .js .reveal-scale { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  .brochure-frame img       { animation: none; }
  .brochure-frame::before   { animation: none !important; }
  .brand .x                 { animation: none; }
  .co-track                 { animation: none; }
  html { scroll-behavior: auto; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 840px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .phero-grid { grid-template-columns: 1fr; gap: 32px; }
  .grid-2, .compare, .cap-grid, .paper-body { grid-template-columns: 1fr; }
  .grid-3, .steps, .news-grid, .course-grid { grid-template-columns: 1fr 1fr; }
  .grid-4, .class-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .phil-grid { grid-template-columns: 1fr; }
  .meta-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .section { padding: 64px 0; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .nav { padding: 0 20px; }
  .grid-3, .steps, .news-grid, .course-grid, .grid-4, .class-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .paper-head, .paper-body { padding-inline: 22px; }
  .stat { padding: 24px 20px; }
}

/* ─── Homepage: Emergent Dawn hero (generative canvas) ───────────────────── */
.hero-dawn {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  max-height: 940px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* fallback if the canvas never paints (no JS): a quiet warm dawn */
  background:
    radial-gradient(ellipse 60% 42% at 50% 86%, color-mix(in srgb, var(--saffron) 26%, transparent), transparent 70%),
    var(--canvas);
}
.dawn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.dawn-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 74% 60% at 50% 40%,
      var(--canvas) 0%,
      color-mix(in srgb, var(--canvas) 48%, transparent) 42%,
      transparent 72%),
    linear-gradient(to bottom, var(--canvas) 0%, transparent 16%);
}
.hero-dawn-inner { position: relative; z-index: 2; text-align: center; max-width: 840px; padding: 0 24px; }
.dawn-eyebrow { justify-content: center; margin-bottom: 22px; }
.dawn-h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(42px, 6.6vw, 88px); line-height: 1.0; letter-spacing: -.038em;
  color: var(--ink);
}
.dawn-h1 .accent { color: var(--saffron); }
[data-theme="dark"] .dawn-h1 .accent { color: var(--saffron-l); }
.dawn-lead {
  margin: 24px auto 32px; max-width: 580px;
  font-size: clamp(15.5px, 1.6vw, 18.5px); line-height: 1.62; color: var(--ink-2);
}
.dawn-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dawn-scroll {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; opacity: .85; transition: color .18s ease;
}
.dawn-scroll:hover { color: var(--saffron-d); }
@media (max-width: 640px) {
  .dawn-veil {
    background:
      radial-gradient(ellipse 110% 52% at 50% 42%,
        var(--canvas) 0%, color-mix(in srgb, var(--canvas) 42%, transparent) 46%, transparent 76%),
      linear-gradient(to bottom, var(--canvas) 0%, transparent 14%);
  }
}

/* ─── Company scroll strip ────────────────────────────────────────────────── */
.co-banner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); padding: 22px 0; overflow: hidden; }
.co-banner-label { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.co-scroll-wrap { overflow: hidden; }
.co-track { display: flex; gap: 12px; width: max-content; animation: co-scroll 32s linear infinite; padding: 0 6px; }
.co-track:hover { animation-play-state: paused; }
@keyframes co-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.co-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 30px; border: 1.5px solid color-mix(in srgb, var(--cc, #888) 26%, var(--line)); background: color-mix(in srgb, var(--cc, #888) 7%, var(--surface)); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: default; font-family: var(--sans); }
.co-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cc, #888); flex-shrink: 0; }

/* ─── Project cards ("What you'll build") ────────────────────────────────── */
.proj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; display: flex; flex-direction: column; }
.proj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--proj-color, var(--saffron)) 40%, var(--line)); }
.proj-card-top { padding: 22px 20px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--proj-color, var(--saffron)) 7%, var(--surface)); }
.proj-domain { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--proj-color-d, var(--ink-3)); display: block; margin-bottom: 9px; }
.proj-card-top h4 { font-size: 17px; margin-bottom: 7px; }
.proj-card-top p { font-size: 13px; line-height: 1.55; }
.proj-card-stack { padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.proj-card-outcome { padding: 11px 20px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); letter-spacing: .02em; }

/* Tech chips */
.tech-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; font-family: var(--mono); letter-spacing: .02em; white-space: nowrap; }
.tc-python { background: color-mix(in srgb,#3776AB 12%,transparent); color: #2B5F8A; border-color: color-mix(in srgb,#3776AB 28%,transparent); }
.tc-react { background: color-mix(in srgb,#20A4C0 12%,transparent); color: #0B7C9E; border-color: color-mix(in srgb,#20A4C0 28%,transparent); }
.tc-django { background: color-mix(in srgb,#0F7A3B 12%,transparent); color: #0C6330; border-color: color-mix(in srgb,#0F7A3B 28%,transparent); }
.tc-postgres { background: color-mix(in srgb,#336791 12%,transparent); color: #2A5578; border-color: color-mix(in srgb,#336791 28%,transparent); }
.tc-docker { background: color-mix(in srgb,#2496ED 12%,transparent); color: #1872B8; border-color: color-mix(in srgb,#2496ED 28%,transparent); }
.tc-fastapi { background: color-mix(in srgb,#009688 12%,transparent); color: #007266; border-color: color-mix(in srgb,#009688 28%,transparent); }
.tc-pytorch { background: color-mix(in srgb,#EE4C2C 12%,transparent); color: #C43E22; border-color: color-mix(in srgb,#EE4C2C 28%,transparent); }
.tc-hf { background: color-mix(in srgb,#C8900A 12%,transparent); color: #8A6300; border-color: color-mix(in srgb,#C8900A 28%,transparent); }
.tc-k8s { background: color-mix(in srgb,#326CE5 12%,transparent); color: #2456BB; border-color: color-mix(in srgb,#326CE5 28%,transparent); }
.tc-terraform { background: color-mix(in srgb,#7B42BC 12%,transparent); color: #6533A0; border-color: color-mix(in srgb,#7B42BC 28%,transparent); }
.tc-aws { background: color-mix(in srgb,#FF9900 12%,transparent); color: #996A00; border-color: color-mix(in srgb,#FF9900 28%,transparent); }
.tc-figma { background: color-mix(in srgb,#F24E1E 12%,transparent); color: #C03E14; border-color: color-mix(in srgb,#F24E1E 28%,transparent); }
.tc-stripe { background: color-mix(in srgb,#635BFF 12%,transparent); color: #4942CC; border-color: color-mix(in srgb,#635BFF 28%,transparent); }
.tc-sage { background: color-mix(in srgb,var(--purple) 12%,transparent); color: var(--purple-d); border-color: color-mix(in srgb,var(--purple) 28%,transparent); }
.tc-nocode { background: color-mix(in srgb,var(--green) 12%,transparent); color: var(--green-d); border-color: color-mix(in srgb,var(--green) 28%,transparent); }
[data-theme="dark"] .tc-python { color: #6BA3D6; } [data-theme="dark"] .tc-react { color: #61DAFB; }
[data-theme="dark"] .tc-django { color: #4ade80; } [data-theme="dark"] .tc-postgres { color: #93C5FD; }
[data-theme="dark"] .tc-docker { color: #93C5FD; } [data-theme="dark"] .tc-fastapi { color: #5EEAD4; }
[data-theme="dark"] .tc-pytorch { color: #fca5a5; } [data-theme="dark"] .tc-hf { color: var(--saffron-l); }
[data-theme="dark"] .tc-k8s { color: #93C5FD; } [data-theme="dark"] .tc-terraform { color: var(--purple-l); }
[data-theme="dark"] .tc-aws { color: var(--saffron-l); } [data-theme="dark"] .tc-figma { color: #fca5a5; }
[data-theme="dark"] .tc-stripe { color: var(--purple-l); }

/* ─── Platform cards (redesigned) ────────────────────────────────────────── */
.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; display: flex; flex-direction: column; }
.plat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plat-head { padding: 28px 28px 22px; border-bottom: 1px solid var(--line); }
.plat-praxis { background: color-mix(in srgb,var(--saffron) 8%,var(--surface)); }
.plat-praxis .plat-kicker { color: var(--saffron-d); }
.plat-studio { background: color-mix(in srgb,var(--purple) 8%,var(--surface)); }
.plat-studio .plat-kicker { color: var(--purple-d); }
.plat-campus { background: color-mix(in srgb,var(--coral) 8%,var(--surface)); }
.plat-campus .plat-kicker { color: var(--coral-d); }
.plat-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.plat-head h3 { font-size: 24px; margin-bottom: 16px; }
.plat-meta-row { display: flex; flex-direction: column; gap: 6px; }
.plat-stat { font-size: 13px; color: var(--ink-2); }
.plat-stat span { font-weight: 700; color: var(--ink); }
.plat-body { padding: 22px 28px; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.plat-feature { display: flex; gap: 14px; align-items: flex-start; }
.plat-ic { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.plat-ft { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.plat-fd { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.plat-foot { padding: 18px 28px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── How it works ────────────────────────────────────────────────────────── */
.how-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: start; }
.how-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); }
.how-n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.how-ic { font-size: 28px; margin-bottom: 14px; }
.how-step h4 { font-size: 17px; margin-bottom: 9px; }
.how-step p { font-size: 13.5px; line-height: 1.65; }
.how-arrow { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 22px; padding: 0 12px; padding-top: 70px; }

/* ─── Testimonial grid (3 cols) ───────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ─── Research callout section ────────────────────────────────────────────── */
.research-callout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.research-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; }
.research-stat { background: var(--surface); padding: 22px 24px; }
.research-stat-v { font-family: var(--display); font-size: 32px; font-weight: 800; line-height: 1; color: var(--ink); margin-bottom: 7px; }
.research-stat-l { font-size: 13px; color: var(--ink-3); }
.research-pub { background: color-mix(in srgb,var(--green) 5%,var(--surface)); border: 1px solid color-mix(in srgb,var(--green) 18%,var(--line)); border-radius: var(--r-md); padding: 18px; }
.research-pub-pill { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-d); margin-bottom: 10px; }
[data-theme="dark"] .research-pub-pill { color: #4ade80; }
.research-pub-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: 10px; font-family: var(--display); }
.research-pub-authors { font-size: 12px; color: var(--ink-3); }

/* ─── Responsive: new sections ────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .proj-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .plat-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .how-arrow { display: none; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .research-callout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .proj-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .research-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Brochure / infographic display ──────────────────────────────────────── */
.brochure-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,.08);
}
.brochure-frame img { width: 100%; display: block; }
.brochure-note {
  padding: 14px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}
[data-theme="dark"] .brochure-frame { box-shadow: 0 4px 40px rgba(0,0,0,.3); }

/* ─── About page ──────────────────────────────────────────────────────────── */
.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.about-val {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 22px;
}
.about-val .ic { font-size: 28px; margin-bottom: 12px; }
.about-val h4 { font-size: 16px; margin-bottom: 8px; font-family: var(--display); }
.about-val p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; }
@media (max-width: 960px) { .about-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .about-values { grid-template-columns: 1fr; } }

/* ─── Mission / Vision block ─────────────────────────────────────────────── */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 768px) { .mv-grid { grid-template-columns: 1fr; gap: 36px; } }
.mission-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mission-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.mission-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--saffron-d);
  flex-shrink: 0;
  margin-top: 8px;
}
.vision-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--saffron);
  border-radius: var(--r-md);
  padding: 32px 28px;
  margin-bottom: 24px;
}
.vision-block .vision-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.vision-block blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
  font-family: var(--display);
}
.etymology-block {
  margin-top: 24px;
  background: color-mix(in srgb, var(--saffron) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--saffron) 20%, transparent);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.etymology-block .ety-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--display);
  color: var(--ink);
  margin-bottom: 6px;
}
.etymology-block .ety-parts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ety-part {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--saffron) 15%, transparent);
  color: var(--saffron-d);
}
.etymology-block p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* ─── Events / Milestones page ──────────────────────────────────────────── */

/* Featured milestone spotlight card */
.mf-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 48px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}
.mf-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--saffron-d);
  background: color-mix(in srgb, var(--saffron) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--saffron) 28%, transparent);
  padding: 5px 12px; border-radius: 20px; margin-bottom: 20px;
}
.mf-title { font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.25; margin-bottom: 14px; }
.mf-sub  { font-size: 15px; color: var(--ink-2); margin-bottom: 20px; line-height: 1.65; }
.mf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.mf-tag  { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; padding: 4px 11px; border-radius: 20px; border: 1px solid var(--line-2); color: var(--ink-3); }
.mf-stat-row { display: flex; gap: 32px; }
.mf-stat .v { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--green-d); }
.mf-stat .l { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.mf-aside { text-align: right; flex-shrink: 0; }
.mf-yr  { font-family: var(--display); font-size: 80px; font-weight: 800; color: color-mix(in srgb, var(--saffron) 18%, transparent); line-height: 1; }
.mf-pub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 10px; line-height: 1.7; }

/* Upcoming event cards */
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.event-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.event-card.tba {
  border-style: dashed;
  border-color: var(--line-2);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  box-shadow: none;
}
.event-card.tba:hover { transform: none; box-shadow: none; border-color: var(--line-3); }
.ec-tba-pill {
  display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--saffron) 11%, transparent);
  color: var(--saffron-d); padding: 3px 10px; border-radius: 20px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--saffron) 24%, transparent);
}
.ec-cat { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.ec-cat.cat-studio    { color: var(--purple-d); }
.ec-cat.cat-campus    { color: var(--coral-d); }
.ec-cat.cat-healthcare { color: var(--green-d); }
.ec-cat.cat-praxis    { color: var(--saffron-d); }
.ec-title { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.event-card.tba .ec-title { color: var(--ink-2); }
.ec-date  { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-bottom: 14px; }
.ec-desc  { font-size: 13.5px; color: var(--ink-2); flex: 1; line-height: 1.6; }
.event-card.tba .ec-desc { color: var(--ink-3); }
.ec-footer { margin-top: 22px; }
.upcoming-note {
  text-align: center; padding: 20px 0 4px; color: var(--ink-3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}

/* Milestone timeline */
.evt-timeline { display: flex; flex-direction: column; }
.tl-year-group { display: grid; grid-template-columns: 60px 2px 1fr; gap: 0 22px; }
.tl-yr {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--saffron-d); letter-spacing: .08em;
  padding-top: 20px; text-align: right;
}
.tl-spine { background: var(--line-2); position: relative; min-height: 60px; }
.tl-spine::before {
  content: '';
  position: absolute; top: 20px; left: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--saffron); border: 2px solid var(--canvas);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saffron) 18%, transparent);
}
.tl-body { padding: 10px 0 32px; }
.tl-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: none; padding-bottom: 0; }
.tl-item-cat {
  display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 20px; margin-bottom: 8px;
}
.tl-item-cat.cat-research  { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green-d); }
.tl-item-cat.cat-education { background: color-mix(in srgb, var(--saffron) 12%, transparent); color: var(--saffron-d); }
.tl-item-cat.cat-media     { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple-d); }
.tl-item-cat.cat-founding  { background: color-mix(in srgb, var(--coral) 12%, transparent); color: var(--coral-d); }
.tl-item-date  { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-bottom: 5px; }
.tl-item-title { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 5px; line-height: 1.35; }
.tl-item-body  { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.tl-item-link  { display: inline-block; color: var(--saffron-d); font-size: 13px; margin-top: 8px; text-decoration: underline; text-underline-offset: 3px; }

/* Responsive — events page */
@media (max-width: 960px) {
  .mf-card { grid-template-columns: 1fr; }
  .mf-aside { display: none; }
  .event-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .event-grid { grid-template-columns: 1fr; }
  .mf-card { padding: 28px; }
  .tl-year-group { grid-template-columns: 40px 2px 1fr; gap: 0 14px; }
}

/* ─── Hiring section ─────────────────────────────────────────────────────── */
.hiring-band {
  background: var(--band-bg);
  padding: 64px 0;
}
.hiring-band .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
@media (max-width: 768px) { .hiring-band .wrap { grid-template-columns: 1fr; } }
.hiring-band h2 { color: #fff; font-family: var(--display); font-size: clamp(22px, 3vw, 30px); margin: 0 0 10px; }
.hiring-band p { color: color-mix(in srgb, #fff 70%, transparent); font-size: 15px; line-height: 1.65; margin: 0; }
.hiring-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.hiring-role {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--saffron) 20%, transparent);
  color: color-mix(in srgb, var(--saffron) 90%, #fff);
  border: 1px solid color-mix(in srgb, var(--saffron) 30%, transparent);
}
.hiring-btns { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

/* ─── Team cards ─────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.team-avatar.teal   { background: #2b7a6f; }
.team-avatar.berry  { background: #9b2c5e; }
.team-avatar.navy   { background: var(--navy); }
.team-avatar.purple { background: var(--purple); }
.team-card-name { font-size: 15px; font-weight: 700; font-family: var(--display); color: var(--ink); margin-bottom: 4px; }
.team-card-role { font-size: 12px; font-weight: 600; color: var(--saffron-d); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.team-card-bio  { font-size: 13px; line-height: 1.65; color: var(--ink-2); margin: 0; }