/*
 * Кариера page (templates/careers.html, static/js/careers.js + careers3d.js).
 * Everything is scoped under .kr so it can't touch the rest of the site. The light sections use
 * the tokens below, which html.dark redefines, so the page follows the navbar's dark switch.
 */
.kr {
  --red: #CF2E2E; --red-2: #E84545; --red-soft: #FDECEC;
  --ink: #171717; --on-ink: #fff; --muted: #5F6368; --line: #E7E7E7;
  --bg: #fff; --bg-alt: #F6F7F8; --card: #fff;
  --dark: #20282D; --dark-2: #2A343A; --dark-3: #36424A; --night: #12171A;
  --text-d: #E6EAEC; --muted-d: #9AA5AB; --line-d: rgba(255,255,255,.1);
  --spark: #FFB547; --ok: #3DDC84;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --shadow: 0 18px 40px rgba(0,0,0,.08);
  color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: clip;
}
html.dark .kr {
  --red-soft: rgba(232,69,69,.14);
  --ink: #ECEFF1; --on-ink: #12171A; --muted: #A3ADB3; --line: rgba(255,255,255,.12);
  --bg: #171D21; --bg-alt: #1B2226; --card: #222A2F; --shadow: 0 18px 40px rgba(0,0,0,.35);
}
.kr a { color: inherit; }
.kr button { font: inherit; cursor: pointer; color: inherit; }
.kr .wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.kr section { padding: 100px 0; position: relative; }
.kr section[id] { scroll-margin-top: 88px; }  /* under the sticky navbar */
@media (max-width: 1023px) { .kr section[id] { scroll-margin-top: 56px; } }  /* phones: only the dark bar sticks */
.kr .kd { background: var(--night); color: var(--text-d); }
.kr .alt { background: var(--bg-alt); }
.kr .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); color: var(--red); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.kr .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.kr .kd .eyebrow { color: var(--red-2); }
.kr h1, .kr h2, .kr h3 { line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
.kr h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-bottom: 16px; }
.kr .kd h2 { color: #fff; }
.kr .lead { font-size: 1.1rem; color: var(--muted); max-width: 640px; }
.kr .kd .lead { color: var(--muted-d); }
.kr .center { text-align: center; }
.kr .center .lead { margin-left: auto; margin-right: auto; }
.kr .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: .2s; font-size: 1rem; line-height: 1.2; }
.kr .btn-red { background: var(--red); color: #fff; box-shadow: 0 10px 30px rgba(207,46,46,.35); }
.kr .btn-red:hover { background: var(--red-2); transform: translateY(-2px); }
.kr .btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.04); }
.kr .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.kr .btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.kr .btn-line:hover { background: var(--ink); color: var(--on-ink); }
.kr .btn-sm { padding: 10px 18px; font-size: .92rem; }
.kr .btn-plain { background: none; border: 0; color: var(--muted); }
.kr .mono { font-family: var(--mono); }
.kr .link-red { color: var(--red); font-weight: 700; }

