/* ================= TOKENS ================= */
:root {
  --bg: #07080c;
  --surface: #0f1117;
  --elevated: #161a23;
  --text: #f4f5f7;
  --muted: #959baa;
  --faint: #4e5563;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --violet: #7c5cff;
  --blue: #3ec6ff;
  --mint: #5cffb0;
  --lilac: #afa2ff;
  --grad: linear-gradient(110deg, #6852e5, #3d9fe8);
  --glow: rgba(72, 82, 255, 0.22);
  --grid-line: rgba(255, 255, 255, 0.025);
  --overlay: rgba(3, 4, 7, 0.8);
  --radius: 18px;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --page: 1280px;
  --gutter: max(28px, calc((100vw - var(--page)) / 2));
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f7fa; --surface: #ffffff; --elevated: #eeeef4;
  --text: #0b0c10; --muted: #646977; --faint: #a3a7b3;
  --border: rgba(0, 0, 0, 0.1); --border-strong: rgba(0, 0, 0, 0.18);
  --lilac: #6a55e0; --mint: #10a36a; --glow: rgba(72, 82, 255, 0.13); --grid-line: rgba(0, 0, 0, 0.04);
  --overlay: rgba(240, 240, 248, 0.75);
  color-scheme: light;
}

/* ================= BASE ================= */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { /* film grain */
  content: ""; position: fixed; z-index: 200; inset: 0; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 300; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(44px, 5.3vw, 76px); line-height: 0.98; letter-spacing: -0.055em; font-weight: 500; margin: 14px 0 20px; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.045em; font-weight: 500; margin: 12px 0 0; }
h3 { font-weight: 600; letter-spacing: -0.02em; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lilac); letter-spacing: -0.02em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.lead-p { font-size: 15px; line-height: 1.8; max-width: 440px; margin: 22px 0; }

/* ================= BACKGROUND ================= */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; width: 52vmax; height: 52vmax; border-radius: 50%; filter: blur(110px); opacity: 0.2; will-change: transform; }
.b1 { background: #6d4dff; top: -22vmax; left: -14vmax; animation: drift-a 34s ease-in-out infinite alternate; }
.b2 { background: #2fa8ff; top: 18vh; right: -24vmax; opacity: 0.14; animation: drift-b 41s ease-in-out infinite alternate; }
.b3 { background: #34e3a0; bottom: -30vmax; left: 18vw; opacity: 0.08; animation: drift-c 47s ease-in-out infinite alternate; }
:root[data-theme="light"] .blob { opacity: 0.16; } :root[data-theme="light"] .b3 { opacity: 0.1; }
@keyframes drift-a { to { transform: translate(14vw, 18vh) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-16vw, 22vh) scale(0.9); } }
@keyframes drift-c { to { transform: translate(-12vw, -16vh) scale(1.2); } }
.bg-grid { position: absolute; inset: -80px; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 78%); animation: grid-pan 60s linear infinite; }
@keyframes grid-pan { to { transform: translate(80px, 80px); } }
.spotlight { position: absolute; width: 640px; height: 640px; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, 0.09), transparent 62%); transform: translate(calc(var(--mx, -999px) - 320px), calc(var(--my, -999px) - 320px)); transition: transform 0.25s ease-out; }
@media (hover: none) { .spotlight { display: none; } }

/* ================= BUTTONS ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 99px; padding: 14px 22px; border: 1px solid var(--border); font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--glow); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 8px 30px rgba(90, 72, 225, 0.28); }
.btn-secondary { background: color-mix(in srgb, var(--surface) 75%, transparent); backdrop-filter: blur(10px); }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-text { background: none; border: 0; color: var(--muted); padding: 8px 0; font-size: 13px; }
.btn-text:hover { color: var(--text); }
.play { font-size: 10px; }
.icon-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--elevated); font-size: 14px; transition: background 0.2s; }
.icon-btn:hover { background: var(--surface); }
.icon-btn.plain { background: none; border: 0; font-size: 19px; }
.icon-btn[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.link-btn { background: none; border: 0; padding: 0; text-align: left; }

/* ================= ORB ================= */
.orb { position: relative; display: inline-block; flex: none; width: var(--s, 42px); height: var(--s, 42px); border-radius: 50%; padding: 2px; border: 0;
  background: conic-gradient(from 160deg, var(--violet), var(--blue), var(--mint), var(--violet));
  box-shadow: 0 0 calc(var(--s, 42px) * 0.5) rgba(93, 103, 255, 0.35); animation: breathe 4s ease-in-out infinite; }
.orb::before { content: ""; position: absolute; inset: calc(var(--s, 42px) * -0.15); border-radius: 50%; border: 1px solid rgba(107, 117, 255, 0.22); }
.orb-core { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.8), transparent 9%), radial-gradient(circle at 58% 70%, var(--mint), transparent 28%), radial-gradient(circle at 28% 65%, #7860ff, transparent 45%), #263154; filter: saturate(1.2); }
.orb-xs { --s: 28px; } .orb-sm { --s: 42px; } .orb-lg { --s: 124px; } .orb-hero { --s: 124px; cursor: pointer; }
.orb-hero:hover { filter: brightness(1.12); }
.orb.speaking, body.agent-speaking .orb-hero { animation: speaking 0.6s ease-in-out infinite alternate; }
.orb.listening::before { animation: ring 1s infinite; border-color: var(--mint); }
.orb.thinking .orb-core { animation: spin 1s linear infinite; }
@keyframes breathe { 50% { transform: scale(1.05); filter: brightness(1.12); } }
@keyframes speaking { to { transform: scale(1.08, 0.96); } }
@keyframes ring { to { transform: scale(1.5); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= ENTRY ================= */
.entry { position: fixed; z-index: 150; inset: 0; height: 100vh; height: 100dvh; display: flex; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background-color: var(--bg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 96px 96px; }
.entry::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(99, 78, 220, 0.14), transparent 37%); pointer-events: none; }
.entry.leaving { animation: entry-exit 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards; pointer-events: none; }
.entry-top { position: absolute; z-index: 2; inset: 0 0 auto; height: 88px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.entry-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; margin: auto; padding: 100px 20px 56px; }
.entry-content .eyebrow { margin: 34px 0 6px; }
.entry-content > p { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
.entry-content > .entry-tagline { font: italic 22px/1.3 var(--serif); color: var(--lilac); margin: -6px 0 18px; letter-spacing: -0.01em; }
.entry-question { font-size: 19px !important; color: var(--text) !important; margin-bottom: 22px !important; }
.topic-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 680px; }
.topic-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 99px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); font-size: 14px; transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s; }
.topic-btn:hover { border-color: rgba(124, 92, 255, 0.6); transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow); }
.topic-btn > span { font-size: 14px; }
.topic-btn[data-topic="tour"] { background: var(--grad); color: #fff; border-color: transparent; }
.entry-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; }
.say-btn { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px dashed var(--border-strong); border-radius: 99px; padding: 9px 16px; color: var(--muted); font-size: 13px; transition: color 0.2s, border-color 0.2s; }
.say-btn:hover { color: var(--text); border-color: var(--mint); }
.say-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.say-btn.live { color: var(--text); border-style: solid; border-color: #ef4444; }
.say-btn.live .say-dot { background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: ping-red 1.2s infinite; }
.entry-content small { margin-top: 22px; font-size: 12px; }
.entry-reveal { opacity: 0; animation: entry-reveal 0.8s var(--ease) forwards; }
.entry-orb { animation-name: orb-arrive; animation-duration: 1.1s; animation-delay: 0.15s; }
.entry-d1 { animation-delay: 0.65s; } .entry-d2 { animation-delay: 0.78s; } .entry-d3 { animation-delay: 0.92s; } .entry-d4 { animation-delay: 1.08s; } .entry-d5 { animation-delay: 1.2s; }
.entry-index { position: absolute; z-index: 1; left: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 9px; color: var(--muted); font: 10px var(--mono); letter-spacing: 0.13em; }
.entry-index i { width: 45px; height: 1px; background: var(--border); }
@keyframes entry-reveal { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes orb-arrive { from { opacity: 0; transform: scale(0.55); filter: blur(18px); } 65% { opacity: 1; transform: scale(1.06); filter: blur(0); } to { opacity: 1; transform: scale(1); } }
@keyframes entry-exit { 35% { transform: scale(0.985); } to { opacity: 0; transform: scale(1.06); filter: blur(14px); } }

/* ================= NAV ================= */
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.mono-mark { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; font-size: 11px; letter-spacing: -0.5px; }
.nav { position: fixed; z-index: 40; inset: 0 0 auto; height: 76px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px) saturate(1.3); }
.nav-links { display: flex; gap: 36px; color: var(--muted); font-size: 14px; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.command-key { color: var(--muted); border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 5px 8px; font: 11px var(--mono); box-shadow: inset 0 -1px 0 var(--border); }
.command-key:hover { color: var(--text); }
.nav-cta { border: 1px solid var(--border); background: var(--surface); padding: 10px 17px; border-radius: 99px; font-size: 13px; transition: border-color 0.2s; }
.nav-cta:hover { border-color: var(--violet); }

/* ================= HERO ================= */
.hero { min-height: 100svh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 20px 100px; }
.hero-glow { position: absolute; width: 700px; height: 700px; max-width: 100vw; background: radial-gradient(circle, rgba(105, 75, 255, 0.14), transparent 68%); pointer-events: none; }
.hero .eyebrow { margin-top: 34px; }
.hero-sub { color: var(--muted); font-size: 17px; max-width: 560px; line-height: 1.6; margin-bottom: 18px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.availability { position: relative; margin-bottom: 34px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); border-radius: 99px; padding: 8px 14px; font-size: 12px; color: var(--muted); }
.availability i, .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3ddc97; margin-right: 7px; box-shadow: 0 0 10px #3ddc97; vertical-align: 1px; }
.live-dot { margin-right: 0; animation: blink 1.6s ease-in-out infinite; }
.sound-toggle { background: none; border: 0; color: var(--muted); font-size: 12px; margin: 20px; }
.sound-toggle:hover { color: var(--text); }
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.suggestions button, .followups button { border: 1px solid var(--border); background: transparent; color: var(--muted); padding: 9px 14px; border-radius: 99px; font-size: 12px; transition: color 0.2s, border-color 0.2s; }
.suggestions button:hover, .followups button:hover { color: var(--text); border-color: var(--border-strong); }
.suggestions span { margin-left: 8px; }
.scroll-cue { position: absolute; bottom: 22px; color: var(--muted); font-size: 10px; letter-spacing: 0.12em; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.scroll-cue i { height: 22px; width: 1px; background: linear-gradient(var(--muted), transparent); }

/* floating code cards */
.hero-code { position: absolute; width: 240px; text-align: left; background: color-mix(in srgb, var(--surface) 68%, transparent); border: 1px solid var(--border); border-radius: 12px; backdrop-filter: blur(14px); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18); overflow: hidden; color: #7e879a; animation: code-float 6s ease-in-out infinite; }
/* cards sit beside the orb, so they can never reach the headline */
.orb-stage { position: relative; display: grid; place-items: center; }
.code-left { right: calc(100% + 110px); top: -22px; rotate: -2deg; }
.code-right { left: calc(100% + 110px); top: -6px; rotate: 2deg; animation-delay: -3s; }
.code-bar { height: 32px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 5px; padding: 0 10px; font: 10px var(--mono); color: var(--muted); }
.code-bar i { width: 6px; height: 6px; border-radius: 50%; background: #ff5c7a; } .code-bar i:nth-child(2) { background: #ffb547; } .code-bar i:nth-child(3) { background: #3ddc97; }
.code-bar span { margin-left: 4px; } .code-bar strong { margin-left: auto; color: #3ddc97; font-size: 9px; letter-spacing: 0.12em; }
.hero-code code { display: block; padding: 15px; font: 11px/1.8 var(--mono); }
.hero-code b { color: #b59cff; font-weight: 500; } .hero-code .v { color: var(--text); } .hero-code .fn { color: #68d8ff; } .hero-code em { color: #74dcac; font: inherit; } .hero-code small { color: var(--faint); margin-right: 12px; }
.code-cursor, .terminal-cursor { display: inline-block; width: 6px; height: 12px; background: #8b76ff; vertical-align: middle; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.code-signal { height: 28px; display: flex; align-items: end; gap: 3px; padding: 0 15px 10px; }
.code-signal i { width: 3px; height: 7px; background: var(--mint); border-radius: 4px; animation: signal 0.8s ease-in-out infinite alternate; }
.code-signal i:nth-child(2) { height: 12px; animation-delay: -0.2s; } .code-signal i:nth-child(3) { height: 5px; animation-delay: -0.5s; } .code-signal i:nth-child(4) { height: 15px; animation-delay: -0.3s; } .code-signal i:nth-child(5) { height: 9px; animation-delay: -0.6s; } .code-signal i:nth-child(6) { height: 4px; animation-delay: -0.1s; }
@keyframes code-float { 50% { translate: 0 -8px; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes signal { to { height: 3px; opacity: 0.45; } }

/* ================= SECTIONS ================= */
.tldr, .content-section { max-width: var(--page); margin: 0 auto; padding: 120px 28px; }
.tldr { position: relative; max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); background: color-mix(in srgb, var(--surface) 35%, transparent); }
.tldr::before, .tldr::after, .cta-section::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.45), rgba(92, 255, 176, 0.3), transparent); }
.tldr::before { top: 0; } .tldr::after { bottom: 0; }
.tldr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 32px; align-items: center; }
.tldr h2 { margin: 0; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.facts div { border-left: 1px solid var(--border); padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.facts span { font-size: 10px; color: var(--muted); letter-spacing: 0.14em; font-weight: 600; }
.facts strong { font-size: 16px; font-weight: 500; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; }
.section-head > p { max-width: 380px; color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }

/* reveal on scroll */
.reveal, .split .w, .seq > *, .reveal-orb { opacity: 0; }
.reveal.in { opacity: var(--fxo, 1); animation: entry-reveal 0.9s var(--ease) backwards; animation-delay: var(--rd, 0ms); }
/* headings: word-by-word blur reveal (same motion as the intro) */
.split .w { display: inline-block; }
.split.in .w { opacity: 1; animation: word-in 0.8s var(--ease) backwards; animation-delay: calc(var(--base, 0ms) + var(--i) * 45ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(0.35em); filter: blur(10px); } }
/* terminal lines type in one after another */
.seq.in > * { opacity: 1; animation: line-in 0.5s var(--ease) backwards; animation-delay: calc(var(--i) * 220ms + 150ms); }
@keyframes line-in { from { opacity: 0; transform: translateX(-8px); filter: blur(4px); } }
/* small orbs arrive like the intro orb */
.reveal-orb.in { opacity: 1; animation: orb-arrive 1.1s var(--ease) backwards; }
/* timeline line draws itself */
.reveal-line { position: relative; border-left-color: transparent !important; }
.reveal-line::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--violet), var(--border) 30%, var(--border) 85%, transparent); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease); }
.reveal-line.in::before { transform: scaleY(1); }
/* hero plays the intro sequence once the page is ready */
.hero-in { opacity: 0; }
body.ready .hero-in { opacity: 1; animation: entry-reveal 0.85s var(--ease) backwards; animation-delay: calc(var(--d) * 90ms + 80ms); }
body.ready .orb-stage.hero-in { animation-name: orb-arrive; animation-duration: 1.1s; }
.hero-title .w { opacity: 0; }
body.ready .hero-title .w { opacity: 1; animation: word-in 0.8s var(--ease) backwards; animation-delay: calc(330ms + var(--i) * 55ms); }

/* ================= NOW (terminal) ================= */
.now-section { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: center; }
.terminal-card { background: #0a0c11; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3); font-family: var(--mono); color: #cbd0da; }
.terminal-head { height: 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #707786; font-size: 11px; }
.terminal-head > span { display: flex; gap: 6px; } .terminal-head i { width: 8px; height: 8px; border-radius: 50%; background: #ff5c7a; } .terminal-head i:nth-child(2) { background: #ffb547; } .terminal-head i:nth-child(3) { background: #3ddc97; }
.terminal-head b { font-weight: 400; } .terminal-head small { justify-self: end; }
.terminal-body { padding: 22px; font-size: 13px; min-height: 260px; }
.terminal-body p { margin: 0 0 10px; line-height: 1.5; }
.terminal-body .prompt { color: #8d78ff; } .terminal-body .cmd { color: #f4f5f7; }
.term-line { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px 8px 18px; margin: 0 0 6px -10px; border-radius: 8px; color: #747c8c; font: inherit; transition: background 0.2s; }
.term-line:hover { background: rgba(255, 255, 255, 0.04); }
.term-line .tag { color: var(--mint); margin-right: 10px; }
.term-line b { color: #e7e9ef; font-weight: 500; }
.term-line span.d { display: block; color: #747c8c; margin-top: 2px; }
.term-line .ask { color: #8d78ff; opacity: 0; transition: opacity 0.2s; margin-left: 8px; }
.term-line:hover .ask { opacity: 1; }
.terminal-body .success { color: #4ed49a; }

/* ================= METRICS ================= */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { padding: 28px 24px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--border); position: relative; overflow: hidden; }
.metric::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, var(--violet), var(--mint)); }
.metric-value { font-size: clamp(40px, 4.5vw, 56px); line-height: 1; letter-spacing: -0.05em; font-weight: 500; font-variant-numeric: tabular-nums; }
.metric-label { font-weight: 500; margin: 16px 0 4px; font-size: 15px; }
.metric-detail { font-size: 13px; color: var(--muted); }

/* ================= TIMELINE ================= */
.timeline { border-left: 1px solid var(--border); margin-left: 24px; }
.role-card { position: relative; display: grid; grid-template-columns: 150px 1fr 190px; gap: 24px; padding: 14px 8px 52px 40px; border-radius: 16px; transition: background 0.3s; }
.role-date { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; padding-top: 8px; }
.role-loc { display: block; color: var(--faint); font-size: 11px; margin-top: 4px; letter-spacing: 0; }
.role-main > span { font-size: 13px; color: var(--muted); }
.role-main h3 { font-size: 22px; margin: 6px 0 14px; font-weight: 500; }
.role-main ul { list-style: none; padding: 0; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.role-main li { padding-left: 22px; text-indent: -22px; }
.role-main li::before { content: "↗"; color: var(--mint); margin-right: 9px; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tags span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 99px; font-size: 11px; color: var(--muted); }
.ask-link { border: 0; background: none; color: var(--lilac); font-size: 12px; height: min-content; padding-top: 8px; text-align: right; }
.ask-link:hover { text-decoration: underline; }
.current { position: absolute; left: 40px; top: -12px; color: var(--mint); font-size: 10px; letter-spacing: 0.1em; border: 1px solid rgba(92, 255, 176, 0.3); padding: 3px 8px; border-radius: 99px; }
.role-card.is-highlighted, .project-card.is-highlighted { box-shadow: 0 0 0 1px var(--violet), 0 0 60px -10px var(--glow); }
.role-card.is-highlighted { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.edu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 0 24px; }
.edu-item { padding: 22px 24px; border-radius: 14px; border: 1px dashed var(--border-strong); }
.edu-item strong { display: block; font-weight: 500; }
.edu-item span { font-size: 13px; color: var(--muted); }

/* ================= PROJECTS ================= */
.filters { display: flex; gap: 7px; margin-bottom: 26px; flex-wrap: wrap; }
.filters button { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 99px; padding: 8px 15px; font-size: 12px; transition: background 0.2s, color 0.2s; }
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.project-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr; gap: 14px; }
.project-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; text-align: left; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s; }
.project-card::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.04) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s var(--ease); pointer-events: none; }
.project-card:hover::before { transform: translateX(100%); }
.project-card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: 0 18px 50px var(--glow); border-color: rgba(124, 92, 255, 0.35); }
.project-card.featured { grid-row: span 2; }
.project-art { height: 190px; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; font-size: 54px; color: #cfc8ff;
  background: radial-gradient(circle at 50% 60%, rgba(94, 215, 255, 0.3), transparent 35%), linear-gradient(145deg, #1b1435, #111825); }
.project-card.featured .project-art { flex: 1; min-height: 360px; }
.art-1 { background: linear-gradient(145deg, #1d253c, #101116); } .art-2 { background: linear-gradient(145deg, #263936, #101514); } .art-3 { background: linear-gradient(145deg, #2f2238, #101015); } .art-4 { background: linear-gradient(145deg, #37321e, #13120d); } .art-5 { background: linear-gradient(145deg, #18333b, #0d1416); }
/* Project illustrations (assets/projects/*.svg): centred, never cropped, so tall and wide cards both work. */
.project-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px 6px 4px; transition: transform 0.6s var(--ease); }
.project-card:hover .project-art img { transform: scale(1.035); }
.project-card.featured .project-art img { padding: 24px 12px; }
.art-ui { position: absolute; width: 64%; height: 44%; background: rgba(8, 9, 13, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; bottom: -18px; right: -10px; padding: 15px; text-align: left; }
.art-ui b { display: block; font-size: 22px; color: #fff; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.art-ui small { display: block; font-size: 10px; color: #9aa1b2; margin: 4px 0 10px; }
.art-ui i { display: block; height: 4px; width: 80%; margin-bottom: 7px; background: rgba(255, 255, 255, 0.14); border-radius: 9px; }
.art-ui i:nth-of-type(2) { width: 55%; }
.project-info { display: flex; justify-content: space-between; gap: 12px; padding: 20px 8px 12px; }
.project-info h3 { font-size: 19px; margin: 7px 0; font-weight: 500; }
.project-info p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.project-info .arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; transition: background 0.2s, border-color 0.2s; }
.project-card:hover .arrow { background: var(--text); color: var(--bg); border-color: var(--text); }
.project-card > .tags { padding: 0 8px 8px; }

/* ================= SKILLS ================= */
.skills-section { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 100px; align-items: start; }
.skill-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.skill-groups h3 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tags span { position: relative; overflow: hidden; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
.skill-tags span::after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--violet), var(--mint)); transition: width 0.5s var(--ease); }
.skill-tags span:hover::after, .skill-groups.in .skill-tags span::after { width: 100%; }
.certs-wrap { margin-top: 44px; }
.certs { display: grid; gap: 10px; margin-top: 16px; }
.cert { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: border-color 0.2s; }
a.cert:hover { border-color: var(--violet); }
.cert-badge { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--elevated); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--lilac); }
.cert strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.cert small { font-size: 12px; color: var(--muted); }

/* ================= QUOTES ================= */
.quote-section { max-width: 1000px; margin: 40px auto 120px; text-align: center; padding: 0 24px; }
.quote-mark { font: italic 80px var(--serif); color: #8b78ff; height: 60px; display: block; }
blockquote { font: italic clamp(28px, 3.2vw, 44px)/1.25 var(--serif); margin: 20px auto 35px; }
.quote-person { display: flex; justify-content: center; gap: 12px; align-items: center; }
.quote-person > span { width: 38px; height: 38px; border-radius: 50%; background: var(--elevated); display: grid; place-items: center; font-size: 11px; }
.quote-person div { text-align: left; display: flex; flex-direction: column; font-size: 13px; gap: 2px; }

/* ================= CTA + FOOTER ================= */
.cta-section { position: relative; overflow: hidden; padding: 120px 24px; background: radial-gradient(50% 70% at 50% 100%, rgba(104, 82, 229, 0.16), transparent 70%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-section::before { top: 0; }
.cta-section .eyebrow { margin: 30px 0 14px; }
.cta-section h2 { margin: 0; }
.cta-section p { margin: 20px 0 28px; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.footer { max-width: var(--page); margin: auto; padding: 60px 28px 110px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; color: var(--muted); font-size: 13px; }
.footer .brand { color: var(--text); margin-bottom: 20px; }
.footer p { line-height: 1.7; max-width: 340px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; color: var(--text); align-content: start; }
.footer-links a:hover, .footer-links button:hover { color: var(--lilac); }
.footer > small { grid-column: span 2; border-top: 1px solid var(--border); padding-top: 22px; font-size: 11px; }
.footer > small a { text-decoration: underline; text-underline-offset: 3px; }
.footer > small a:hover { color: var(--text); }

/* ================= WELCOME (returning) ================= */
.welcome { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: min(370px, calc(100vw - 32px)); padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4); animation: rise 0.5s var(--ease); }
.welcome-head { display: flex; align-items: center; gap: 12px; }
.welcome-head .icon-btn { margin-left: auto; }
.welcome-head p { margin: 0; }
.welcome-name { font-weight: 600; }
.badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--elevated); color: var(--muted); margin-left: 4px; vertical-align: 2px; }
.welcome-text { margin: 14px 0 16px; font-size: 15px; }
.welcome-actions { display: flex; gap: 8px; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ================= TOUR ================= */
.tour-dim { position: fixed; inset: 0; z-index: 30; background: rgba(3, 4, 7, 0.55); pointer-events: none; }
:root[data-theme="light"] .tour-dim { background: rgba(240, 240, 248, 0.6); }
.tour-focus { position: relative; z-index: 35; background-color: var(--bg); border-radius: 26px; box-shadow: 0 0 80px rgba(124, 92, 255, 0.12) inset; }
.tour-focus::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(124, 92, 255, 0.35); border-radius: 22px; pointer-events: none; }
.tour-bar { position: fixed; z-index: 70; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 30px)); display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 16px;
  background: rgba(18, 21, 29, 0.9); color: #fff; border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(20px); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); animation: rise 0.4s var(--ease); }
.tour-caption { flex: 1; min-width: 0; }
.tour-bar { flex-wrap: wrap; }
.tour-choices { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; }
.tour-choices .topic-grid { justify-content: flex-start; max-width: none; }
.tour-choices .topic-btn { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; padding: 8px 13px; }
.tour-choices .say-btn { color: #aab0bf; border-color: rgba(255, 255, 255, 0.2); }
.tour-bar.choosing .tour-controls > :not(#tour-end) { display: none; }
.tour-label { font-size: 9px; color: #9283ff; letter-spacing: 0.14em; font-weight: 600; }
.tour-caption p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; }
.tour-controls { display: flex; gap: 7px; align-items: center; flex: none; }
.tour-controls button { background: none; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; border-radius: 99px; padding: 7px 11px; font-size: 11px; }
.tour-controls button:hover { background: rgba(255, 255, 255, 0.08); }
.progress { display: flex; gap: 4px; padding: 0 4px; }
.progress i { width: 5px; height: 5px; border-radius: 50%; background: #4d5260; transition: background 0.3s, width 0.3s; }
.progress i.active { background: #8c75ff; }
.progress i.current { width: 14px; border-radius: 4px; }

/* ================= DOCK ================= */
.dock-wrap { position: fixed; z-index: 45; right: 24px; bottom: 22px; }
.dock-btn { position: relative; display: flex; gap: 12px; align-items: center; background: rgba(22, 26, 35, 0.85); color: #fff; border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(20px); border-radius: 99px; padding: 8px 20px 8px 9px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: transform 0.25s var(--ease); }
.dock-btn:hover { transform: translateY(-2px); }
.dock-text { display: flex; flex-direction: column; text-align: left; font-size: 13px; gap: 1px; }
.dock-text small { color: #8e95a5; font-size: 10px; }
.dock-orbit { position: absolute; z-index: -1; inset: -14px; border: 1px solid rgba(124, 92, 255, 0.2); border-radius: 99px; animation: spin 6s linear infinite; pointer-events: none; }
.dock-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.dock-orbit i:first-child { top: 1px; left: 30%; }
.dock-orbit i:nth-child(2) { right: 3px; bottom: 25%; width: 3px; height: 3px; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.dock-orbit i:last-child { left: 7px; bottom: 12%; width: 4px; height: 4px; background: #9a82ff; box-shadow: 0 0 10px #9a82ff; }
.dock-nudge { position: absolute; right: 3px; bottom: 76px; white-space: nowrap; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28); animation: nudge-float 3s ease-in-out infinite; }
.dock-nudge::after { content: ""; position: absolute; right: 26px; bottom: -6px; width: 10px; height: 10px; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.dock-nudge strong, .dock-nudge > span { display: block; }
.dock-nudge strong { font-size: 12px; margin-bottom: 2px; }
.dock-nudge > span { color: var(--lilac); font-size: 11px; }
@keyframes nudge-float { 50% { transform: translateY(-4px); } }

/* ================= CHAT PANEL ================= */
.chat-panel { position: fixed; z-index: 80; right: 16px; top: 16px; bottom: 16px; width: 420px; display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid var(--border); backdrop-filter: blur(24px); border-radius: 20px; box-shadow: 0 25px 100px rgba(0, 0, 0, 0.45); animation: slidein 0.35s var(--ease); }
@keyframes slidein { from { transform: translateX(105%); opacity: 0; } }
.panel-head { padding: 16px 16px 16px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.ava-id { display: flex; gap: 12px; align-items: center; }
.ava-id > div { display: flex; flex-direction: column; font-size: 14px; gap: 1px; }
.ava-id span { color: var(--muted); font-size: 11px; }
.panel-actions { display: flex; gap: 6px; }
.chat-body { flex: 1; overflow: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.message { max-width: 88%; padding: 12px 15px; border-radius: 14px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; animation: rise 0.3s var(--ease); }
.ava-message { background: var(--elevated); border: 1px solid var(--border); border-bottom-left-radius: 4px; align-self: flex-start; }
.user-message { background: #6250cc; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.sys-message { align-self: center; font-size: 12px; color: var(--muted); }
.message a { color: var(--lilac); text-decoration: underline; }
.rich-answer { max-width: 100%; white-space: normal; }
.answer-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--lilac); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 8px; }
.answer-top button, .text-button { background: none; border: 0; color: var(--lilac); padding: 0; }
.rich-answer > strong { display: block; font-size: 15px; margin-bottom: 6px; font-weight: 600; }
.rich-answer .body { white-space: pre-wrap; }
.mini-metrics { display: flex; gap: 8px; margin-top: 12px; }
.mini-metrics span { flex: 1; background: var(--surface); padding: 9px 10px; border-radius: 8px; font-size: 11px; color: var(--muted); }
.mini-metrics b { display: block; color: var(--text); font-size: 17px; font-weight: 500; letter-spacing: -0.03em; }
.text-button { display: inline-block; padding-top: 12px; font-size: 12px; }
.rich-answer small { display: block; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 12px; font-size: 11px; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { opacity: 0.25; transform: translateY(-3px); } }
.followups { display: flex; gap: 6px; padding: 0 14px 10px; overflow-x: auto; scrollbar-width: none; }
.followups button { flex: none; }
.composer { margin: 0 12px 10px; display: flex; gap: 6px; border: 1px solid var(--border); background: var(--elevated); border-radius: 14px; padding: 6px; }
.composer:focus-within { border-color: var(--violet); }
.composer input { flex: 1; min-width: 0; background: none; border: 0; padding: 0 8px; font-size: 14px; outline: none; }
.composer input::placeholder { color: var(--muted); }
.mic-btn, .send-btn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: transparent; display: grid; place-items: center; }
.mic-btn svg { width: 17px; height: 17px; fill: currentColor; }
.mic-btn.live { background: #ef4444; color: #fff; border-color: transparent; animation: ping-red 1.2s infinite; }
@keyframes ping-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 100% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); } }
.send-btn { background: var(--text); color: var(--bg); font-size: 16px; }
.ai-note { text-align: center; color: var(--muted); font-size: 11px; margin: 0 0 12px; }
#mode-badge:not(:empty) { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 99px; background: var(--elevated); border: 1px solid var(--border); }

/* ================= MODALS ================= */
.modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 20px; background: var(--overlay); backdrop-filter: blur(12px); animation: fade 0.25s; }
@keyframes fade { from { opacity: 0; } }
.booking-modal, .case-modal { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; width: min(620px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; padding: 30px; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5); animation: rise 0.35s var(--ease); }
.modal-title { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.modal-title h2 { font-size: 30px; margin: 8px 0 20px; letter-spacing: -0.04em; }
.purpose-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 6px; }
.purpose-grid button { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--border); background: var(--elevated); border-radius: 12px; padding: 16px 18px; color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; }
.purpose-grid button:hover { border-color: #7964e8; box-shadow: inset 0 0 0 1px #7964e8; }
.purpose-grid .p-icon { font-size: 20px; }
.purpose-grid strong { display: block; font-size: 14px; font-weight: 500; }
.purpose-grid small { font-size: 12px; color: var(--muted); }
.purpose-grid .p-dur { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; margin: 12px 0; scrollbar-width: thin; }
.day { flex: none; width: 66px; padding: 10px 0; border-radius: 12px; border: 1px solid var(--border); background: var(--elevated); color: var(--text); text-align: center; }
.day b { display: block; font-size: 19px; font-weight: 500; }
.day span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.day[aria-pressed="true"] { border-color: #7964e8; box-shadow: inset 0 0 0 1px #7964e8; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.slot { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border); background: var(--elevated); border-radius: 11px; padding: 12px 14px; text-align: left; color: var(--text); transition: border-color 0.2s; }
.slot:hover { border-color: #7964e8; }
.slot b { font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.slot span { font-size: 10px; color: var(--muted); }
.sched-summary { padding: 12px 16px; border-radius: 12px; background: var(--elevated); font-size: 13px; margin: 0 0 18px; }
.booking-modal label { display: grid; gap: 6px; font-size: 12px; font-weight: 500; margin-bottom: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.booking-modal input, .booking-modal textarea { background: var(--elevated); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; font-size: 14px; outline: none; resize: vertical; }
.booking-modal input:focus, .booking-modal textarea:focus { border-color: #7964e8; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.step-dots { display: flex; justify-content: center; gap: 5px; margin-top: 22px; }
.step-dots i { width: 18px; height: 2px; background: var(--border); transition: background 0.3s; }
.step-dots i.active { background: #806aff; }
.confirmation { text-align: center; padding: 6px 0; }
.check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: rgba(61, 220, 151, 0.12); color: #3ddc97; font-size: 22px; animation: rise 0.5s var(--ease); }
.confirmation h3 { font-size: 22px; margin-bottom: 8px; font-weight: 500; }
.confirmation p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.calendar-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* case study */
.case-backdrop { overflow: auto; display: block; padding: 40px 20px; }
.case-modal { width: min(900px, 100%); max-height: none; margin: auto; padding: 46px; overflow: visible; }
.case-close { position: absolute; right: 22px; top: 20px; }
.case-modal h2 { font-size: clamp(38px, 5vw, 56px); margin: 8px 0 6px; }
.case-lead { color: var(--muted); font-size: 18px; margin: 0; }
.case-hero { height: 320px; border-radius: 16px; margin: 30px 0; display: grid; place-items: center; font-size: 80px; color: #cfc8ff; position: relative; overflow: hidden; }
.case-copy { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; padding: 22px 0; border-top: 1px solid var(--border); }
.case-copy h3 { font-size: 22px; margin: 10px 0 0; font-weight: 500; }
.case-copy p { color: var(--muted); line-height: 1.8; font-size: 15px; margin: 0; }
.case-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--border); border-radius: 12px; margin: 16px 0 24px; overflow: hidden; }
.case-metrics span { padding: 20px; color: var(--muted); font-size: 12px; border-right: 1px solid var(--border); }
.case-metrics span:last-child { border-right: 0; }
.case-metrics b { display: block; font-size: 28px; color: var(--text); font-weight: 500; letter-spacing: -0.04em; }
.case-modal .wide { width: 100%; justify-content: space-between; border-radius: 12px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
  .hero-code { display: none; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .project-card.featured { grid-row: auto; grid-column: span 2; }
  .project-card.featured .project-art { flex: none; min-height: 0; height: 260px; }
}
@media (max-width: 860px) {
  .entry-top { height: 70px; padding: 0 18px; }
  .entry-actions { flex-direction: column; width: 100%; max-width: 300px; } .entry-actions .btn { width: 100%; }
  .entry-index { left: 20px; }
  .nav { height: 66px; padding: 0 16px; } .nav-links, .command-key { display: none; } .nav-cta { padding: 9px 14px; }
  .hero { padding: 110px 16px 90px; }
  .hero-actions { flex-direction: column; width: 100%; max-width: 330px; } .hero-actions .btn { width: 100%; }
  .suggestions button:nth-child(n+3) { display: none; }
  .tldr, .content-section { padding: 80px 16px; }
  .tldr-grid, .now-section, .skills-section { grid-template-columns: 1fr; gap: 40px; }
  .facts { gap: 22px; }
  .section-head { align-items: start; flex-direction: column; gap: 16px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; } .metric { padding: 20px 16px; }
  .timeline { margin-left: 18px; }
  .role-card { grid-template-columns: 1fr; padding: 10px 14px 44px 30px; gap: 6px; } .role-date { order: -1; padding-top: 0; } .ask-link { text-align: left; } .current { left: 30px; }
  .edu { grid-template-columns: 1fr; margin-left: 0; }
  .project-grid { grid-template-columns: 1fr; } .project-card.featured { grid-row: auto; grid-column: auto; } .project-card.featured .project-art, .project-art { min-height: 0; height: 230px; flex: none; }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .filters button { white-space: nowrap; }
  .skill-groups { grid-template-columns: 1fr; gap: 28px; }
  .cta-actions { flex-direction: column; width: 100%; max-width: 320px; } .cta-actions .btn { width: 100%; }
  .footer { grid-template-columns: 1fr; gap: 30px; padding: 50px 16px 110px; } .footer > small { grid-column: auto; }
  .chat-panel { width: 100%; inset: auto 0 0 0; height: 86svh; border-radius: 22px 22px 0 0; }
  .dock-wrap { right: 16px; bottom: 16px; } .dock-nudge { display: none; }
  .dock-btn { padding: 6px; } .dock-text { display: none; } .dock-orbit { inset: -10px; border-radius: 50%; }
  .welcome { right: 16px; bottom: 16px; }
  .form-row { grid-template-columns: 1fr; } .booking-modal { padding: 24px 20px; }
  .case-modal { padding: 30px 20px; } .case-hero { height: 220px; } .case-copy { grid-template-columns: 1fr; gap: 10px; } .case-metrics span { border-right: 0; border-bottom: 1px solid var(--border); }
  .tour-bar { flex-wrap: wrap; gap: 10px; } .tour-caption { flex-basis: calc(100% - 44px); } .tour-controls { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal, .entry-reveal, .hero-in, .split .w, .hero-title .w, .seq > *, .reveal-orb { opacity: 1 !important; transform: none; filter: none; }
  .reveal-line::before { transform: none; }
  .blob, .bg-grid { animation: none !important; }
}


/* ================= VOICE-FIRST ENTRY, DOCK MIC, VOICE BAR, MOBILE MENU ================= */
.entry-question { margin-bottom: 18px !important; }
.mic-hero { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 0 26px 0 8px; height: 64px; border-radius: 99px; border: 0; color: #fff; background: var(--grad); box-shadow: 0 14px 44px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); font-size: 16px; font-weight: 500; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.mic-hero:hover { transform: translateY(-2px) scale(1.02); }
.mic-hero .mic-ico { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.2); }
.mic-hero .mic-ico svg, .welcome-mic .mic-ico svg, .dock-mic svg, .vh-mic svg { width: 22px; height: 22px; fill: currentColor; overflow: visible; }
.mic-ring { display: none; }
.mic-hero .mic-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); animation: mic-ping 2.2s ease-out infinite; pointer-events: none; }
@keyframes mic-ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
.mic-hero.live, .say-btn.live { background: #ef4444; }
.mic-hero.live .mic-ico::after { border-color: #fff; animation-duration: 1s; }
.mic-hero .say-label { max-width: 230px; text-align: left; line-height: 1.25; }
.mic-hint { max-width: 420px; margin: 16px 0 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--muted); }
.mic-hint em { font-family: var(--sans); font-style: normal; color: var(--lilac); white-space: nowrap; letter-spacing: 0; }
.or-line { margin: 22px 0 14px !important; font-size: 12px !important; letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; width: min(320px, 80%); color: var(--faint, var(--muted)); }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.entry-foot { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.welcome-mic { display: inline-flex; align-items: center; gap: 8px; }
.welcome-mic .mic-ico { display: grid; place-items: center; }
.welcome-mic .mic-ico svg { width: 16px; height: 16px; }
.welcome-mic.live { background: #ef4444; }
.welcome-actions { flex-wrap: wrap; }

.dock-wrap { display: flex; align-items: center; gap: 10px; }
.dock-mic { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(22, 26, 35, 0.85); border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(20px); transition: transform 0.2s var(--ease), background 0.2s; }
.dock-mic:hover { transform: translateY(-2px); background: rgba(34, 40, 54, 0.95); }
.dock-mic.live { background: #ef4444; border-color: transparent; animation: ping-red 1.2s infinite; }
.dock-orbit { z-index: 0; }

.voice-hud { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(460px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; color: #fff; background: rgba(18, 21, 30, 0.92); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); animation: rise 0.35s var(--ease); }
.voice-hud[hidden] { display: none; }
.voice-hud .vh-text { flex: 1; min-width: 0; }
.voice-hud b { display: block; font-size: 9px; letter-spacing: 0.14em; color: #9283ff; font-weight: 600; }
.voice-hud #vh-text { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.voice-hud button { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; display: grid; place-items: center; }
.voice-hud .vh-mic { background: var(--violet); border-color: transparent; }
.voice-hud .vh-mic.live { background: #ef4444; }
.voice-hud .orb { animation: none; }
.voice-hud.listening .orb { animation: wake-pulse-pub 1s ease-in-out infinite; }
@keyframes wake-pulse-pub { 50% { transform: scale(1.2); } }
body.has-tour .voice-hud { bottom: 150px; }
.nav-focus { animation: nav-focus 2.2s ease-out; }
@keyframes nav-focus { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.6); } 100% { box-shadow: 0 0 0 38px rgba(124, 92, 255, 0); } }

.menu-btn { display: none; position: relative; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s var(--ease), top 0.25s var(--ease); }
.menu-btn span:nth-child(1) { top: 14px; } .menu-btn span:nth-child(2) { top: 21px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); } .menu-btn[aria-expanded="true"] span:nth-child(2) { top: 17px; transform: rotate(-45deg); }
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: 8px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); animation: rise 0.25s var(--ease); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a, .mobile-menu button { display: flex; align-items: center; min-height: 48px; padding: 0 6px; font-size: 16px; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; }
.mobile-menu > :last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .menu-btn { display: grid; }
  .nav-actions { gap: 4px; }
  .voice-hud { bottom: 92px; }
  .dock-mic { width: 52px; height: 52px; }
  .tour-caption p { max-height: 6.2em; overflow-y: auto; }
  .tour-bar { bottom: 10px; padding: 10px 12px; }
}
@media (max-width: 560px) {
  .entry-content { padding: 84px 18px 40px; }
  .entry-content .eyebrow { margin: 20px 0 4px; }
  .entry-orb .orb-lg { --s: 76px; }
  .entry-content h1 { font-size: clamp(34px, 11vw, 44px); }
  .entry-content > .entry-tagline { font-size: 18px; margin-bottom: 12px; }
  .entry-question { font-size: 18px !important; margin-bottom: 14px !important; }
  .entry-index { display: none; }
  .mic-hero { min-width: 250px; justify-content: flex-start; }
  .topic-btn { padding: 10px 13px; font-size: 14px; }
  .mic-hint { font-size: 13px !important; }
}
/* Touch screens: comfortable tap sizes, and 16px inputs so iOS doesn't zoom the page when one is focused. */
@media (pointer: coarse) {
  .footer-links a, .footer-links button, .ask-link, #sound-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .footer small a { display: inline-block; padding: 12px 6px; margin: -12px 0; }
  .tour-controls button { min-height: 40px; min-width: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .composer input, .booking-modal input, .booking-modal textarea, .booking-modal select { font-size: 16px; }
}
@media (min-width: 561px) and (max-height: 980px) {
  .entry-content { padding-top: 84px; padding-bottom: 34px; }
  .entry-content .eyebrow { margin-top: 22px; }
  .entry-orb .orb-lg { --s: 78px; }
}

/* Voice button icon: a sound wave. Bars breathe gently when idle and dance while listening. */
svg.wave rect { transform-box: fill-box; transform-origin: center; animation: wave-idle 2.6s ease-in-out infinite; }
svg.wave rect:nth-child(1) { animation-delay: -0.2s; } svg.wave rect:nth-child(2) { animation-delay: -0.7s; } svg.wave rect:nth-child(3) { animation-delay: -1.2s; } svg.wave rect:nth-child(4) { animation-delay: -1.7s; } svg.wave rect:nth-child(5) { animation-delay: -2.2s; }
@keyframes wave-idle { 0%, 100% { transform: scaleY(0.7); } 50% { transform: scaleY(1); } }
.live svg.wave rect, .listening svg.wave rect { animation: wave-live 0.55s ease-in-out infinite; }
.live svg.wave rect:nth-child(2), .listening svg.wave rect:nth-child(2) { animation-delay: -0.15s; } .live svg.wave rect:nth-child(3), .listening svg.wave rect:nth-child(3) { animation-delay: -0.3s; } .live svg.wave rect:nth-child(4), .listening svg.wave rect:nth-child(4) { animation-delay: -0.1s; } .live svg.wave rect:nth-child(5), .listening svg.wave rect:nth-child(5) { animation-delay: -0.4s; }
@keyframes wave-live { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) { svg.wave rect { animation: none !important; } }

/* Earlier roles & leadership (compact list under the experience timeline) */
.earlier { margin: 56px 0 8px 24px; }
.earlier-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.earlier-item { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.earlier-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.earlier-top strong { font-weight: 500; font-size: 15px; }
.earlier-top span { font: 11px var(--mono); letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.earlier-item em { display: block; margin: 4px 0 8px; font-family: var(--sans); font-style: normal; color: var(--lilac); font-size: 13px; letter-spacing: 0; }
.earlier-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.art-6 { background: linear-gradient(145deg, #2a2140, #11101a); }
@media (max-width: 860px) { .earlier { margin-left: 0; } .earlier-list { grid-template-columns: 1fr; } }

/* ================= HOME PAGE UPGRADE: wordmark, orbit rig, ask bar, trust strip ================= */
.wordmark { font-family: "Space Grotesk", var(--sans); font-size: 18px; font-weight: 500; letter-spacing: -0.055em; color: var(--text); white-space: nowrap; }
.wordmark b { color: var(--lilac); font-weight: 600; }
.brand:hover .wordmark b { color: var(--mint); transition: color 0.3s; }
.footer .wordmark { font-size: 22px; }

/* hero depth: a faded grid that follows the glow */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 72%); }
.hero > * { position: relative; }
.hero > .hero-glow { position: absolute; }
.hero > .scroll-cue { position: absolute; }

/* orbiting rings around the orb: they speed up and glow when Sofia listens or speaks */
.orbit-rig { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.orbit-track { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(83, 205, 255, 0.22); box-shadow: inset 0 0 12px rgba(62, 198, 255, 0.06), 0 0 12px rgba(62, 198, 255, 0.05); transition: border-color 0.5s, box-shadow 0.5s; }
.orbit-track::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: repeating-conic-gradient(from 10deg, rgba(100, 215, 255, 0.2) 0 1deg, transparent 1deg 13deg); -webkit-mask: radial-gradient(transparent 69%, #000 70% 76%, transparent 77%); mask: radial-gradient(transparent 69%, #000 70% 76%, transparent 77%); }
.orbit-track span { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #c5f5ff; box-shadow: 0 0 6px #fff, 0 0 18px #3ec6ff; }
.orbit-one { width: 162px; height: 162px; margin: -81px; animation: orbit-spin 9s linear infinite; }
.orbit-two { width: 196px; height: 196px; margin: -98px; border-style: dashed; animation: orbit-spin 15s linear infinite reverse; }
.orbit-two span { width: 8px; height: 8px; top: 30%; left: auto; right: -3px; background: #a492ff; box-shadow: 0 0 7px #fff, 0 0 20px #7c5cff; }
.orbit-three { width: 228px; height: 228px; margin: -114px; border-color: rgba(92, 255, 176, 0.14); animation: orbit-spin 23s linear infinite; }
.orbit-three span { width: 4px; height: 4px; top: auto; bottom: 15%; left: 8%; background: #79ffc3; box-shadow: 0 0 14px #5cffb0; }
body.agent-speaking .orbit-one, body.listening .orbit-one { animation-duration: 3s; } body.agent-speaking .orbit-two, body.listening .orbit-two { animation-duration: 5s; } body.agent-speaking .orbit-three, body.listening .orbit-three { animation-duration: 8s; }
body.agent-speaking .orbit-track, body.listening .orbit-track { border-color: rgba(92, 255, 176, 0.42); box-shadow: inset 0 0 18px rgba(92, 255, 176, 0.1), 0 0 26px rgba(92, 255, 176, 0.14); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orb-hero { z-index: 2; translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 7px); transition: translate 0.4s var(--ease), filter 0.2s; }
.hero-code { translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -9px); transition: translate 0.5s var(--ease); }

/* the ask bar: type or speak */
.hero-ask { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; width: min(600px, 100%); height: 60px; margin: 6px 0 18px; padding: 0 8px 0 20px; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(18px); box-shadow: 0 18px 60px var(--glow, rgba(72, 82, 255, 0.18)); transition: border-color 0.25s, box-shadow 0.25s; }
.hero-ask:focus-within { border-color: var(--violet); box-shadow: 0 18px 70px rgba(124, 92, 255, 0.28), 0 0 0 4px rgba(124, 92, 255, 0.12); }
.ask-spark { flex: none; color: var(--lilac); font-size: 16px; }
.hero-ask input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 16px; color: var(--text); }
.hero-ask input::placeholder { color: var(--muted); }
.ask-wave, .ask-send { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: transparent; color: var(--text); transition: transform 0.2s var(--ease), background 0.2s; }
.ask-wave svg { width: 20px; height: 20px; fill: currentColor; overflow: visible; }
.ask-wave:hover { background: var(--elevated); }
.ask-wave.live { background: #ef4444; border-color: transparent; color: #fff; }
.ask-send { background: var(--grad); border: 0; color: #fff; font-size: 18px; }
.ask-send:hover { transform: translateY(-1px) scale(1.05); }
.hero-actions { margin-top: 0; }

/* trust strip */
.proof { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; background: color-mix(in srgb, var(--surface) 40%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.proof[hidden] { display: none; }
.proof-track { display: flex; width: max-content; animation: proof-scroll 48s linear infinite; }
.proof:hover .proof-track { animation-play-state: paused; }
.proof-row { display: flex; flex: none; gap: 14px; padding-right: 14px; }
.proof-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 99px; border: 1px solid var(--border); font-size: 14px; color: var(--text); white-space: nowrap; }
.proof-item i { font: 600 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; padding: 3px 7px; border-radius: 99px; color: var(--lilac); background: color-mix(in srgb, var(--violet) 14%, transparent); }
@keyframes proof-scroll { to { transform: translateX(-50%); } }

@media (max-width: 860px) {
  .orbit-rig { transform: scale(0.8); }
  .hero-ask { height: 56px; padding-left: 16px; }
  .hero-actions { flex-direction: column; }
  .proof { padding: 14px 0; } .proof-item { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-track, .proof-track { animation: none !important; }
  .proof { -webkit-mask-image: none; mask-image: none; } .proof-track { width: auto; flex-wrap: wrap; justify-content: center; } .proof-row[aria-hidden="true"] { display: none; }
  .orb-hero, .hero-code { translate: none; }
}

/* breathing room for the rings above and below the orb */
.hero .availability { margin-bottom: 52px; }
.hero .eyebrow { margin-top: 46px; }
.hero { padding-bottom: 76px; }
@media (max-width: 860px) { .hero .availability { margin-bottom: 40px; } .hero .eyebrow { margin-top: 38px; } }

@media (max-width: 860px) {
  .hero { padding-top: 96px; }
  .hero .eyebrow { display: none; }
  .hero .availability { margin-bottom: 34px; }
  .hero-sub { font-size: 15px; margin-bottom: 14px; }
}

/* Timeline: a quiet dot per role instead of an icon */
.role-card::before { content: ""; position: absolute; left: -5px; top: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 14%, transparent); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.role-card:hover::before, .role-card.is-highlighted::before { transform: scale(1.35); box-shadow: 0 0 0 7px color-mix(in srgb, var(--violet) 18%, transparent), 0 0 18px var(--violet); }
.ask-link { transition: transform 0.3s var(--ease), color 0.2s; } .ask-link:hover { transform: translateX(3px); text-decoration: none; }


/* ================= MOTION LAYER (fx.js) ================= */
html.fx [data-fx] { translate: 0 var(--fxy, 0px); scale: var(--fxs, 1); }
html.fx [data-fx]:not(.reveal) { opacity: var(--fxo, 1); }
html.fx .hero { opacity: calc(1 - var(--hp, 0) * 0.85); scale: calc(1 - var(--hp, 0) * 0.05); translate: 0 calc(var(--hp, 0) * 50px); transform-origin: 50% 30%; }
body.has-tour [data-fx], body.has-tour .hero { translate: none !important; scale: none !important; opacity: 1 !important; }
html.fx .nav { transition: transform 0.6s var(--ease), background-color 0.3s, border-color 0.3s; }
.nav.nav-away { transform: translateY(-110%); }
.scroll-progress { position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--blue), var(--mint)); box-shadow: 0 0 12px rgba(124, 92, 255, 0.5); pointer-events: none; }
.metric, .cert, .earlier-item, .edu-item { position: relative; overflow: hidden; }
.spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(124, 92, 255, 0.17), transparent 62%); }
[data-spot]:hover > .spot { opacity: 1; }
[data-mag] { transition-property: translate, transform, box-shadow, background-color, border-color, color, opacity; transition-duration: 0.35s; transition-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { html.fx [data-fx], html.fx .hero { translate: none; scale: none; } }

/* No overlaps: the rings need room above the label, and the greeting sits inside the hero flow */
.hero .eyebrow { margin-top: 68px; }
.hero-greet { margin: 0 0 12px; font-size: 15px; color: var(--lilac); }
.hero-greet::before { content: "✦ "; }
.hero-greet.in { animation: entry-reveal 0.8s var(--ease) both; }
.welcome { display: none !important; }
@media (min-width: 861px) and (max-height: 820px) {
  .hero { padding-top: 104px; }
  .orb-hero { --s: 100px; }
  .orbit-rig { transform: scale(0.82); }
  .hero .eyebrow { margin-top: 50px; }
  .hero-title { font-size: clamp(40px, 5.2vw, 68px); }
  .hero-sub { margin-bottom: 12px; }
}

/* The floating dock waits until the hero ask bar has scrolled away: the two never overlap */
.dock-wrap { transition: opacity 0.35s, transform 0.45s var(--ease); }
body.ask-visible .dock-wrap { opacity: 0; transform: translateY(24px) scale(0.96); pointer-events: none; }

/* ===== Phone declutter: long lists start short, decorative extras go ===== */
.m-more { display: none; }
@media (max-width: 860px) {
  .m-more { display: inline-flex; margin-top: 10px; padding: 6px 0; background: none; border: 0; color: var(--violet); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .role-card:not(.m-open) .role-main li:nth-child(n+3) { display: none; }
  .role-card .tags span:nth-child(n+5) { display: none; }
  .earlier-item { cursor: pointer; }
  .earlier-item p { display: none; }
  .earlier-item.m-open p { display: block; }
  .earlier-item .earlier-top::after { content: "+"; margin-left: auto; opacity: .6; }
  .earlier-item.m-open .earlier-top::after { content: "–"; }
  #certs:not(.m-open) > :nth-child(n+4) { display: none; }
  #terminal .term-line .d, #terminal > p:not(.success):last-child, .terminal-head small { display: none; }
  .scroll-cue, #hero-suggestions, #sound-toggle { display: none !important; }
}
@media (max-width: 860px) {
  .role-card .role-date { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .role-card h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
  .role-card .role-main li { font-size: 14.5px; line-height: 1.55; margin-bottom: 6px; }
  .role-card .role-main ul { margin-bottom: 0; }
  .role-card .m-more { margin: 2px 0 8px; }
  .role-card .ask-link { margin-top: 4px; }
  .project-card .project-art { aspect-ratio: 16 / 8; overflow: hidden; }
  .project-card .project-art img { width: 100%; height: 100%; object-fit: cover; }
  .project-card .project-info h3 { font-size: 20px; line-height: 1.3; }
  .project-card > .tags { display: none; }
}

/* ===== Layout refresh: rectangular project cards, aligned skills and certifications ===== */
/* Selected work: equal landscape rectangles in a clean grid (3 / 2 / 1 columns). */
.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.project-card, .project-card.featured { grid-row: auto; grid-column: auto; padding: 10px; }
.project-card .project-art, .project-card.featured .project-art { flex: none; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.project-card .project-art img, .project-card.featured .project-art img { padding: 0; object-fit: cover; }
.project-info { flex: 1; padding: 16px 6px 10px; }
.project-info h3 { font-size: 17px; line-height: 1.3; }
@media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-card.featured { grid-column: auto; } .project-card.featured .project-art { height: auto; } }
@media (max-width: 640px) { .project-grid { grid-template-columns: 1fr; } }

/* Tools of the trade: heading row, four equal skill cards, then the certifications grid. */
.skills-section { display: block; }
.skills-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 400px; }
.skills-side p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.skill-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.skill-groups > div { padding: 20px 18px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 62%, transparent); }
.skill-groups h3 { margin: 0 0 14px; }
.skill-tags span { padding: 8px 11px; font-size: 12.5px; }
.certs-wrap { margin-top: 48px; }
.certs { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cert { min-height: 76px; }
.cert-badge.logo { width: 44px; height: 44px; padding: 7px; background: #fff; border-color: rgba(0, 0, 0, 0.06); overflow: hidden; }
.cert-badge.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cert-badge.logo.fit-left img { object-fit: cover; object-position: 0 50%; }
#chat-status:empty { display: none; }
@media (max-width: 1100px) { .skill-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .skills-section .section-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .skills-side { max-width: none; }
}
@media (max-width: 560px) { .skill-groups { grid-template-columns: 1fr; } .certs { grid-template-columns: 1fr; } }