/* ==========================================================================
   FTMO Hiring Sprint – styles (dark FTMO V2 design, Figma "Hiring Sprint – FTMO V2")
   Plain CSS, no build. Sections follow index.html top to bottom.
   ========================================================================== */

/* The hidden attribute always wins over component display rules (e.g. .apply-form { display: grid }) */
[hidden] { display: none !important; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #09090b;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .08);
  --surface-3: rgba(255, 255, 255, .12);
  --border: rgba(255, 255, 255, .08);
  --border-2: rgba(255, 255, 255, .14);
  --text: #fff;
  --text-2: rgba(255, 255, 255, .72);
  --text-3: rgba(255, 255, 255, .48);
  --blue-300: #7cbcff;
  --blue-400: #3d9bff;
  --blue-500: #0781fe;
  --blue-600: #0a5fe8;
  --blue-700: #06307f;
  --green: #22c55e;
  --radius: 16px;
  --radius-lg: 24px;
  --container: 1224px;
  --gutter: 24px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--blue-500); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 16px; }
.placeholder { background: rgba(250, 204, 21, .14); color: #facc15; border: 1px dashed rgba(250, 204, 21, .6); padding: 0 4px; border-radius: 4px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------- Type ---------- */
.t-display { font-size: clamp(56px, 7vw, 88px); line-height: 1; font-weight: 600; letter-spacing: -.02em; }
h1, .h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
h2, .h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }
.h3 { font-size: 36px; line-height: 1.2; font-weight: 600; }
.h4 { font-size: 30px; line-height: 1.25; font-weight: 600; }
.h5 { font-size: 24px; line-height: 1.3; font-weight: 600; }
.h6 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.lead { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.muted { color: var(--text-2); }
.small { font-size: 14px; }

/* ---------- Layout bits ---------- */
.section { padding: 120px 0; position: relative; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; display: grid; gap: 16px; justify-items: center; }
.sep { height: 1px; border: 0; margin: 0 auto; max-width: 1224px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 30%, rgba(255,255,255,.14) 70%, transparent); }

/* Card: FTMO tile (4 % white, 8 % border, gradient line on top) */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: inset 0 -28px 20px -20px rgba(255,255,255,.02);
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px;
  border-radius: 8px; border: 1px solid transparent; font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn--primary { background: var(--blue-500); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.3); }
