/* SatyGo · satygo.com 3.0
   One idea for the whole page: Sarajevo, and the city's food rising over it like the sun.
   Light and warm. Space is the luxury: big Fredoka type, few things on screen, each one finished.
   The bold moment is the hero; everything after it is quiet and exact. */

/* ---------- hero ---------- */
.hx{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFF6EA 0%,var(--paper) 62%);padding-top:clamp(30px,5vh,60px)}
.hx-in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,600px) 1fr}
.hx-pin{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--g)}
.hx h1{margin-top:18px;font-size:clamp(50px,6.2vw,92px);font-weight:700;line-height:.98;letter-spacing:-.03em;color:var(--hero-ink)}
.hx h1 span{display:block;color:var(--hero-acc)}
html[lang=ar] .hx h1{line-height:1.2;letter-spacing:0;font-size:clamp(44px,5.6vw,84px)}
.hx-lead{margin-top:24px;max-width:33em;font-size:clamp(17px,1.4vw,19.5px);color:var(--muted)}
.hx-addr{margin-top:34px;display:flex;align-items:center;gap:8px;max-width:560px;padding:8px;background:#fff;border-radius:22px;box-shadow:0 1px 0 rgba(43,29,23,.06),0 30px 60px -34px rgba(43,29,23,.45);transition:box-shadow .25s}
.hx-addr:focus-within{box-shadow:0 0 0 3px rgba(254,143,1,.28),0 30px 60px -34px rgba(43,29,23,.45)}
.hx-field{flex:1;display:flex;align-items:center;gap:10px;padding-inline:14px 6px;color:var(--o);min-width:0}
.hx-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 17px var(--f-body);color:var(--ink);padding:14px 0}
.hx-field input::placeholder{color:#A0938A;font-weight:500}
.hx-addr .btn{border-radius:16px;padding:17px 26px}
.hx-pts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:var(--muted)}
.hx-pts li{display:flex;align-items:center;gap:7px}
.hx-pts .ic{color:var(--g)}

