:root{--primary:#050506;--secondary:#30333b;--accent:#c8a97e;--light:#f9f7f3;--text:#2b2b2b}
*{margin:0;padding:0;box-sizing:border-box;}
*{-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'Segoe UI',Tahoma,sans-serif;background:var(--light);color:var(--text)}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:white;border-bottom:1px solid #eee}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:bold;color:var(--primary)}
.logo span{height:48px;width:48px;background-image:url(/logo.png);background-repeat:no-repeat;background-position:center;background-size:contain;}
.nav-buttons{display:flex;gap:15px}
.nav-buttons a{background:var(--secondary);color:white;font-size:14px;line-height:22px;padding:4px 12px 6px 12px;border-radius:30px;text-decoration:none;transition:all 0.25s ease;font-family:inherit;cursor:pointer;width:96px;text-align:center}
.nav-buttons a:hover{background:var(--accent);color:white;transform:translateY(-2px)}
.hero{padding:100px 20px;text-align:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:white}
.hero h1{font-size:50px;margin-bottom:10px}
.hero p{font-size:18px;max-width:800px;margin:auto;opacity:0.9}
.container{max-width:1200px;margin:auto;padding:60px 20px}
.section-title{text-align:center;margin-bottom:30px;color:var(--primary);font-size:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
.card{background:white;padding:25px;border-radius:12px;border:1px solid #eee;transition:all 0.25s ease;display:flex;flex-direction:column;justify-content:space-between;min-height:280px}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.1)}
.card-content{flex:1}
.card h3{color:var(--secondary);margin-bottom:8px}
.card .location{color:var(--accent);font-size:14px;margin:10px 0}
.card p{font-size:14px;color:#555;line-height:1.6;margin-bottom:12px}
.card .type{display:inline-block;background:var(--accent);color:white;padding:4px 12px;border-radius:20px;font-size:12px}
.card-footer{margin-top:20px;display:flex;justify-content:flex-end}
.details-btn{background:var(--secondary);color:white;padding:10px 25px;border-radius:30px;text-decoration:none;display:inline-block;transition:all 0.25s ease;border:none;cursor:pointer;font-family:inherit;font-size:14px}
.details-btn:hover{background:var(--accent);transform:translateY(-2px)}
.back-link{display:inline-block;margin-top:20px;color:var(--secondary);text-decoration:none}
.back-link:hover{color:var(--accent)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.salary-row label{display:block}
.salary-input-wrapper{position:relative;display:flex;align-items:center}
.salary-input-wrapper input{flex:1;padding-right:70px}
.currency-badge{position:absolute;right:12px;background:var(--accent);color:white;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:0.5px}
.apply-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px;max-width:1400px;margin:auto;padding:60px 20px;align-items:start}
.apply-form{background:white;padding:40px;border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,0.05);border:1px solid #eee;position:sticky;top:20px;transform:translateZ(0);-webkit-transform:translateZ(0)}
.apply-form h2{font-size:26px;line-height: 1.8;margin-bottom:28px;color:var(--primary);border-left:3px solid var(--accent);border-radius: 16px;padding:16px}
.apply-form form{display:flex;flex-direction:column;gap:20px}
.frm-row{display:flex;flex-direction:column;gap:8px;min-height:auto}
.frm-row label{font-size:14px;font-weight:600;color:#333}
.frm-row input,.frm-row textarea{width:100%;padding:12px 15px;border:1px solid #e0e0e0;border-radius:10px;font-size:14px;transition:all 0.2s;background:#fafafa}
.frm-row input:focus,.frm-row textarea:focus{outline:none;border-color:var(--accent);background:white;box-shadow:0 0 0 3px rgba(200,169,126,0.1);transform:none}
.radio-group{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px 15px;background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;transition:all 0.2s ease;min-height:50px;width:100%;transform:translateZ(0);-webkit-transform:translateZ(0)}
.radio-group:focus-within{border-color:var(--accent);background:white;box-shadow:0 0 0 3px rgba(200,169,126,0.1)}
.radio-group .radio-label{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:400;cursor:pointer;padding:6px 16px;border-radius:20px;transition:all 0.2s ease;white-space:nowrap;background:#e8e0d6;color:#555;border:2px solid transparent;min-width:60px;text-align:center}
.radio-group .radio-label:hover{background:#d5cdc0;transform:scale(1.02)}
.radio-group .radio-label input[type="radio"]{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}
.radio-group .radio-label:has(input:checked){background:var(--accent);color:white;border-color:var(--primary);box-shadow:0 2px 8px rgba(200,169,126,0.3);transform:scale(1.05)}
.radio-group .radio-label:has(input:checked):hover{transform:scale(1.07)}
.frm-row:has(.radio-group) .radio-group{margin-top:0}
.apply-form button{margin-top:10px;padding:14px 20px;border:none;background:var(--secondary);color:white;cursor:pointer;border-radius:40px;font-size:16px;font-weight:600;transition:all 0.25s ease;width:100%}
.apply-form button:hover{background:var(--accent);transform:translateY(-2px)}
.apply-form button:disabled{opacity:0.65;cursor:not-allowed;transform:none}
.form-msg{display:none;margin-top:15px;font-size:14px;color:#c62828;padding:12px;background:#ffebee;border-radius:10px;text-align:center}
.success-box{min-height:500px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:white;padding:50px 30px;border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,0.05);border:1px solid #eee}
.success-icon{width:90px;height:90px;border-radius:50%;background:#20b15a;color:white;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;margin-bottom:25px}
.success-box h3{font-size:26px;font-weight:600;color:#111;margin-bottom:12px}
.success-box p{font-size:15px;color:#555}
.job-details{background:transparent}
.job-details h2{font-size:36px;font-weight:700;color:var(--primary);margin-bottom:10px;letter-spacing:-0.5px}
.job-details .location{color:var(--accent);font-size:16px;margin-bottom:20px;font-weight:500;display:inline-block;background:#f5f2ec;padding:5px 15px;border-radius:50px}
.job-details .job-head{font-size:16px;color:#444;line-height:1.8;margin-bottom:30px;background:#f9f7f3;padding:22px;border-radius:16px;border-left:3px solid var(--accent)}
.job-details h3{margin-top:30px;margin-bottom:12px;font-size:22px;font-weight:600;color:var(--primary)}
.job-details p{font-size:15px;color:#444;line-height:1.9;white-space:pre-line}
footer{background:var(--primary);color:#ccc;text-align:center;padding:20px;margin-top:40px;font-size:11px}
@media(max-width:700px){
    .nav-buttons{flex-direction:column;gap:8px}
    .nav-buttons a{width:auto;font-size:12px;line-height:20px}
}
@media(max-width:1000px){
    .apply-layout{grid-template-columns:1fr;gap:40px;padding:40px 20px}
    .apply-form{position:static;order:2}
    .job-details{order:1}
}
@media(max-width:700px){
    .hero h1{font-size:32px}
    .hero{padding:60px 20px}
    .why-grid{grid-template-columns:repeat(2,1fr)}
    .container{padding:16px 4px}
    .container{padding:16px 4px}
    .apply-form{padding:16px 8px}
    .apply-form h2{font-size:22px}
    .job-details h2{font-size:28px}
}
@media(max-width:480px){
    .why-grid{grid-template-columns:1fr}
    .grid{grid-template-columns:1fr}
    .card{min-height:auto}
    .radio-group{gap:8px;padding:10px 12px}
    .radio-group .radio-label{padding:4px 12px;font-size:13px;min-width:50px}
    .salary-input-wrapper input{padding-right:65px}
    .currency-badge{font-size:11px;padding:3px 8px}
}