.join-page { background: radial-gradient(ellipse at 14% 35%, #12345155, transparent 50%), radial-gradient(ellipse at 48% 5%, #5b14252b, transparent 45%), #06080d; }
.join-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1.25rem, 4vw, 4rem); border-bottom: 1px solid var(--line); }
.join-back { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.8rem; }
.join-back:hover { color: var(--white); }
.recruit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); max-width: 1440px; margin: auto; padding: 3.5rem clamp(1.25rem, 4vw, 4rem); align-items: start; }
.robot-welcome { position: sticky; top: 2rem; min-width: 0; }
.robot-welcome h1 { margin: 1.2rem 0; font: 600 clamp(2.6rem, 4.3vw, 4.8rem)/1.04 var(--display); letter-spacing: -0.065em; }
.robot-welcome h1 > span { color: var(--blue-bright); }
.welcome-copy { color: var(--muted); font-size: 0.95rem; line-height: 1.8; }
.robot-scene { position: relative; isolation: isolate; height: clamp(300px, 32vw, 450px); overflow: hidden; margin: 0 -1rem; }
.robot-cosmos { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.reactor-halo { position:absolute; width:70%; aspect-ratio:1; left:15%; top:2%; perspective:600px; }
.reactor-halo > span { position:absolute; inset:0; border:1px solid #23a9e055; border-left:3px solid #80dcff; border-radius:50%; transform:rotateX(65deg) rotateZ(-20deg); animation:reactor-turn 14s linear infinite; box-shadow:inset 0 0 30px #23a9e010,0 0 24px #23a9e010; }
.reactor-halo > span:nth-child(2) { inset:10%; border-color:#ee202850; border-bottom:3px solid var(--red); animation-direction:reverse; animation-duration:10s; }
.reactor-halo > span:nth-child(3) { inset:20%; border-style:dashed; animation-duration:24s; }
.scan-beam { position:absolute; inset:18% 10%; background:linear-gradient(transparent 48%,#23a9e035 50%,transparent 52%); animation:scan-sweep 5s ease-in-out infinite; mask-image:radial-gradient(ellipse,#000,transparent 70%); }
.scout-drone { position:absolute; left:10%; top:26%; display:flex; align-items:center; gap:4px; animation:scout-flight 12s ease-in-out infinite; filter:drop-shadow(0 0 8px #23a9e055); }
.scout-drone b { width:25px; height:14px; border-radius:50%; border:2px solid #bdcede; background:var(--panel); }
.scout-drone b::after { content:""; display:block; width:5px; height:4px; margin:3px auto; border-radius:50%; background:var(--cyan); }
.scout-drone i { width:26px; height:3px; background:#80dcff; border-radius:50%; animation:propeller .2s linear infinite alternate; }
.robot-controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.25rem; }
.robot-controls > span { color:var(--muted); font-size:.7rem; }
.boost-button { border:1px solid #23a9e077; border-radius:3rem; padding:.8rem 1.2rem; color:var(--cyan); background:#0d263b; cursor:pointer; font:500 .8rem var(--body); box-shadow:0 0 25px #23a9e020; transition:box-shadow .3s,background .3s; }
.boost-button:hover { background:#133954; box-shadow:0 0 32px #23a9e045; }
.boost-button:focus-visible { outline:2px solid var(--white); outline-offset:4px; }
.boost-button:disabled { opacity:.6; cursor:default; }
.robot-scene.is-boosting .robot-float { animation:robot-boost 1.8s cubic-bezier(.2,.7,.2,1) both; }
.robot-scene.is-boosting .robot-thrust { fill:var(--cyan); animation:boost-flame .15s infinite alternate; }
.robot-scene.is-boosting .reactor-halo > span { animation-duration:1.8s; border-color:var(--cyan); }
.robot-scene.is-boosting .robot-heart { stroke:var(--cyan); }
.join-page .application-panel { animation:panel-arrive .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes panel-arrive { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:none; } }
@keyframes reactor-turn { to { transform:rotateX(65deg) rotateZ(340deg); } }
@keyframes scan-sweep { 0%,100% { transform:translateY(-25%); opacity:.2; } 50% { transform:translateY(25%); opacity:.7; } }
@keyframes scout-flight { 0%,100% { transform:translate(0,0) rotate(-10deg); } 35% { transform:translate(160px,-65px) rotate(8deg); } 70% { transform:translate(230px,75px) rotate(-8deg); } }
@keyframes propeller { to { transform:scaleX(.4); } }
@keyframes robot-boost { 0%,100% { transform:translateY(0) rotate(0); } 15% { transform:translateY(10px) rotate(-5deg); } 40% { transform:translateY(-48px) rotate(7deg); } 65% { transform:translateY(-25px) rotate(-4deg); } }
@keyframes boost-flame { from { transform:scaleY(1.3); opacity:.6; } to { transform:scaleY(1.9); opacity:1; } }
.crew-robot { position: absolute; width: min(100%, 440px); height: 100%; left: 50%; top: 0; transform: translateX(-50%); overflow: visible; filter: drop-shadow(0 16px 32px #0005); }
.robot-float { animation: robot-hover 4.5s ease-in-out infinite; transform-origin: 220px 240px; }
.robot-head { transform: translate(var(--look-x, 0px), var(--look-y, 0px)) rotate(var(--head-angle, 0deg)); transform-origin: 220px 190px; transition: transform 180ms ease-out; }
.robot-eyes { transform-box: fill-box; transform-origin: center; animation: robot-blink 6s infinite; filter: drop-shadow(0 0 7px #23a9e0); }
.arm-left { transform-origin: 145px 239px; animation: arm-sway 4.5s ease-in-out infinite; }
.arm-right { transform-origin: 294px 237px; animation: robot-wave 7s ease-in-out infinite; }
.robot-thrust { transform-origin: 220px 330px; animation: thrust 0.9s ease-in-out infinite alternate; }
.robot-heart { stroke-dasharray: 90; animation: heartbeat 3s ease-in-out infinite; }
.antenna-light { animation: antenna-glow 2s ease-in-out infinite alternate; }
.robot-shadow { position: absolute; bottom: 12%; left: 27%; width: 46%; height: 7%; border-radius: 50%; background: #0b94c555; filter: blur(14px); animation: shadow-breathe 4.5s ease-in-out infinite; }
.scene-grid { position: absolute; inset: 42% -20% -30%; background-image: linear-gradient(#23a9e018 1px, transparent 1px), linear-gradient(90deg, #23a9e018 1px, transparent 1px); background-size: 36px 36px; transform: perspective(220px) rotateX(55deg); mask-image: radial-gradient(ellipse, #000, transparent 67%); }
.scene-orbit { position: absolute; width: 80%; height: 25%; left: 10%; bottom: 17%; border: 1px solid #23a9e044; border-radius: 50%; transform: rotate(-12deg); }
.scene-orbit::after { content: ""; position: absolute; width: 8px; height: 8px; top: 50%; left: -4px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 20px var(--blue-bright); animation: orbit-dot 5s ease-in-out infinite alternate; }
.orbit-two { bottom: 22%; width: 66%; left: 17%; transform: rotate(17deg); border-color: #ee20282b; }
.orbit-two::after { background: var(--red); animation-delay: -2s; }
.scene-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 0.6rem; color: var(--cyan); font-size: 0.75rem; text-align: center; padding: 0 1rem; }
.scene-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.welcome-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; line-height: 1.6; }
.motion-toggle { border: 1px solid var(--line); border-radius: 2rem; padding: 0.5rem 0.8rem; background: transparent; color: var(--white); white-space: nowrap; cursor: pointer; font: inherit; }
.motion-toggle:hover { border-color: var(--blue-bright); }
.motion-toggle:focus-visible, .join-back:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.application-panel { min-width: 0; scroll-margin-top: 1rem; }
.join-page .join-form { padding: clamp(1.4rem, 3vw, 2.5rem); }
.join-page .join-form h3 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); }
.join-page .join-fields { gap: 1rem; }
.join-page .join-fields input, .join-page .join-fields select, .join-page .join-fields textarea { padding: 0.75rem; }
.join-page .join-form-heading { gap: 0.6rem; }
.join-page .join-progress-label { font-size: 0.65rem; }
.join-footer { max-width: 1440px; margin: auto; display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem clamp(1.25rem, 4vw, 4rem); color: var(--muted); font-size: 0.75rem; border-top: 1px solid var(--line); }
.join-page.motion-paused .robot-scene *, .join-page.motion-paused .robot-scene *::after { animation-play-state: paused !important; }
.join-page.motion-paused .robot-head { transform: none; transition: none; }
.join-page[data-application-state="success"] .robot-heart { stroke: var(--cyan); }
@keyframes robot-hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes robot-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(0.08); } }
@keyframes robot-wave { 0%, 60%, 100% { transform: rotate(-8deg); } 68%, 80% { transform: rotate(-112deg); } 74%, 86% { transform: rotate(-86deg); } }
@keyframes arm-sway { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-9deg); } }
@keyframes thrust { from { transform: scaleY(0.8); opacity: 0.45; } to { transform: scaleY(1.1); opacity: 0.85; } }
@keyframes heartbeat { 0%, 100% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: 90; opacity: 0.5; } }
@keyframes antenna-glow { from { filter: drop-shadow(0 0 1px #ee2028); } to { filter: drop-shadow(0 0 10px #ee2028); } }
@keyframes shadow-breathe { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(0.85); opacity: 0.35; } }
@keyframes orbit-dot { to { left: 100%; } }
@media (max-width: 800px) {
  .recruit-layout { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  .robot-welcome { position: relative; top: auto; }
  .robot-welcome h1 { font-size: clamp(2.6rem, 7vw, 4rem); }
  .robot-scene { height: 320px; }
  .welcome-bottom { margin-top: 1rem; }
  .join-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .robot-scene *, .robot-scene *::after { animation: none !important; transition: none !important; }
  .robot-head { transform: none; }
}