/* the scene under the words: plate sun, the city line, Saty on the street */
.hx-scene{position:relative;z-index:1;height:clamp(300px,34vw,470px);margin-top:clamp(-300px,-19vw,-120px);pointer-events:none}
.hx-city{position:absolute;inset:auto 0 0 0;width:100%;height:clamp(150px,17vw,250px);object-fit:cover;object-position:50% 100%;z-index:2}
.hx-sun{position:absolute;inset-inline-end:max(4vw,calc((100vw - 1240px)/2 + 10px));bottom:clamp(54px,7vw,104px);width:clamp(260px,31vw,450px);aspect-ratio:1;z-index:1;animation:hxRise 1.3s cubic-bezier(.2,.8,.2,1) both}
.hx-sun::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(254,143,1,.22),rgba(254,143,1,0) 62%)}
.hx-plate{position:absolute;inset:0;margin:0;border-radius:50%;overflow:hidden;border:clamp(8px,.9vw,14px) solid #fff;box-shadow:0 40px 80px -40px rgba(43,29,23,.55)}
.hx-plate img,.hx-mini img{width:100%;height:100%;object-fit:cover}
.hx-mini{position:absolute;margin:0;width:31%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 24px 44px -26px rgba(43,29,23,.55)}
.hx-mini-a{inset-inline-start:-16%;top:6%}
.hx-mini-b{inset-inline-end:-12%;top:-4%;width:24%}
.hx-rider{position:absolute;z-index:3;bottom:clamp(6px,1vw,14px);inset-inline-start:calc(50% - 170px);width:clamp(150px,15vw,220px);animation:hxRide 1.6s .2s cubic-bezier(.2,.75,.25,1) both}
.hx-saty{width:100%;height:auto}
[dir=rtl] .hx-saty{transform:scaleX(-1)}
.hx-note{position:absolute;bottom:34%;inset-inline-start:96%;display:flex;align-items:center;gap:10px;white-space:nowrap;background:#fff;border-radius:16px;padding:10px 14px 10px 12px;box-shadow:0 18px 36px -22px rgba(43,29,23,.5);animation:hxPop .5s 1.6s both}
.hx-note .dot{width:10px;height:10px;border-radius:50%;background:var(--g);box-shadow:0 0 0 5px rgba(15,125,98,.14)}
.hx-note b{display:block;font-size:14.5px;line-height:1.2}
.hx-note small{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.hx-usput{position:absolute;z-index:3;bottom:clamp(150px,18vw,260px);inset-inline-end:calc(max(4vw,calc((100vw - 1240px)/2 + 10px)) + clamp(220px,25vw,380px));background:var(--o);color:#fff;border-radius:14px;padding:9px 14px;transform:rotate(-4deg);box-shadow:0 18px 30px -18px rgba(254,143,1,.9);animation:hxPop .5s 1.9s both}
.hx-usput b{display:block;font-size:17px;letter-spacing:.04em}
.hx-usput small{display:block;font-size:12px;opacity:.95}
@keyframes hxRise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes hxRide{from{transform:translateX(-46vw)}to{transform:none}}
[dir=rtl] .hx-rider{animation-name:hxRideR}
@keyframes hxRideR{from{transform:translateX(46vw)}to{transform:none}}
@keyframes hxPop{from{transform:translateY(8px) scale(.96);opacity:0}to{opacity:1}}
.hx-usput{animation-name:hxPopTilt}
@keyframes hxPopTilt{from{transform:rotate(-4deg) translateY(8px);opacity:0}to{transform:rotate(-4deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.hx-sun,.hx-rider,.hx-note,.hx-usput{animation:none}}

@media (max-width:900px){
  .hx-in{grid-template-columns:1fr}
  .hx-scene{margin-top:18px;height:clamp(330px,82vw,440px)}
  .hx-sun{inset-inline-end:50%;transform:translateX(50%);width:clamp(220px,58vw,330px);bottom:clamp(70px,16vw,110px);animation:none}
  [dir=rtl] .hx-sun{transform:translateX(-50%)}
  .hx-city{height:clamp(140px,34vw,200px)}
  .hx-rider{width:clamp(120px,32vw,170px);inset-inline-start:4vw}
  .hx-note{inset-inline-start:52%;bottom:92%}
  .hx-usput{bottom:auto;top:4%;inset-inline-end:6vw}
}
@media (max-width:560px){
  .hx{padding-top:28px}
  .hx-addr{flex-direction:column;align-items:stretch;padding:8px;border-radius:20px}
  .hx-field{padding:4px 10px}
  .hx-addr .btn{width:100%}
  .hx-pts{gap:6px 16px;font-size:14px}
  .hx-note{inset-inline-start:40%;bottom:96%;padding:8px 11px}
  .hx-note b{font-size:13px}.hx-note small{font-size:11.5px}
}

/* ---------- menu board ---------- */
.mb{padding:clamp(80px,10vw,140px) 0 clamp(70px,9vw,120px);background:var(--paper)}
.mb-h{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.mb-h h2{font-size:clamp(40px,5.2vw,72px);font-weight:700;letter-spacing:-.025em;line-height:1}
html[lang=ar] .mb-h h2{letter-spacing:0;line-height:1.25}
.mb-h p{max-width:30em;color:var(--muted);font-size:18px}
.mb-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,4vw,64px);align-items:start}
.mb-list{display:flex;flex-direction:column}
.mb-i{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:12px 0;border-bottom:1px solid var(--line);position:relative}
.mb-i:first-child{border-top:1px solid var(--line)}
.mb-n{display:block;font:600 clamp(22px,2.1vw,30px)/1.15 var(--f-head);color:#B6A79A;transition:color .25s,transform .25s}
.mb-d{display:block;max-height:0;overflow:hidden;opacity:0;font-size:15px;color:var(--muted);transition:max-height .35s,opacity .3s,margin .3s}
.mb-i:hover .mb-n{color:var(--ink)}
.mb-i[aria-selected=true] .mb-n{color:var(--ink);transform:translateX(18px)}
[dir=rtl] .mb-i[aria-selected=true] .mb-n{transform:translateX(-18px)}
.mb-d{display:none}
.mb-i::before{content:"";position:absolute;inset-inline-start:0;top:calc(11px + .5em);width:9px;height:9px;border-radius:50%;background:var(--o);transform:scale(0);transition:transform .25s}
.mb-i[aria-selected=true]::before{transform:scale(1)}
.mb-i:focus-visible{outline:3px solid rgba(254,143,1,.45);outline-offset:4px;border-radius:6px}
.mb-view{position:sticky;top:110px;align-self:center}
.mb-frame{position:relative;aspect-ratio:3/2;border-radius:36px;overflow:hidden;background:var(--sand);box-shadow:0 50px 90px -50px rgba(43,29,23,.55)}
.mb-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s ease}
.mb-frame img.on{opacity:1;transform:none}
.mb-cap{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
.mb-cap b{display:block;font:600 26px/1.15 var(--f-head)}
.mb-cap span{display:block;color:var(--muted);font-size:16px}
@media (prefers-reduced-motion:reduce){.mb-frame img{transition:opacity .2s;transform:none}}
@media (max-width:900px){
  .mb-h,.mb-in{grid-template-columns:1fr}
  .mb-h{gap:12px}
  .mb-in{gap:18px}
  .mb-list{flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 10px;margin-inline:-20px;padding-inline:20px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .mb-list::-webkit-scrollbar{display:none}
  .mb-i,.mb-i:first-child{border:1px solid var(--line2);border-radius:999px;padding:11px 18px;flex:none;scroll-snap-align:start;background:#fff}
  .mb-i::before,.mb-d{display:none}
  .mb-n{font-size:17px;color:var(--ink)}
  .mb-i[aria-selected=true]{background:var(--ink);border-color:var(--ink)}
  .mb-i[aria-selected=true] .mb-n{color:#fff;transform:none}
  .mb-view{position:static;grid-row:2}
  .mb-list{grid-row:1}
  .mb-frame{border-radius:26px}
  .mb-cap{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- join: four doors, then the steps ---------- */
.jn{padding:clamp(80px,10vw,140px) 0;background:linear-gradient(180deg,var(--sand) 0%,var(--paper) 100%)}
.jn-h{text-align:center;max-width:720px;margin:0 auto clamp(36px,4vw,56px)}
.jn-h h2{font-size:clamp(40px,5vw,68px);font-weight:700;letter-spacing:-.025em}
html[lang=ar] .jn-h h2{letter-spacing:0}
.jn-h p{margin-top:12px;color:var(--muted);font-size:18px}

.jx-doors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.door{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:32px;padding:28px 26px 26px;cursor:pointer;box-shadow:0 1px 0 rgba(43,29,23,.05),0 30px 60px -44px rgba(43,29,23,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.door:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(43,29,23,.05),0 44px 70px -40px rgba(43,29,23,.55)}
.door:focus-within{outline:3px solid rgba(254,143,1,.5);outline-offset:3px}
.door-art{display:grid;place-items:center;height:170px;border-radius:24px;margin-bottom:22px;background:var(--os)}
.door-partner .door-art{background:var(--gs)}
.door-rider .door-art{background:#F6EEE3}
.door-career .door-art{background:#FFF4E2}
.door-art .saty{height:138px;width:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.door:hover .door-art .saty{transform:translateY(-6px) rotate(-3deg)}
.door-t{font:700 26px/1.1 var(--f-head)}
.door-p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.55;flex:1}
.door-go{margin-top:20px;display:inline-flex;align-self:flex-start;font-weight:700;font-size:15.5px;color:var(--ink);padding:12px 18px;border-radius:999px;background:var(--paper);border:1px solid var(--line2);transition:background .2s,color .2s,border-color .2s}
.door:hover .door-go{background:var(--o);border-color:var(--o);color:#fff}
.door-partner:hover .door-go{background:var(--g);border-color:var(--g)}

.jx-flow{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start;animation:jxIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes jxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.jx-main{background:#fff;border-radius:34px;padding:clamp(24px,3.4vw,46px);box-shadow:0 1px 0 rgba(43,29,23,.05),0 40px 80px -50px rgba(43,29,23,.5)}
.jx-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jx-back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--muted);padding:8px 4px}
.jx-back:hover{color:var(--ink)}
.jx-back .back{transform:scaleX(-1)}
[dir=rtl] .jx-back .back{transform:none}
.jx-count{font-size:14px;font-weight:700;color:var(--muted)}
.jx-bar{display:flex;gap:6px;margin:14px 0 30px}
.jx-bar i{flex:1;height:5px;border-radius:9px;background:var(--sand2);overflow:hidden;position:relative}
.jx-bar i::after{content:"";position:absolute;inset:0;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .jx-bar i::after{transform-origin:right}
.jx-bar i.on::after{transform:none}
.jx-step{border:0;margin:0;padding:0;min-width:0;display:none}
.jx-step.on{display:block;animation:jxStep .4s cubic-bezier(.2,.8,.2,1)}
@keyframes jxStep{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
[dir=rtl] .jx-step.on{animation-name:jxStepR}
@keyframes jxStepR{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.jx-q{font:700 clamp(28px,3vw,40px)/1.12 var(--f-head);letter-spacing:-.02em;padding:0;margin-bottom:26px}
html[lang=ar] .jx-q{letter-spacing:0;line-height:1.35}
.jx-step>*+*{margin-top:20px}
.jx-step .jx-q+*{margin-top:0}
.xf{display:block}
.xf>span,.xl{display:block;font-weight:700;font-size:14.5px;margin-bottom:8px}
.xf i{font-style:normal;font-weight:500;color:var(--muted)}
.xf input,.xf textarea{width:100%;font:500 17px var(--f-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--line2);border-radius:18px;padding:17px 18px;transition:border-color .2s,box-shadow .2s,background .2s;outline:0}
.xf textarea{resize:vertical;min-height:120px;line-height:1.55}
.xf input:focus,.xf textarea:focus{border-color:var(--o);background:#fff;box-shadow:0 0 0 4px rgba(254,143,1,.16)}
.xf.bad input{border-color:#C62828;box-shadow:0 0 0 4px rgba(198,40,40,.12)}
.x2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xc{display:flex;flex-wrap:wrap;gap:10px}
.pill{cursor:pointer}
.pill input,.tile input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:999px;background:var(--paper);border:1.5px solid var(--line2);font-weight:600;font-size:15.5px;transition:background .2s,border-color .2s,color .2s}
.pill:hover span{border-color:var(--ink)}
.pill input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.pill input:focus-visible+span,.tile input:focus-visible+span{outline:3px solid rgba(254,143,1,.5);outline-offset:2px}
.xc-big .pill span{min-height:56px;padding:14px 24px;font-size:16.5px}
.xt{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{cursor:pointer}
.tile span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px 14px;border-radius:22px;background:var(--paper);border:1.5px solid var(--line2);transition:border-color .2s,background .2s,box-shadow .2s}
.tile .saty{height:78px;width:auto}
.tile b{font-size:15.5px}
.tile:hover span{border-color:var(--ink)}
.tile input:checked+span{border-color:var(--o);background:#FFF6EA;box-shadow:0 0 0 3px rgba(254,143,1,.2)}
.num{display:inline-flex;align-items:center;background:var(--paper);border:1.5px solid var(--line2);border-radius:18px;overflow:hidden}
.num button{all:unset;cursor:pointer;width:56px;height:56px;display:grid;place-items:center;font-size:24px;font-weight:600}
.num button:hover{background:var(--sand)}
.num input{width:64px;text-align:center;border:0;background:transparent;font:700 20px var(--f-body);color:var(--ink);-moz-appearance:textfield;outline:0}
.num input::-webkit-inner-spin-button,.num input::-webkit-outer-spin-button{-webkit-appearance:none}
.jx-extra{border:0;margin:20px 0 0;padding:0;min-width:0}
.jx-extra[disabled]{display:none}
.jx-priv{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.jx-priv .ic{color:var(--g)}
.jx-nav{display:flex;justify-content:flex-end;margin-top:34px}
.jx-send[hidden],.jx-next[hidden]{display:none}
.jx-main .form-msg{margin-top:18px}

.jx-card{position:sticky;top:110px;display:grid;gap:18px}
.pass{position:relative;overflow:hidden;border-radius:28px;padding:24px 24px 22px;background:linear-gradient(160deg,#FFFFFF 0%,#FFF7EC 100%);box-shadow:0 1px 0 rgba(43,29,23,.05),0 40px 70px -46px rgba(43,29,23,.55);border:1px solid rgba(254,143,1,.18)}
.pass::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;inset-inline-end:-80px;top:-90px;background:radial-gradient(circle,rgba(254,143,1,.2),rgba(254,143,1,0) 68%)}
.jx[data-type=partner] .pass{background:linear-gradient(160deg,#FFFFFF 0%,#EFF7F3 100%);border-color:rgba(15,125,98,.18)}
.jx[data-type=partner] .pass::after{background:radial-gradient(circle,rgba(15,125,98,.18),rgba(15,125,98,0) 68%)}
.pass-top{display:flex;align-items:center;gap:10px}
.pass-top img{height:40px;width:auto}
.pass-k{font-weight:700;font-size:13.5px;color:var(--muted)}
.pass-name{margin-top:22px;font:700 28px/1.15 var(--f-head);min-height:1.15em;word-break:break-word}
.pass-name.ph{color:#C9BCB0}
.pass-rows{margin:16px 0 0;display:grid;gap:10px}
.pass-rows div{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;border-top:1px dashed var(--line2);padding-top:10px}
.pass-rows dt{color:var(--muted)}
.pass-rows dd{margin:0;font-weight:700;text-align:end}
.pass-rate{display:none;align-items:baseline;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.jx[data-type=partner] .pass-rate{display:flex}
.pass-rate b{font-size:44px;line-height:1;color:var(--g)}
.pass-rate span{font-size:14px;color:var(--muted);line-height:1.3}
.pass-note{margin-top:16px;font-size:12.5px;color:#A0938A}
.jx-next-list{padding:4px 8px}
.jx-next-list>div{display:none}
.jx-next-list>div.on{display:block}
.jx-next-list h3{font-size:17px;margin-bottom:10px}
.jx-next-list ol{list-style:none;margin:0;padding:0;counter-reset:n}
.jx-next-list li{counter-increment:n;display:flex;gap:10px;align-items:center;font-size:15px;padding:5px 0}
.jx-next-list li::before{content:counter(n);flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--ink);color:#fff}
.jx-reply{display:flex;gap:8px;align-items:center;margin-top:12px;font-weight:700;font-size:14.5px;color:var(--g)}

.jx-done{text-align:center;background:#fff;border-radius:34px;padding:clamp(36px,5vw,64px) 24px;box-shadow:0 40px 80px -50px rgba(43,29,23,.5);animation:jxIn .5s cubic-bezier(.2,.8,.2,1);outline:0}
.jx-done .saty{height:170px;width:auto;margin:0 auto}
.jx-done-t{margin-top:18px;font-size:clamp(32px,3.6vw,46px);font-weight:700}
.jx-done-p{margin:12px auto 0;max-width:30em;color:var(--muted);font-size:18px}
.btn-line{margin-top:26px;background:transparent;border:1.5px solid var(--line2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.jx-direct{margin-top:26px;text-align:center;font-size:15px;color:var(--muted)}
.jx-direct a{color:var(--ink);font-weight:700}

@media (max-width:1100px){.jx-doors{grid-template-columns:repeat(2,1fr)}.jx-flow{grid-template-columns:1fr}.jx-card{position:static;grid-template-columns:1fr 1fr;align-items:start}}
@media (max-width:640px){
  .jx-doors{grid-template-columns:1fr 1fr;gap:12px}
  .door{padding:16px 14px 16px;border-radius:24px}
  .door-art{height:110px;margin-bottom:14px;border-radius:18px}
  .door-art .saty{height:88px}
  .door-t{font-size:20px}
  .door-p{font-size:13.5px}
  .door-go{margin-top:14px;padding:10px 8px;font-size:13.5px;align-self:stretch;justify-content:center;white-space:nowrap}
  .x2{grid-template-columns:1fr}
  .xt{grid-template-columns:1fr 1fr}
  .jx-card{grid-template-columns:1fr}
  .jx-nav .btn{width:100%}
  .jx-main{border-radius:26px}
}
.jx [hidden]{display:none!important}

/* ---------- shared section rhythm ---------- */
.jr,.tk,.up,.ft,.du,.pt,.rd,.cr,.sy,.fq{padding:clamp(76px,9vw,128px) 0}
.jr h2,.tk h2,.up h2,.ft h2,.du h2,.pt h2,.rd h2,.cr h2,.sy h2,.fq h2{font-weight:700;letter-spacing:-.022em;line-height:1.04}
html[lang=ar] :is(.jr,.tk,.up,.ft,.du,.pt,.rd,.cr,.sy,.fq) h2{letter-spacing:0;line-height:1.3}
.lead{color:var(--muted);font-size:18px;line-height:1.7}

/* ---------- journey: three stops on one street ---------- */
.jr{background:var(--paper);padding-top:clamp(40px,5vw,70px)}
.jr-t{text-align:center;font-size:clamp(36px,4.6vw,62px);max-width:16ch;margin:0 auto clamp(40px,5vw,70px)}
.jr-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px);position:relative}
.jr-path::before{content:"";position:absolute;top:96px;inset-inline:12%;border-top:3px dashed #E9D9C3;z-index:0}
.jr-path li{position:relative;z-index:1;text-align:center}
.jr-art{display:grid;place-items:center;width:192px;height:192px;margin:0 auto;border-radius:50%;background:#fff;box-shadow:0 30px 60px -40px rgba(43,29,23,.5),inset 0 0 0 10px var(--paper)}
.jr-art .saty{height:132px;width:auto}
.jr-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--o);color:#fff;font-weight:700;font-size:17px;margin:-20px auto 0;position:relative;box-shadow:0 0 0 6px var(--paper)}
.jr-path h3{margin-top:16px;font-size:26px;font-weight:700}
.jr-path p{margin:8px auto 0;max-width:24em;color:var(--muted);font-size:16px}
@media (max-width:760px){.jr-path{grid-template-columns:1fr;gap:36px}.jr-path::before{top:40px;bottom:40px;inset-inline:50% auto;border-top:0;border-inline-start:3px dashed #E9D9C3}.jr-art{width:160px;height:160px}.jr-art .saty{height:108px}}

/* ---------- tracking on a phone ---------- */
.tk{background:linear-gradient(180deg,var(--paper),#FFF5E8)}
.tk-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(36px,6vw,96px);align-items:center}
.tk h2{font-size:clamp(36px,4.4vw,58px);max-width:13ch}
.tk .lead{margin-top:18px;max-width:32em}
.tk-pts{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.tk-pts li{display:flex;gap:14px;align-items:flex-start}
.tk-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--gs);color:var(--g)}
.tk-pts b{display:block;font-size:17px}.tk-pts p{color:var(--muted);font-size:15.5px}
.tk-phone{display:flex;justify-content:center}
.ph{position:relative;width:min(340px,86vw);aspect-ratio:9/18.5;border-radius:48px;background:#fff;padding:12px;box-shadow:0 0 0 10px #2B1D17,0 60px 100px -50px rgba(43,29,23,.6);overflow:hidden;display:flex;flex-direction:column}
.ph-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:0 0 16px 16px;background:#2B1D17;z-index:3}
.ph-map{position:relative;flex:1;border-radius:36px 36px 20px 20px;overflow:hidden}
.ph-map svg{position:absolute;inset:0;width:100%;height:100%}
.ph-saty{position:absolute;width:64px;left:42%;top:40%;animation:phRide 6s ease-in-out infinite alternate}
@keyframes phRide{from{transform:translate(-28px,26px)}to{transform:translate(22px,-20px)}}
@media (prefers-reduced-motion:reduce){.ph-saty{animation:none}}
.ph-card{margin-top:-28px;position:relative;background:#fff;border-radius:24px;padding:18px 16px 16px;box-shadow:0 -10px 30px -18px rgba(43,29,23,.3)}
.ph-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ph-row b{display:block;font-size:17px}.ph-row span{font-size:13px;color:var(--muted)}
.ph-eta{text-align:center;background:var(--gs);color:var(--g);border-radius:14px;padding:6px 12px}
.ph-eta b{display:block;font-size:24px;line-height:1}.ph-eta small{font-size:11px;font-weight:700}
.ph-bar{display:flex;gap:5px;margin-top:14px}
.ph-bar i{flex:1;height:5px;border-radius:9px;background:var(--sand2)}
.ph-bar i.on{background:var(--g)}.ph-bar i.now{background:linear-gradient(90deg,var(--g) 55%,var(--sand2) 55%)}
.ph-steps{display:flex;justify-content:space-between;gap:4px;margin-top:7px;font-size:11px;color:var(--muted)}
.ph-steps .now{color:var(--g);font-weight:700}
.ph-usput{margin-top:12px;background:var(--os);border-radius:12px;padding:8px 10px;font-size:12px;line-height:1.4;color:var(--ink)}
.ph-usput b{color:var(--o);font-size:12.5px}
@media (max-width:900px){.tk-in{grid-template-columns:1fr}.tk-phone{order:2}}

/* ---------- USPUT ---------- */
.up-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center;background:linear-gradient(140deg,#FFF3E1 0%,#FFE7C6 100%);border-radius:48px;padding:clamp(32px,5vw,72px)}
.up-k,.du-k,.pt-k,.cr-k{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;color:var(--o)}
.up h2{margin-top:12px;font-size:clamp(32px,3.8vw,52px)}
.up .lead{margin-top:16px}
.up-pts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.up-pts li{display:flex;gap:12px;align-items:flex-start}
.up-pts .ic{flex:none;color:var(--o);margin-top:3px}
.up-pts b{display:block;font-size:16.5px}.up-pts span{color:var(--muted);font-size:15px}
.up-art{text-align:center}
.up-num{margin:0;font:700 clamp(84px,11vw,168px)/.9 'Fredoka',sans-serif;color:var(--o);letter-spacing:-.04em;direction:ltr}
.up-num small{font-size:.32em;letter-spacing:0;margin-inline-start:.2em;color:var(--ink)}
.up-road{position:relative;margin-top:18px;height:150px;border-bottom:3px dashed rgba(43,29,23,.18)}
.up-road .saty{position:absolute;bottom:-4px;left:50%;height:150px;width:auto;transform:translateX(-50%)}
@media (max-width:900px){.up-in{grid-template-columns:1fr;border-radius:32px}.up-art{order:-1}}

/* ---------- six reasons ---------- */
.ft{background:var(--paper)}
.ft-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(30px,5vw,80px);align-items:start}
.ft-h{position:sticky;top:120px}
.ft-h h2{font-size:clamp(36px,4.2vw,56px)}
.ft-h p{margin-top:14px;color:var(--muted);font-size:18px}
.ft-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.ft-list li{padding:26px 0 30px;border-top:1px solid var(--line2)}
.ft-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--os);color:var(--o)}
.ft-list li:nth-child(even) .ft-ic{background:var(--gs);color:var(--g)}
.ft-list h3{margin-top:16px;font-size:21px;font-weight:700}
.ft-list p{margin-top:6px;color:var(--muted);font-size:15.5px}
@media (max-width:900px){.ft-in{grid-template-columns:1fr}.ft-h{position:static}}
@media (max-width:600px){.ft-list{grid-template-columns:1fr}}

/* ---------- diaspora + kindness ---------- */
.du{padding-top:0}
.du-in{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.du-c{position:relative;display:flex;align-items:flex-end;gap:10px;border-radius:40px;padding:clamp(28px,3.4vw,48px);overflow:hidden;min-height:380px}
.du-dia{background:linear-gradient(150deg,#EAF5F0,#D9EDE4)}
.du-cha{background:linear-gradient(150deg,#FFF4E4,#FFE6C6)}
.du-dia .du-k{color:var(--g)}
.du-txt{position:relative;z-index:1;max-width:30em}
.du h2{margin-top:12px;font-size:clamp(28px,2.8vw,40px)}
.du-txt>p:not(.du-k){margin-top:12px;color:var(--muted);font-size:16px}
.du-txt .btn{margin-top:22px}
.du-saty{flex:none;height:150px;width:auto;align-self:flex-end}
@media (max-width:900px){.du-in{grid-template-columns:1fr}.du-c{min-height:0}}
@media (max-width:560px){.du-c{flex-direction:column;align-items:flex-start}.du-saty{align-self:flex-end;height:120px;margin-top:-30px}}

/* ---------- restaurants ---------- */
.pt{background:linear-gradient(180deg,#F2F8F5 0%,var(--paper) 100%)}
.pt-k{color:var(--g)}
.pt-h{max-width:780px}
.pt-h h2{margin-top:12px;font-size:clamp(38px,5vw,68px)}
.pt-h .lead{margin-top:18px;max-width:38em}
.pt-sub{margin-top:clamp(40px,5vw,64px);font-size:20px;font-weight:700}
.pt-tiers{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pt-tier{background:#fff;border-radius:30px;padding:28px 26px 26px;box-shadow:0 1px 0 rgba(43,29,23,.05),0 30px 60px -46px rgba(43,29,23,.5)}
.pt-tier .pct{display:block;font-size:clamp(56px,6vw,84px);line-height:1;font-weight:700;color:var(--g);letter-spacing:-.03em}
.pt-tier b{display:block;margin-top:14px;font-size:19px}
.pt-tier p{margin-top:6px;color:var(--muted);font-size:15px}
.pt-tier.best{background:var(--g);color:#fff;box-shadow:0 40px 70px -40px rgba(15,125,98,.8)}
.pt-tier.best .pct,.pt-tier.best b{color:#fff}.pt-tier.best p{color:rgba(255,255,255,.85)}
.pt-tools{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
.pt-tools li{display:flex;gap:14px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line2)}
.pt-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--gs);color:var(--g)}
.pt-tools b{display:block;font-size:16.5px}.pt-tools p{color:var(--muted);font-size:14.5px;margin-top:3px}
.pt .cmp{margin-top:clamp(36px,4vw,56px);border:1px solid var(--line);box-shadow:0 30px 60px -50px rgba(43,29,23,.5)}
.pt-found{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff;border-radius:30px;padding:26px 30px;border:1px solid rgba(254,143,1,.25);background:linear-gradient(120deg,#FFFFFF,#FFF4E4)}
.pt-found>div{max-width:46em}
.pt-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--o)}
.pt-found p{margin-top:6px;font-size:15.5px}
.pt-cta{margin-top:30px}
@media (max-width:900px){.pt-tiers{grid-template-columns:1fr}.pt-tools{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pt-tools{grid-template-columns:1fr}.pt-found .btn{width:100%}}

/* ---------- riders ---------- */
.rd{background:var(--paper)}
.rd-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:center}
.rd h2{font-size:clamp(36px,4.4vw,60px)}
.rd .lead{margin-top:16px;max-width:30em}
.rd .btn{margin-top:28px}
.rd-modes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rd-modes li{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border-radius:28px;padding:26px 16px 20px;box-shadow:0 1px 0 rgba(43,29,23,.05),0 26px 50px -40px rgba(43,29,23,.5)}
.rd-modes .saty{height:120px;width:auto}
.rd-modes span{font-weight:700;font-size:17px}
@media (max-width:900px){.rd-in{grid-template-columns:1fr}}
@media (max-width:480px){.rd-modes .saty{height:84px}.rd-modes li{padding:18px 10px 14px;border-radius:22px}}

/* ---------- careers ---------- */
.cr{padding-top:0}
.cr-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;border-radius:48px;padding:clamp(32px,5vw,72px);background:radial-gradient(120% 120% at 100% 0%,#FFE0B3 0%,#FFF1DD 45%,#FFF8EE 100%);overflow:hidden}
.cr h2{margin-top:12px;font-size:clamp(34px,4vw,56px)}
.cr .lead{margin-top:16px;max-width:32em}
.cr-roles{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cr-roles li{background:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14.5px;box-shadow:0 8px 20px -16px rgba(43,29,23,.5)}
.cr-act{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cr-ride{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(43,29,23,.3)}
.cr-art{position:relative;min-height:340px;display:grid;place-items:center}
.cr-saty{height:clamp(220px,24vw,320px);width:auto}
.cr-perks{list-style:none;margin:0;padding:0}
.cr-perks li{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px;box-shadow:0 16px 30px -20px rgba(43,29,23,.55);white-space:nowrap}
.cr-perks .ic{color:var(--o)}
.cr-perks .cp-0{top:8%;inset-inline-end:2%}.cr-perks .cp-1{top:42%;inset-inline-start:0}.cr-perks .cp-2{bottom:6%;inset-inline-end:6%}
@media (max-width:900px){.cr-in{grid-template-columns:1fr;border-radius:32px}.cr-art{min-height:300px}}

/* ---------- meet Saty ---------- */
.sy{background:linear-gradient(180deg,var(--paper),var(--sand))}
.sy-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.sy-hero{height:clamp(170px,18vw,240px);width:auto}
.sy h2{margin-top:18px;font-size:clamp(34px,4vw,54px)}
.sy-h p{margin-top:14px;color:var(--muted);font-size:17.5px;max-width:32em}
.sy-chat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sy-chat li{display:flex;align-items:flex-end;gap:10px;max-width:88%}
.sy-chat li:nth-child(even){align-self:flex-end;flex-direction:row-reverse}
.sy-av{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -12px rgba(43,29,23,.5)}
.sy-av .saty{height:36px;width:auto}
.sy-chat q{quotes:none;background:#fff;border-radius:22px 22px 22px 6px;padding:13px 18px;font-weight:600;font-size:16px;box-shadow:0 14px 30px -24px rgba(43,29,23,.55)}
[dir=rtl] .sy-chat q{border-radius:22px 22px 6px 22px}
.sy-chat li:nth-child(even) q{background:var(--o);color:#fff;border-radius:22px 22px 6px 22px}
[dir=rtl] .sy-chat li:nth-child(even) q{border-radius:22px 22px 22px 6px}
@media (max-width:900px){.sy-in{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.fq{background:var(--paper)}
.fq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);align-items:start}
.fq h2{font-size:clamp(34px,4vw,54px)}
.fq-qs details{border-top:1px solid var(--line2)}
.fq-qs details:last-child{border-bottom:1px solid var(--line2)}
.fq-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:700;font-size:18px}
.fq-qs summary::-webkit-details-marker{display:none}
.fq-x{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:#fff}
.fq-x::before,.fq-x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--o);transform:translate(-50%,-50%);transition:transform .25s}
.fq-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq-qs details[open] .fq-x::after{transform:translate(-50%,-50%)}
.fq-qs details p{padding:0 50px 22px 0;color:var(--muted);font-size:16.5px}
[dir=rtl] .fq-qs details p{padding:0 0 22px 50px}
@media (max-width:900px){.fq-in{grid-template-columns:1fr}}

/* ---------- the city again, above the footer ---------- */
.foot-city{background:var(--paper);line-height:0}
.foot-city img{width:100%;height:clamp(90px,11vw,160px);object-fit:cover;object-position:50% 100%;opacity:.85}
.foot{background:#F2E6D6;border-top:0}.foot-bot{border-top-color:rgba(43,29,23,.1)}
.hx-txt{min-width:0}@media (max-width:560px){html[lang=ar] .hx h1{font-size:40px}}