main { max-width: 1040px; }

/* hero */
.hero-c { position: relative; text-align: center; padding: 3.5rem 0 2rem; isolation: isolate; }
.hero-c::before { content: ""; position: absolute; inset: -3rem 0 0; z-index: -1; background: radial-gradient(closest-side at 50% 38%, rgba(139,92,246,.30), transparent), radial-gradient(closest-side at 22% 85%, rgba(255,107,53,.14), transparent); }
.hero-c .tag { display:inline-block; padding:.3rem .9rem; border:1px solid rgba(224,164,60,.45); border-radius:99px; background:rgba(224,164,60,.08); font-size:.74rem; }
.hero-c h1 { font-size: clamp(2.2rem, 1rem + 4.2vw, 3.9rem); line-height:1.08; letter-spacing:-.02em; margin:1rem auto .9rem; max-width:18ch; background:linear-gradient(90deg,#fff 0%,#ffd9a0 45%,#ff8a5c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-c .lead { margin:0 auto 1.6rem; text-align:center; font-size:1.15rem; max-width:60ch; }
.hero-c .btn.primary { padding:.85rem 2rem; font-size:1rem; box-shadow:0 10px 30px rgba(139,92,246,.35); transition:transform .2s, box-shadow .2s; }
.hero-c .btn.primary:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(255,107,53,.4); text-decoration:none; }

/* section headings */
main h2 { text-align:center; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); margin:2.6rem 0 0; }
main h2::after { content:''; display:block; width:56px; height:4px; margin:.7rem auto 0; border-radius:4px; background:linear-gradient(90deg,var(--orange),var(--violet)); }

/* values */
.values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:2rem 0 0; }
.val { position:relative; border:1px solid var(--border); background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border-radius:18px; padding:1.4rem 1.3rem; transition:transform .25s, border-color .25s, box-shadow .25s; }
.val:hover { transform:translateY(-4px); border-color:rgba(224,164,60,.5); box-shadow:0 14px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(224,164,60,.15); }
.val .ico { display:grid; place-items:center; width:48px; height:48px; font-size:1.5rem; border-radius:14px; background:linear-gradient(135deg,rgba(255,107,53,.28),rgba(139,92,246,.28)); border:1px solid rgba(255,255,255,.12); }
.val strong { display:block; margin:.9rem 0 .35rem; font-family:"Space Grotesk",Inter,sans-serif; font-size:1.08rem; }
.val span.t { color:var(--muted); font-size:.92rem; line-height:1.6; }

