@font-face{font-family:Hacen;src:url('./assets/hacen-tunisia-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Hacen;src:url('./assets/hacen-tunisia-bold.ttf') format('truetype');font-weight:700 900;font-display:swap}
:root{--gold:#f7bc3e;--gold-2:#d99611;--navy:#06111d;--panel:rgba(11,20,29,.88);--line:rgba(203,218,231,.27);--muted:#b7c0ca;--white:#f7f8fa;--danger:#ff7777}
*{box-sizing:border-box}
html{background:#03080e;scroll-behavior:smooth}
body{margin:0;min-width:320px;color:var(--white);background:#03080e;font-family:Hacen,"Segoe UI",Tahoma,Arial,sans-serif}
button,input{font:inherit}
button{color:inherit}
.hero-shell{min-height:100svh;padding:0;background:#02070c}
.hero{isolation:isolate;position:relative;min-height:100svh;overflow:hidden;background:#06111d url('./assets/recruitment-hero.png') center/cover no-repeat}
.hero__veil{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(2,8,14,.99) 0%,rgba(3,11,19,.93) 35%,rgba(3,11,19,.25) 63%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(2,7,12,.77),transparent 40%)}
.hero__glow{position:absolute;z-index:-1;inset:auto auto -18rem -12rem;width:42rem;height:42rem;border-radius:50%;background:rgba(247,188,62,.09);filter:blur(90px)}
.layout{width:min(1540px,100%);margin:auto;padding:clamp(28px,4.3vw,72px) clamp(24px,6.2vw,112px)}
.content{width:min(760px,52vw);margin-right:auto;margin-left:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.brand-block{width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:9px;color:#d5dbe2;font-size:clamp(12px,.92vw,16px);letter-spacing:.02em}
.eyebrow span{width:24px;height:1px;background:var(--gold)}
h1{margin:0;line-height:.9;letter-spacing:-.04em;text-shadow:0 4px 22px rgba(0,0,0,.6)}
.title-ar,.title-en{display:block}
.title-ar{font-size:clamp(54px,5.6vw,91px);font-weight:900}
.title-ar strong,.title-en strong{color:var(--gold);font-weight:900}
.title-en{direction:ltr;margin-top:9px;font-family:Hacen,"Segoe UI",sans-serif;font-size:clamp(42px,4.25vw,68px);font-weight:800;letter-spacing:-.045em}
.lead-ar{margin:22px 0 0;font-size:clamp(18px,1.42vw,24px);font-weight:700}
.lead-en{direction:ltr;margin:1px 0 0;color:#d9dde2;font-size:clamp(14px,1.07vw,18px);letter-spacing:.025em}
.benefits{width:100%;display:grid;grid-template-columns:repeat(4,1fr);margin:25px 0 22px;padding:0 5px}
.benefits article{display:flex;min-width:0;flex-direction:column;align-items:center;padding:0 12px;border-inline-start:1px solid rgba(255,255,255,.13)}
.benefits article:last-child{border-inline-start:0}
.benefit-icon{width:42px;height:38px;margin-bottom:3px;color:var(--gold)}
.benefit-icon svg,.field-icon svg,.privacy-note svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.benefits b{font-size:clamp(13px,1vw,17px);white-space:nowrap}
.benefits small{direction:ltr;color:#c9d0d6;font-size:clamp(9px,.7vw,12px);white-space:nowrap}
.apply-card{width:min(100%,710px);padding:17px 26px 19px;border:1px solid rgba(224,232,238,.42);border-radius:23px;background:linear-gradient(135deg,rgba(37,47,57,.85),rgba(8,13,19,.93));box-shadow:0 22px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(19px)}
.card-heading h2{margin:0;font-size:clamp(25px,2vw,34px);line-height:1}.card-heading h2 strong{color:var(--gold)}
.card-heading>p{margin:9px 0 0;color:#eef1f4;font-size:15px}.card-heading>small{direction:ltr;display:block;color:#bdc5cc;font-size:12px}
.card-heading>div{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:5px;color:#d7dee5;font-size:11px}.card-heading>div p{margin:0}.status-dot{width:7px;height:7px;border-radius:50%;background:#21da78;box-shadow:0 0 10px #21da78}
form{margin-top:13px}
.field{position:relative;min-height:60px;display:grid;grid-template-columns:52px 1fr 48%;align-items:center;margin-top:9px;border:1px solid rgba(195,207,218,.28);border-radius:13px;background:rgba(65,74,84,.43);overflow:hidden;transition:border-color .18s,background .18s,box-shadow .18s}
.field:focus-within{border-color:rgba(247,188,62,.77);background:rgba(65,74,84,.58);box-shadow:0 0 0 3px rgba(247,188,62,.1)}
.field-icon{width:25px;height:25px;margin:auto;color:#fff}
.field-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center;text-align:right;padding-inline-start:12px;border-inline-start:1px solid rgba(255,255,255,.14)}
.field-copy b{font-size:14px;line-height:1.3}.field-copy small{color:#aeb7c0;font-size:12px;line-height:1.3}
.field input{align-self:stretch;width:100%;min-width:0;padding:0 17px;border:0;outline:0;background:transparent;color:#fff;font-size:16px;text-align:right}
.field--name{min-height:72px;grid-template-columns:58px 1fr 50%}
.field--name .field-copy b{font-size:18px;font-weight:900}.field--name .field-copy small{font-size:13px;color:#d0d6dc}
.field--name input{font-size:19px;font-weight:700;padding-inline:18px}.field--name input::placeholder{color:#c8d0d8;opacity:.9}
.field input[type=number]{appearance:textfield}.field input::-webkit-inner-spin-button{appearance:none}
.field-error{min-height:0;margin:3px 10px -3px;color:var(--danger);font-size:11px;text-align:right}.field-error:not(:empty){min-height:16px}
.phone-field{position:relative}
.field--phone{grid-template-columns:52px 112px 1fr 34%}
.country-trigger{direction:ltr;align-self:stretch;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;border:0;border-inline-start:1px solid rgba(255,255,255,.14);background:transparent;cursor:pointer}
.country-trigger--fixed{cursor:default;user-select:none}
.country-trigger img{width:24px;height:17px;border-radius:2px;object-fit:cover}.country-trigger>svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.country-menu{position:absolute;z-index:8;top:calc(100% + 7px);right:52px;width:270px;max-height:215px;overflow:auto;padding:7px;border:1px solid var(--line);border-radius:13px;background:#111d29;box-shadow:0 16px 35px rgba(0,0,0,.5);text-align:right}
.country-menu button{direction:rtl;width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:right}.country-menu button:hover,.country-menu button:focus{background:rgba(247,188,62,.12);outline:0}.country-menu img{width:23px}.country-menu span:last-child{margin-inline-start:auto;direction:ltr;color:#c7cfd7}
.submit-button{width:100%;min-height:68px;margin-top:10px;padding:7px 14px;border:1px solid #ffdc87;border-radius:15px;background:linear-gradient(115deg,#f9c94c,#dea018);color:#0d0d0b;box-shadow:0 10px 30px rgba(220,157,24,.23),inset 0 1px rgba(255,255,255,.6);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;cursor:pointer;transition:transform .18s,filter .18s,box-shadow .18s}
.submit-button:hover{filter:brightness(1.08);box-shadow:0 13px 34px rgba(220,157,24,.35),inset 0 1px rgba(255,255,255,.65)}.submit-button:active{transform:translateY(2px)}.submit-button:disabled{cursor:wait;opacity:.72}
.submit-button>span:nth-child(2){display:flex;flex-direction:column;line-height:1.15}.submit-button b{font-size:19px}.submit-button small{font-family:"Segoe UI",sans-serif;font-size:14px}
.chat-bubble{justify-self:center;display:flex;align-items:center;justify-content:center;gap:3px;width:34px;height:28px;border-radius:9px;background:#10120c}.chat-bubble:after{content:"";position:absolute;transform:translate(-10px,16px);border:5px solid transparent;border-top-color:#10120c}.chat-bubble i{width:3px;height:3px;border-radius:50%;background:#f7bc3e}.submit-arrow{justify-self:center;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(17,17,13,.35);border-radius:50%;font-size:23px}
.privacy-note{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;color:#d6dce1;font-size:11px}.privacy-note svg{width:17px;height:17px}.privacy-note span{display:flex;flex-direction:column}.privacy-note small{direction:ltr;color:#9aa5ae;font-size:10px}
.form-message{min-height:0;margin:8px 0 -2px;color:#8ff4bc;font-size:12px}.form-message:not(:empty){min-height:17px}
@media(max-width:1100px){.hero{background-position:60% center}.hero__veil{background:linear-gradient(90deg,rgba(2,8,14,.99),rgba(3,11,19,.89) 58%,rgba(3,11,19,.42))}.content{width:min(720px,64vw)}.layout{padding-inline:4vw}}
@media(max-width:820px){.hero{background-position:70% center}.hero__veil{background:rgba(3,10,17,.8)}.layout{padding:24px 16px 34px}.content{width:100%;margin:0}.brand-block{padding-top:6px}.benefits{max-width:650px}.apply-card{padding:16px 16px 17px}}
@media(max-width:560px){.hero{background-image:linear-gradient(rgba(2,8,14,.74),rgba(2,8,14,.9)),url('./assets/recruitment-hero.png');background-position:68% center}.title-ar{font-size:52px}.title-en{font-size:39px}.lead-ar{margin-top:16px}.benefits{grid-template-columns:repeat(2,1fr);row-gap:15px;margin:20px 0}.benefits article{border:0}.apply-card{border-radius:18px}.field{grid-template-columns:45px 1fr 42%}.field--name{min-height:68px;grid-template-columns:45px 1fr 48%}.field--name .field-copy b{font-size:15px}.field--name input{font-size:16px;padding-inline:10px}.field--phone{grid-template-columns:45px 96px 1fr}.field--phone .field-copy{display:none}.country-trigger{padding:0 5px}.country-menu{right:0}.card-heading>p{font-size:13px}.submit-button{grid-template-columns:48px 1fr 48px}}
@media(max-width:390px){.title-ar{font-size:45px}.title-en{font-size:34px}.apply-card{padding-inline:11px}.field-copy b{font-size:12px}.field-copy small{font-size:10px}.benefits small{font-size:9px}}
@media(prefers-reduced-motion:no-preference){.brand-block,.benefits,.apply-card{animation:rise .65s both}.benefits{animation-delay:.08s}.apply-card{animation-delay:.16s}@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}}