[hidden]{display:none!important}
:root{
  --blue:#037EF3; --ink:#14142B; --muted:#5B5B78; --bg:#FFFBF5; --card:#fff; --line:#ECE6DC;
  --r:22px; --shadow:0 10px 30px -12px rgba(20,20,43,.25);
  --c1:#037EF3; --c2:#FFC845; --c3:#00C16E; --tint:#EAF4FF;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,.logo-mark,.sticker,.btn-big{font-family:"Bricolage Grotesque",sans-serif}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)} .small{font-size:.85rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.logo{display:flex;align-items:baseline;gap:6px}
.logo-mark{font-weight:800;font-size:1.35rem;color:var(--blue);letter-spacing:-.02em}
.logo-sub{font-size:.8rem;color:var(--muted)}
.nav-links{display:flex;gap:28px;font-weight:500}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--c1);transition:width .25s}
.nav-links a:hover::after{width:100%}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;background:var(--ink);color:#fff;font:700 1rem "DM Sans",sans-serif;padding:14px 24px;border-radius:999px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-big{background:var(--c1);font-size:1.1rem;padding:18px 28px;box-shadow:0 8px 0 -2px color-mix(in srgb,var(--c1) 55%,#000)}
.btn-sm{padding:10px 18px;font-size:.9rem;background:var(--c1)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.chip:focus-visible,.seg button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(32px,6vw,80px) clamp(16px,4vw,48px) 40px;max-width:1240px;margin:0 auto}
.kicker{display:inline-block;background:var(--tint);color:var(--ink);font-weight:700;padding:8px 14px;border-radius:999px;font-size:.9rem}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.035em;margin:18px 0;font-weight:800}
.lead{font-size:1.15rem;color:var(--muted);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}
.vibes{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vibes li{background:var(--card);border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-size:.92rem;font-weight:500}
.hero-art{position:relative;aspect-ratio:1;background:var(--tint);border-radius:40% 60% 55% 45%/50% 45% 55% 50%;overflow:visible}
.art{width:100%;height:100%;border-radius:inherit;overflow:hidden;display:block}
.sticker{position:absolute;background:#fff;padding:10px 16px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);font-size:.95rem;animation:bob 4s ease-in-out infinite}
.s1{top:8%;left:-4%;transform:rotate(-6deg)} .s2{bottom:12%;right:-2%;background:var(--c2);animation-delay:-1.3s} .s3{bottom:-2%;left:14%;background:var(--ink);color:#fff;animation-delay:-2.6s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.float{animation:bob 5s ease-in-out infinite}.f2{animation-delay:-1.7s;animation-duration:6s}.f3{animation-delay:-3s;animation-duration:7s}
.sun{animation:pulse 6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes pulse{50%{transform:scale(1.06)}}
.wave{animation:drift 6s linear infinite}.w2{animation-duration:9s}
@keyframes drift{to{transform:translateX(-120px)}}
.cable{animation:cable 7s ease-in-out infinite alternate}
@keyframes cable{from{transform:translate(-50px,28px)}to{transform:translate(60px,-34px)}}

/* marquee */
.marquee{background:var(--c1);color:#fff;overflow:hidden;padding:14px 0;transform:rotate(-1.5deg);margin:30px -10px}
.marquee-track{display:flex;gap:40px;width:max-content;animation:marq 28s linear infinite;font:800 1.4rem "Bricolage Grotesque";white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.section{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,100px) clamp(16px,4vw,48px)}
.section-head{margin-bottom:28px}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--c1)}
.eyebrow.light{color:#fff;opacity:.85}
h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;line-height:1.05;margin:8px 0}

/* filters + opportunities */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.chip{border:2px solid var(--ink);background:transparent;padding:9px 18px;border-radius:999px;font:600 .95rem "DM Sans";cursor:pointer;transition:all .2s}
.chip.on{background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.opp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;animation:pop .4s both}
.opp:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow)}
.opp.picked{border-color:var(--c1);box-shadow:0 0 0 3px var(--c1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.opp-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tag{font-size:.75rem;font-weight:700;padding:5px 10px;border-radius:999px;color:#fff}
.spots{font-size:.8rem;color:var(--muted);font-weight:500}
.opp h3{font-size:1.3rem;letter-spacing:-.01em;line-height:1.15}
.opp p{color:var(--muted);font-size:.95rem;flex:1}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.meta span{background:var(--tint);border-radius:8px;padding:4px 9px;font-size:.8rem;font-weight:500}
.opp .pick{align-self:flex-start;font-weight:700;color:var(--c1);font-size:.95rem}
.opp.picked .pick{color:var(--ink)}
.note{margin-top:22px;font-size:.85rem;color:var(--muted);text-align:center}

/* steps */
.how{background:var(--ink);color:#fff;max-width:none;border-radius:40px 40px 0 0}
.how .section-head,.how .steps{max-width:1144px;margin-left:auto;margin-right:auto}
.how .eyebrow{color:var(--c2)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s}
.steps li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:24px}
.steps span{font:800 2.4rem "Bricolage Grotesque";color:var(--c2)}
.steps h3{font-size:1.25rem;margin:6px 0}
.steps p{color:rgba(255,255,255,.7);font-size:.95rem}

/* apply */
.apply{background:var(--ink);max-width:none;padding-top:0}
.apply-card{max-width:1144px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;border-radius:32px;overflow:hidden;background:var(--card);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.apply-side{background:var(--c1);color:#fff;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.apply-side::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--c2);opacity:.35;right:-90px;bottom:-90px}
.apply-side h2{color:#fff}
.picked{position:relative;z-index:1;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:16px;padding:14px 44px 14px 16px;margin-top:auto;animation:pop .3s}
.picked small{display:block;opacity:.8}
.picked button{position:absolute;right:10px;top:50%;translate:0 -50%;border:0;background:rgba(0,0,0,.2);color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:1.1rem}
form{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:6px;min-height:520px}
.progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:33%;background:var(--c1);border-radius:99px;transition:width .45s cubic-bezier(.3,1.4,.5,1)}
.step-label{font-weight:700;font-size:.9rem;color:var(--muted);margin:10px 0 8px}
fieldset{border:0;padding:0;display:none;flex-direction:column;gap:14px}
fieldset.active{display:flex;animation:slide .35s ease}
@keyframes slide{from{opacity:0;transform:translateX(24px)}}
label,.label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.92rem}
input,select{font:500 1rem "DM Sans";padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);transition:border-color .2s;width:100%}
input:focus,select:focus{border-color:var(--c1);outline:none}
input.bad,select.bad{border-color:#E5484D;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.phone{display:flex;border:2px solid var(--line);border-radius:14px;overflow:hidden}
.phone:focus-within{border-color:var(--c1)}
.phone span{padding:14px;background:var(--tint);font-weight:700}
.phone input{border:0;border-radius:0}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:100px;border:2px solid var(--line);background:#fff;padding:12px;border-radius:14px;font:600 .95rem "DM Sans";cursor:pointer;transition:all .2s}
.seg button.on{border-color:var(--c1);background:var(--tint)}
.seg.bad button{border-color:#E5484D}
/* Programme ⓘ: note shows on hover/focus, or .open on tap (phones). Buttons stay static so every note
   anchors to the whole row (#prog-seg) and sits full-width under it — it can never leave the screen. */
#prog-seg{position:relative}
.info{display:inline-block;vertical-align:1px;margin-left:6px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font:italic 700 .7rem/15px Georgia,serif;text-align:center;cursor:help}
.info:hover,.info:focus-visible,.info.open{background:var(--c1);border-color:var(--c1);color:#fff;outline:none}
.tip{display:none;position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);padding:10px 14px;border-radius:12px;background:var(--ink);color:#fff;font:400 .88rem/1.45 "DM Sans";text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:default}
.tip::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* bridge: mouse can travel from ⓘ to the switch */
.info:hover+.tip,.info:focus-visible+.tip,.info.open+.tip,.tip:hover,.tip:focus-within{display:block}
.lang{display:flex;gap:4px;margin-bottom:6px}
.lang span{padding:2px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.35);font-size:.75rem;font-weight:700;cursor:pointer}
#prog-seg[data-lang=en] .lang [data-lang=en],#prog-seg[data-lang=dar] .lang [data-lang=dar]{background:#fff;color:var(--ink);border-color:#fff}
#prog-seg[data-lang=en] .t-dar,#prog-seg[data-lang=dar] .t-en{display:none}
.t-dar{display:block;text-align:right;font-size:.95rem;line-height:1.7}
.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:.85rem;color:var(--muted)}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--c1)}
.err{color:#E5484D;font-weight:600;font-size:.9rem;min-height:1.4em}
.form-nav{display:flex;justify-content:space-between;gap:12px;margin-top:auto}
.form-nav .btn:last-child,.form-nav #next{margin-left:auto;background:var(--c1)}
.done{text-align:center;margin:auto;padding:20px;animation:pop .5s}
.done-emoji{font-size:4rem;animation:bob 2s infinite}
.done h3{font-size:1.8rem;margin:10px 0}
.done p{color:var(--muted)}
.confetti{position:fixed;top:-12px;width:10px;height:14px;z-index:99;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* faq */
.faq{max-width:820px}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{font-weight:700;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";font-size:1.5rem;line-height:1;transition:transform .25s;color:var(--c1)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:10px}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:32px clamp(16px,4vw,48px);border-top:1px solid var(--line)}
.foot a{color:var(--c1);font-weight:600}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
.hero .reveal:nth-child(2){transition-delay:.08s}.hero .reveal:nth-child(3){transition-delay:.16s}.hero .reveal:nth-child(4){transition-delay:.24s}.hero .reveal:nth-child(5){transition-delay:.32s}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-art{max-width:420px;width:88%;margin:10px auto 0}
  .steps{grid-template-columns:1fr 1fr}
  .steps li:last-child:nth-child(odd){grid-column:1/-1}   /* 5 steps: no lone card on the last row */
  .apply-card{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .btn-big{width:100%}
  .s1{left:0}.s2{right:0}
  .form-nav .btn{padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* hub page */
.hub-hero{text-align:center;max-width:900px;margin:0 auto;padding:clamp(48px,8vw,100px) 16px 20px}
.hub-hero h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.04em;font-weight:800;margin:16px 0}
.hub-hero h1 em{font-style:normal;color:var(--blue)}
.dest{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;max-width:1240px;margin:0 auto;padding:30px clamp(16px,4vw,48px) 80px}
.dest a{border-radius:28px;padding:26px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.dest a:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 24px 40px -16px rgba(0,0,0,.4)}
.dest .flag{font-size:3rem}
.dest h2{color:#fff;font-size:2.4rem}
.dest p{opacity:.9}
.dest .go{font-weight:700;margin-top:8px}

.opp .more{font-size:.85rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.opp .more:hover{color:var(--c1)}
.empty{grid-column:1/-1;text-align:center;padding:48px 24px;border:2px dashed var(--line);border-radius:var(--r)}
.empty h3{font-size:1.3rem;margin-bottom:8px}.empty p{color:var(--muted)}

.label small,label small{font-weight:400;color:var(--muted)}
.seg.multi button{flex:0 1 auto;min-width:0}
.cond{display:flex;flex-direction:column;gap:14px}
.cond[hidden]{display:none}
input[type=file]{padding:10px;background:var(--tint);cursor:pointer}

/* EN | دارجة switch + the Darija pages (/dar, <html lang="ary" dir="rtl">) */
.nav-end{display:flex;align-items:center;gap:10px}
.lang-switch{padding:6px 12px;border-radius:99px;border:1.5px solid var(--line);font:700 .85rem "Cairo","DM Sans",sans-serif;color:var(--ink);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.lang-switch:hover{border-color:var(--c1,#037EF3);color:var(--c1,#037EF3)}
.nav>.lang-switch{margin-inline-start:auto}
[dir=rtl] body,[dir=rtl] body :not(.info){font-family:"Cairo","DM Sans",sans-serif!important;letter-spacing:0!important}
[dir=rtl] .info{margin-left:0;margin-right:6px}
[dir=rtl] .tip{text-align:right}
[dir=rtl] .phone,[dir=rtl] input[type=email],[dir=rtl] input[type=url],[dir=rtl] input[type=tel]{direction:ltr;text-align:left}
[dir=rtl] .nav-links a::after{left:auto;right:0}
[dir=rtl] .marquee{direction:ltr}   /* the band scrolls by translateX(-50%); in RTL the track spills left and phones zoom the whole page out */
[dir=rtl] input[name=website]{left:auto!important;right:-9999px}   /* honeypot: off-screen LEFT is scrollable space in RTL */
/* hero stickers + boarding-pass stamps are pinned with right:…; in RTL the text column moves right, so mirror them to the left */
[dir=rtl] .hero--photo .s1{right:auto;left:8%}[dir=rtl] .hero--photo .s2{right:auto;left:14%}
[dir=rtl] .st1{right:auto;left:150px}[dir=rtl] .st2{right:auto;left:62px}[dir=rtl] .st3{right:auto;left:-26px}
@media (max-width:900px){[dir=rtl] .hero--photo .s1{left:16px}[dir=rtl] .st1{left:118px}[dir=rtl] .st2{left:50px}[dir=rtl] .st3{left:-12px}}
[dir=rtl] .opp h3,[dir=rtl] .opp>p,[dir=rtl] #picked-title{unicode-bidi:plaintext;text-align:start}   /* project titles/descriptions are English from aiesec.org: keep their own direction */

/* hub: 5-step path under the destination cards; flex row so RTL mirrors it for free */
.path{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 80px;text-align:center}
.path h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:6px 0 28px}
.path-steps{list-style:none;padding:0;display:flex;gap:12px}
.path-steps li{flex:1;position:relative;padding:0 6px}
.path-steps li:not(:last-child)::after{content:"";position:absolute;top:21px;inset-inline-start:calc(50% + 30px);width:calc(100% - 48px);border-top:2px dashed var(--line)}
.path-steps b{display:grid;place-content:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:var(--c1);color:#fff;font:800 1.1rem "Bricolage Grotesque"}
.path-steps li:last-child b{background:var(--c2);color:var(--ink)}
.path-steps h3{font-size:1.05rem;margin-bottom:4px}
.path-steps p{color:var(--muted);font-size:.88rem}
@media (max-width:760px){
  .path{text-align:start}
  .path-steps{flex-direction:column;gap:0}
  .path-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:0 0 22px}
  .path-steps b{grid-row:span 2;margin:0}
  .path-steps h3{align-self:end;margin:0}
  .path-steps li:not(:last-child)::after{top:48px;bottom:4px;inset-inline-start:21px;width:0;border-top:0;border-inline-start:2px dashed var(--line)}
}