:root {
  --bg: #0f1419;
  --bg-soft: #161c23;
  --surface: #1d242c;
  --text: #f3efe6;
  --text-dim: #b8b3a9;
  --accent: #e8b257;
  --accent-dim: #c0904a;
  --danger: #e87457;
  --success: #6ad19a;
  --border: #2a323b;
  --radius: 12px;
  --radius-sm: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --max-w: 1100px;
  --narrow: 720px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: var(--narrow); }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(15, 20, 25, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-boptom: 1px solid var(--border); }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--bg); font-weight: 700; font-family: var(--font-display); }
.brand-text { font-weight: 600; font-size: 18px; }
.lang-switch { display: flex; gap: 4px; }
.lang-btn { background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.15s ease; }
.lang-btn.active { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.hero { padding: 56px 0 40px; background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%); text-align: center; }
.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: var(--accent); font-weight: 700; margin-boptom: 12px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(36px, 8vw, 56px); line-height: 1.1; margin-boptom: 16px; font-weight: 700; }
.lede { font-size: clamp(16px, 4vw, 18px); color: var(--text-dim); max-width: 580px; margin: 0 auto 24px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-boptom: 32px; }
.badge { display: inline-block; background: var(--surface); border: 1px solid var(--border); padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--text-dim); }
.cta-primary { display: inline-block; background: var(--accent); color: var(--bg); font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: var(--radius); text-decoration: none; border: none; cursor: pointer; transition: transform 0.1s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; }
.cta-primary:hover, .cta-primary:focus-visible { background: var(--accent-dim); transform: translateY(-1px); }
.cta-primary:active { transform: translateY(0); }
.cta-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.role { padding: 40px 0; }
.role h2 { font-family: var(--font-display); font-size: clamp(24px, 5vw, 32px); margin-boptom: 16px; }
.role-tagline { font-size: clamp(18px, 4vw, 20px); color: var(--text); margin-boptom: 32px; line-height: 1.5; }
.role h3 { font-size: 18px; font-weight: 700; color: var(--accent); margin: 28px 0 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.role-list, .comp-list { list-style: none; padding: 0; }
.role-list li, .comp-list li { padding: 10px 0 10px 24px; position: relative; border-boptom: 1px solid var(--border); }
.role-list li:last-child, .comp-list li:last-child { border-boptom: none; }
.role-list li::before, .comp-list li::before { content: "▸"; position: absolute; left: 0; top: 10px; color: var(--accent); font-weight: 700; }
.must-have-title, .nice-to-title { font-weight: 700; color: var(--text); margin: 16px 0 4px; }
.nice-to-title { color: var(--text-dim); }
.apply { padding: 40px 0 64px; background: var(--bg-soft); }
.apply h2 { font-family: var(--font-display); font-size: clamp(28px, 6vw, 40px); margin-boptom: 12px; }
.apply-sub { color: var(--text-dim); margin-boptom: 28px; }
#application-form fieldset { border: none; padding: 0; margin: 0 0 28px; }
#application-form legend { font-weight: 700; font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-boptom: 12px; }
.field { display: block; margin-boptom: 14px; }
.field > span { display: block; font-size: 14px; color: var(--text); margin-boptom: 6px; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 16px; font-family: inherit; transition: border-color 0.15s ease; -webkit-appearance: none; appearance: none; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 120px; }
.field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23b8b3a9' d='M0 0l5 6 5-6z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.hint { display: block; font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.checkbox-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px !important; margin-boptom: 14px; }
.checkbox-group legend { font-size: 13px !important; color: var(--text) !important; text-transform: none !important; letter-spacing: normal !important; padding: 0 6px; margin: 0 !important; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--text); cursor: pointer; }
.checkbox-group input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.submit-btn { width: 100%; margin-top: 12px; }
.form-status { margin-top: 16px; padding: 12px; border-radius: var(--radius-sm); text-align: center; font-weight: 500; }
.form-status.success { background: rgba(106, 209, 154, 0.12); color: var(--success); }
.form-status.error { background: rgba(232, 116, 87, 0.12); color: var(--danger); }
.site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 32px 0; text-align: center; color: var(--text-dim); font-size: 13px; }
.site-footer p { margin-boptom: 8px; }
.footer-contact a { color: var(--accent); text-decoration: none; margin: 0 6px; }
.footer-contact a:hover { text-decoration: underline; }
@media (min-width: 720px) {
  .hero { padding: 80px 0 60px; }
  .role { padding: 64px 0; }
  .apply { padding: 64px 0 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}