@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(assets/fonts/sora-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/space-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* EctoSpace · ectospace.com
   Deep-field blue for the vastness, one coral accent, liquid glass on chrome,
   solid panels under anything you read. One type family, shared with EctoLedger, EctoClaw and SCT:
   Sora (600/700) for headings and the wordmark, Space Grotesk (400/500/600) for everything else.
   Both are self-hosted latin woff2 in assets/fonts/ (no Google Fonts CDN, so no visitor IP goes to Google).
   The "Design system v4" block at the end of this file is the single source of truth for look and feel,
   and every page (home, About Me, SCT, Privacy) shares it. */

:root {
  --accent: #FF6B4A;
  --void: #081230;
  --horizon: #0B1640;
  --nebula: #2B4FC0;
  --text: #F4F2EC;
  --soft: #DCE2F5;
  --muted: #B4BCD8;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--void); color: var(--text); font: 400 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
body * { font-family: inherit; }
h1, h2, h3, .name-line { font-family: var(--font-display); }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.logo-round {
  border-radius: 50% !important;
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
  background: transparent !important;
  object-fit: cover;
  overflow: hidden;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }
p { margin: 0; }

/* ---------- Shared pieces ---------- */
.glass {
  position: relative;
  background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 45%, rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(3,5,28,.5);
}
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,.22), transparent 55%); }
.solid { background: rgba(9,16,44,.86); border: 1px solid rgba(255,255,255,.12); }
.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0; text-decoration: none; font-weight: 600; font-size: 16px; cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.pill:hover { transform: translateY(-2px); }
.pill-light { background: var(--text); color: var(--horizon); }
.pill-light:hover { background: #fff; color: var(--horizon); }
.pill-glass { color: var(--text); }
.pill-glass:hover { color: #fff; }
.tile { transition: transform .35s ease, border-color .35s ease; }
.tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.go { color: var(--accent); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- Portal ---------- */
.portal {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 45%, #14245E 0%, var(--void) 70%);
  display: flex; align-items: center; justify-content: center;
}
.portal.gone { display: none; }
html:not(.js) .portal { display: none; }
.p-stars, .stars {
  position: absolute; inset: -10%; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 14%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 42% 8%,#ffd9cc 50%,transparent 51%),radial-gradient(1px 1px at 88% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 71%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 64% 88%,#cfd8ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 8% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 94% 81%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 35% 40%,#ffd9cc 50%,transparent 51%),radial-gradient(1px 1px at 70% 32%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 55% 62%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 28% 86%,#cfd8ff 50%,transparent 51%);
}
.p-stars { animation: twinkle 5s ease-in-out infinite alternate; }
.stars { position: absolute; inset: 0; opacity: .5; }
@keyframes twinkle { from { opacity: .5; } to { opacity: .9; } }
.p-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.well { position: relative; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; }
@keyframes breath { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
.ballbtn { position: absolute; inset: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; animation: float 6s ease-in-out infinite; }
.ballbtn:focus-visible { outline-offset: 12px; border-radius: 50%; }
.ballbtn img, .ballbtn .logo-round { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; clip-path: circle(50%); -webkit-clip-path: circle(50%); background: transparent; filter: drop-shadow(0 30px 70px rgba(43,79,192,.6)); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hole { position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; }
.disk {
  position: absolute; inset: -14%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--accent) 12%, #FFD0BF 18%, rgba(194,69,46,.2) 32%, transparent 45%, var(--accent) 62%, #FFD0BF 68%, rgba(194,69,46,.15) 82%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%, #000 58%, transparent 71%);
  mask: radial-gradient(circle, transparent 36%, #000 38%, #000 58%, transparent 71%);
  filter: blur(3px); animation: whirl .9s linear infinite;
}
@keyframes whirl { to { transform: rotate(360deg); } }
.core { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, #000 62%, #0b0702 72%, transparent 78%); box-shadow: 0 0 40px 10px rgba(0,0,0,.9); }
.lens { position: absolute; inset: 16%; border-radius: 50%; border: 2px solid rgba(255,208,191,.85); filter: blur(1.5px); }
.word { font-weight: 700; font-size: 34px; letter-spacing: .32em; transition: opacity .5s ease, letter-spacing .9s ease, filter .5s ease, transform .9s ease; }
.skip { position: absolute; right: 28px; bottom: 24px; background: none; border: 0; color: #C9D0EA; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.skip:hover { color: #fff; }


/* site appears out of the hole */
.js .site { opacity: 0; }
/* backwards, not both: a held transform/filter on .site would trap the fixed nav and make it scroll away */
.site.emerge { opacity: 1; animation: emerge 1.1s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes emerge { from { opacity: 0; transform: scale(1.06); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
.rise { opacity: 0; }
.site.emerge .rise { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .35s; }
.site.emerge .r2 { animation-delay: .47s; } .site.emerge .r3 { animation-delay: .59s; } .site.emerge .r4 { animation-delay: .71s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html:not(.js) .rise { opacity: 1; }

/* ---------- Site ---------- */
.site { position: relative; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,-40px) scale(1.12); } }
.wrap { position: relative; max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: 60px; padding-bottom: 110px; }
.section h2 { font-size: clamp(40px, 5vw, 64px); }
.sub { margin: 12px 0 40px; max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.body { margin-top: 18px; max-width: 50ch; font-size: 19px; line-height: 1.6; color: var(--soft); }
.muted { color: var(--muted); font-size: 17px; }
.two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.topnav {
  position: fixed; left: 50%; top: 16px; z-index: 50;
  display: flex; justify-content: center;
  width: min(1100px, 94vw); transform: translateX(-50%);
  animation: header-fade-in .4s ease-out both;
}
@keyframes header-fade-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.navbar { display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 16px; border-radius: 999px; width: 100%; }
.brand, .brand-link {
  display: inline-flex; align-items: center; gap: 0;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  text-decoration: none; color: var(--text); font-family: var(--font-display);
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  min-height: 44px; border-radius: 999px;
}
.brand:hover, .brand-link:hover { color: #fff; }
.brand-ball { width: 36px; height: 36px; flex-shrink: 0; }
.brand-long {
  display: block; height: 36px; width: auto; max-width: 140px; opacity: 1;
  object-fit: contain; object-position: left center; margin: 0;
  pointer-events: none;
}
.navlinks { display: flex; gap: 14px; margin-left: 12px; }
.navlink { color: #C9D0EA; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -.01em; padding: 12px 6px; position: relative; }
.navlink:hover, .navlink.on { color: #fff; }
.navlink.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-social { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; text-decoration: none;
  color: var(--horizon); background: var(--text);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.icon-btn:hover { transform: translateY(-2px); background: #fff; color: var(--horizon); }
.icon-btn svg { display: block; }

.hero { padding-top: 140px; padding-bottom: 140px; }
.hero h1 { font-size: clamp(52px, 6.4vw, 96px); line-height: .92; letter-spacing: -.04em; }
.hero-ecto {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px; align-items: center;
}
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-logo-btn {
  display: grid; place-items: center; padding: 0; border: 0; background: transparent;
  cursor: pointer; min-height: 44px; border-radius: 50%; position: relative;
}
.hero-logo-btn::after {
  content: ""; position: absolute; inset: -70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(70,110,235,.26) 0%, rgba(43,79,192,.12) 32%, rgba(43,79,192,.04) 52%, transparent 70%);
  opacity: .7; pointer-events: none; animation: breath 5s ease-in-out infinite;
}
.hero-ball {
  position: relative; z-index: 1;
  width: min(240px, 56vw); height: auto; aspect-ratio: 1;
  filter: drop-shadow(0 24px 60px rgba(43,79,192,.4));
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;
  animation: float 6s ease-in-out infinite;
  clip-path: none; -webkit-clip-path: none; border-radius: 0 !important;
}
.hero-logo-btn:hover .hero-ball { transform: scale(1.04); filter: drop-shadow(0 36px 80px rgba(90,130,255,.7)); }
.hero-logo-btn:focus-visible { outline: 2px solid rgba(220,230,255,.75); outline-offset: 12px; }
.mark-word {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: .22em; text-transform: uppercase; color: #C9D0EA;
}
.page-about .site { opacity: 1; }
.manifesto .cta { margin-top: 28px; }
@media (max-width: 900px) {
  .hero-ecto { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
  .hero-ecto .cta { justify-content: center; }
  .hero-ecto .lede { margin-left: auto; margin-right: auto; }
}
.role { margin-top: 28px; font-weight: 500; font-size: 24px; color: var(--soft); }
.lede { margin-top: 18px; max-width: 54ch; font-size: 19px; line-height: 1.6; color: var(--muted); }
.creds { margin-top: 40px; font-size: 15px; color: #9AA3C2; }
.portrait { position: relative; justify-self: center; width: min(100%, 420px); }
.frame { padding: 14px; border-radius: 36px; }
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 26px; }
.mini-ball { position: absolute; width: 110px; left: -46px; bottom: 40px; border-radius: 50%; clip-path: circle(50%); filter: drop-shadow(0 18px 40px rgba(110,140,255,.45)); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 20px; }
.span2 { grid-column: span 2; } .row2 { grid-row: span 2; }
.sct { border-radius: 32px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.sct h3 { font-size: 34px; }
.sct > p { font-size: 17px; line-height: 1.6; color: var(--soft); max-width: 52ch; }
.sct .cta { margin-top: auto; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.bar { flex: 1; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--nebula)); transform-origin: bottom; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.86); } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.facts .solid { border-radius: 18px; padding: 16px; }
.facts strong { display: block; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--accent); overflow-wrap: break-word; hyphens: manual; }
.facts span { display: block; font-size: 14px; color: #C9D0EA; margin-top: 4px; }
.proj { border-radius: 32px; padding: 30px; display: flex; gap: 26px; align-items: center; text-decoration: none; color: var(--text); }
.proj:hover { color: var(--text); }
.proj img { width: 104px; height: 140px; object-fit: contain; flex-shrink: 0; }
.proj div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.proj h3 { font-size: 28px; }
.proj p { font-size: 16px; line-height: 1.55; color: #C9D0EA; }

.shot { padding: 14px; border-radius: 34px; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; }

.music { border-radius: 34px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.player { position: relative; min-height: 352px; border-radius: 16px; }
.player iframe { position: relative; z-index: 1; display: block; width: 100%; min-height: 352px; border: 0; border-radius: 16px; }
.player-ph {
  position: absolute; inset: 0; z-index: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px;
  background: radial-gradient(90% 70% at 30% 20%, rgba(120,90,255,.45), transparent 60%), radial-gradient(80% 70% at 80% 90%, rgba(255,107,74,.30), transparent 60%), linear-gradient(160deg, #1b2678, #0b1144);
  border: 1px solid var(--hair);
}
.player-ph b { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: #fff; }
.player-ph span:not(.ph-disc) { color: #C9D0EA; font-size: 15px; }
.ph-disc { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 14px; background: radial-gradient(circle, #0b1144 0 14%, transparent 15%), conic-gradient(from 20deg, #5f7bff, #a98bff, #ff6b4a, #5f7bff); box-shadow: 0 10px 40px rgba(70,110,235,.5); }

.article { border-radius: 28px; padding: 28px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 10px; }
.article:hover { color: var(--text); }
.a-title { font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
.a-sum { font-size: 16px; line-height: 1.55; color: #C9D0EA; }

.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; grid-auto-flow: dense; }
.tile-img { padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--horizon); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .5s ease; }
.tile-img:hover img { transform: scale(1.03); }
.tile-img.tall { grid-row: span 2; }
.tile-img.wide { grid-column: span 2; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.chip { border-radius: 999px; padding: 12px 20px; font-size: 15px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.lightbox::backdrop { background: rgba(4, 8, 24, .9); }
.lightbox img { max-width: 94vw; max-height: 84vh; border-radius: 12px; }
.lightbox form { text-align: right; margin-bottom: 8px; }
.lb-close { background: var(--horizon); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 10px 16px; cursor: pointer; font-weight: 600; min-height: 44px; }

.about { border-radius: 36px; padding: clamp(28px, 5vw, 64px); }
.about-text { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; max-width: 64ch; font-size: 19px; line-height: 1.65; color: var(--soft); }

/* ---------- Quality ---------- */
/* ---------- QA Vision · Epic purple liquid glass ---------- */
.qa-vision {
  position: relative;
  padding: 80px 0 120px;
  margin: 20px 0 40px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(168, 85, 247, 0.35), transparent 55%),
    radial-gradient(700px 480px at 95% 20%, rgba(124, 58, 237, 0.28), transparent 50%),
    radial-gradient(800px 520px at 50% 100%, rgba(192, 132, 252, 0.18), transparent 55%),
    linear-gradient(180deg, #1a0b2e 0%, #12081f 45%, #0b0618 100%);
  border-block: 1px solid rgba(216, 180, 254, 0.22);
}
.qa-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 14%, rgba(233,213,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 72%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 58%, rgba(216,180,254,.6) 50%, transparent 51%);
  opacity: .55;
}
.qa-inner { position: relative; z-index: 1; }
.qa-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; color: #e9d5ff; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; font-size: 12px;
}
.qa-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #c084fc; box-shadow: 0 0 16px #c084fc;
}
.qa-title { color: #f5f3ff; }
.qa-title .ico { color: #e9d5ff; }
.qa-lede {
  margin: 14px 0 36px; max-width: 58ch; font-size: 20px; line-height: 1.6; color: #ddd6fe;
}
.qa-glass {
  position: relative;
  border-radius: 28px; padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(168,85,247,.08) 40%, rgba(255,255,255,.05));
  border: 1px solid rgba(233, 213, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 24px 70px rgba(40, 10, 70, .45);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  overflow: hidden;
}
.qa-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 12% 0%, rgba(255,255,255,.2), transparent 55%);
}
.qa-glass h3 {
  position: relative; margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px); color: #faf5ff;
}
.qa-glass p, .qa-list, .qa-steps { position: relative; color: #e9e0ff; font-size: 17px; line-height: 1.65; max-width: 62ch; }
.qa-glass p + p { margin-top: 12px; }
.qa-hero-card, .qa-split, .qa-swarm-card {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center;
  margin-bottom: 22px;
}
.qa-split.reverse { grid-template-columns: 0.95fr 1.05fr; }
.qa-split.reverse .qa-copy { order: 1; }
.qa-split.reverse .qa-figure { order: 2; }
.qa-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px;
}
.qa-figure { margin: 0; position: relative; }
.qa-figure img {
  width: 100%; height: auto; aspect-ratio: 14 / 9; object-fit: cover; object-position: center;
  border-radius: 20px; border: 1px solid rgba(233,213,255,.25);
  box-shadow: 0 18px 50px rgba(20, 0, 40, .4);
}
.qa-figure figcaption {
  margin-top: 10px; font-size: 14px; color: #c4b5fd; line-height: 1.45;
}
.qa-list, .qa-steps { margin: 10px 0 0; padding-left: 1.15em; }
.qa-list li + li, .qa-steps li + li { margin-top: 10px; }
.qa-list strong, .qa-steps strong { color: #f5f3ff; }
.qa-note {
  margin-top: 18px !important; padding: 12px 14px; border-radius: 14px;
  background: rgba(168, 85, 247, 0.18); border: 1px solid rgba(216, 180, 254, 0.35);
  color: #f3e8ff !important; font-weight: 600;
}
.qa-swarm-card { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px) {
  .qa-hero-card, .qa-split, .qa-split.reverse, .qa-swarm-card, .qa-grid {
    grid-template-columns: 1fr;
  }
  .qa-split.reverse .qa-copy, .qa-split.reverse .qa-figure { order: unset; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-vision { background-attachment: scroll; }
}

.word-keep { display: inline-block; white-space: nowrap; }
.name-line { display: block; }
.page-about .hero h1 { line-height: 1.02; }

.tl { list-style: none; padding: 0; margin: 56px 0 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; }
.tl::before { content: ""; position: absolute; left: 9px; right: 0; top: 8px; height: 2px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); }
.tl li { position: relative; padding-top: 34px; display: flex; flex-direction: column; }
.tl .dot { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }
.tl b { font-size: 22px; color: var(--accent); }
.tl strong { margin-top: 6px; font-size: 16px; }
.tl li > span:last-child { margin-top: 2px; font-size: 15px; color: #C9D0EA; }

.foot { display: flex; align-items: center; gap: 12px; padding-top: 24px; padding-bottom: 48px; color: var(--muted); font-size: 15px; }
.foot img { width: 26px; height: 26px; border-radius: 50%; clip-path: circle(50%); }
.foot a { color: var(--muted); }
.foot a:first-of-type { margin-left: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .two, .music { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl::before { display: none; }
  .hero { padding-top: 72px; padding-bottom: 90px; }
  .portrait { justify-self: start; width: min(80%, 340px); }
}
@media (max-width: 560px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: span 1; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .proj { flex-direction: column; align-items: flex-start; }
  .well { width: 200px; height: 200px; }
  .word { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .js .site { opacity: 1; }
}

/* ---------- Section icons ---------- */
.sec { display: flex; align-items: center; gap: 18px; }
.ico { flex-shrink: 0; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--accent);
  background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px rgba(3,5,28,.4); }
.kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--muted); font-weight: 600; font-size: 18px; }
.kicker .ico { width: 48px; height: 48px; border-radius: 16px; }

/* ---------- Acting: courses and screen experience ---------- */
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.course { border-radius: 28px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; }
.badge { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--horizon); background: var(--text); overflow: hidden; }
.badge-logo { padding: 0; background: #fff; }
.badge-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.course h3 { font-size: 24px; }
.cs { margin-top: 4px; color: var(--muted); font-size: 15px; }
.course ul { margin: 14px 0 0; padding-left: 18px; columns: 2; column-gap: 24px; color: var(--soft); font-size: 15px; line-height: 1.5; }
.course li { margin: 0 0 6px; break-inside: avoid; }
.course li::marker { color: var(--accent); }
.seen { margin-top: 44px; text-align: center; }
.seen-label { color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.seen-sub { color: var(--muted); opacity: .7; font-size: 13px; margin: 4px 0 0; }
.seen-row { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 48px; }
.title-card { color: #E9E6DD; opacity: .85; line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.title-card small { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.tc1 { font-weight: 800; font-size: 30px; letter-spacing: .14em; text-transform: uppercase; }
.tc2 { font-family: Georgia, "Times New Roman", serif !important; font-size: 34px; letter-spacing: .02em; }
.tc2 small { font-family: var(--font) !important; }
.tc3 { font-weight: 300; font-size: 32px; letter-spacing: .32em; text-transform: uppercase; }
.seen-note { margin-top: 14px; color: #8E97B8; font-size: 14px; }

/* ---------- About: things done ---------- */
.done-h { margin-top: 44px; font-size: 22px; }
.done { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.done li { position: relative; padding-left: 26px; color: var(--soft); font-size: 17px; line-height: 1.5; }
.done li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }

@media (max-width: 900px) {
  .courses, .done { grid-template-columns: minmax(0, 1fr); }
  .course ul { columns: 1; }
  .ico { width: 46px; height: 46px; border-radius: 14px; }
  .sec { gap: 14px; }
}
.course-link { color: var(--text); text-decoration: none; }
.course-link:hover { color: var(--accent); text-decoration: underline; }
.logo-tile { height: 120px; width: 120px; border-radius: 18px; overflow: hidden; background: #050a1c; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(3,5,28,.45); }
.logo-tile.wide { width: 260px; }
.logo-tile img { width: 100%; height: 100%; object-fit: cover; }
.logo-tile.wide img { object-fit: contain; }
@media (max-width: 560px) { .logo-tile { height: 96px; width: 96px; } .logo-tile.wide { width: 208px; } }

/* =========================================================
   Portal v2: still glass, turning universe, black hole
   ========================================================= */
.ball-spin { position: absolute; inset: 0; display: block; border-radius: 50%; will-change: transform; }
.universe {
  position: absolute; left: 21.5%; top: 21%; width: 53%; height: 53%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1b2678 0%, #0b1144 52%, #050822 100%);
  -webkit-mask: radial-gradient(circle, #000 62%, transparent 74%); mask: radial-gradient(circle, #000 62%, transparent 74%);
}
.galaxy {
  position: absolute; inset: -25%; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 0 3%, transparent 14%),
    conic-gradient(from 0deg, transparent 0 6%, rgba(169,139,255,.65) 11%, transparent 21%, rgba(95,224,208,.5) 36%, transparent 47%, rgba(169,139,255,.55) 61%, transparent 71%, rgba(95,224,208,.45) 86%, transparent 96%);
  filter: blur(5px);
  -webkit-mask: radial-gradient(circle, #000 20%, rgba(0,0,0,.65) 45%, transparent 70%); mask: radial-gradient(circle, #000 20%, rgba(0,0,0,.65) 45%, transparent 70%);
  animation: galaxy 26s linear infinite;
}
@keyframes galaxy { to { transform: rotate(360deg); } }
.ustars {
  position: absolute; inset: 0; animation: galaxy 60s linear infinite reverse;
  background-image: radial-gradient(1px 1px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 22%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 62% 70%,#d9e2ff 50%,transparent 51%),radial-gradient(1px 1px at 32% 76%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 84% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 46% 12%,#fff 50%,transparent 51%);
}
.ucore { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.85), rgba(169,139,255,.25) 50%, transparent 70%); filter: blur(2px); }
.particles { position: absolute; inset: 0; pointer-events: none; }
.pt { position: absolute; width: 0; height: 0; }
.pd { position: absolute; left: 0; top: 0; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); opacity: .55; }
.pd.warm { background: #FFD0BF; box-shadow: 0 0 8px var(--accent); }
.word span { display: inline-block; will-change: transform; animation: glint 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes glint { 0%, 70%, 100% { color: var(--text); text-shadow: none; } 80% { color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 80%, transparent); } }

/* =========================================================
   Hand-drawn icons
   ========================================================= */
.ico { width: 64px; height: 64px; border-radius: 20px; transform: rotate(-3deg); }
.kicker .ico { width: 56px; height: 56px; }
.ico svg { overflow: hidden; }
.ico .blob { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.ico .d { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#sketch); }
.ico .fill { fill: currentColor; filter: url(#sketch); }
.ico .dash { stroke-dasharray: 3 5; }
.ico.armed .d:not(.dash) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ico.armed .fill { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.ico.drawn .d:not(.dash) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.ico.drawn .fill { opacity: 1; transform: none; transition: opacity .4s ease 1s, transform .5s cubic-bezier(.3,1.6,.5,1) 1s; }
.sec:hover .ico svg, .kicker:hover .ico svg { animation: wiggle .7s ease-in-out; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }

/* =========================================================
   Text and element motion
   ========================================================= */
.hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(10px); }
.site.emerge .hero h1 .ch { animation: chIn .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.25s + var(--i) * 38ms); }
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
.sec .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(6px); }
.sec.in .w { opacity: 1; transform: none; filter: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: calc(var(--i) * 90ms + .15s); }
.rv { opacity: 0; translate: 0 34px; }
.rv.in { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.tilt { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 60%); }
.tilt:hover::after { opacity: 1; }
.tilt.tracking { transition: transform .08s linear, border-color .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .ch, .sec .w, .rv, .ico.armed .d, .ico.armed .fill { opacity: 1 !important; transform: none !important; filter: none !important; translate: none !important; stroke-dashoffset: 0 !important; }
}

/* =========================================================
   Portal v3: canvas black hole, shattering glass, word reveal
   ========================================================= */
.p-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.p-center { z-index: 2; }
.skip { z-index: 5; }
.glow {
  position: absolute; inset: -70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(110,140,255,.38), rgba(160,120,255,.14) 45%, transparent 70%);
  filter: blur(12px); animation: breath 4s ease-in-out infinite; transition: opacity .5s ease, transform .5s ease;
}
.well:hover .glow { opacity: 1; transform: scale(1.12); }
.ball-tilt { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.ballbtn img { transition: filter .5s ease; }
.ballbtn:hover img { transform: none; filter: drop-shadow(0 30px 90px rgba(120,150,255,.6)); }
.uhole {
  position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; margin: -19% 0 0 -19%; border-radius: 50%; transform: scale(0);
  background: radial-gradient(circle, #000 54%, #160705 61%, rgba(255,107,74,.95) 67%, rgba(255,214,196,.75) 71%, rgba(255,107,74,.25) 77%, transparent 84%);
  box-shadow: 0 0 30px rgba(255,107,74,.45);
}
.word {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap; pointer-events: none; opacity: 0;
  font-size: clamp(54px, 10vw, 132px); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: #fff;
  text-shadow: 0 0 30px rgba(255,150,120,.45), 0 0 90px rgba(90,120,255,.45);
  transition: none;
}
.word .lt { display: inline-block; animation: none; will-change: transform, opacity, filter; }
.portal.leaving { pointer-events: none; }

/* =========================================================
   Site FX: cursor light, button shine, magnetic pull, parallax
   ========================================================= */
.spot {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(120,150,255,.10), rgba(255,107,74,.04) 40%, transparent 65%);
}
.site.lit .spot { opacity: 1; }
main, .foot { position: relative; z-index: 1; }
.topnav { position: fixed; z-index: 50; }
.site > main { padding-top: var(--nav-h, 60px); }
.pill { position: relative; overflow: hidden; isolation: isolate; }
.pill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); opacity: 0;
}
.pill:hover::after { animation: sheen .9s ease forwards; }
@keyframes sheen { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 1; } }
.mag { transition: translate .35s cubic-bezier(.2,.7,.2,1); }
.mag.pulling { transition: translate .08s linear; }
.orb { transition: none; }
.frame img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.portrait:hover .frame img { transform: scale(1.03); }
.navbar { transition: background .4s ease, box-shadow .4s ease; }
.topnav.scrolled .navbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 18px 50px rgba(3,5,28,.65); }
@media (prefers-reduced-motion: reduce) { .spot, .pill::after { display: none; } }
.ballbtn:focus-visible { outline: 2px solid rgba(220,230,255,.7); outline-offset: 14px; }
.ballbtn:focus:not(:focus-visible) { outline: none; }


/* ---------- EctoLedger-style reveal helpers ---------- */
.manifesto, .hero-ecto .hero-copy { animation: fade-up .72s cubic-bezier(.22,1,.36,1) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.word, .mark-word, .brand-long { font-family: var(--font-display); }


/* ---------- Nav sizing tokens (the mobile pill bar lives in "Nav v6" at the end) ---------- */
:root { --nav-h: 60px; }
.sec-words { min-width: 0; }

/* ---------- Legal page (privacy) ---------- */
.legal { border-radius: 32px; padding: clamp(26px, 5vw, 56px); margin-top: 72px; margin-bottom: 60px; }
.legal h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.02; }
.legal .updated { margin-top: 14px; color: var(--muted); font-size: 16px; max-width: 64ch; }
.legal h2 { margin-top: 36px; font-size: 22px; }
.legal p, .legal li { margin-top: 10px; color: var(--soft); font-size: 17px; line-height: 1.65; max-width: 68ch; }
.legal ul { margin: 6px 0 0; padding-left: 20px; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); }
.legal a:hover { color: #fff; }

/* ---------- Last visual pass: small-screen fixes ---------- */
h1, h2, h3 { text-wrap: balance; }
.foot { flex-wrap: wrap; row-gap: 10px; }
.foot img { flex-shrink: 0; }
@media (max-width: 900px) {
  .hero-ecto .kicker { justify-content: center; }
}
@media (max-width: 560px) {
  .foot { column-gap: 10px; }
  .foot > span { flex: 1 1 calc(100% - 40px); }
  .foot a:first-of-type { margin-left: 36px; }
  .foot a { white-space: nowrap; }
  .mini-ball { width: 84px; left: -18px; bottom: 28px; }
}


/* =========================================================
   Design system v4: slim, calm, liquid glass, Apple type
   One layer, all pages. Edit tokens here, not per page.
   ========================================================= */
:root {
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  --hair: rgba(255,255,255,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
  --sp-section: 88px;
}
body { font-weight: 400; letter-spacing: -.003em; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.022em; line-height: 1.08; }
h3 { letter-spacing: -.014em; }
strong, b { font-weight: 600; }

/* glass: thinner edge, softer shadow, brighter top highlight */
.glass {
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.05), 0 18px 50px rgba(3,5,28,.38);
}
.glass::before { background: radial-gradient(120% 55% at 14% 0%, rgba(255,255,255,.16), transparent 55%); }
.solid { background: rgba(9,16,44,.8); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* rhythm */
.section { padding-top: 40px; padding-bottom: var(--sp-section); }
.section h2, .sec { font-size: clamp(30px, 3.6vw, 44px); }
.sec { gap: 16px; }
.sub { margin: 10px 0 32px; font-size: 17px; }
.body { font-size: 18px; }
.lede { font-size: 18px; }
.hero { padding-top: 132px; padding-bottom: 96px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
.mark-word { font-weight: 600; font-size: 12px; letter-spacing: .28em; }
.kicker { font-weight: 600; font-size: 16px; }
.cta { margin-top: 28px; gap: 12px; }
.role { font-size: 21px; font-weight: 500; }

/* controls */
.pill { min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
.pill-glass { border-color: var(--hair); }
.navlink { font-weight: 500; font-size: 14.5px; color: #CBD2EC; }
.navlink.on { color: #fff; }
.navlink.on::after { height: 2px; bottom: 7px; }
.navbar { padding: 6px 6px 6px 18px; gap: 10px; }
.navlinks { gap: 8px; }
.icon-btn { width: 40px; height: 40px; background: rgba(255,255,255,.1); color: var(--text); border: 1px solid var(--hair); }
.icon-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.go { font-weight: 500; font-size: 15px; }
.go::after { content: " \2192"; display: inline-block; transition: transform .3s var(--ease); }
a:hover .go::after, .go:hover::after { transform: translateX(3px); }

/* surfaces: fewer radii, one scale */
.about, .legal { border-radius: var(--r-lg); }
.sct, .proj, .music, .course, .article { border-radius: var(--r-lg); }
.shot { border-radius: var(--r-lg); padding: 10px; }
.shot img { border-radius: 20px; }
.sct { padding: 32px; }
.sct h3 { font-size: 30px; }
.proj { padding: 26px; }
.proj h3 { font-size: 24px; }
.tile:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); }
.facts strong { font-weight: 600; font-size: 20px; }
.facts .solid { border-radius: var(--r-sm); }
.a-title { font-weight: 600; font-size: 22px; }
.course h3 { font-size: 21px; }
.tile-img { border-radius: var(--r-sm); }

/* icons: quiet line marks, no wobble */
.ico { width: 48px; height: 48px; border-radius: 15px; transform: none; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); border-color: var(--hair); }
.ico svg { width: 30px; height: 30px; }
.kicker .ico { width: 44px; height: 44px; }
.ico .d { stroke-width: 2; filter: none; }
.ico .fill { filter: none; }
.ico .blob { fill: color-mix(in srgb, var(--accent) 12%, transparent); }

/* quiet the background */
.orb { filter: blur(120px); }
.stars { opacity: .4; }

/* QA section keeps its purple identity but uses the same type, radii and hairlines */
.qa-vision { padding: 72px 0 96px; }
.qa-title { font-size: clamp(30px, 3.6vw, 44px); }
.qa-glass { border-radius: var(--r-lg); border-color: rgba(233,213,255,.22); }
.qa-glass h3 { font-weight: 600; }
.qa-kicker { font-weight: 600; letter-spacing: .2em; }

/* page header block for inner pages (SCT, Privacy) */
.page-head { padding-top: 120px; padding-bottom: 8px; }
.page-head h1 { margin-top: 14px; font-size: clamp(36px, 5vw, 60px); max-width: 18ch; font-weight: 700; letter-spacing: -.03em; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

/* in-page jump bar: tells people what is on a long page */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #CBD2EC; text-decoration: none; border: 1px solid var(--hair); background: rgba(255,255,255,.05); transition: background .25s ease, color .25s ease; }
.jump a:hover, .jump a.on { background: rgba(255,255,255,.14); color: #fff; }

/* footer: one layout everywhere */
.foot { border-top: 1px solid var(--hair); margin-top: 24px; padding-top: 28px; font-size: 14px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
  :root { --sp-section: 64px; }
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .page-head { padding-top: 40px; }
}

/* =========================================================
   v5: proof stats, experience timeline, live QA diagrams
   ========================================================= */
.eyebrow-hero { margin-bottom: 18px; color: #CBD2EC; }
.proof { margin-top: 34px; }
.page-about .hero .stats { margin-top: 30px; max-width: 620px; }
.proof-by { font-size: 15px; color: var(--muted); }
.proof-by a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.proof-by a:hover { color: #fff; border-bottom-color: var(--accent); }
.stats { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat {
  position: relative; padding: 14px 14px 13px; border-radius: var(--r-sm);
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .35s var(--ease), border-color .35s ease, background .35s ease;
}
.stat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); }
.stat strong {
  display: block; font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #FFE6DE; text-shadow: 0 0 22px rgba(255,107,74,.35);
}
.stat > span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #C9D0EA; }
.stat .count, .facts .count { display: inline-block; text-align: right; font: inherit; color: inherit; margin: 0; }
.hero-ecto .proof-by, .hero-ecto .stats { text-align: left; }
@media (max-width: 900px) {
  .hero-ecto .proof-by { text-align: center; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat strong { font-size: 23px; }
}

/* experience timeline */
.xp { list-style: none; padding: 0 0 0 34px; margin: 8px 0 0; position: relative; display: grid; gap: 16px; }
.xp::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.12); }
.xp::after {
  content: ""; position: absolute; left: 9px; top: 10px; width: 2px; border-radius: 2px; height: calc((100% - 20px) * var(--p, 0));
  background: linear-gradient(180deg, var(--accent), #9DB2FF); box-shadow: 0 0 14px rgba(255,107,74,.5);
}
.xp-item { position: relative; border-radius: var(--r-md); padding: 22px 26px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 26px; }
.xp-item::after {
  content: ""; position: absolute; left: -31px; top: 28px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--void); border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(255,107,74,.12);
  transition: background .4s ease, box-shadow .4s ease;
}
.xp-item.in::after { background: var(--accent); box-shadow: 0 0 16px rgba(255,107,74,.7); }
.xp-when { font-size: 14px; font-weight: 600; color: #FFB6A3; letter-spacing: .01em; padding-top: 5px; font-variant-numeric: tabular-nums; }
.xp-body h3 { font-size: 21px; }
.xp-org { margin-top: 3px; font-size: 15px; color: var(--muted); }
.xp-body ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--soft); font-size: 16px; line-height: 1.55; max-width: 72ch; }
.xp-body li::marker { color: var(--accent); }
.xp-item.compact .xp-body ul { margin-top: 8px; }
.certs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.certs-label { color: var(--muted); font-size: 14px; font-weight: 600; margin-right: 4px; }
.cert { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text); border: 1px solid var(--hair); background: rgba(255,255,255,.06); }
@media (max-width: 700px) {
  .xp { padding-left: 26px; }
  .xp::before, .xp::after { left: 5px; }
  .xp-item { grid-template-columns: minmax(0, 1fr); padding: 18px 18px; }
  .xp-item::after { left: -27px; top: 24px; width: 12px; height: 12px; }
  .xp-when { padding-top: 0; }
}

/* QA diagrams: crisp HTML and SVG, readable on phones */
.qa-diagram { border-radius: 20px; padding: 20px; background: linear-gradient(160deg, rgba(30,10,58,.85), rgba(18,8,36,.9)); border: 1px solid rgba(233,213,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 50px rgba(20,0,40,.4); }
.qa-diagram figcaption { margin-top: 14px; }
.dg-title { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #d8b4fe; margin-bottom: 14px; }
.layers { display: grid; gap: 8px; }
.layer {
  --w: 100%; width: var(--w); display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(168,85,247,.42), rgba(124,58,237,.18)); border: 1px solid rgba(233,213,255,.28);
}
.layer b { font-size: 16px; font-weight: 600; color: #faf5ff; white-space: nowrap; }
.layer span { font-size: 14px; color: #e4d8ff; text-align: right; }
.layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); }
.qa-diagram.in .layer::after { animation: layer-sheen 1.4s ease forwards; animation-delay: calc(var(--i) * 120ms + .3s); }
@keyframes layer-sheen { to { transform: translateX(100%); } }
.layer:nth-child(2) { --w: 96%; } .layer:nth-child(3) { --w: 92%; } .layer:nth-child(4) { --w: 88%; } .layer:nth-child(5) { --w: 84%; }
.layer.gate { --w: 100%; background: linear-gradient(90deg, rgba(255,107,74,.35), rgba(168,85,247,.25)); border-color: rgba(255,190,170,.4); }
.qa-diagram .layer { opacity: 0; transform: translateX(-16px); }
.qa-diagram.in .layer { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s var(--ease); transition-delay: calc(var(--i) * 90ms); }

.hm { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; gap: 10px; }
.hm-node { border-radius: 16px; padding: 16px; text-align: center; background: rgba(168,85,247,.18); border: 1px solid rgba(233,213,255,.3); }
.hm-node b { display: block; font-size: 19px; color: #fff; }
.hm-node small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: #e4d8ff; }
.hm-machine { background: rgba(124,58,237,.2); }
.hm-ico { width: 40px; height: 40px; margin: 0 auto 8px; display: block; color: #e9d5ff; }
.hm-flow { display: grid; gap: 18px; }
.hm-arrow { position: relative; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(216,180,254,.15), rgba(216,180,254,.9), rgba(216,180,254,.15)); background-size: 200% 100%; animation: flow 2.4s linear infinite; }
.hm-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid #e9d5ff; border-right: 0; }
.hm-arrow.back { animation-direction: reverse; }
.hm-arrow.back::after { right: auto; left: -2px; border-left: 0; border-right: 8px solid #e9d5ff; }
.hm-arrow span { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 600; color: #f3e8ff; }
.hm-arrow.back span { bottom: auto; top: 7px; }
@keyframes flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (max-width: 560px) {
  .hm { grid-template-columns: minmax(0, 1fr); }
  .hm-flow { grid-template-columns: 1fr 1fr; gap: 0; height: 70px; justify-items: center; }
  .hm-arrow { width: 2px; height: 60px; margin-top: 5px; background: linear-gradient(180deg, rgba(216,180,254,.15), rgba(216,180,254,.9), rgba(216,180,254,.15)); background-size: 100% 200%; animation-name: flow-v; }
  .hm-arrow::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 8px solid #e9d5ff; border-bottom: 0; }
  .hm-arrow.back::after { left: -4px; right: auto; top: -2px; bottom: auto; border: 5px solid transparent; border-bottom: 8px solid #e9d5ff; border-top: 0; }
  .hm-arrow span, .hm-arrow.back span { left: 10px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .hm-arrow.back span { left: auto; right: 10px; }
}
@keyframes flow-v { from { background-position: 0 200%; } to { background-position: 0 0; } }

.loop-svg, .swarm-svg { display: block; width: 100%; height: auto; }
.loop-svg .ring { fill: none; stroke: rgba(216,180,254,.45); stroke-width: 2; stroke-dasharray: 6 9; animation: ring-flow 14s linear infinite; }
@keyframes ring-flow { to { stroke-dashoffset: -300; } }
.loop-svg .node circle { fill: #2a1250; stroke: rgba(233,213,255,.6); stroke-width: 1.5; }
.loop-svg .node text { fill: #faf5ff; font-size: 20px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.loop-svg .core { fill: url(#coreGrad); stroke: rgba(255,255,255,.35); }
.loop-svg .core-t { fill: #fff; font-size: 30px; font-weight: 700; text-anchor: middle; }
.loop-svg .core-s { fill: #f3e8ff; font-size: 17px; text-anchor: middle; }
.loop-svg .orbit { transform-box: view-box; transform-origin: 210px 210px; animation: orbit 10s linear infinite; }
.loop-svg .orbit circle { fill: #FFB6A3; filter: drop-shadow(0 0 6px #FF6B4A); }
@keyframes orbit { to { transform: rotate(360deg); } }
.swarm-svg .p { fill: rgba(216,180,254,.35); transform-box: fill-box; transform-origin: center; animation: probe 3.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes probe { 0%, 70%, 100% { fill: rgba(216,180,254,.3); transform: scale(1); } 80% { fill: #f3e8ff; transform: scale(1.7); } }
.swarm-svg .focus { fill: rgba(168,85,247,.16); stroke: #e9d5ff; stroke-width: 2; }
.swarm-svg .handle { stroke: #e9d5ff; stroke-width: 6; stroke-linecap: round; }
.swarm-svg .bug { fill: #FF8A6E; filter: drop-shadow(0 0 5px #FF6B4A); animation: bug 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bug { 50% { transform: scale(1.35); } }
.legend { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #e9e0ff; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.legend .lg-p { background: #d8b4fe; } .legend .lg-f { border: 2px solid #e9d5ff; background: rgba(168,85,247,.3); } .legend .lg-b { background: #FF8A6E; }
.qa-glass { transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s ease; }
.qa-glass:hover { border-color: rgba(233,213,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 28px 80px rgba(60,14,110,.5); }

/* hero ball: soft parallax and a glow that follows */
.hero-logo-btn { transition: translate .6s var(--ease); }


@media (prefers-reduced-motion: reduce) {
  .qa-diagram .layer { opacity: 1 !important; transform: none !important; }
  .xp::after { height: calc(100% - 20px); }
}

/* nav: denser glass so text scrolling underneath never fights the links */
.navbar.glass { background: linear-gradient(150deg, rgba(34,46,104,.62), rgba(10,16,44,.74)); }
.topnav.scrolled .navbar.glass { background: linear-gradient(150deg, rgba(30,40,92,.9), rgba(10,16,44,.93)); }

/* Home hero: public projects strip */
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat a { display: block; color: inherit; text-decoration: none; }
.stat a:focus-visible { outline-offset: 6px; }
.stats-3 .stat strong { font-size: 20px; }
@media (max-width: 560px) { .stats-3 { grid-template-columns: minmax(0, 1fr); } }
.stat a > span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #C9D0EA; }

/* glass ball logo as a section mark */
.ico.ico-ball { background: none; border: 0; box-shadow: none; width: 56px; height: 56px; border-radius: 50%; overflow: visible; filter: drop-shadow(0 8px 22px rgba(70,110,230,.5)); }
.ico.ico-ball img { width: 100%; height: 100%; display: block; }
.sec:hover .ico-ball img { animation: none; }

/* =========================================================
   Landing v5: calm, centred, one rhythm
   ========================================================= */
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 112px; padding-bottom: 112px; }
.hero-center .hero-ball { width: min(190px, 48vw); }
.hero-center .eyebrow { margin-top: 36px; }
.hero-center h1 { margin-top: 14px; font-size: clamp(44px, 6.2vw, 84px); line-height: 1; letter-spacing: -.035em; font-weight: 700; max-width: 16ch; }
.hero-center .lede { margin: 22px auto 0; max-width: 46ch; font-size: 20px; line-height: 1.55; color: var(--soft); }
.hero-center .cta { justify-content: center; margin-top: 34px; }

.sec-head { max-width: 760px; margin-bottom: 40px; }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; }
.sec-head .sub { margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

.pillars, .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillar { border-radius: var(--r-lg); padding: 30px 28px 32px; }
.pnum { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--accent); margin-bottom: 22px; }
.pillar h3 { font-size: 24px; }
.pillar p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--soft); }

.pcard { border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.pmark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: var(--accent); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.plogo { height: 64px; width: auto; object-fit: contain; }
.tag { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--hair); background: rgba(255,255,255,.05); }
.pcard h3 { font-size: 24px; margin-top: 6px; }
.pcard p { font-size: 16px; line-height: 1.6; color: var(--soft); flex: 1; }
.plinks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 8px; }
.plink { color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.plink:hover { color: #fff; text-decoration: underline; }
.pcard .go { text-decoration: none; }

.gcard { border-radius: var(--r-lg); padding: 14px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.gcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.gcopy { padding: 12px 28px 12px 0; }
.gcopy h3 { font-size: 30px; }
.gcopy p { margin-top: 10px; font-size: 18px; color: var(--soft); }
.gcopy .cta { margin-top: 24px; }

.band { border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.band h3 { font-size: 24px; margin-top: 8px; }
.band p:not(.eyebrow) { margin-top: 8px; color: var(--soft); max-width: 58ch; }
.contact { text-align: center; padding: 96px 0 24px; }
.contact h2 { font-size: clamp(30px, 3.8vw, 48px); max-width: 20ch; margin: 0 auto; }
.contact .sub { margin: 14px auto 0; }
.contact .cta { justify-content: center; }

@media (max-width: 900px) {
  .pillars, .pgrid { grid-template-columns: minmax(0, 1fr); }
  .gcard { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gcopy { padding: 4px 14px 14px; }
  .hero-center { padding-top: 56px; padding-bottom: 72px; }
  .band { padding: 24px; }
}

/* stat tiles: blur the star field behind them so no stray dot shows through */
.stat { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), rgba(8,18,48,.55); }
.qa-page { padding-top: 56px; }

/* hero logo: no filter layer and a glow that fades out inside its own box, so no square shows while loading or repainting */
.hero-ball, .hero-logo-btn:hover .hero-ball { filter: none; will-change: auto; }
.hero-logo-btn { cursor: pointer; transition: translate .6s var(--ease), box-shadow .45s ease; }
.hero-logo-btn:hover, .hero-logo-btn:focus-visible { box-shadow: 0 0 70px 10px rgba(120,160,255,.38); }
.hero-logo-btn:focus-visible { outline-offset: 10px; }
.ball-hint { margin-top: 22px; font-size: 12px; line-height: 1; letter-spacing: .04em; color: var(--muted); opacity: .8; }
.hero-center .ball-hint + .eyebrow { margin-top: 22px; }
.hero-logo-btn::after { inset: -35%; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(120,160,255,.30), rgba(120,160,255,0)); }
.hero-logo-btn { background: none; overflow: visible; }


/* =========================================================
   Nav v6: one compact pill bar, hamburger menu on phones
   ========================================================= */
.nav-cta, .nav-toggle, .nav-menu { display: none; }
.navlink.on { color: #fff; }
.nav-toggle {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair); border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.1); color: var(--text); position: relative; flex-shrink: 0;
}
.nt-bars, .nt-bars::before, .nt-bars::after { display: block; position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease), opacity .2s ease; }
.nt-bars { top: 50%; margin-top: -1px; }
.nt-bars::before, .nt-bars::after { content: ""; margin-left: -9px; left: 0; }
.nt-bars::before { top: -6px; }
.nt-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nt-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nt-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bars::after { top: 0; transform: rotate(-45deg); }
.nav-toggle:hover { background: rgba(255,255,255,.2); }

@media (min-width: 641px) and (max-width: 760px) {
  .navbar { gap: 6px; padding-left: 14px; }
  .navlinks { margin-left: 4px; gap: 2px; }
  .navlink { font-size: 13.5px; padding: 12px 5px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }
  html { scroll-padding-top: 78px; }
  .topnav { top: 8px; width: min(1100px, calc(100vw - 16px)); }
  .navbar { flex-wrap: nowrap; gap: 8px; padding: 6px 6px 6px 14px; height: 56px; max-height: 60px; }
  .navlinks, .nav-social { display: none; }
  .brand-link { margin-right: auto; min-width: 0; }
  .brand-long { max-width: 128px; height: 32px; }
  .nav-cta { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px; border-radius: 24px;
    flex-direction: column; gap: 2px; z-index: 60;
    background: linear-gradient(150deg, rgb(26,38,90), rgb(10,16,44));
    animation: menu-in .22s var(--ease) both;
  }
  .nav-menu:not([hidden]) { display: flex; }
  .nav-menu a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 16px; color: #E4E9FA; text-decoration: none; font-weight: 500; font-size: 16px; position: relative; z-index: 1; }
  .nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
  .nav-menu a[aria-current] { color: #fff; background: rgba(255,255,255,.08); }
  .nav-menu a[aria-current]::after { content: ""; position: absolute; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .nm-sep { display: block; height: 1px; margin: 6px 12px; background: var(--hair); position: relative; z-index: 1; }
  .hero, .hero-center { padding-top: 20px; padding-bottom: 56px; }
  .qa-page { padding-top: 24px; }
  .legal { margin-top: 28px; }
  .nf { padding-top: 40px; }
}
@media (max-width: 360px) {
  .brand-long { max-width: 108px; height: 28px; }
  .nav-cta { padding: 0 12px; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none !important; } }

/* 404 */
.nf { padding-top: 110px; padding-bottom: 80px; min-height: 60vh; }
.nf h1 { margin-top: 14px; font-size: clamp(36px, 5vw, 60px); max-width: 16ch; }
.nf .sub { max-width: 46ch; }

/* =========================================================
   QA page: purple end to end
   ========================================================= */
body.page-qa { background: #12081f; }
.page-qa .site { background: linear-gradient(180deg, #1a0b2e 0%, #12081f 45%, #0b0618 100%); }
.page-qa .orb { background: #7c3aed !important; opacity: .22 !important; }
.page-qa .stars { opacity: .5; }
.page-qa .navbar.glass { background: linear-gradient(150deg, rgba(76,36,140,.72), rgba(24,10,52,.86)); }
.page-qa .topnav.scrolled .navbar.glass { background: linear-gradient(150deg, rgba(76,36,140,.9), rgba(24,10,52,.9)); }
.page-qa .nav-menu { background: linear-gradient(150deg, rgb(56,26,106), rgb(22,9,48)); }
.page-qa .foot { border-top-color: rgba(216,180,254,.18); }
.band-qa { background: linear-gradient(150deg, rgba(76,36,140,.55), rgba(24,10,52,.82)); border-color: rgba(216,180,254,.28); }

/* =========================================================
   Final polish: type weights, balance, small screens
   ========================================================= */
.facts strong, .a-title, .stat strong, .tl b, .badge, .loop-svg .core-t, .qa-kicker { font-weight: 600; }
.eyebrow, h1, h2, h3, .sub, .lede { text-wrap: balance; }
.byline { margin: 14px auto 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.byline a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.byline a:hover { color: #fff; border-bottom-color: var(--accent); }
.hero-center .cta { margin-top: 28px; }

@media (max-width: 560px) {
  .contact .cta { flex-direction: column; align-items: stretch; }
  .contact .cta .pill, .hero-center .cta .pill { justify-content: center; }
  .hero-center .cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .mini-ball { width: 76px; left: -8px; bottom: 24px; }
  .foot { padding-bottom: 20px; row-gap: 0; }
  .foot > span { flex: 1 1 calc(100% - 40px); margin-bottom: 4px; }
  .foot a, .foot a:first-of-type { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; padding-right: 14px; }
  .qa-glass { padding: 16px; }
  .qa-diagram { padding: 12px; }
  .loop-svg .node text { font-size: 23px; }
  .loop-svg .core-t { font-size: 34px; }
  .loop-svg .core-s { font-size: 20px; }
  .legend { font-size: 15px; }
  .layer b { font-size: 15px; }
  .layer span { font-size: 13.5px; }
}