.btn--primary:hover { background: #2a92ff; }
.btn--secondary { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.22); color: #fff; }
.btn--secondary:hover { background: var(--surface-2); border-color: rgba(255,255,255,.36); }
.btn--white { background: #fff; color: #09090b; }
.btn--white:hover { background: #e9edf5; }
.btn--lg { height: 56px; padding: 0 24px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Pills, chips, badges ---------- */
.live-pill {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 999px;
  /* Figma 20135:1028: black 10 % fill, white 12 % 1px border, no glow; dev note: border gradient rotates (6 s loop) */
  position: relative; background: rgba(0,0,0,.10); border: 1px solid rgba(255,255,255,.12); text-decoration: none;
  font-size: 14px; line-height: 20px; color: #fff; transition: border-color .2s;
}
.live-pill::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--pill-a, 0deg), transparent 0 70%, rgba(255,255,255,.45) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pill-spin 6s linear infinite; }
@property --pill-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pill-spin { to { --pill-a: 360deg; } }
.live-pill:hover { border-color: rgba(255,255,255,.2); }
.live-pill b { font-weight: 600; }
.live-pill span { color: rgba(255,255,255,.72); font-weight: 500; margin-right: 4px; }
.live-dot { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(0,201,81,.25); display: grid; place-items: center; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #00c951; box-shadow: 0 0 0 3px rgba(0,201,81,.5); position: relative; z-index: 1; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,201,81,.35); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-pill::before { animation: none; } }
.live-pill .arrow-btn { width: 28px; height: 28px; border-radius: 50%; background: #0781fe; display: grid; place-items: center; transition: transform .2s var(--ease); }
.live-pill:hover .arrow-btn { transform: translateX(2px); }
.live-pill .arrow-btn .ic { width: 16px; height: 16px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 14px; color: var(--text-2); font-weight: 500; }
.chip .ic { width: 20px; height: 20px; color: var(--blue-400); }
.time-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 600; white-space: nowrap; }
.time-pill .ic { width: 14px; height: 14px; }
.count-badge { min-width: 24px; height: 20px; padding: 0 8px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); transition: background .25s, border-color .25s, backdrop-filter .25s; border-bottom: 1px solid transparent; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(9,9,11,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity .25s; }
.site-header.is-glass { border-bottom-color: var(--border); }
.site-header.is-glass::before { opacity: 1; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { height: 32px; width: auto; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav-list { display: flex; gap: 32px; }
.nav-list a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--text-2); transition: color .2s; }
.nav-list a:hover { color: #fff; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.lang-switch:hover { background: var(--surface-2); }
.lang-switch .flag { width: 16px; height: 16px; border-radius: 50%; }
.nav-cta { height: 40px; font-size: 14px; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.nav-toggle-bar { display: block; height: 2px; background: #fff; border-radius: 2px; margin: 5px 0; transition: transform .2s, opacity .2s; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--header-h) + 96px) 0 72px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 760px; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 0%, rgba(7,129,254,.45), rgba(7,129,254,.08) 55%, transparent 75%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 48px; min-height: 420px; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-sub { font-size: 18px; color: var(--text-2); max-width: 560px; }
.hero-note { font-size: 14px; color: var(--text-3); }

/* Lanyard: static Figma render with a CSS swing (React Bits physics version can replace it later) */
.lanyard { --s: 1.15; align-self: start; justify-self: center; margin-top: calc(-1 * (var(--header-h) + 210px)); animation: swing 6s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-2deg); } }
.hero .lanyard { animation-name: drop-in, swing; animation-duration: .9s, 6s; animation-timing-function: var(--ease), ease-in-out; animation-iteration-count: 1, infinite; animation-delay: 0s, .9s; }
@keyframes drop-in { 0% { transform: translateY(-120%) rotate(-12deg); } 70% { transform: translateY(4%) rotate(-3deg); } 100% { transform: translateY(0) rotate(-5deg); } }

/* Coverflow (autoplay, see main.js) */
.coverflow { position: relative; height: 290px; margin-top: 64px; perspective: 1100px; }
.cf-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.cf-item {
  position: absolute; left: 50%; top: 0; width: 360px; height: 230px; margin-left: -180px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 30px 60px rgba(0,0,0,.55); background: #111;
  transition: transform .8s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(255,255,255,.14));
}
.cf-item img { width: 100%; height: 100%; object-fit: cover; }
.coverflow::before, .coverflow::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 5; pointer-events: none; }
.coverflow::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.coverflow::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

/* ---------- Awards marquee ---------- */
.awards { padding: 48px 0; overflow: hidden; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 72px; padding-right: 72px; flex: none; animation: marquee 36s linear infinite; }
.marquee-track img { height: 32px; width: auto; opacity: .7; filter: grayscale(1) brightness(1.6); }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Trading powerhouse ---------- */
.tp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 48px; align-items: start; }
.tp-head p + p { margin-top: 16px; }
.tp-video { position: relative; display: block; border-radius: 40px; overflow: hidden; aspect-ratio: 1224 / 640; text-decoration: none; border: 1px solid var(--border); }
.tp-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tp-video:hover > img { transform: scale(1.03); }
.tp-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,9,11,.1) 30%, rgba(9,9,11,.85)); }
.tp-chip { position: absolute; left: 32px; top: 32px; z-index: 2; background: rgba(9,9,11,.6); backdrop-filter: blur(8px); }
.tp-play { position: absolute; left: 50%; top: 45%; z-index: 2; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--blue-500); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(7,129,254,.2), 0 20px 50px rgba(7,129,254,.5); transition: transform .3s var(--ease); }
.tp-video:hover .tp-play { transform: scale(1.06); }
.tp-play .ic { width: 32px; height: 32px; margin-left: 4px; }
.tp-bottom { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.tp-quote { max-width: 620px; }
.tp-quote p { font-size: 24px; line-height: 1.35; font-weight: 600; }
.tp-quote footer { margin-top: 12px; color: var(--text-2); font-size: 14px; }
.tp-watch { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #09090b; border-radius: 999px; padding: 6px 18px 6px 6px; font-weight: 600; font-size: 14px; flex: none; }
.tp-watch img { width: 44px; height: 32px; border-radius: 999px; object-fit: cover; }

/* ---------- Builders ---------- */
.builders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.builder-card { padding: 40px; display: grid; gap: 12px; align-content: start; }
.builder-card .fancy { width: 88px; height: 88px; margin: -12px 0 12px -12px; }
.builder-card p { color: var(--text-2); }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; min-height: 302px; padding: 32px; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.step--wide { grid-column: span 2; min-height: 340px; }
.steps-row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 24px; }
.steps-row2 .step { min-height: 340px; }
.step-top { display: flex; justify-content: space-between; align-items: flex-start; }
.step-num { font-size: 60px; line-height: 1; font-weight: 600; color: rgba(255,255,255,.5); }
.step-when { position: absolute; right: 32px; top: 68px; font-size: 14px; color: var(--text-2); text-align: right; }
.step-body { position: absolute; left: 32px; right: 32px; top: 136px; display: grid; gap: 4px; }
.step-body .h5 { font-size: 24px; }
.step-body p { color: var(--text-2); font-size: 14px; line-height: 1.45; max-width: 520px; }
.step-tags { position: absolute; left: 32px; right: 32px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.step-tags li { padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 600; }
.step-arrow { position: absolute; z-index: 3; right: -36px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.step-arrow .ic { width: 20px; height: 20px; }
.step--light { color: #09090b; }
.step--light .step-num { color: rgba(9,9,11,.85); }
.step--light .step-when, .step--light .step-body p { color: rgba(9,9,11,.64); }
.step--light .time-pill { background: rgba(9,9,11,.06); }

/* Your time */
.time-card { margin-top: 32px; padding: 40px; display: grid; gap: 24px; }
.time-total { display: grid; gap: 16px; justify-items: start; }
.time-caption { font-size: 14px; color: var(--text-2); }
.time-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.time-tile { display: grid; gap: 16px; padding: 16px; border-radius: 12px; background: var(--surface-2); }
.time-tile-head { display: flex; align-items: center; gap: 16px; font-weight: 500; }
.time-tile-head .ic { width: 20px; height: 20px; }
.time-tile-val { font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--text-2); }
.neon { font-size: 88px; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: #8fe9ff;
  background: linear-gradient(200deg, #24e2ff, #0ac6ff 58%, #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 9px rgba(7,129,254,.9)) drop-shadow(0 0 22px rgba(7,129,254,.7)); }
.time-rows { display: grid; gap: 8px; }
.detail-row { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--surface-2); }
.detail-row .ic { width: 20px; height: 20px; }
.detail-row .num { color: var(--blue-400); font-size: 12px; font-weight: 600; }
.detail-row .name { flex: 1; font-weight: 500; }
.detail-row .time { font-size: 20px; font-weight: 600; }

/* ---------- Open roles ---------- */
.roles-layout { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 48px; align-items: start; }
.roles-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 24px; }
.roles-lanyard { height: 300px; overflow: hidden; position: relative; margin-top: -24px; }
.roles-lanyard .ly.ly { --s: .6; position: absolute; left: 24px; bottom: 12px; animation: swing 7s ease-in-out infinite; }
.dept-nav { display: grid; }
.dept-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--text-2); font-weight: 500; font-size: 15px; transition: background .2s, color .2s; }
.dept-link:hover { background: var(--surface); color: #fff; }
.dept-link .ic { width: 24px; height: 24px; }
.dept-link .label { flex: 1; }
.dept-link[aria-current="true"] { color: #fff; font-weight: 600; }
.dept-link[aria-current="true"] .count-badge { background: var(--blue-500); color: #fff; }
.role-groups { display: grid; gap: 48px; }
.role-group { display: grid; gap: 12px; scroll-margin-top: calc(var(--header-h) + 24px); }
.role-group-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 4px; }
.role-group-head .count { color: var(--text-3); font-weight: 500; }
.role { display: flex; align-items: center; gap: 24px; padding: 24px 32px; }
.role:hover { border-color: var(--border-2); }
.team-icon { width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(61,155,255,.12); color: var(--blue-400); }
.team-icon .ic { width: 28px; height: 28px; }
.role-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.role-title { font-size: 20px; line-height: 1.4; font-weight: 600; }
.role-count { margin-left: 8px; font-size: 12px; color: var(--text-3); font-weight: 500; }
.role-desc { color: var(--text-2); font-size: 14px; }
.role-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.role-meta .employer { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.role-meta .employer img { height: 12px; width: auto; }
.role-meta .loc { display: inline-flex; align-items: center; gap: 4px; }
.role-meta .loc .ic { width: 14px; height: 14px; }
.role-loading, .role-fallback { color: var(--text-2); }
.referral { margin-top: 48px; padding: 40px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: linear-gradient(120deg, #0781fe, #0a5fe8 55%, #06307f); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.referral p { color: rgba(255,255,255,.85); margin-top: 6px; }

/* ---------- Why join ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card { position: relative; height: 493px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); display: flex; align-items: flex-end; }
.why-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.why-card:hover > img { transform: scale(1.04); }
.why-body { position: relative; width: 100%; padding: 32px; display: grid; gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(9,9,11,.62) 30%, rgba(9,9,11,.92)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%); mask-image: linear-gradient(180deg, transparent, #000 28%); padding-top: 72px; }
.why-body .ic { width: 28px; height: 28px; color: var(--blue-400); }
.why-body p { color: var(--text-2); font-size: 14px; }

/* ---------- Rated / values ---------- */
.rings { display: flex; justify-content: center; gap: 40px; margin-top: 8px; }
.ring { position: relative; width: 120px; display: grid; justify-items: center; gap: 12px; }
.ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: rgba(255,255,255,.08); }
.ring-fill { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 * (1 - var(--p) / 100)); transition: stroke-dashoffset 1.4s var(--ease); }
.js .ring:not(.is-visible) .ring-fill { stroke-dashoffset: 326.7; }
.ring-num { position: absolute; top: 40px; font-size: 24px; font-weight: 600; }
.ring-label { font-size: 14px; color: var(--text-2); }
.atmo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-2); font-size: 14px; margin-top: 8px; }
.atmo-link img { height: 24px; width: auto; }
.atmo-link:hover { color: #fff; }

.photo-block { position: relative; margin-top: 24px; border-radius: 32px; overflow: hidden; aspect-ratio: 1224 / 760; border: 1px solid var(--border); }
.photo-block > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-block::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, transparent, rgba(9,9,11,.92)); }
.reviews { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { padding: 24px; border-radius: var(--radius); background: rgba(9,9,11,.88); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.35); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.review .ic { width: 24px; height: 24px; color: var(--blue-500); }
.review blockquote p { font-size: 16px; font-weight: 500; line-height: 1.5; margin-top: 12px; }
.review figcaption { font-size: 12px; color: var(--text-3); }

.values-head { margin: 56px 0 24px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { padding: 24px 24px 32px; display: grid; gap: 12px; align-content: start; }
.value-card .fancy { width: 64px; height: 64px; }
.value-card p { color: var(--text-2); font-size: 14px; }
.perks { margin-top: 24px; padding: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.perks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.perks .ic { width: 16px; height: 16px; color: var(--blue-400); }

/* ---------- Life in FTMO ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; }
.mosaic-tile { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-tile--wide { grid-column: span 2; grid-row: span 2; }
.location { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 16px; }
.office-banner { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); min-height: 340px; }
.office-banner img { width: 100%; height: 100%; object-fit: cover; }
.office-card { position: relative; overflow: hidden; min-height: 340px; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; }
.office-card > img.map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.office-text { position: relative; display: grid; gap: 8px; }
.office-text .ic { width: 32px; height: 32px; margin-bottom: 8px; }
.office-text p { color: var(--text-2); }

/* ---------- FAQ ---------- */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.faq-item { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { width: 20px; height: 20px; color: var(--text-2); transition: transform .25s var(--ease); }
.faq-item[open] summary .ic { transform: rotate(180deg); }
.faq-item p { padding: 0 24px 24px; color: var(--text-2); font-size: 15px; }
.faq-item a { color: var(--blue-400); }

/* ---------- Apply ---------- */
.apply-panel { position: relative; overflow: hidden; border-radius: 32px; border: 1px solid var(--border); background: var(--bg); padding: 88px 72px; display: grid; grid-template-columns: 1fr 480px; gap: 64px; align-items: center; }
.apply-panel::before { content: ""; position: absolute; left: 50%; bottom: -380px; width: 1500px; height: 700px; margin-left: -750px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7,115,255,.75), rgba(5,77,217,.35) 45%, transparent); filter: blur(30px); }
.apply-copy { position: relative; display: grid; gap: 20px; justify-items: start; }
.apply-copy p { font-size: 18px; }
.form-card { min-width: 0; position: relative; padding: 32px; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--blue-500); box-shadow: 0 20px 60px rgba(7,129,254,.25); display: grid; gap: 24px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; color: var(--text-2); }
.field select { width: 100%; min-width: 0; height: 48px; border-radius: 8px; padding: 0 44px 0 16px; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M27.1 13.1L17.1 23.1C16.5 23.7 15.5 23.7 14.9 23.1L4.9 13.1C4.3 12.5 4.3 11.5 4.9 10.9C5.5 10.3 6.5 10.3 7.1 10.9L16 19.9L24.9 10.9C25.5 10.3 26.5 10.3 27.1 10.9C27.7 11.5 27.7 12.5 27.1 13.1Z'/%3E%3C/svg%3E") no-repeat right 16px center / 16px; border: 1px solid var(--border); appearance: none; cursor: pointer; }
.field select option { background: #18181b; }
.apply-note { font-size: 14px; color: var(--text-2); }
.apply-note a { color: var(--blue-400); }
.apply-note .btn { width: 100%; }

/* ---------- Final CTA band ---------- */
.cta-band { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; border-top: 1px solid var(--border); }
.cta-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.cta-photo::after { content: ""; position: absolute; inset: 0; background: rgba(10,95,232,.18); mix-blend-mode: color; }
.cta-band::before { content: ""; position: absolute; left: -120px; bottom: -160px; width: 700px; height: 420px; border-radius: 50%; background: rgba(7,129,254,.35); filter: blur(120px); }
.cta-inner { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; max-width: 560px; }
.ly.cta-lanyard { --s: .72; position: absolute; right: 120px; top: -120px; z-index: 2; animation: swing 6.5s ease-in-out infinite; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-size: 14px; color: var(--text-2); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { height: 28px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #fff; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .lanyard, .roles-lanyard .ly, .cta-lanyard, .live-dot::after { animation: none !important; }
  .cf-item { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .ly.lanyard { display: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps-row2 { grid-template-columns: 1fr 1fr; }
  .step-arrow { display: none; }
  /* 2 columns: 01 + 02 side by side, 03 / 04 / 05 full width; crop the desktop side notches baked into the tiles */
  .steps .step:nth-child(3), .steps-row2 .step { grid-column: 1 / -1; }
  .step { background-size: 124% 100%; border-radius: 20px; }
  .time-tiles { grid-template-columns: 1fr 1fr; }
  .apply-panel { grid-template-columns: 1fr; padding: 56px 32px; }
  .ly.cta-lanyard { display: none; }
}
@media (max-width: 900px) {
  .nav { position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px var(--gutter) 24px; background: rgba(9,9,11,.97); border-bottom: 1px solid var(--border); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s; }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav-list { flex-direction: column; gap: 4px; }
  .nav-list a { display: block; padding: 12px 0; font-size: 16px; }
  .nav-toggle { display: block; }
  .tp-head, .builders-grid, .why-grid, .values-grid, .faq-list, .location { grid-template-columns: 1fr; }
  /* minmax(0, 1fr): a long button (CZ "Všechny otevřené pozice") must not widen the column past the viewport */
  .roles-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .roles-side { position: sticky; top: var(--header-h); z-index: 10; background: var(--bg); padding: 12px 0; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .roles-lanyard { display: none; }
  .dept-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .dept-link { flex: none; border: 1px solid var(--border); border-radius: 999px; }
  .role { flex-wrap: wrap; padding: 20px; }
  .role .btn { width: 100%; }
  .reviews { position: relative; left: 0; right: 0; bottom: 0; grid-template-columns: 1fr; padding: 16px; margin-top: -120px; }
  .photo-block { aspect-ratio: auto; }
  .photo-block > img { position: relative; height: 320px; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .referral { flex-direction: column; align-items: flex-start; }
  .referral .btn { max-width: 100%; white-space: normal; text-align: center; }
  .cta-photo { width: 100%; opacity: .45; }
  .tp-bottom { flex-direction: column; align-items: flex-start; left: 24px; right: 24px; bottom: 24px; }
  .tp-quote p { font-size: 18px; }
  .tp-video { aspect-ratio: 4 / 5; border-radius: 24px; }
}
@media (max-width: 640px) {
  .section { padding: 80px 0; }
  .referral { padding: 24px; }
  .steps, .steps-row2 { grid-template-columns: 1fr; }
  .step, .steps-row2 .step { min-height: 0; border-radius: 16px; background-size: 124% 100%; display: flex; flex-direction: column; gap: 12px; padding: 28px; }
  .step-when, .step-body, .step-tags { position: static; text-align: left; }
  .step-when { margin-top: -4px; }
  .step-body { margin-top: 32px; }
  .step-num { font-size: 48px; }
  .live-pill { font-size: 13px; }
  .coverflow { height: 220px; }
  .cf-item { width: 260px; height: 170px; margin-left: -130px; }
  .rings { gap: 16px; }
  .ring, .ring svg { width: 96px; height: 96px; }
  .ring-num { top: 30px; font-size: 20px; }
  .builder-card, .time-card { padding: 24px; }
}

/* ---------- Lanyard (HTML/CSS version of the Figma "Sprint lanyard") ---------- */
.ly { position: relative; width: calc(260px * var(--s, 1)); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; pointer-events: none; }
.ly-strap { width: calc(44px * var(--s, 1)); height: calc(260px * var(--s, 1)); background: linear-gradient(90deg, #121215, #1d1d22 50%, #121215); border-radius: 0 0 4px 4px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(20px * var(--s, 1)); padding-bottom: calc(6px * var(--s, 1));
  box-shadow: inset 5px 0 7px -3px rgba(0,0,0,.6), inset -5px 0 7px -3px rgba(0,0,0,.6), inset 1px 0 0 rgba(255,255,255,.08), 4px 8px 12px rgba(0,0,0,.45); }
.ly-strap img { max-width: none; width: calc(84px * var(--s, 1)); height: calc(21px * var(--s, 1)); margin: calc(31.5px * var(--s, 1)) calc(-31.5px * var(--s, 1)); transform: rotate(-90deg); opacity: .85; flex: none; }
.ly-ring { width: calc(24px * var(--s, 1)); height: calc(24px * var(--s, 1)); margin-top: calc(-14px * var(--s, 1)); border: calc(3.5px * var(--s, 1)) solid #8c8f96; border-radius: 50%; position: relative; z-index: 1; box-shadow: 0 2px 2px rgba(0,0,0,.45); }
.ly-clasp { width: calc(52px * var(--s, 1)); height: calc(28px * var(--s, 1)); margin-top: calc(-8px * var(--s, 1)); border-radius: calc(6px * var(--s, 1)); background: linear-gradient(180deg, #9ea3ad, #5c616b); position: relative; z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 3px rgba(0,0,0,.5), 0 8px 14px rgba(0,0,0,.35); }
.ly-card { position: relative; width: 100%; height: calc(340px * var(--s, 1)); margin-top: calc(-6px * var(--s, 1)); border-radius: calc(20px * var(--s, 1)); overflow: hidden;
  padding: calc(40px * var(--s, 1)) calc(24px * var(--s, 1)) calc(24px * var(--s, 1)); display: flex; flex-direction: column;
  background: radial-gradient(70% 45% at 75% 0%, rgba(7,129,254,.16), transparent 70%), #0e0e11; border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.5), 0 1px 2px rgba(0,2,8,.45), 0 10px 18px rgba(0,2,8,.35), 0 32px 56px rgba(0,2,8,.45), 0 70px 110px rgba(0,2,8,.35); }
.ly-card::before { content: ""; position: absolute; left: 50%; top: calc(-8px * var(--s, 1)); width: calc(80px * var(--s, 1)); height: calc(18px * var(--s, 1)); margin-left: calc(-40px * var(--s, 1)); border-radius: 50%; background: #000; opacity: .55; filter: blur(calc(8px * var(--s, 1))); }
.ly-slot { position: absolute; left: 50%; top: calc(14px * var(--s, 1)); width: calc(44px * var(--s, 1)); height: calc(8px * var(--s, 1)); margin-left: calc(-22px * var(--s, 1)); border-radius: 4px; background: rgba(255,255,255,.14); }
.ly-logo { width: calc(46px * var(--s, 1)); height: calc(44px * var(--s, 1)); object-fit: contain; object-position: left center; }
.ly-title { margin-top: auto; font-size: calc(30px * var(--s, 1)); line-height: 1.25; font-weight: 600; color: rgba(255,255,255,.9); }
.ly-num { font-size: calc(88px * var(--s, 1)); line-height: 1; font-weight: 600; letter-spacing: -.02em; background: linear-gradient(180deg, #fff, #3d9bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ly-perf { margin: calc(14px * var(--s, 1)) 0; border-top: 1px dashed rgba(255,255,255,.2); }
.ly-dates { font-size: calc(14px * var(--s, 1)); font-weight: 500; color: rgba(255,255,255,.56); }
.lanyard.ly { width: calc(260px * var(--s, 1)); }

/* Inline YouTube player in the Trading powerhouse panel */
.tp-video.is-playing { cursor: default; }
.tp-video.is-playing::after, .tp-video.is-playing > :not(iframe) { display: none; }
.tp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* Icon Fancy exports carry a square texture/background – show only the round glass icon */
.fancy { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 66%); mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 66%); }
.value-card .fancy { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 74%); mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 74%); }

/* --- Figma parity fixes (2026-11-11) --- */
.how-foot { margin-top: 32px; display: grid; justify-items: center; gap: 24px; }
.how-foot .chip { font-size: 12px; }
.how-foot .chip .ic { width: 16px; height: 16px; color: #fff; }
.tp-head .lead { font-size: 16px; }
.tp-head h2 { font-size: 60px; line-height: 1.1; }
.tp-video { border-radius: 16px; }
.tp-video::after { background: linear-gradient(180deg, rgba(9,9,11,0) 0%, rgba(9,9,11,.1) 62%, rgba(9,9,11,.92) 100%), radial-gradient(60% 40% at 50% 112%, rgba(14,165,233,.55), rgba(7,129,254,.2) 50%, transparent 75%); }
.tp-chip { left: 40px; top: 40px; font-size: 12px; font-weight: 600; color: #fff; background: #09090b; border-radius: 12px; padding: 8px 12px; }
.tp-play { width: 96px; height: 96px; margin: -48px 0 0 -48px; top: 47%; background: #fff; color: #09090b; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.tp-play .ic { width: 28px; height: 28px; }
.tp-bottom { left: 40px; right: 40px; bottom: 40px; }
.tp-q { width: 24px; height: 24px; color: var(--blue-400); margin-bottom: 12px; }
.builder-card p { max-width: 400px; font-size: 14px; }
.roles-lanyard { margin-top: 0; height: 280px; }
.roles-lanyard .ly.ly { top: -60px; bottom: auto; left: 40px; }
.role[data-team="AI"] .team-icon { background: rgba(34,197,94,.12); color: #4ade80; }
.role[data-team="Product"] .team-icon { background: rgba(251,146,60,.12); color: #fb923c; }
.role { padding: 20px 24px; }
.role-title { font-size: 18px; }
.why-body .ic { color: #fff; width: 24px; height: 24px; }
.why-body .h5 { font-size: 20px; line-height: 1.4; }
#values .section-head h2 { max-width: 520px; }
#values .section-head .lead { max-width: 600px; font-size: 16px; }
.ring-num { font-size: 28px; top: 38px; }
.review { background: rgba(24,24,27,.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,.1); }
.review blockquote p { font-size: 18px; }
.perks { padding: 0; margin-top: 24px; }
.perks li { font-size: 12px; font-weight: 500; padding: 8px 12px; }
.perks .ic { color: #fff; }
.value-card .h6 { font-size: 18px; }
.faq-list { display: block; columns: 2; column-gap: 16px; }
.faq-item { break-inside: avoid; margin-bottom: 16px; background: #1c1c1f; border: 0; border-radius: 12px; }
.faq-item summary { justify-content: flex-start; gap: 12px; padding: 20px 24px; font-size: 14px; }
.faq-item summary .ic { color: rgba(255,255,255,.72); transition: transform .3s var(--ease); }
.faq-item[open] summary .ic { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 22px 56px; font-size: 14px; }
.office-text .ic { width: 24px; height: 24px; }
.office-text .h5 { font-size: 20px; }
@media (max-width: 900px) { .faq-list { columns: 1; } }

/* Apply – centred layout with photo fan (Figma 20157:211) */
.apply-panel { display: block; padding: 56px 72px 0; min-height: 740px; text-align: center; }
.apply-panel::before { bottom: -420px; }
.apply-copy { justify-items: center; gap: 16px; }
.apply-copy p { font-size: 18px; color: var(--text-2); max-width: 600px; }
.form-card { width: 392px; max-width: 100%; margin: 24px auto 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; gap: 24px; }
.btn.is-disabled { opacity: .55; cursor: not-allowed; }
.apply-photos { position: relative; height: 314px; margin: 48px -72px 0; }
.ap { position: absolute; object-fit: cover; border-radius: 12px; border: 8px solid #09090b; outline: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 40px rgba(0,0,0,.5); transition: transform .5s var(--ease); }
.ap1 { left: -91px; top: 60px; width: 299px; height: 308px; --r: 10deg; }
.ap2 { left: 206px; top: 75px; width: 279px; height: 288px; --r: 0deg; }
.ap3 { left: 458px; top: 107px; width: 250px; height: 258px; --r: 7deg; }
.ap4 { left: 737px; top: 45px; width: 275px; height: 283px; --r: -8deg; }
.ap5 { left: 962px; top: 80px; width: 275px; height: 283px; --r: 2deg; }
.ap { transform: rotate(var(--r)); }
.apply-panel:hover .ap { transform: rotate(var(--r)) translateY(-8px); }
.apply-panel:hover .ap:nth-child(even) { transform: rotate(var(--r)) translateY(-14px); }
@media (max-width: 1100px) { .apply-photos { transform: scale(.75); transform-origin: 50% 100%; } }
@media (max-width: 640px) { .apply-panel { padding: 40px 20px 0; min-height: 0; } .apply-photos { height: 200px; margin: 32px -20px 0; transform: none; }
  .ap { width: 150px !important; height: 160px !important; border-width: 5px; } .ap1 { left: -30px; top: 40px; } .ap2 { left: 80px; top: 30px; } .ap3 { left: 190px; top: 50px; } .ap4 { display: none; } .ap5 { left: 290px; top: 35px; } }

/* Final band – centred, lanyard below (Figma 20135:1957) */
.cta-band { display: block; min-height: 0; padding: 120px 0 0; text-align: center; border-top: 0; overflow: hidden; }
.cta-band::before { left: 50%; margin-left: -350px; bottom: -200px; background: rgba(7,129,254,.22); }
.cta-inner { max-width: none; justify-items: center; }
.cta-inner h2 { max-width: 560px; }
.cta-inner .btn-row { justify-content: center; }
.ly.cta-lanyard { --s: .8; position: relative; right: auto; top: auto; margin: 24px auto -40px; animation: swing-c 7s ease-in-out infinite; }
@keyframes swing-c { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1deg); } }
@media (max-width: 1100px) { .ly.cta-lanyard { display: flex; --s: .65; } }

/* Lanyard card: Figma "Texture" – blue sheen + contour lines; hover = lines drift, sheen brightens */
.ly-card::after { content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background: url("assets/figma/lanyard-lines.svg") center / 100% 100% no-repeat; opacity: .14; mix-blend-mode: overlay;
  transition: transform 1.6s var(--ease), opacity .6s; }
.ly-card { background: linear-gradient(135deg, rgba(90,168,255,.16), rgba(10,108,240,.08) 35%, rgba(6,48,127,.05) 70%, transparent), radial-gradient(70% 45% at 75% 0%, rgba(7,129,254,.16), transparent 70%), #0e0e11; }
.ly-card > * { position: relative; z-index: 1; }
.ly-card .ly-slot { position: absolute; }
.ly-shine { position: absolute !important; inset: 0; z-index: 2 !important; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 48%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; transition: background-position 1.2s var(--ease); }
.ly-card { text-align: left; }
.ly:hover .ly-card::after { transform: translate(4%, -3%) rotate(-1.5deg); opacity: .24; }
.ly:hover .ly-shine { background-position: -40% 0; }
.lanyard.ly, .ly.cta-lanyard, .roles-lanyard .ly { pointer-events: auto; }
.ly.cta-lanyard { margin: 24px auto 0; }
.cta-band { padding-bottom: 0; }
.btn.is-disabled { opacity: 1; cursor: pointer; }

/* Micro-interactions (kept small; all off with reduced motion) */
.coverflow { margin-top: 112px; }
.step, .card.role, .value-card, .builder-card, .review, .faq-item { transition: translate .35s var(--ease), opacity .7s var(--ease), transform .7s var(--ease), border-color .35s, background-color .35s; }
.step:hover { translate: 0 -4px; }
.card.role:hover, .value-card:hover, .builder-card:hover { translate: 0 -2px; border-color: rgba(255,255,255,.14); }
.value-card .fancy, .builder-card .fancy { transition: transform .5s var(--ease); }
.value-card:hover .fancy, .builder-card:hover .fancy { transform: scale(1.06) rotate(-3deg); }
.dept-link .count-badge { transition: background-color .3s, color .3s; }
.time-pill .ic { transition: transform .6s var(--ease); }
.step:hover .time-pill .ic { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) {
  .step:hover, .card.role:hover, .value-card:hover, .builder-card:hover { translate: none; }
  .value-card:hover .fancy, .builder-card:hover .fancy, .step:hover .time-pill .ic { transform: none; }
  .ly-card::after, .ly-shine { transition: none; }
}
.tp-head { grid-template-columns: minmax(0, 1fr) 520px; }
.hero .lanyard { margin-left: -150px; }
.cta-band { padding-bottom: 96px; }
@media (max-width: 1100px) { .tp-head { grid-template-columns: 1fr; } }
.apply-note .btn, .apply-note .btn:hover { color: #fff; }
@media (max-width: 900px) {
  .tp-head h2 { font-size: clamp(36px, 10vw, 60px); }
  .tp-head { gap: 20px; margin-bottom: 32px; }
  .tp-video { aspect-ratio: 3 / 4; }
  .tp-chip { left: 16px; top: 16px; right: 16px; font-size: 11px; white-space: normal; }
  .tp-play { top: 34%; width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .tp-bottom { left: 20px; right: 20px; bottom: 20px; gap: 16px; }
  .tp-quote p { font-size: 16px; }
  .tp-q { width: 20px; height: 20px; margin-bottom: 8px; }
  .builder-card .h5 { font-size: 20px; }
  .builder-card .fancy { width: 72px; height: 72px; }
}
@media (max-width: 900px) {
  .atmo-link { margin-top: 20px; }
  .photo-block > img { height: 300px; }
  .reviews { margin-top: -72px; gap: 10px; }
  .review { padding: 18px; gap: 12px; }
  .review blockquote p { font-size: 15px; }
}
.hero .lanyard .ly-strap { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 74%); mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 74%); }

/* 2026-11-11 — Fancy icons = 3x PNG straight from Figma (glow + grid included, so the image is
   bigger than the 88/64 px icon box: 512/264 ≈ 1.94×). No CSS mask any more. */
.fancy, .value-card .fancy { -webkit-mask-image: none; mask-image: none; max-width: none; }
.builder-card .fancy { width: 171px; height: 171px; margin: -53.5px 0 -29.5px -53.5px; }
.value-card .fancy { width: 125px; height: 125px; margin: -30.5px; }
@media (max-width: 900px) { .builder-card .fancy { width: 140px; height: 140px; margin: -46px 0 -22px -46px; } }

/* Role cards: plain border, no gradient line on top */
.card.role::before { content: none; }

/* Open roles lanyard: whole card visible, strap fades in from the top like the hero */
.roles-lanyard { height: auto; overflow: visible; margin-top: -8px; }
.roles-lanyard .ly.ly { position: relative; top: auto; left: 32px; bottom: auto; }
.roles-lanyard .ly-strap, .ly.lanyard .ly-strap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%); }
.hero .lanyard .ly-strap { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 74%); mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 74%); }

/* Mobile: hero lanyard back, smaller, under the copy (strap fades in from nothing) */
@media (max-width: 1100px) {
  .ly.lanyard { display: flex; --s: .72; justify-self: center; margin: 0 !important; }
  .hero-grid { gap: 8px; }
}
@media (max-width: 640px) { .ly.lanyard { --s: .62; } }
@media (max-width: 1100px) {
  .hero .lanyard .ly-strap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60%); mask-image: linear-gradient(180deg, transparent 0, #000 60%); }
  .ly.lanyard { margin-top: -24px !important; }
  .hero .coverflow { margin-top: 48px; }
}
/* Fancy PNGs are exported on the card colour (#131315) because the icon's glass + colour blend need a backdrop;
   the outer edge fades so the square never shows. */
.fancy, .value-card .fancy { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
@media (max-width: 1100px) { .ly.lanyard { margin-top: 8px !important; } }
.builder-card > :not(.fancy), .value-card > :not(.fancy) { position: relative; z-index: 1; }

/* Fancy icon spacing = Figma. Builders (Article 20166): padding 40, icon 88 in a 112 box + gap 20 → 44 px to the heading.
   Values (List Item 20213): padding 32, icon 64 + gap 24. PNG = icon + glow (516/3 = 172 px for 88, 376/3 ≈ 125.3 px for 64),
   so negative margins put the icon box itself exactly on the padding corner; grid gap 12 is subtracted from the bottom. */
.builder-card .fancy { width: 172px; height: 172px; margin: -42px 0 -10px -42px; }
.value-card { padding: 32px; }
.value-card .fancy { width: 125.33px; height: 125.33px; margin: -30.67px 0 -18.67px -30.67px; }
@media (max-width: 900px) { .builder-card .fancy { width: 140.7px; height: 140.7px; margin: -34.35px 0 -22.35px -34.35px; } }
/* No hover on these cards (David, 2026-11-11) */
.value-card:hover, .builder-card:hover { translate: none; border-color: var(--border); }
.value-card:hover .fancy, .builder-card:hover .fancy { transform: none; }

/* Hero lanyard with physics (main.js initLanyard): canvas strap under the copy, DOM card on top */
.ly-canvas { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.hero-grid { z-index: 2; }
.ly.ly-live { animation: none !important; pointer-events: none; will-change: transform; }
.ly-live .ly-strap { visibility: hidden; }
.ly-live .ly-card { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ly-live .ly-card img { -webkit-user-drag: none; }
.ly-live.is-grabbed .ly-card { cursor: grabbing; }

/* How it works tiles: no lift / clock spin; a decent moving mesh on hover (overlay blend keeps the notches black) */
.step:hover { translate: none; }
.step:hover .time-pill .ic { transform: none; }
.step::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background:
    radial-gradient(38% 46% at 20% 25%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(42% 50% at 80% 70%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(30% 40% at 60% 15%, rgba(140,200,255,.45), transparent 70%);
  background-size: 160% 160%; background-position: 0% 0%;
  mix-blend-mode: overlay; transition: opacity .6s var(--ease); animation: step-mesh 14s ease-in-out infinite alternate; animation-play-state: paused; }
.step:hover::after { opacity: 1; animation-play-state: running; }
@keyframes step-mesh { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 30% 100%; } }
.step-top, .step-when, .step-body, .step-tags { position: relative; z-index: 1; }
.step-when, .step-body, .step-tags { position: absolute; }
@media (max-width: 640px) { .step-when, .step-body, .step-tags { position: relative; inset: auto; } }
@media (prefers-reduced-motion: reduce) { .step::after { animation: none; } }
.live-pill { padding: 6px 14px 6px 10px; }
.live-pill span { margin-right: 0; }

/* FAQ = Figma "FAQ Item" (two real columns 5 + 4, one size everywhere) */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; columns: auto; }
.faq-col { display: grid; gap: 16px; align-content: start; }
.faq-item { margin: 0; border: 0; border-radius: 16px; background: rgba(255,255,255,.08); transition: background-color .2s; }
.faq-item:hover { background: rgba(255,255,255,.10); }
.faq-item summary { display: flex; align-items: flex-start; justify-content: flex-start; gap: 16px; padding: 20px 24px; font-size: 18px; line-height: 28px; font-weight: 600; }
.faq-item summary .ic { width: 24px; height: 24px; margin-top: 2px; flex: none; color: rgba(255,255,255,.72); transition: transform .3s var(--ease); }
.faq-item[open] summary .ic { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 20px 64px; margin-top: -18px; font-size: 18px; line-height: 28px; font-weight: 500; color: rgba(255,255,255,.72); }
.faq-item summary:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 16px; }
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq-item::details-content { transition: none; } }
@media (max-width: 900px) { .faq-list { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .faq-item summary { padding: 16px; gap: 12px; font-size: 16px; line-height: 24px; }
  .faq-item summary .ic { margin-top: 0; }
  .faq-item p { padding: 0 16px 16px 52px; margin-top: -12px; font-size: 16px; line-height: 24px; }
}
/* open state = Figma "Expand=true": answer 2 px under the question, 20 px bottom padding */
.faq-item p { margin-top: 0; }
.faq-item[open] summary { padding-bottom: 2px; }
@media (max-width: 640px) { .faq-item p { margin-top: 0; } .faq-item[open] summary { padding-bottom: 2px; } }
/* Role cards: no lift on hover (David, 2026-11-11) – only the border lightens */
.card.role:hover { translate: none; }

/* Why join: progressive blur (no hard edge) */
.why-card > img { z-index: 0; }
.why-card::before, .why-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; z-index: 1; pointer-events: none; }
.why-card::before { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%); }
.why-card::after { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 75%); mask-image: linear-gradient(180deg, transparent 30%, #000 75%); }
.why-body { z-index: 2; backdrop-filter: none; -webkit-backdrop-filter: none; -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(180deg, rgba(9,9,11,0) 0%, rgba(9,9,11,.35) 30%, rgba(9,9,11,.75) 70%, rgba(9,9,11,.9) 100%); }
/* Mobile / tablet: hero lanyard hangs ABOVE the copy, strap comes from under the header */
@media (max-width: 1100px) {
  .ly.lanyard { order: -1; margin: -96px auto 8px !important; }
  .hero-grid { gap: 24px; }
}

/* Hero background = Figma export (Top gradient + blue radial, 20193:33715 + 20135:1025) – sharp 2x WebP, no CSS blur */
.hero { background: #09090b url("assets/figma/hero-bg.webp") center top / max(100%, 1440px) auto no-repeat; }
.hero::before { content: none; }

/* Apply: no invented glow; photo fan = one image exported from Figma (20193:34376) */
.apply-panel::before { content: none; }
.apply-panel { min-height: 0; }
.apply-photos { height: auto; margin: 48px -72px 0; transform: none !important; }
.apply-fan { display: block; width: 100%; height: auto; }
@media (max-width: 1100px) { .apply-photos { margin-left: -32px; margin-right: -32px; } }
@media (max-width: 640px) {
  .apply-photos { margin: 32px -20px 0; }
  .apply-fan { height: 190px; object-fit: cover; object-position: 50% 100%; }
}

/* ---------- Mobile pass 2026-11-11 ---------- */
@media (max-width: 900px) {
  /* Open roles: only the department chips stay sticky (the H2 scrolls away) */
  .roles-side { display: contents; }
  .roles-side > h2 { margin-bottom: -8px; }
  .dept-nav { position: sticky; top: var(--header-h); z-index: 10; background: var(--bg); margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); }
  .role-group { scroll-margin-top: calc(var(--header-h) + 72px); }
  /* Role card: icon next to the title, text full width, Apply full width */
  .role { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 20px; }
  .role .team-icon { width: 40px; height: 40px; border-radius: 10px; align-self: start; }
  .role .team-icon .ic { width: 22px; height: 22px; }
  .role-main { display: contents; }
  .role-title { grid-column: 2; font-size: 17px; line-height: 1.35; align-self: center; }
  .role-desc, .role-meta, .role .btn { grid-column: 1 / -1; }
  .role-meta { margin-top: 2px; gap: 6px 16px; }
  .role .btn { width: 100%; margin-top: 8px; }
  /* Trading powerhouse: quote readable over the photo */
  .tp-video::after { background: linear-gradient(180deg, rgba(9,9,11,0) 25%, rgba(9,9,11,.55) 50%, rgba(9,9,11,.95) 78%), radial-gradient(70% 30% at 50% 108%, rgba(14,165,233,.45), transparent 75%); }
}
@media (max-width: 640px) {
  /* Equal-width stacked buttons in hero and final band */
  .hero .btn-row, .cta-inner .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .hero .btn-row .btn, .cta-inner .btn-row .btn { width: 100%; }
  .cta-inner .btn-row { max-width: 360px; margin-inline: auto; }
  /* Final band lanyard: strap fades in instead of starting mid-air */
  .ly.cta-lanyard .ly-strap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60%); mask-image: linear-gradient(180deg, transparent 0, #000 60%); }
}

/* Coverflow: fun but calm – springy settle, grab, tilt + glare on the centred photo */
.coverflow { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.coverflow:focus-visible .cf-item.is-active { outline: 2px solid var(--blue-400); outline-offset: 4px; }
.coverflow.is-dragging { cursor: grabbing; }
.cf-item { transition: transform .9s cubic-bezier(.3, 1.25, .5, 1), opacity .8s var(--ease), filter .8s var(--ease); }
.cf-item:not(.is-active) { cursor: pointer; }
.coverflow.is-dragging .cf-item { transition: none; }
.cf-item.is-tilting { transition: transform .25s ease-out, opacity .8s var(--ease), filter .8s var(--ease); }
.cf-item img { pointer-events: none; -webkit-user-drag: none; }
.cf-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(45% 60% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 70%); mix-blend-mode: soft-light; }
.cf-item.is-tilting::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cf-item { transition: none; } }
.cf-track { pointer-events: none; }
.cf-item { pointer-events: auto; }
/* Department heading receives focus after a side-nav click (for screen readers) – no visible ring */
.role-group-head:focus, .role-group-head:focus-visible { outline: none; }

/* Rated photo: smaller, reviews stacked vertically on the left (people stay visible on the right) */
@media (min-width: 901px) {
  .photo-block { aspect-ratio: auto; height: 520px; }
  .photo-block > img { object-position: 75% 35%; }
  .photo-block::after { top: 0; height: auto; width: 60%; right: auto; background: linear-gradient(90deg, rgba(9,9,11,.85), rgba(9,9,11,.45) 60%, transparent); }
  .reviews { left: 32px; right: auto; top: 32px; bottom: 32px; width: 400px; grid-template-columns: 1fr; grid-auto-rows: 1fr; align-content: center; gap: 12px; }
  .review { padding: 18px 20px; gap: 10px; justify-content: center; }
  .review blockquote { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
  .review .ic { width: 20px; height: 20px; margin-top: 2px; }
  .review blockquote p { margin-top: 0; font-size: 15px; line-height: 1.5; }
  .review figcaption { padding-left: 32px; }
}
@media (min-width: 901px) { .reviews { grid-auto-rows: auto; } }
/* Card top highlight: subtle, not a bright separator */
.card::before { left: 12%; right: 12%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
/* Fancy icons −20 % (David): Builders 88 → 70 px, Values 64 → 51 px, mobile Builders 72 → 58 px.
   Image = icon × 1.955 (glow); icon box stays on the padding corner, same gap to the heading. */
.builder-card .fancy { width: 137.6px; height: 137.6px; margin: -33.6px 0 -1.6px -33.6px; }
.value-card .fancy { width: 100.3px; height: 100.3px; margin: -24.5px 0 -12.5px -24.5px; }
@media (max-width: 900px) { .builder-card .fancy { width: 112.6px; height: 112.6px; margin: -27.5px 0 -15.5px -27.5px; } }

/* Hero background v2: soft blue light from the top (Figma direction: strongest behind the lanyard),
   smooth falloff, no flat wash / band; fine grain dithers the dark blue so it never bands. */
.hero { background: var(--bg); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 980px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 66% -6%, rgba(7,129,254,.42), rgba(7,129,254,.16) 42%, rgba(7,129,254,.05) 66%, transparent 82%),
    radial-gradient(ellipse 38% 40% at 22% -8%, rgba(61,155,255,.14), transparent 75%),
    radial-gradient(ellipse 90% 30% at 50% 0%, rgba(7,129,254,.10), transparent 80%);
}
.hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 980px; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
@media (max-width: 1100px) {
  .hero::before { background:
    radial-gradient(ellipse 90% 45% at 50% -4%, rgba(7,129,254,.40), rgba(7,129,254,.14) 45%, transparent 80%),
    radial-gradient(ellipse 120% 25% at 50% 0%, rgba(7,129,254,.10), transparent 80%); height: 900px; }
}

/* Hero light – a bit stronger (v2 was too faint) */
.hero::before { background:
    radial-gradient(ellipse 48% 66% at 66% -8%, rgba(7,129,254,.62), rgba(7,129,254,.26) 40%, rgba(7,129,254,.08) 66%, transparent 84%),
    radial-gradient(ellipse 40% 44% at 22% -10%, rgba(61,155,255,.22), transparent 75%),
    radial-gradient(ellipse 95% 34% at 50% 0%, rgba(7,129,254,.16), transparent 80%); }
@media (max-width: 1100px) { .hero::before { background:
    radial-gradient(ellipse 95% 48% at 50% -4%, rgba(7,129,254,.58), rgba(7,129,254,.2) 45%, transparent 80%),
    radial-gradient(ellipse 120% 28% at 50% 0%, rgba(7,129,254,.14), transparent 80%); } }

/* Final band glow follows scroll: --cta-p 0 (band just entering) → 1 (page bottom), set in main.js */
.cta-band { --cta-p: 0; }
.cta-band::before { left: 50%; bottom: -260px; width: 1400px; height: 760px; margin-left: -700px; filter: none; border-radius: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(7,129,254,.75), rgba(7,129,254,.28) 45%, rgba(7,129,254,.06) 70%, transparent 85%);
  opacity: calc(.15 + var(--cta-p) * .85); transform: scale(calc(.85 + var(--cta-p) * .2)); transform-origin: 50% 100%; }
@media (max-width: 640px) { .cta-band::before { width: 900px; margin-left: -450px; height: 600px; bottom: -220px; } }
.cta-band::before { bottom: -60px; background: radial-gradient(ellipse 50% 55% at 50% 100%, rgba(7,129,254,.7), rgba(7,129,254,.3) 40%, rgba(7,129,254,.08) 68%, transparent 85%); }
/* 2026-11-11 "make this glow bigger but still decent": wider + taller, same peak colour, still grows with scroll */
.cta-band::before { width: 2400px; margin-left: -1200px; height: 1100px; bottom: -80px;
  background: radial-gradient(ellipse 50% 55% at 50% 100%, rgba(7,129,254,.62), rgba(7,129,254,.26) 38%, rgba(7,129,254,.08) 66%, transparent 84%);
  transform: scale(calc(.8 + var(--cta-p) * .25)); }
@media (max-width: 640px) { .cta-band::before { width: 1300px; margin-left: -650px; height: 820px; } }
@media (max-width: 640px) { .cta-band::before { bottom: -40px; } }

/* Hero photo strip (replaces the coverflow): loose, mixed sizes, slow endless drift */
.photo-strip { position: relative; margin-top: 96px; height: 400px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ps-track { display: flex; width: max-content; height: 100%; animation: ps-drift 60s linear infinite; }
.photo-strip:hover .ps-track { animation-play-state: paused; }
.ps-set { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.ps-item { flex: none; width: var(--w); height: var(--h); margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(0,0,0,.5); background: #111; transform: translateY(var(--y)) rotate(var(--r));
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .5s; }
.ps-item:hover { transform: translateY(calc(var(--y) - 10px)) rotate(0deg) scale(1.04); box-shadow: 0 32px 60px rgba(0,0,0,.6); z-index: 1; }
.ps-item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes ps-drift { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .photo-strip { margin-top: 56px; height: 260px; }
  .ps-set { gap: 16px; padding-right: 16px; }
  .ps-item { width: calc(var(--w) * .6); height: calc(var(--h) * .6); border-radius: 14px; transform: translateY(calc(var(--y) * .6)) rotate(var(--r)); }
  .ps-track { animation-duration: 45s; }
}
@media (prefers-reduced-motion: reduce) { .ps-track { animation: none; } }
@media (min-width: 641px) { .photo-strip { margin-top: 40px; } }

/* Office map: canvas dots + SVG pin (replaces prague-dots.webp) */
.office-card > .map-dots, .office-card > .map-pin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-pin-head { transform-box: fill-box; transform-origin: 50% 100%; animation: pin-bob 3.2s ease-in-out infinite; }
@keyframes pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.map-pin-base { transform-box: fill-box; transform-origin: center; animation: pin-base 3.2s ease-in-out infinite; }
@keyframes pin-base { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .map-pin-head, .map-pin-base { animation: none; } }

/* Hero: first screen = copy + lanyard; the photo strip peeks in at the bottom (~5 % of the viewport) */
@media (min-width: 1101px) {
  .hero-grid { min-height: calc(95svh - var(--header-h) - 96px - 40px); align-items: center; }
}
/* Load order: copy (fast) → lanyard (drops) → photos (fetched + revealed after ~1.1 s) */
.js .hero-copy > * { animation: hero-in .6s var(--ease) both; }
.js .hero-copy > *:nth-child(2) { animation-delay: .05s; } .js .hero-copy > *:nth-child(3) { animation-delay: .1s; }
.js .hero-copy > *:nth-child(4) { animation-delay: .15s; } .js .hero-copy > *:nth-child(5) { animation-delay: .2s; } .js .hero-copy > *:nth-child(6) { animation-delay: .25s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ps-item { opacity: 0; translate: 0 32px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .5s, opacity .7s var(--ease), translate .9s cubic-bezier(.3, 1.3, .5, 1); }
.photo-strip.is-in .ps-item { opacity: 1; translate: 0 0; }
.photo-strip.is-in .ps-item:nth-child(2) { transition-delay: 0s, 0s, .06s, .06s; } .photo-strip.is-in .ps-item:nth-child(3) { transition-delay: 0s, 0s, .12s, .12s; }
.photo-strip.is-in .ps-item:nth-child(4) { transition-delay: 0s, 0s, .18s, .18s; } .photo-strip.is-in .ps-item:nth-child(5) { transition-delay: 0s, 0s, .24s, .24s; }
.photo-strip.is-in .ps-item:nth-child(6) { transition-delay: 0s, 0s, .3s, .3s; } .photo-strip.is-in .ps-item:nth-child(7) { transition-delay: 0s, 0s, .36s, .36s; }
@media (prefers-reduced-motion: reduce) { .js .hero-copy > * { animation: none; } .ps-item { translate: none; transition: opacity .3s; } }

/* Light progressive blur at the bottom of the first screen; fades out as you scroll */
.scroll-blur { position: fixed; left: 0; right: 0; bottom: 0; height: 110px; z-index: 40; pointer-events: none; }
.scroll-blur span { position: absolute; inset: 0; }
.scroll-blur span:first-child { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%); mask-image: linear-gradient(180deg, transparent, #000 50%); }
.scroll-blur span:last-child { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000); mask-image: linear-gradient(180deg, transparent 45%, #000);
  background: linear-gradient(180deg, transparent, rgba(9,9,11,.35)); }
@media (min-width: 1101px) { .hero-grid { min-height: calc(91svh - var(--header-h) - 136px); } }
/* Desktop: photo strip top = 90 % of the viewport, photos aligned to the strip top → ~6–9 % of them always visible */
@media (min-width: 1101px) {
  .hero-grid { min-height: calc(90svh - var(--header-h) - 136px); }
  .photo-strip { margin-top: 40px; }
  .ps-set { align-items: flex-start; padding-top: 16px; }
  .ps-item { transform: translateY(calc(var(--y) * .5)) rotate(var(--r)); }
  .ps-item:hover { transform: translateY(calc(var(--y) * .5 - 10px)) rotate(0deg) scale(1.04); }
}

/* Photo strip: static, centred; moves only with scroll (main.js sets --ps-x) */
.ps-track { animation: none !important; position: relative; left: 50%; transform: translateX(calc(-50% + var(--ps-x, 0px))); will-change: transform; }
.ps-set[aria-hidden="true"] { display: none; }

/* ---------- Apply: Marek's own form (api/server.mjs → Ashby) in the dark design ---------- */
.form-card:has(.apply-form:not([hidden])) { width: 640px; }
.apply-form { display: grid; gap: 0; }
.apply-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.apply-form .field--full { grid-column: 1 / -1; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"] {
  width: 100%; min-width: 0; height: 48px; border-radius: 8px; padding: 0 16px; background: var(--surface-2); border: 1px solid var(--border); color: #fff; transition: border-color .2s; }
.field input::placeholder { color: rgba(255,255,255,.35); }
.field input:focus { outline: none; border-color: var(--blue-400); }
.field input[aria-invalid="true"] { border-color: #f87171; }
.field input[type="file"] { width: 100%; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px dashed rgba(255,255,255,.18); color: var(--text-2); font-size: 14px; }
.field input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 12px; border-radius: 6px; border: 0; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.field-hint { font-size: 12px; color: var(--text-3); }
.field-error { font-size: 12px; color: #f87171; min-height: 0; }
.field-error:empty { display: none; }
.consent-field { margin-top: 20px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 20px; color: var(--text-2); }
.consent input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--blue-500); }
.consent a { color: var(--blue-400); }
.turnstile-box:not(:empty) { margin-top: 20px; }
.form-error { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; border-left: 3px solid #f87171; background: rgba(248,113,113,.08); font-size: 14px; color: var(--text-2); }
.form-error a { color: var(--blue-400); }
.form-submit { width: 100%; margin-top: 20px; }
.form-success { padding: 20px; border-radius: 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #fff; outline: none; }
@media (max-width: 640px) { .apply-form .form-grid { grid-template-columns: 1fr; } }
/* Live pill without the green dot (David, 2026-11-11) */
.live-pill { padding-left: 14px; }

/* How it works – mobile: stacked tiles joined by a notch with a down arrow (Figma FTMO.COM 53648:6540) */
.step-arrow--m { display: none; }
@media (max-width: 640px) {
  .step-arrow, .step-arrow--m { display: grid; left: 50%; right: auto; top: auto; bottom: -44px; width: 112px; height: 64px; margin: 0 0 0 -56px; border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 64'%3E%3Cpath fill='%2309090b' d='M0 20C16 20 22 17 30 10C37 4 46 0 56 0C66 0 75 4 82 10C90 17 96 20 112 20V44C96 44 90 47 82 54C75 60 66 64 56 64C46 64 37 60 30 54C22 47 16 44 0 44Z'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='.08' d='M0 20C16 20 22 17 30 10C37 4 46 0 56 0C66 0 75 4 82 10C90 17 96 20 112 20M112 44C96 44 90 47 82 54C75 60 66 64 56 64C46 64 37 60 30 54C22 47 16 44 0 44'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  .step-arrow .ic { transform: rotate(90deg); }
}
.field select[aria-invalid="true"] { border-color: #f87171; }
.apply-form .field { align-content: start; }
@media (min-width: 641px) and (max-width: 1100px) { .steps-row2 .step:first-child { background-size: 112% auto; } }
/* 2026-11-11 "make this more readable": the dot map fades out behind the office text */
.office-card > .map-dots { -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,.25) 52%, transparent 68%); mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,.25) 52%, transparent 68%); }
.office-text { z-index: 1; }
/* 2026-11-11 "ten glow natáhni klidně víc k tomu textu": taller glow reaching up towards the heading */
.cta-band::before { height: 1700px; background: radial-gradient(ellipse 50% 62% at 50% 100%, rgba(7,129,254,.6), rgba(7,129,254,.26) 34%, rgba(7,129,254,.09) 62%, transparent 84%); }
@media (max-width: 640px) { .cta-band::before { height: 1200px; } }
/* 2026-11-11 smooth form reveal: the card widens 392 → 640 together with the JS height/stagger animation */
.form-card { transition: width .42s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .form-card { transition: none; } }
/* 2026-11-11 play button: filled dark triangle, optically centred */
.tp-play .ic { margin-left: 0; color: #09090b; }
/* Line break only on wider screens */
@media (max-width: 640px) { .br-wide { display: none; } }
/* 2026-11-11 "mini fail": the blur layers were square, so at the bottom corners the backdrop blur spilled over the rounded border */
.why-card::before, .why-card::after { border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
.why-card { clip-path: inset(0 round var(--radius)); }

/* ==========================================================================
   2026-11-11 Radius scale – size decides the radius ("velký bloky větší radius, menší bloky menší")
   XL 32 section-wide panels · L 24 large cards · M 16 standard cards · S 12 small UI · XS 8 controls
   Mobile (≤640): XL 24 · L 20 · M 16
   ========================================================================== */
:root { --r-xl: 24px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px; } /* David: 32 is too much → XL = 24 */
@media (max-width: 640px) { :root { --r-xl: 20px; --r-lg: 20px; } }
/* XL – full-width panels */
.photo-block, .apply-panel, .tp-video { border-radius: var(--r-xl); }
/* L – large cards */
.why-card, .builder-card, .mosaic-tile, .office-banner, .office-card, .referral { border-radius: var(--r-lg); }
.why-card { clip-path: inset(0 round var(--r-lg)); }
.why-card::before, .why-card::after { border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
@media (max-width: 1100px) { .step { border-radius: var(--r-lg); } }
/* M – standard cards */
.card.role, .value-card, .review, .faq-item, .ps-item { border-radius: var(--r-md); }
.faq-item summary:focus-visible { border-radius: var(--r-md); }
@media (max-width: 640px) { .ps-item { border-radius: var(--r-sm); } }
/* S – small UI */
.team-icon, .tp-chip, .detail-row, .time-tile, .form-success { border-radius: var(--r-sm); }
/* XS – controls */
.btn, .field select, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="file"], .step-tags li, .lang-switch, .form-error { border-radius: var(--r-xs); }
.form-card { border-radius: 0; }
@media (max-width: 640px) { .step, .steps-row2 .step { border-radius: var(--r-lg); } }
.step { border-radius: var(--r-lg); } /* baked tile corners are 16 px; the 24 px clip hides them */
@media (max-width: 640px) { .step, .steps-row2 .step { border-radius: var(--r-lg); } }
/* 2026-11-11 "add mask here (in footer)": CTA lanyard strap fades in from the top on every screen size */
.ly.cta-lanyard .ly-strap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%); }
/* first strap logo clears the ring (same fix as the canvas lanyard) */
.ly-strap { padding-bottom: calc(22px * var(--s, 1)); }
/* Referral sits in the roles column → same radius as the role cards */
.referral { border-radius: var(--r-md); }
/* 2026-11-11 FAQ open icon = minus, not ×: the vertical bar turns 90° into the minus */
.faq-item summary .ic, .faq-item[open] summary .ic { transform: none; }
.faq-item .ic-bar { transform-box: view-box; transform-origin: 50% 50%; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.faq-item[open] .ic-bar { transform: rotate(90deg); opacity: 0; }
/* 2026-11-11 sticky department chips: tuck 2 px under the header so no content shows through the seam */
@media (max-width: 900px) { .dept-nav { top: calc(var(--header-h) - 2px); padding-top: 12px; } }
/* 2026-11-11 "dej vysačku výš … aby byly vidět buttony": mobile hero lanyard smaller and higher, buttons above the fold */
@media (max-width: 640px) {
  .ly.lanyard { --s: .5; margin: -200px auto 0 !important; }
  .hero-grid { gap: 16px; }
}
@media (max-width: 640px) {
  .hero .lanyard .ly-strap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%); mask-image: linear-gradient(180deg, transparent 0, #000 35%); }
  .ly.lanyard { margin-bottom: 8px !important; }
}
/* 2026-11-11 "ta fotka nemůže být cropnutá … klidně fade do černé": mobile/tablet photo fades out instead of a hard bottom edge */
@media (max-width: 900px) {
  .photo-block > img { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
}
/* 2026-11-11 How it works hover follows the mouse: soft light at the pointer (--mx/--my set in main.js) */
.step::after { animation: none;
  background:
    radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.5), rgba(255,255,255,.12) 45%, transparent 70%),
    radial-gradient(circle 480px at var(--mx, 50%) var(--my, 50%), rgba(140,200,255,.22), transparent 70%);
  background-size: auto; transition: opacity .45s var(--ease); }
.step:hover::after { animation: none; }
/* 2026-11-11 ring numbers centred on the circle at every size (no fixed top offset) */
.ring { --ring: 120px; }
.ring svg { width: var(--ring); height: var(--ring); }
.ring-num { top: 0; left: 0; right: 0; height: var(--ring); display: grid; place-items: center; line-height: 1; }
@media (max-width: 640px) { .ring { --ring: 96px; width: 96px; height: auto; } .ring-num { top: 0; } }
/* 320 px phones (iPhone SE): three 96 px rings + gaps don't fit in 272 px */
@media (max-width: 359px) { .rings { gap: 8px; } .ring { --ring: 80px; width: 80px; } .ring-num { font-size: 18px; } }
/* 2026-11-11 lanyard card divider was too heavy (hr default borders + 20 % white): one quiet dashed hairline, as in Figma */
.ly-perf { height: 1px; border: 0; margin: calc(14px * var(--s, 1)) 0; color: transparent;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 4px, transparent 4px 8px); }
/* Trading powerhouse video: blue glow rising from the bottom edge, as in Figma 20144:208 (blurred blue layer 20193:33719) */
.tp-video::after { background:
  radial-gradient(85% 30% at 38% 104%, rgba(14,165,233,.55), rgba(7,129,254,.25) 45%, transparent 78%),
  radial-gradient(60% 20% at 80% 103%, rgba(7,129,254,.35), transparent 75%),
  linear-gradient(180deg, rgba(9,9,11,0) 0%, rgba(9,9,11,.1) 55%, rgba(9,9,11,.82) 100%); }
@media (max-width: 640px) {
  .tp-video::after { background:
    radial-gradient(110% 22% at 40% 103%, rgba(14,165,233,.55), rgba(7,129,254,.25) 45%, transparent 78%),
    linear-gradient(180deg, rgba(9,9,11,0) 25%, rgba(9,9,11,.55) 50%, rgba(9,9,11,.92) 78%); }
}
/* Lanyard card: FTMO | OANDA logo row as in Figma 20186:344 (row 20256:35785). FTMO symbol unchanged;
   divider and OANDA mark scaled to it (Figma 32 px marks → our 44 px: gap 17.45 → 24, divider 23.3 → 32 px, 1.45 → 2 px, white 24 %) */
.ly-logos { display: flex; align-items: center; gap: calc(24px * var(--s, 1)); }
.ly-logo-sep { width: calc(2px * var(--s, 1)); height: calc(32px * var(--s, 1)); border-radius: 2px; background: rgba(255,255,255,.24); flex: none; }
.ly-logo--oanda { width: calc(45px * var(--s, 1)); height: calc(44px * var(--s, 1)); object-fit: contain; }

/* Values: 5 cards = 3 on the first row, 2 wider on the second */
@media (min-width: 901px) {
  .values-grid { grid-template-columns: repeat(6, 1fr); }
  .values-grid > li { grid-column: span 2; }
  .values-grid > li:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- Legal: privacy block, notes, employer line, legal footer (legal.js fills the values) ---------- */
.privacy-block { display: grid; gap: 8px; max-width: 600px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--r-xs); background: rgba(255,255,255,.03); text-align: left; scroll-margin-top: 96px; }
.privacy-block .h6 { font-size: 16px; color: #fff; }
.apply-copy .privacy-block p { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.privacy-block a, .legal-note a, .employer-line a, .footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-note { font-size: 12px; line-height: 1.5; color: var(--text-3); max-width: 560px; }
.how-foot .legal-note, .cta-band .legal-note { text-align: center; margin: 0 auto; }
.form-card .legal-note { margin: 4px 0 12px; }
.step-body .step-note { font-size: 12px; color: var(--text-3); font-style: italic; }
.employer-line { margin: 24px 0 0; font-size: 13px; color: var(--text-3); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; flex-basis: 100%; font-size: 13px; }
.footer-legal a { text-decoration: none; color: var(--text-2); }
.footer-legal a:hover { color: #fff; }
.footer-employers { flex-basis: 100%; font-size: 12px; color: var(--text-3); }

/* ---------- Role details (expandable, role-details.json) ---------- */
.role { flex-wrap: wrap; }
.role-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.role-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; background: none; border: 0; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.role-toggle:hover { color: var(--text); }
.role-toggle:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 6px; }
.role-toggle-ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.role.is-open .role-toggle-ic { transform: rotate(180deg); }
.role-details { flex-basis: 100%; margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--border); }
.role.is-open { border-color: var(--border-2); }
.card.role.is-open:hover { translate: none; }
.role-details-note { margin-bottom: 12px; font-size: 13px; color: var(--text-3); }
.role-details-body { max-width: 72ch; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.role-details-body > * + * { margin-top: 12px; }
.role-details-body h3 { margin-top: 28px; font-size: 16px; font-weight: 600; color: var(--text); }
.role-details-body h4 { margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--text); }
.role-details-body ul, .role-details-body ol { padding-left: 20px; display: grid; gap: 6px; }
.role-details-body ul { list-style: disc; }
.role-details-body ol { list-style: decimal; }
.role-details-body li::marker { color: var(--text-3); }
.role-details-body li > p { margin: 0; }
.role-details-body strong { color: var(--text); font-weight: 600; }
.role-details-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.role-details-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-2); }
.role-details-link:hover { color: var(--text); }
.role-details-link .ic { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .role-actions { grid-column: 1 / -1; flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .role-actions .btn { margin-top: 8px; }
  .role-toggle { justify-content: center; }
  .role-details { grid-column: 1 / -1; }
  .role-details-foot .btn { width: 100%; }
  .role-details-foot { justify-content: center; }
}