/* ===== HERO ===== */
.kr .hero { position: relative; min-height: calc(100svh - 118px); display: flex; align-items: center; background: #0A0D0F; color: #fff; overflow: hidden; padding: 0; }
.kr #arm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: pan-y; }
.kr .hero-shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(10,13,15,.95) 0%, rgba(10,13,15,.7) 30%, rgba(10,13,15,0) 58%), linear-gradient(0deg, rgba(10,13,15,.95) 0%, rgba(10,13,15,0) 26%), linear-gradient(180deg, rgba(10,13,15,.6) 0%, rgba(10,13,15,0) 18%); }
.kr .hero .wrap { position: relative; z-index: 2; pointer-events: none; width: 100%; }
.kr .hero-tx { max-width: 640px; padding: 56px 0 100px; }
.kr .hero-tx a, .kr .hero-tx button { pointer-events: auto; }
.kr .hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); letter-spacing: -.035em; margin-bottom: 26px; }
.kr .hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.kr .hero h1 .ln > span { display: block; transform: translateY(110%); animation: kr-rise 1.15s cubic-bezier(.19,1,.22,1) forwards; }
.kr .hero h1 .ln.red > span { color: var(--red-2); animation-delay: .12s; }
.kr .hero p { color: #C3CBD0; font-size: 1.15rem; max-width: 520px; margin-bottom: 34px; }
.kr .hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.kr .hero .fu { opacity: 0; transform: translateY(16px); animation: kr-fu .9s cubic-bezier(.19,1,.22,1) forwards; }
.kr .hero .fu.d1 { animation-delay: .35s; } .kr .hero .fu.d2 { animation-delay: .5s; } .kr .hero .fu.d3 { animation-delay: .65s; }
@keyframes kr-rise { to { transform: none; } }
@keyframes kr-fu { to { opacity: 1; transform: none; } }
.kr .hint { display: flex; gap: 18px; margin-top: 30px; font-family: var(--mono); font-size: .78rem; color: var(--muted-d); flex-wrap: wrap; }
.kr .hint b { color: #fff; font-weight: 600; border: 1px solid var(--line-d); border-radius: 6px; padding: 2px 7px; margin-right: 6px; }
.kr .hud { position: absolute; right: 28px; top: 28px; z-index: 3; font-family: var(--mono); font-size: .74rem; color: var(--muted-d); background: rgba(18,23,26,.7); border: 1px solid var(--line-d); border-radius: 10px; padding: 12px 14px; line-height: 1.75; pointer-events: none; min-width: 190px; backdrop-filter: blur(6px); }
.kr .hud .t { color: #fff; display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.kr .hud .t i { font-style: normal; color: var(--ok); }
.kr .hud div span { color: #fff; float: right; }
.kr .hud .mode { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-d); color: var(--spark); }
.kr .scrollcue { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 3; width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 12px; pointer-events: none; }
.kr .scrollcue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: kr-cue 1.8s ease-in-out infinite; }
@keyframes kr-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
.kr .marquee { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line-d); overflow: hidden; z-index: 3; background: rgba(18,23,26,.6); }
.kr .marquee div { display: flex; gap: 46px; white-space: nowrap; padding: 14px 0; font-family: var(--mono); font-size: .82rem; color: var(--muted-d); animation: kr-mq 40s linear infinite; width: max-content; }
.kr .marquee span::before { content: "◆ "; color: var(--red); }
@keyframes kr-mq { to { transform: translateX(-50%); } }
.kr.no3d .hero { background: radial-gradient(ellipse at 75% 55%, #3A1517 0%, #0A0D0F 60%); }
.kr.no3d .hud, .kr.no3d .hint { display: none; }
@media (max-width: 900px) {
  .kr .hero { min-height: calc(100svh + 230px); align-items: flex-start; }
  .kr #arm { top: auto; bottom: 0; height: 62svh; }
  .kr .hero-tx { padding: 36px 0 0; }
  .kr .hero-shade { background: linear-gradient(180deg, rgba(10,13,15,.96) 0%, rgba(10,13,15,.75) 38%, rgba(10,13,15,0) 60%), linear-gradient(0deg, rgba(10,13,15,.9) 0%, rgba(10,13,15,0) 18%); }
  .kr .hero .hud, .kr .scrollcue { display: none; }
  .kr .hero p { font-size: 1.02rem; margin-bottom: 24px; }
}

/* ===== STORY ===== */
.kr .story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; margin-top: 30px; }
.kr .story-vis { position: sticky; top: 110px; height: min(640px, 78vh); align-self: start; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: #090C0E; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.kr .story-vis canvas { width: 100%; height: 100%; display: block; }
.kr.no3d .story-vis { background: linear-gradient(160deg, #151B1F, #0B0E10); }
.kr .sv-cap { position: absolute; top: 18px; left: 20px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; color: #8E99A0; z-index: 2; }
.kr .sv-cap b { color: #fff; font-weight: 600; }
.kr .sv-dots { position: absolute; top: 24px; right: 20px; display: flex; gap: 6px; z-index: 2; }
.kr .sv-dots i { width: 26px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); transition: background .5s; }
.kr .sv-dots i.on { background: var(--red-2); }
.kr .sv-run { position: absolute; left: 20px; bottom: 18px; z-index: 2; font-family: var(--mono); font-size: .78rem; color: #3DDC84; background: rgba(9,12,14,.75); border: 1px solid rgba(61,220,132,.35); border-radius: 8px; padding: 8px 12px; opacity: 0; transform: translateY(8px); transition: .6s; }
.kr .sv-run span { color: #C9D1D6; }
.kr .story-vis.run .sv-run { opacity: 1; transform: none; }
.kr .story-steps { display: flex; flex-direction: column; }
.kr .sstep { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s; }
.kr .sstep.on { opacity: 1; }
.kr .sstep .num { font-family: var(--mono); color: var(--red-2); font-size: .85rem; margin-bottom: 12px; }
.kr .sstep h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px; color: #fff; }
.kr .sstep p { color: var(--muted-d); font-size: 1.08rem; max-width: 460px; margin-bottom: 22px; }
.kr .rolepill { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line-d); border-radius: 999px; padding: 8px 8px 8px 18px; text-decoration: none; color: #fff; font-weight: 600; width: max-content; max-width: 100%; transition: .2s; }
.kr .rolepill:hover { border-color: var(--red-2); }
.kr .rolepill b { background: var(--red); border-radius: 999px; padding: 6px 14px; font-size: .85rem; white-space: nowrap; }
.kr .story-end { text-align: center; padding-top: 40px; }
.kr .story-end h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); color: #fff; }
.kr .story-end h3 em { font-style: normal; color: var(--red-2); }
@media (max-width: 900px) {
  .kr .story { grid-template-columns: 1fr; gap: 0; }
  .kr .story-vis { top: 64px; height: 44vh; z-index: 2; margin-bottom: 10px; }
  .kr .sstep { min-height: 60vh; opacity: .35; justify-content: flex-start; padding-top: 30px; }
}

/* ===== QUIZ ===== */
.kr .sim { max-width: 880px; margin: 44px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.kr .sim-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.kr .bar { flex: 1; height: 6px; background: var(--line); border-radius: 6px; margin: 0 18px; overflow: hidden; }
.kr .bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .5s; }
.kr .sim-body { padding: 38px 34px 40px; min-height: 420px; }
.kr .sim-intro { text-align: center; padding: 20px 0; }
.kr .sim-intro .big svg { width: 64px; height: 64px; color: var(--red); margin: 0 auto 10px; }
.kr .sim-intro h3 { font-size: 1.8rem; margin-bottom: 10px; }
.kr .sim-intro p { color: var(--muted); max-width: 520px; margin: 0 auto 26px; }
.kr .scene { animation: kr-in .45s ease; }
.kr .scene .time { font-family: var(--mono); color: var(--red); font-size: .85rem; margin-bottom: 10px; }
.kr .scene h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 24px; line-height: 1.25; }
.kr .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kr .opt { text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: flex-start; transition: .18s; font-size: .98rem; }
.kr .opt:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.kr .opt .k { font-family: var(--mono); font-weight: 600; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-alt); display: grid; place-items: center; flex: none; font-size: .85rem; }
.kr .opt:hover .k { background: var(--red); color: #fff; }
@keyframes kr-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.kr .result { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; animation: kr-in .5s ease; }
.kr .card-res { background: linear-gradient(150deg, var(--dark), #141A1D); color: #fff; border-radius: 20px; padding: 30px; position: relative; overflow: hidden; }
.kr .card-res::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(207,46,46,.6), transparent 70%); }
.kr .card-res small { font-family: var(--mono); color: var(--muted-d); font-size: .75rem; letter-spacing: .1em; }
.kr .card-res .ic { margin: 12px 0 6px; }
.kr .card-res .ic svg { width: 48px; height: 48px; color: #fff; }
.kr .card-res h3 { font-size: 1.6rem; margin-bottom: 8px; }
.kr .card-res .pct { font-family: var(--mono); color: var(--spark); font-size: .9rem; }
.kr .card-res p { color: #C3CBD0; margin-top: 12px; position: relative; z-index: 1; }
.kr .meters { display: grid; gap: 12px; margin: 6px 0 20px; }
.kr .meter { font-size: .9rem; }
.kr .meter div { display: flex; justify-content: space-between; margin-bottom: 4px; }
.kr .meter .tr { height: 8px; background: var(--line); border-radius: 8px; overflow: hidden; }
.kr .meter .tr i { display: block; height: 100%; background: var(--ink); border-radius: 8px; width: 0; transition: width 1s .2s; }
.kr .meter.top .tr i { background: var(--red); }
.kr .res-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.kr .res-note { font-size: .88rem; color: var(--muted); margin-top: 14px; }
.kr .res-note a { color: var(--red); }
@media (max-width: 760px) { .kr .opts, .kr .result { grid-template-columns: 1fr; } .kr .sim-body { padding: 26px 20px 30px; } }

/* ===== CODE LAB ===== */
.kr .lab { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; align-items: start; }
.kr .editor { background: #0D1113; border: 1px solid var(--line-d); border-radius: 18px; overflow: hidden; font-family: var(--mono); }
.kr .ed-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-d); font-size: .78rem; color: var(--muted-d); }
.kr .ed-top i { width: 11px; height: 11px; border-radius: 50%; background: #3A454C; display: inline-block; }
.kr .ed-top i:first-child { background: var(--red); }
.kr .ed-top span { margin-left: auto; }
.kr .lvls { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line-d); }
.kr .lvl { border: 1px solid var(--line-d); background: transparent; color: var(--muted-d); border-radius: 8px; padding: 6px 12px; font-family: var(--mono); font-size: .78rem; }
.kr .lvl.on { background: #fff; color: #171717; }
.kr .lvl.done::after { content: " ✓"; color: var(--ok); }
.kr .code { padding: 14px 0; min-height: 290px; font-size: .88rem; line-height: 1.9; counter-reset: ln; }
.kr .code div { padding: 0 16px 0 52px; position: relative; color: #C9D1D6; white-space: pre; }
.kr .code div::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 36px; text-align: right; color: #4B565D; }
.kr .code .kw { color: #FF7B72; } .kr .code .fn { color: #79C0FF; } .kr .code .nm { color: #FFB547; } .kr .code .cm { color: #5E6B73; }
.kr .code div.cur { background: rgba(207,46,46,.22); }
.kr .code div.err { background: rgba(207,46,46,.5); }
.kr .code .empty { color: #5E6B73; font-style: italic; }
.kr .keys { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line-d); }
.kr .keys button { background: var(--dark-2); border: 1px solid var(--line-d); color: #fff; border-radius: 10px; padding: 10px 4px; font-family: var(--mono); font-size: .78rem; line-height: 1.3; transition: .15s; }
.kr .keys button:hover { background: var(--dark-3); }
.kr .keys button b { display: block; font-size: 1.05rem; }
.kr .keys .weld { background: rgba(255,181,71,.12); border-color: rgba(255,181,71,.4); color: var(--spark); }
.kr .keys .weld svg { width: 18px; height: 18px; display: block; margin: 0 auto 2px; }
.kr .runrow { display: flex; gap: 8px; padding: 0 16px 16px; }
.kr .runrow button { border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: .82rem; border: 1px solid var(--line-d); background: transparent; color: var(--muted-d); }
.kr .runrow .run { flex: 1; background: var(--red); color: #fff; border-color: var(--red); font-weight: 600; font-size: .92rem; }
.kr .cell-wrap { background: #0D1113; border: 1px solid var(--line-d); border-radius: 18px; padding: 18px; }
.kr .task { font-size: .95rem; color: var(--text-d); margin-bottom: 14px; min-height: 48px; }
.kr .task b { color: var(--spark); }
.kr .task .mono { color: #5E6B73; }
.kr .lgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; aspect-ratio: 7/5; }
.kr .gc { border-radius: 7px; background: #1A2125; position: relative; display: grid; place-items: center; transition: background .25s; }
.kr .gc.wall { background: repeating-linear-gradient(45deg, #E2A400 0 7px, #191919 7px 14px); }
.kr .gc.trail { background: rgba(207,46,46,.28); }
.kr .gc.wp::after { content: ""; width: 46%; height: 46%; border-radius: 50%; border: 2px dashed var(--spark); }
.kr .gc.wd::after { content: ""; width: 50%; height: 50%; border-radius: 50%; background: radial-gradient(circle, #fff, var(--spark) 45%, #B8501A); box-shadow: 0 0 18px var(--spark); }
.kr .gc.tcp::before { content: ""; position: absolute; width: 62%; height: 62%; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px var(--red), 0 0 22px rgba(207,46,46,.8); z-index: 2; }
.kr .gc.tcp .x { position: absolute; inset: 0; z-index: 3; }
.kr .gc.tcp .x::before, .kr .gc.tcp .x::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kr .gc.tcp .x::before { width: 2px; height: 30%; } .kr .gc.tcp .x::after { height: 2px; width: 30%; }
.kr .gc.boom { animation: kr-boom .5s; }
@keyframes kr-boom { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kr .lab-msg { margin-top: 14px; font-family: var(--mono); font-size: .86rem; min-height: 2.6em; color: var(--muted-d); }
.kr .lab-msg.ok { color: var(--ok); } .kr .lab-msg.bad { color: #FF8A80; }
.kr .lab-msg a { color: #fff; }
.kr .stars { font-size: 1.2rem; letter-spacing: 4px; color: var(--spark); }
@media (max-width: 900px) { .kr .lab { grid-template-columns: 1fr; } .kr .cell-wrap { order: -1; } }

/* ===== JOBS ===== */
.kr .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 8px; align-items: center; }
.kr .flbl { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-right: 6px; letter-spacing: .08em; }
.kr .chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 16px; font-size: .92rem; font-weight: 500; transition: .15s; }
.kr .chip:hover { border-color: var(--ink); }
.kr .chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.kr .fsep { width: 1px; height: 26px; background: var(--line); margin: 0 8px; }
.kr .jcount { font-family: var(--mono); font-size: .82rem; color: var(--muted); margin: 14px 0 20px; }
.kr .jobs { display: grid; gap: 14px; }
.kr .job { background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: .25s; overflow: hidden; }
.kr .job:hover { box-shadow: var(--shadow); }
.kr .job.open { border-color: var(--ink); }
.kr .job.hide { display: none; }
.kr .jhead { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 24px 26px; width: 100%; background: none; border: 0; text-align: left; }
.kr .jic { width: 58px; height: 58px; border-radius: 14px; background: var(--bg-alt); display: grid; place-items: center; }
.kr .jic svg { width: 28px; height: 28px; color: var(--ink); }
.kr .job.open .jic { background: var(--red-soft); }
.kr .job.open .jic svg { color: var(--red); }
.kr .jtags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.kr .tag { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--bg-alt); color: var(--muted); }
.kr .tag.lv { background: var(--red-soft); color: var(--red); }
.kr .jhead h3 { font-size: 1.22rem; line-height: 1.25; }
.kr .jmeta { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.kr .ii { display: inline; width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--red); }
.kr .jtog { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 1.3rem; transition: .25s; }
.kr .job.open .jtog { transform: rotate(45deg); background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.kr .jbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.kr .job.open .jbody { grid-template-rows: 1fr; }
.kr .jbody > div { overflow: hidden; }
.kr .jin { padding: 0 26px 28px 106px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; }
.kr .jin p { color: var(--muted); margin-bottom: 16px; }
.kr .jin h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.kr .jin h4 small { font-size: .7rem; text-transform: none; letter-spacing: 0; opacity: .8; }
.kr .d90 { display: grid; gap: 10px; margin-bottom: 20px; }
.kr .d90 div { display: grid; grid-template-columns: 62px 1fr; gap: 12px; font-size: .93rem; align-items: baseline; }
.kr .d90 b { font-family: var(--mono); font-size: .8rem; color: var(--red); }
.kr .stack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.kr .stack span { background: var(--dark); color: #fff; font-size: .8rem; padding: 5px 11px; border-radius: 999px; }
html.dark .kr .stack span { background: var(--dark-3); }
.kr .jacts { display: flex; gap: 10px; flex-wrap: wrap; }
.kr .jempty { display: none; padding: 30px; text-align: center; border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); }
@media (max-width: 760px) { .kr .jhead { grid-template-columns: 1fr auto; padding: 20px; } .kr .jic { display: none; } .kr .jin { grid-template-columns: 1fr; padding: 0 20px 24px; } }

/* ===== CAREER PATH ===== */
.kr .path { margin-top: 44px; background: var(--dark); border-radius: 24px; padding: 40px; color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.kr .yr { font-family: var(--mono); font-size: .8rem; color: var(--muted-d); }
.kr .path .role { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; margin: 6px 0 10px; line-height: 1.1; }
.kr .path .desc { color: var(--muted-d); margin-bottom: 24px; min-height: 78px; }
.kr input[type=range] { width: 100%; accent-color: var(--red); height: 30px; }
.kr .ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--muted-d); margin-top: 4px; }
.kr .skills { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.kr .skill { border: 1px solid var(--line-d); border-radius: 999px; padding: 7px 14px; font-size: .88rem; color: #6B7880; transition: .35s; }
.kr .skill.on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(207,46,46,.35); }
.kr .skill.on::before { content: "✓ "; }
.kr .path h4 { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--muted-d); margin-bottom: 14px; font-weight: 600; }
.kr .path h4 span { color: #fff; }
@media (max-width: 820px) { .kr .path { grid-template-columns: 1fr; padding: 28px 22px; } }

/* ===== ASK THE TEAM ===== */
.kr .chat { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; margin-top: 44px; align-items: start; }
.kr .qs { display: flex; flex-direction: column; gap: 10px; }
.kr .q { text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: 14px; padding: 14px 18px; font-weight: 600; transition: .15s; display: flex; justify-content: space-between; gap: 12px; }
.kr .q:hover { border-color: var(--red); }
.kr .q.asked { opacity: .45; }
.kr .q::after { content: "→"; color: var(--red); }
.kr .phone { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; height: 520px; }
.kr .ph-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.kr .ph-top .av { width: 40px; height: 40px; }
.kr .ph-top b { display: block; font-size: .98rem; }
.kr .ph-top small { color: #1E8E3E; font-size: .8rem; }
html.dark .kr .ph-top small { color: var(--ok); }
.kr .msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-alt); }
.kr .m { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: .95rem; animation: kr-pop .3s ease; }
@keyframes kr-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.kr .m.me { align-self: flex-end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 4px; }
.kr .m.them { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.kr .m.them .who { font-size: .74rem; font-weight: 700; color: var(--red); display: block; margin-bottom: 2px; }
.kr .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #7A1A1A); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; }
.kr .row-them { display: flex; gap: 8px; align-items: flex-end; align-self: flex-start; max-width: 90%; }
.kr .row-them .m { max-width: 100%; }
.kr .typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.kr .typing i { width: 7px; height: 7px; border-radius: 50%; background: #B0B0B0; animation: kr-ty 1s infinite; }
.kr .typing i:nth-child(2) { animation-delay: .15s; } .kr .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes kr-ty { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 860px) { .kr .chat { grid-template-columns: 1fr; } .kr .qs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .kr .q { white-space: nowrap; } .kr .phone { height: 460px; } }

/* ===== PERKS + PROCESS ===== */
.kr .perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-radius: 22px; overflow: hidden; margin-top: 44px; }
.kr .perk { background: var(--night); padding: 30px; transition: .25s; }
.kr .perk:hover { background: #171E22; }
.kr .perk .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(207,46,46,.12); color: var(--red-2); margin-bottom: 16px; }
.kr .perk .ic svg { width: 26px; height: 26px; }
.kr .perk h3 { font-size: 1.15rem; margin-bottom: 6px; color: #fff; }
.kr .perk p { color: var(--muted-d); font-size: .95rem; }
.kr .proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 60px; }
.kr .pc { border-top: 2px solid var(--line-d); padding-top: 20px; position: relative; }
.kr .pc::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.kr .pc .n { font-family: var(--mono); color: var(--red-2); font-size: .8rem; }
.kr .pc h3 { font-size: 1.1rem; margin: 6px 0; color: #fff; }
.kr .pc p { color: var(--muted-d); font-size: .93rem; }
.kr .pc .w { font-family: var(--mono); font-size: .76rem; margin-top: 8px; display: inline-block; color: var(--spark); }
@media (max-width: 860px) { .kr .perks { grid-template-columns: 1fr 1fr; } .kr .proc { grid-template-columns: 1fr 1fr; row-gap: 34px; } }
@media (max-width: 540px) { .kr .perks, .kr .proc { grid-template-columns: 1fr; } }

/* ===== BRIDGE ===== */
.kr .bridge { display: flex; justify-content: space-between; align-items: center; gap: 30px; border: 1.5px dashed var(--line); border-radius: 22px; padding: 30px 36px; flex-wrap: wrap; }
.kr .bridge h3 { font-size: 1.4rem; margin-bottom: 4px; }
.kr .bridge p { color: var(--muted); }

/* ===== APPLY ===== */
.kr .apply { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.kr .apply .lead { margin-bottom: 24px; }
.kr .contact { font-family: var(--mono); font-size: .85rem; color: var(--muted-d); line-height: 2; }
.kr .contact a { color: #fff; }
.kr .form { background: var(--card); color: var(--ink); border-radius: 24px; padding: 34px; position: relative; overflow: hidden; }
.kr .fsteps { display: flex; gap: 6px; margin-bottom: 26px; }
.kr .fsteps i { flex: 1; height: 5px; border-radius: 5px; background: var(--line); transition: .4s; }
.kr .fsteps i.on { background: var(--red); }
.kr .fpane { display: none; animation: kr-in .4s ease; }
.kr .fpane.on { display: block; }
.kr .fpane h3 { font-size: 1.4rem; margin-bottom: 18px; }
.kr .picks { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.kr .pick { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 500; transition: .15s; }
.kr .pick:hover { border-color: var(--ink); }
.kr .pick input { accent-color: var(--red); width: 18px; height: 18px; flex: none; }
.kr .pick:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.kr label.l { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; }
.kr .f { margin-bottom: 16px; }
.kr .inp { width: 100%; font: inherit; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--card); color: var(--ink); }
.kr .inp:focus { outline: none; border-color: var(--red); }
.kr .drop { display: block; border: 2px dashed var(--line); border-radius: 14px; padding: 24px; text-align: center; cursor: pointer; color: var(--muted); transition: .2s; }
.kr .drop:hover, .kr .drop.over { border-color: var(--red); background: var(--red-soft); color: var(--ink); }
.kr .drop b { color: var(--red); }
.kr .drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kr .chk { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--muted); margin: 6px 0 16px; }
.kr .chk input { margin-top: 4px; accent-color: var(--red); flex: none; }
.kr .chk a { color: var(--red); text-decoration: underline; }
.kr .fnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.kr .ferr { color: var(--red-2); font-size: .88rem; margin-top: 12px; min-height: 1.3em; }
.kr .fdone { display: none; text-align: center; padding: 40px 10px; }
.kr .form.sent .fdone { display: block; }
.kr .form.sent #fwrap { display: none; }
.kr .fdone .ic svg { width: 64px; height: 64px; color: var(--ok); margin: 0 auto; }
.kr .fdone h3 { font-size: 1.6rem; margin: 10px 0; }
.kr .fdone p { color: var(--muted); }
.kr #fx { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
@media (max-width: 900px) { .kr .apply { grid-template-columns: 1fr; gap: 34px; } .kr .form { padding: 24px; } }

/* ===== phones: "see the positions" bar ===== */
.kr .ksticky { display: none; }
@media (max-width: 760px) {
  .kr section { padding: 70px 0; }
  .kr .ksticky { display: flex; position: fixed; left: 12px; right: 84px; bottom: 12px; z-index: 40; transform: translateY(130%); transition: .3s; }
  .kr .ksticky.show { transform: none; }
  .kr .ksticky .btn { width: 100%; padding: 13px 18px; }
}
.kr .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.kr .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kr *, .kr *::before, .kr *::after { animation: none !important; transition: none !important; }
  .kr .rv, .kr .hero .fu { opacity: 1; transform: none; }
  .kr .hero h1 .ln > span { transform: none; }
}