/* open roles */
.roles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:2rem 0 0; }
.role { display:flex; flex-direction:column; gap:.9rem; border:1px solid var(--border); background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border-radius:14px; padding:1.3rem 1.2rem; transition:transform .25s, border-color .25s, box-shadow .25s; }
.role:hover { transform:translateY(-3px); border-color:rgba(224,164,60,.5); box-shadow:0 14px 34px rgba(0,0,0,.28); }
.role h3 { margin:0; font-family:"Space Grotesk",Inter,sans-serif; font-size:1.15rem; }
.role .facts { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; flex:1; }
.role .facts li { display:flex; gap:.65rem; align-items:flex-start; color:var(--muted); font-size:.92rem; line-height:1.35; }
.role .facts svg { flex:0 0 18px; width:18px; height:18px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.role .foot { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.role .open { font-size:.78rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.04em; }
.role .btn { margin:0; background:#2a5bff; color:#fff; border-radius:999px; box-shadow:none; }
.role .btn:hover { background:#1f49d6; }

/* open roles note */
.note { text-align:center; max-width:760px; margin:1.6rem auto 0; padding:1.1rem 1.4rem; border-left-width:1px; border-top:3px solid var(--gold); border-radius:14px; font-size:.98rem; }

/* application form as a card */
form { display:grid; gap:1rem; max-width:820px; margin:1.5rem auto 0; padding:1.8rem; border:1px solid var(--border); border-radius:22px; background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); box-shadow:0 24px 60px rgba(0,0,0,.3); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
label { display:grid; gap:.35rem; font-size:.86rem; color:var(--muted); font-weight:600; }
input, select, textarea { font:inherit; font-size:.97rem; color:var(--text); background:rgba(0,0,0,.22); border:1px solid var(--border); border-radius:12px; padding:.75rem .9rem; width:100%; transition:border-color .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color:rgba(183,174,208,.55); }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,107,53,.22); }
textarea { min-height:150px; resize:vertical; }
select option { color:#171533; background:#fff; }
.hp { position:absolute; left:-9999px; }
form .note { text-align:left; max-width:none; margin:0; padding:.7rem 1rem; border-top:1px solid var(--border); border-left:4px solid var(--gold); border-radius:10px; font-size:.88rem; }
#msg { min-height:1.4em; font-weight:600; } #msg.ok { color:#34d399; } #msg.err { color:#f87171; }
button.submit { justify-self:start; cursor:pointer; padding:.9rem 2.2rem; border-radius:99px; border:0; color:#fff; font:inherit; font-weight:700; font-size:1rem; background:linear-gradient(135deg,var(--orange),var(--violet)); box-shadow:0 10px 28px rgba(139,92,246,.35); transition:transform .2s, box-shadow .2s; }
button.submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,107,53,.4); }
button.submit:disabled { opacity:.6; cursor:wait; }
main > p.lead { text-align:center; margin:1.8rem auto 0; font-size:1rem; }

@media (max-width:900px) { .roles { grid-template-columns:1fr; } .values { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .row { grid-template-columns:1fr; } .values { grid-template-columns:1fr; } form { padding:1.2rem; } .hero-c { padding-top:2.2rem; } }

/* top bar: compact language picker, buttons on one line */
.bar #lang { flex: 0 0 auto; width: auto; min-width: 8.5rem; padding: .5rem 1rem; }
.bar .btn { white-space: nowrap; }
main::before { display: none; }

/* gaps and friendliness */
#apply { scroll-margin-top: 5rem; }
#msg:empty { display: none; }
#msg { min-height: 0; padding: .6rem .9rem; border-radius: 10px; background: rgba(255,255,255,.05); }
#msg.ok { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.4); }
#msg.err { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); }
.bad { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.2); }
@media (max-width:640px) { button.submit { justify-self: stretch; width: 100%; } main h2 { margin-top: 2rem; } }

/* phones: the top bar fits (no sideways scroll) */
@media (max-width: 600px) {
    .bar { gap: .4rem; padding: .6rem .8rem; flex-wrap: nowrap; }
    .bar img { height: 36px; }
    .bar b { font-size: .9rem; }
    .bar #lang { min-width: 0; max-width: 7.5rem; padding: .4rem .6rem; }
    .bar .btn { padding: .45rem .8rem; font-size: .82rem; }
    .bar a.btn:not(.primary) { display: none; }
}

/* application tracker */
.trackcard { max-width: 640px; margin: 1.6rem auto 0; padding: 1.5rem; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); }
.trackcard p { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
.trackcard code { padding: .05rem .35rem; border-radius: 4px; background: rgba(255,255,255,.08); font-size: .85em; }
.trackcard .trow { display: flex; gap: .6rem; }
.trackcard .trow input { flex: 1 1 auto; min-width: 0; }
.trackcard .trow .submit { flex: 0 0 auto; margin: 0; }
#trackResult { min-height: 1.3rem; margin-top: .8rem; font-size: .9rem; }
#trackResult.ok { color: #34d399; } #trackResult.err { color: #f472b6; }

/* role picked from an Apply now button */
#apply { scroll-margin-top: 110px; }
select.picked { outline: 2px solid var(--gold, #e0a43c); outline-offset: 2px; transition: outline-color .3s; }