/* Radius OS - Platform tab-switcher (contrario.ai smooth-switch mechanism)
   Tabs drive a FIXED stage; scenes are stacked and cross-dissolve in place
   (opacity + a touch of blur/translate) while the stage height morphs
   smoothly. Nothing slides, nothing reflows: it feels like the same page,
   only the content changes. Loads after styles.css. */

body.platform-page .nav { background: rgba(244, 247, 244, 0.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line-soft); }
body.platform-page .nav__logo { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
body.platform-page .nav__logo b { color: transparent; -webkit-text-fill-color: transparent; }
body.platform-page .nav__link { color: var(--ink); }
body.platform-page .nav__link:hover, body.platform-page .nav__link.active { background: rgba(20, 33, 63, 0.05); }
body.platform-page .nav__login { color: var(--body); }
body.platform-page .nav .btn--sm { background: var(--grad-blue); color: #fff; }
body.platform-page .nav .btn--sm:hover { background: var(--grad-emerald); color: var(--ink); }

/* ============ SECTION ============ */
.tsw { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: clamp(96px, 13vh, 140px) 0 clamp(72px, 10vh, 110px); position: relative; overflow: hidden; }
.tsw > .wrap { width: 100%; }
@media (max-width: 760px) { .tsw { min-height: auto; } }
.tsw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 42% at 50% 0%, rgba(51, 84, 158, 0.10), transparent 70%); }
.tsw__intro { text-align: center; max-width: 44rem; margin: 0 auto clamp(30px, 4vh, 44px); }
.tsw__intro h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 680; letter-spacing: -0.026em; line-height: 1.06; color: var(--ink); text-wrap: balance; }
.tsw__intro p { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--body); }

/* ============ TAB ROW (sliding indicator) ============ */
.tsw__tabs { position: relative; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; width: fit-content; margin: 0 auto clamp(28px, 4vh, 40px); padding: 5px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 99px; box-shadow: var(--shadow-soft); }
.tsw__ind { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 99px; background: linear-gradient(150deg, var(--cobalt), var(--cobalt-dp)); box-shadow: 0 8px 20px -10px rgba(51, 84, 158, 0.6); transition: transform .46s var(--ease), width .46s var(--ease); z-index: 0; }
.tsw__tab { position: relative; z-index: 1; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--body); background: none; border: none; cursor: pointer; padding: 11px 22px; border-radius: 99px; white-space: nowrap; transition: color .3s var(--ease); }
.tsw__tab:hover { color: var(--ink); }
.tsw__tab.on { color: #fff; }

/* ============ FIXED STAGE + STACKED SCENES ============ */
.tsw__stage { position: relative; height: 520px; transition: height .58s var(--ease); }
.tsw__scene { position: absolute; inset: 0; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.tsw__scene.on { opacity: 1; pointer-events: auto; }
/* the incoming content settles in as a downward wave: each piece drops from
   just above into place, staggered top-to-bottom (delays set in JS by y-position). */
.tsw-rise { opacity: 0; transform: translateY(-20px); transition: opacity .5s var(--ease), transform .62s cubic-bezier(.22, 1, .36, 1); }
.tsw__scene.on .tsw-rise { opacity: 1; transform: none; }

.tsw__copy { max-width: 30rem; }
.tsw__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 640; color: var(--cobalt-dp); margin-bottom: 14px; }
.tsw__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); }
.tsw__copy h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 680; letter-spacing: -0.022em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
.tsw__copy p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--body); }
.tsw__copy .btn { margin-top: 26px; }

