/* Roundcraft (placeholder name) design system. "On air": the product is a recorded interview, so the brand looks like
   one. Near-black stage, warm white text, one red for REC / time / the wrong idea, a colour per level (junior/mid grey,
   senior blue, staff amber). Geist for everything, Geist Mono for timecodes, Virgil (Excalidraw's hand) for anything
   that lives on the whiteboard. Mobile first: most visitors arrive from Instagram on a phone. */
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-700.woff2') format('woff2'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono-500.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Virgil'; src: url('/assets/fonts/Virgil.woff2') format('woff2'); font-display: swap; }
:root {
  --bg: #0e0f12; --bg2: #13151a; --card: #181b21; --card2: #1f232a; --line: #2a2f37; --line2: #363c46;
  --text: #f2f1ec; --soft: #a9adb4; --faint: #6f747d;
  --red: #ff4d2e; --red-bg: rgba(255,77,46,0.12);
  --mid: #9aa0aa; --senior: #6c95ff; --staff: #ffb020; --staff-bg: rgba(255,176,32,0.12); --senior-bg: rgba(108,149,255,0.12);
  --sans: 'Geist', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; --hand: 'Virgil', 'Geist', sans-serif;
  --r: 14px; --safe: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); }
.eyebrow { font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.rec { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: 0.35; } }
.lvl-mid { color: var(--mid); } .lvl-senior { color: var(--senior); } .lvl-staff { color: var(--staff); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--mono); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--soft); white-space: nowrap; }
.chip.staff { color: var(--staff); border-color: rgba(255,176,32,0.45); background: var(--staff-bg); }
.chip.senior { color: var(--senior); border-color: rgba(108,149,255,0.45); background: var(--senior-bg); }
.chip.mid { color: var(--mid); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 12px; border: 0; cursor: pointer;
  font: 600 16px var(--sans); text-decoration: none; background: var(--text); color: var(--bg); transition: transform .12s ease, opacity .12s; }
.btn:active { transform: scale(0.98); } .btn.full { width: 100%; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line2); }
.btn.red { background: var(--red); color: #fff; }
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }