body.light-theme { --bg:#edf2f8; --bg2:#f7f9fc; --s:rgba(255,255,255,.72); --s2:rgba(10,24,45,.05); --ln:rgba(10,22,40,.13); --tx:#101826; --mu:#4f5c72; --cy:#0a8fb5; --vi:#6a4fe0; background:linear-gradient(160deg,#eef4fb,#f9fbff); }
:root { --cy-t:#63ddff; }
body:is(.light,.light-theme) { --cy-t:#07708f; }
body { font-family:Manrope,"DM Sans",system-ui,sans-serif; }
h1, h2, h3, h4 { font-family:"Space Grotesk",Manrope,system-ui,sans-serif; }
.container { width:min(100% - 40px,var(--max)); margin:0 auto; }
.logo-dark, .watermark-dark { display:block; }
.logo-light, .watermark-light { display:none; }
body:is(.light,.light-theme) .logo-light, body:is(.light,.light-theme) .watermark-light { display:block; }
body:is(.light,.light-theme) .logo-dark, body:is(.light,.light-theme) .watermark-dark { display:none; }
.logo { display:flex; align-items:center; gap:10px; color:var(--tx); }
.logo-text { font:700 18px "Space Grotesk",sans-serif; letter-spacing:.08em; }
.logo-text span { display:none; }
.hero-glow { position:fixed; z-index:-1; border-radius:50%; filter:blur(120px); opacity:.12; pointer-events:none; }
body:is(.light,.light-theme) .hero-glow { opacity:.18; }
.glow-one { width:50vw; height:50vw; top:-10%; left:-10%; background:var(--cy); animation:rcBlob1 20s infinite alternate ease-in-out; }
.glow-two { width:45vw; height:45vw; bottom:-5%; right:-10%; background:var(--vi); animation:rcBlob2 25s infinite alternate-reverse ease-in-out; }
@keyframes rcBlob1 { 100%{transform:translate(15vw,15vh) scale(1.1)} }
@keyframes rcBlob2 { 100%{transform:translate(-20vw,-10vh) scale(1.2)} }
.watermark-bg { position:fixed; inset:0; z-index:-1; display:flex; align-items:center; justify-content:center; padding:6vw; opacity:.035; pointer-events:none; }
body:is(.light,.light-theme) .watermark-bg { opacity:.05; }
.watermark-bg img { object-fit:contain; }
.navbar { position:fixed; top:14px; left:50%; z-index:100; translate:-50% 0; width:min(var(--max),100% - 28px); height:66px; border:1px solid var(--ln); border-radius:18px; background:var(--s); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 10px 40px rgba(0,0,0,.3); transition:box-shadow .3s,background .3s; }
body:is(.light,.light-theme) .navbar { box-shadow:0 10px 40px rgba(10,143,181,.15); }
.navbar.scrolled { background:var(--bg2); }
.nav-container { width:100%; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.nav-links { display:flex; gap:4px; }
.nav-links a { padding:9px 16px; border-radius:10px; font-size:14px; font-weight:600; color:var(--mu); transition:background .2s,color .2s; }
.nav-links a:hover { background:var(--s2); color:var(--tx); }
.nav-links a.active { background:var(--s2); color:var(--cy-t); }
.header-right-side { display:flex; align-items:center; gap:10px; }
.theme-toggle-btn, .menu-toggle { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--ln); border-radius:10px; background:var(--s); color:var(--tx); font-size:16px; cursor:pointer; transition:border-color .2s; }
.theme-toggle-btn:hover, .menu-toggle:hover { border-color:var(--cy); }
.menu-toggle { display:none; align-content:center; gap:4px; padding:0; }
.menu-toggle span { display:block; width:18px; height:2px; border-radius:2px; background:var(--tx); transition:transform .25s,opacity .25s; }
.menu-toggle.active span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.recruit-page { position:relative; z-index:2; min-height:100vh; padding:130px 0 90px; pointer-events:auto; }
.recruit-wrapper { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:6px 12px; border:1px solid var(--ln); border-radius:99px; background:var(--s); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--cy); }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--cy); box-shadow:0 0 12px var(--cy); animation:pulse 2s infinite; }
.accent-text { font-style:normal; color:transparent; background:linear-gradient(95deg,var(--cy),var(--vi),var(--cy)); background-size:200%; -webkit-background-clip:text; background-clip:text; animation:shine 6s linear infinite; }
.recruit-info { position:sticky; top:110px; }
.recruit-info>* { animation:up .9s cubic-bezier(.2,.7,.2,1) both; }
.recruit-info>:nth-child(2) { animation-delay:.1s; }
.recruit-info>:nth-child(3) { animation-delay:.2s; }
.recruit-info>:nth-child(4) { animation-delay:.3s; }
.recruit-info h1 { margin:0 0 22px; font-size:clamp(2.8rem,5.2vw,5.2rem); line-height:.95; letter-spacing:-.065em; color:var(--tx); }
.recruit-info>p { max-width:520px; margin:0; font-size:17px; line-height:1.65; color:var(--mu); }
.perks-list { display:grid; gap:12px; margin-top:34px; max-width:520px; }
.perk-item { display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--ln); border-radius:16px; background:var(--s); backdrop-filter:blur(12px); transition:border-color .3s,transform .3s,box-shadow .3s; }
.perk-item:hover { border-color:var(--cy); transform:translateX(6px); box-shadow:0 10px 20px rgba(10,143,181,.1); }
.perk-item>i { flex:none; display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--ln); border-radius:12px; background:var(--s2); color:var(--cy); font-size:19px; }
.perk-item h4 { margin:0 0 2px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--tx); }
.perk-item p { margin:0; font-size:13.5px; color:var(--mu); }
.glass-panel { border:1px solid var(--ln); border-radius:22px; background: var(--bg3); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 30px 80px rgba(0,0,0,.3); }
body:is(.light,.light-theme) .glass-panel { box-shadow:0 30px 80px rgba(10,30,70,.12); }
.recruit-form-container { padding:36px; animation:up 1s .15s cubic-bezier(.2,.7,.2,1) both; }
.recruit-form-container h3 { margin:0 0 6px; font-size:26px; letter-spacing:-.03em; color:var(--tx); }
.form-subtitle { margin:0 0 26px; font-size:15px; color:var(--mu); }
.recruit-form { display:grid; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-group label { font-size:13px; font-weight:700; color:var(--tx); }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:13px 14px; border:1px solid var(--ln); border-radius:12px; background:var(--s2); color:var(--tx); font-family:inherit; font-size:15px; outline:0; transition:border-color .2s,box-shadow .2s,background .2s; }
.form-group textarea { min-height:120px; resize:vertical; line-height:1.55; }
.form-group ::placeholder { color:var(--mu); opacity:.75; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color:rgba(10,143,181,.45); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--cy); background:var(--s); box-shadow:0 0 0 3px rgba(10,143,181,.18); }
.form-group input:user-invalid, .form-group select:user-invalid, .form-group textarea:user-invalid { border-color:rgba(239,68,68,.65); }
.form-group select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a96ab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; }
.form-group select:invalid { color:var(--mu); }
.form-group select option { background:var(--bg2); color:var(--tx); }
.btn-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px; border:1px solid var(--tx); border-radius:12px; background:var(--tx); color:var(--bg); font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:transform .25s,box-shadow .25s,opacity .25s; }
.btn-submit i { transition:transform .3s; }
.btn-submit:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(10,143,181,.25); }
.btn-submit:hover i { transform:translate(3px,-3px); }
.btn-submit:disabled, .btn-submit.loading { opacity:.6; cursor:wait; transform:none; box-shadow:none; }
.success-modal { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.success-modal.active, .success-modal.show, .success-modal.open, .success-modal.visible { display:flex; }
.modal-content { width:100%; max-width:440px; padding:40px 32px; text-align:center; background:var(--bg2); animation:rcPop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes rcPop { from{opacity:0;transform:translateY(16px) scale(.97)} }
.success-icon { margin-bottom:16px; font-size:58px; color:var(--gr); filter:drop-shadow(0 0 22px rgba(102,233,177,.45)); }
.modal-content h2 { margin:0 0 10px; font-size:28px; letter-spacing:-.03em; color:var(--tx); }
.modal-content p { margin:0 0 26px; font-size:15px; line-height:1.6; color:var(--mu); }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 28px; border:1px solid var(--tx); border-radius:12px; background:var(--tx); color:var(--bg); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:transform .25s,box-shadow .25s; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(10,143,181,.25); }
@media (max-width:980px) { .recruit-page { padding-top:110px; } .recruit-wrapper { grid-template-columns:1fr; gap:40px; } .recruit-info { position:static; } }
@media (max-width:900px) { .menu-toggle { display:grid; } .nav-links { position:absolute; top:calc(100% + 10px); left:0; right:0; display:none; flex-direction:column; gap:2px; padding:8px; border:1px solid var(--ln); border-radius:16px; background:var(--bg2); box-shadow:0 20px 50px rgba(0,0,0,.35); } .nav-links.active { display:flex; animation:up .3s both; } .nav-links a { padding:13px 16px; } }
@media (max-width:600px) { .form-row { grid-template-columns:1fr; } .recruit-form-container { padding:24px 20px; } .recruit-info h1 { font-size:clamp(2.5rem,12vw,3.4rem); } .logo-text { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition-duration:.01ms!important; } }
.skip-link { position:fixed; left:16px; top:-60px; z-index:300; padding:10px 16px; border-radius:10px; background:var(--tx); color:var(--bg); font-size:14px; font-weight:700; transition:top .2s; }
.skip-link:focus { top:14px; }
.watermark-bg img { width:100%; height:100%; }
.roles-block { max-width:520px; margin-top:30px; }
.roles-title { margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mu); }
.role-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.role-chip { padding:7px 14px; border:1px solid var(--ln); border-radius:99px; background:var(--s); font-size:13px; font-weight:600; color:var(--tx); transition:border-color .2s,transform .2s; }
.role-chip:hover { border-color:var(--cy); transform:translateY(-2px); }
.form-consent { display:flex; align-items:flex-start; gap:12px; font-size:13.5px; line-height:1.5; color:var(--mu); cursor:pointer; }
.form-consent input { appearance:none; -webkit-appearance:none; flex:none; display:grid; place-items:center; width:20px; height:20px; margin:1px 0 0; border:1px solid var(--ln); border-radius:6px; background:var(--s2); cursor:pointer; transition:background .2s,border-color .2s; }
.form-consent input:hover { border-color:var(--cy); }
.form-consent input:checked { background:var(--tx); border-color:var(--tx); }
.form-consent input:checked::after { content:""; width:5px; height:10px; border:solid var(--bg); border-width:0 2px 2px 0; rotate:45deg; translate:0 -1px; }
.form-consent input:focus-visible { outline:2px solid var(--cy); outline-offset:2px; }
.form-help { margin:16px 0 0; text-align:center; font-size:13px; color:var(--mu); }
.form-help a { font-weight:700; color:var(--cy-t); }
.form-help a:hover { text-decoration:underline; }
.footer-follow { margin-top:18px; }
footer.footer { padding: 40px 20px 30px; }
.footer-main { grid-template-columns: 1.5fr 1fr !important; padding-bottom: 0; }
.footer-column { align-items: end; }