/* ============ PRODUCT MOCK PANELS (per scene) ============ */
.tsw__panel { position: relative; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: 0 50px 90px -50px rgba(20, 33, 63, 0.4); overflow: hidden; }
.tsw__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 100% 0%, rgba(51, 84, 158, 0.06), transparent 60%); }
.tsw__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600; color: var(--mute); }
.tsw__bar .dots { display: inline-flex; gap: 5px; }
.tsw__bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(12, 22, 54, 0.14); }
.tsw__bar .tag { margin-left: auto; font-size: 10.5px; font-weight: 640; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); background: var(--paper-2); padding: 3px 9px; border-radius: 99px; }
.tsw__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* rows / candidate cards */
.tw-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line-soft); background: var(--surface); }
.tw-ava { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 680; color: #fff; }
.tw-b b { font-size: 14px; font-weight: 650; color: var(--ink); display: block; }
.tw-b span { font-size: 12px; color: var(--body); }
.tw-pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
.tw-pill--src { color: var(--emerald-dp); background: rgba(47, 107, 235, 0.12); }
.tw-pill--ok { color: var(--cobalt-dp); background: rgba(51, 84, 158, 0.12); }

/* screener: voice + transcript */
.tw-voice { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: linear-gradient(150deg, #12233F, #0B1440); color: #fff; }
.tw-voice__play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; flex: none; }
.tw-voice__play .icon { width: 18px; height: 18px; color: #fff; }
.tw-wave { display: flex; align-items: center; gap: 3px; height: 30px; flex: 1; }
.tw-wave i { flex: 1; background: rgba(255, 255, 255, 0.5); border-radius: 2px; }
.tw-voice__t { font-size: 12px; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.tw-line { display: flex; gap: 10px; align-items: baseline; }
.tw-line b { font-size: 12px; font-weight: 700; color: var(--cobalt); flex: none; }
.tw-line span { font-size: 13.5px; line-height: 1.5; color: var(--body); }

/* ats: mini kanban */
.tw-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tw-col { background: var(--paper); border-radius: 11px; padding: 8px; }
.tw-col__h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); margin: 2px 4px 8px; display: flex; justify-content: space-between; }
.tw-mini { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; }
.tw-mini b { font-size: 11.5px; font-weight: 640; color: var(--ink); display: block; }
.tw-mini span { font-size: 10px; color: var(--body); }
.tw-col--signed .tw-mini { border-color: rgba(47, 107, 235, 0.4); }

/* passport card */
.tw-pass { padding: 20px; }
.tw-pass__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.tw-pass__logo { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(150deg, var(--cobalt), var(--emerald)); color: #fff; display: flex; align-items: center; justify-content: center; }
.tw-pass__logo .icon { width: 20px; height: 20px; }
.tw-pass__head b { font-size: 15px; font-weight: 660; color: var(--ink); display: block; }
.tw-pass__head span { font-size: 12.5px; color: var(--body); }
.tw-check { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.tw-check:last-child { border-bottom: none; }
.tw-check .icon { width: 20px; height: 20px; color: #fff; background: var(--emerald); border-radius: 50%; padding: 4px; flex: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .tsw__scene { grid-template-columns: 1fr; gap: 26px; align-content: start; }
  .tsw__stage { height: auto; }
  .tsw__scene { position: relative; inset: auto; display: none; }
  .tsw__scene.on { display: grid; }
  .tsw__copy { max-width: none; }
}
@media (max-width: 680px) {
  .tsw { padding-top: calc(var(--nav-h, 64px) + 52px); }
  .tsw__tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  .tsw__ind { display: none; }
  .tsw__tab { min-height: 46px; padding: 10px 8px; border-radius: 13px; white-space: normal; line-height: 1.2; }
  .tsw__tab.on { color: #fff; background: linear-gradient(150deg, var(--cobalt), var(--cobalt-dp)); box-shadow: 0 8px 20px -10px rgba(51,84,158,.6); }
  .tsw__scene { gap: 22px; }
  .tsw__panel { border-radius: 16px; }
  .tsw__bar { min-width: 0; padding: 11px 12px; }
  .tsw__bar .tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tsw__body { padding: 12px; }
  .tw-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 11px; }
  .tw-pill { grid-column: 2; justify-self: start; }
  .tw-b { min-width: 0; }
  .tw-b span { display: block; overflow-wrap: anywhere; }
  .tw-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-voice { gap: 9px; padding: 12px; }
  .tw-voice__play { width: 38px; height: 38px; }
  .tw-line { align-items: flex-start; }
  .tw-pass { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tsw__scene { transition: opacity .2s linear; }
  .tsw-rise { transition: opacity .2s linear; transform: none; }
  .tsw__scene.on .tsw-rise { transform: none; }
  .tsw__stage, .tsw__ind { transition: none; }
}