/* iMall Cttn. marketing site — "Night Boutique" (Sep 2026). Dark navy + copper, flame accent, Erbil details. */
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-500.a4a9f8736c73.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-600.95d004a04952.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dmsans-400.b4c40ceb00ec.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dmsans-500.b87f7ada1494.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dmsans-600.ed4653ef1875.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dmsans-700.fd6e128d1af3.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(fonts/vazirmatn-var.1d6a9adc54f6.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#0A1020;--ink-2:#10182B;--ink-3:#18223A;--ink-4:#222C45;
  --ivory:#F4EFE6;--muted:#A7AEBD;--faint:#737C94;
  --flame:#FD6C26;--copper:#E9926A;--line:rgba(244,239,230,.1);
  --display:"Cormorant",Georgia,serif;--text:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4.5vw,44px);--nav:64px;
  color-scheme:dark;
}
[dir=rtl]{--display:"Vazirmatn","Noto Sans Arabic",Tahoma,sans-serif;--text:"Vazirmatn","Noto Sans Arabic",Tahoma,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px);background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
figure,p,h1,h2,h3,ul,ol{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:1.02;text-wrap:balance}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-weight:800;letter-spacing:0;line-height:1.3}
.kicker{display:inline-flex;align-items:center;gap:12px;font:600 12px/1.2 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
.kicker::before{content:"";width:34px;height:1.5px;background:var(--flame);flex:none}
[dir=rtl] .kicker{letter-spacing:0;font-size:14px}
.kicker.nt{text-transform:none;letter-spacing:.08em}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:34em}
.nt{unicode-bidi:isolate;direction:ltr;display:inline-block}
.fine{color:var(--faint);font-size:13px;margin-top:28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:8px;inset-inline-start:12px;z-index:100;background:var(--ivory);color:var(--ink);padding:12px 16px;border-radius:10px;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,16,32,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav-shell{display:flex;align-items:center;gap:20px;height:var(--nav)}
.brand img{height:36px;width:auto}
.nav-links{display:flex;gap:26px;margin-inline-start:18px;font-size:14.5px;color:var(--muted)}
.nav-links a{position:relative;padding-block:8px;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ivory)}
.nav-links a[aria-current=page]::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;background:var(--flame)}
.nav-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.langs{display:flex;padding:3px;border-radius:99px;background:var(--ink-3);border:1px solid var(--line)}
.langs button{border:0;background:none;cursor:pointer;padding:7px 11px;border-radius:99px;font:600 12.5px/1 "DM Sans",sans-serif;color:var(--muted)}
.langs button[lang=ckb],.langs button[lang=ar]{font-family:"Vazirmatn",sans-serif}
.langs button[aria-pressed=true]{background:var(--ivory);color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;border:1px solid rgba(233,146,106,.45);font:600 13px/1 var(--text);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--flame);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(253,108,38,.7)}70%,100%{box-shadow:0 0 0 8px rgba(253,108,38,0)}}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--ink-3);cursor:pointer;place-items:center}
.menu-lines{display:block;width:18px;height:10px;border-block:1.6px solid var(--ivory);transition:transform .25s}
.menu-toggle[aria-expanded=true] .menu-lines{transform:rotate(45deg) scaleY(.2)}
@media (max-width:820px){
  .menu-toggle{display:grid}.pill{display:none}
  .nav-links{position:absolute;top:100%;inset-inline:0;margin:0;flex-direction:column;gap:0;padding:8px var(--gutter) 18px;background:rgba(10,16,32,.97);border-bottom:1px solid var(--line);font-size:18px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding-block:14px;border-bottom:1px solid var(--line)}
  .nav-links a[aria-current=page]::after{display:none}
}
@media (max-width:380px){.langs button{padding:7px 8px}}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.actions.center{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:14px 22px;border-radius:99px;font:600 15px/1 var(--text);cursor:pointer;border:0;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--flame);color:#fff}
.btn-primary:hover{background:#ff7d3d}
.btn-ghost{color:var(--ivory);border:1px solid rgba(244,239,230,.25)}
.btn .arrow,.route .arrow{width:18px;height:18px}
[dir=rtl] .arrow{transform:scaleX(-1)}
.store-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.store-badge{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line)}
.store-badge small{display:block;color:var(--muted);font-size:12px;line-height:1.2}
.store-badge b{display:block;font:600 14px/1.3 "DM Sans",sans-serif}
.bi{width:22px;height:22px;flex:none}

/* hero */
.hero{position:relative;padding-block:clamp(40px,7vw,90px) 0;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 72% 55%,rgba(253,108,38,.18),transparent 70%),radial-gradient(40% 40% at 15% 8%,rgba(90,110,170,.14),transparent 70%)}
[dir=rtl] .hero::before{background:radial-gradient(60% 50% at 28% 55%,rgba(253,108,38,.18),transparent 70%),radial-gradient(40% 40% at 85% 8%,rgba(90,110,170,.14),transparent 70%)}
.hero-page{padding-bottom:clamp(40px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(46px,7.2vw,100px);margin-block:22px}
[dir=rtl] .hero h1{font-size:clamp(34px,4.8vw,64px)}
.hero h1 em{font-style:italic;color:var(--copper)}
[dir=rtl] .hero h1 em{font-style:normal}
.hero-center{text-align:center}
.hero-center .kicker{justify-content:center}
.hero-center .lead{margin-inline:auto}

.stage{position:relative;height:clamp(440px,50vw,620px);perspective:1400px;--rx:0deg;--ry:0deg}
.flame-glow{position:absolute;inset:18% 20%;border-radius:50%;background:radial-gradient(circle,rgba(253,108,38,.55),rgba(253,108,38,0) 62%);filter:blur(24px);animation:flicker 5s ease-in-out infinite;pointer-events:none}
@keyframes flicker{0%,100%{transform:scale(1);opacity:.85}40%{transform:scale(1.07) translateY(-2%);opacity:1}70%{transform:scale(.97);opacity:.8}}
.fan{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .4s ease-out}
/* phone: one frame at true iPhone proportions (--w = device width); screenshots carry no chrome of their own */
.ph,.tphone,.mini{--w:clamp(170px,20vw,256px);width:var(--w);aspect-ratio:1/2.08;padding:calc(var(--w)*.032);border-radius:calc(var(--w)*.155);background:linear-gradient(150deg,#3B4357,#161C2C 28%,#0B0F1A 72%,#2B3245);box-shadow:0 0 0 1px rgba(255,255,255,.09) inset,0 0 0 calc(var(--w)*.008 + 1px) #05070D inset,0 40px 80px -20px rgba(0,0,0,.8)}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.125);overflow:hidden;background:var(--sb);display:flex;flex-direction:column}
.sbar{position:relative;flex:none;height:calc(var(--w)*.14);display:flex;align-items:center;justify-content:space-between;padding-inline:calc(var(--w)*.1) calc(var(--w)*.07);direction:ltr;font:600 calc(var(--w)*.043)/1 -apple-system,"SF Pro Text","DM Sans",sans-serif;letter-spacing:0}
.screen.dark .sbar{color:#fff}.screen.light .sbar{color:#000}
.sbar svg{width:calc(var(--w)*.16);height:auto;fill:currentColor}
.island{position:absolute;left:50%;top:calc(var(--w)*.027);transform:translateX(-50%);width:calc(var(--w)*.29);height:calc(var(--w)*.086);border-radius:99px;background:#000}
.screen img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top}
.fan .ph{position:absolute;left:50%;top:50%}
.fan .ph.c{transform:translate(-50%,-50%) translateZ(80px);z-index:3;animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both}
.fan .ph.l{transform:translate(-128%,-46%) rotateY(24deg) rotateZ(-6deg);z-index:2;animation:fanOut 1.4s .15s cubic-bezier(.2,.8,.2,1) both}
.fan .ph.r{transform:translate(28%,-44%) rotateY(-24deg) rotateZ(6deg);z-index:2;animation:fanOut 1.4s .15s cubic-bezier(.2,.8,.2,1) both}
[dir=rtl] .fan .ph.l{transform:translate(28%,-44%) rotateY(-24deg) rotateZ(6deg)}
[dir=rtl] .fan .ph.r{transform:translate(-128%,-46%) rotateY(24deg) rotateZ(-6deg)}
@keyframes rise{from{transform:translate(-50%,-44%) translateZ(0)}}
@keyframes fanOut{from{transform:translate(-50%,-50%)}}
.chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(24,34,58,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(233,146,106,.35);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);animation:float 6s ease-in-out infinite;white-space:nowrap}
.chip b{display:block;font-weight:600;font-size:13px;line-height:1.3}
.chip small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
.dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(253,108,38,.16);color:var(--flame);flex:none}
.dot .ic{width:17px;height:17px}
.chip.a{top:12%;inset-inline-start:0}
.chip.b{bottom:18%;inset-inline-end:0;animation-delay:-2s}
.stage.solo{--pw:clamp(230px,22vw,290px)}
.stage.solo .ph{--w:var(--pw)}
.stage.solo .chip.a{top:16%;inset-inline-start:auto;inset-inline-end:calc(50% + var(--pw)*.4)}
.stage.solo .chip.b{bottom:22%;inset-inline-end:auto;inset-inline-start:calc(50% + var(--pw)*.4)}
.fee{color:var(--faint);font-size:14.5px;margin-top:12px;max-width:34em}
@keyframes float{50%{transform:translateY(-10px)}}
.skyline{display:block;width:100%;height:auto;margin-top:clamp(10px,2vw,24px);color:var(--copper)}
.skyline path,.skyline line{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.7}
.skyline .ground{opacity:.3}
.skyline .win{opacity:.45}
.skyline.drawing .win{opacity:0;animation:winIn 1.2s 2.8s ease-out forwards}
@keyframes winIn{to{opacity:.45}}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .stage{height:clamp(390px,108vw,520px)}
  .ph{--w:clamp(148px,40vw,210px)}
  .stage.solo{--pw:clamp(210px,58vw,250px);height:calc(var(--pw)*2.08 + 40px)}
  .fan .ph.l,[dir=rtl] .fan .ph.r{transform:translate(-112%,-46%) rotateY(22deg) rotateZ(-5deg)}
  .fan .ph.r,[dir=rtl] .fan .ph.l{transform:translate(12%,-44%) rotateY(-22deg) rotateZ(5deg)}
  .chip{padding:8px 11px}.chip.a{top:3%}.chip.b{bottom:5%}
}
@media (max-width:520px){.stage.solo .chip{display:none}}

/* marquee */
.marquee{border-block:1px solid var(--line);padding-block:22px;overflow:hidden;display:grid;gap:10px;background:var(--ink-2)}
.track{display:flex;gap:34px;width:max-content;animation:scroll 50s linear infinite;font:500 clamp(24px,3vw,38px)/1.25 var(--display);white-space:nowrap}
.track.rev{animation-direction:reverse;color:var(--faint);animation-duration:62s}
.track span{display:flex;align-items:center;gap:34px}
.track span::after{content:"";width:8px;height:12px;border-radius:50%/60% 60% 40% 40%;background:var(--flame)}
[dir=rtl] .track{font-weight:700;font-size:clamp(20px,2.4vw,30px);animation-name:scrollR}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes scrollR{to{transform:translateX(50%)}}

/* generic chapters */
.ch{position:relative;padding-block:clamp(72px,10vw,130px);isolation:isolate}
.head{display:grid;gap:18px;max-width:760px;justify-items:start}
.head h2{font-size:clamp(38px,5.4vw,70px)}
[dir=rtl] .head h2{font-size:clamp(28px,4vw,50px)}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split-grid.wide-right{grid-template-columns:1fr 1.2fr}
@media (max-width:860px){.split-grid,.split-grid.wide-right{grid-template-columns:1fr}}

/* problem chat */
.chat{position:relative;padding:26px 26px 60px;border-radius:28px;background:var(--ink-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.chat-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.chat-top .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3b4666,#1b2438)}
.chat-top b{display:block;font-size:14px}.chat-top small{color:var(--muted);font-size:12.5px}
.bub{align-self:flex-end;max-width:80%;padding:11px 16px;border-radius:20px 20px 6px 20px;background:var(--ink-4);font-size:15.5px}
[dir=rtl] .bub{align-self:flex-start;border-radius:20px 20px 20px 6px}
.seen{align-self:flex-end;font-size:12px;color:var(--faint)}
[dir=rtl] .seen{align-self:flex-start}
.typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;border-radius:20px;background:var(--ink-3)}
[dir=rtl] .typing{align-self:flex-end}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.25}}
.fix{position:absolute;inset-inline:18px;bottom:-34px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--ivory);color:var(--ink);box-shadow:0 26px 50px -18px rgba(0,0,0,.8)}
.fix img{width:54px;height:54px;border-radius:12px;object-fit:cover;object-position:top;flex:none}
.fix b{display:block;font-size:14.5px;line-height:1.35}.fix small{font-size:13px;color:#4a5570}
.chat.play .bub,.chat.play .seen,.chat.play .typing{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both}
.chat.play .bub:nth-of-type(2){animation-delay:.1s}.chat.play .bub:nth-of-type(3){animation-delay:.7s}.chat.play .bub:nth-of-type(4){animation-delay:1.3s}.chat.play .bub:nth-of-type(5){animation-delay:1.9s}
.chat.play .seen{animation-delay:2.4s}.chat.play .typing{animation-delay:2.7s}
.chat.play .fix{animation:up .7s 3.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.92)}}
@keyframes up{from{opacity:0;transform:translateY(30px)}}

/* categories */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,220px);gap:14px;margin-top:48px}
.tile{position:relative;border-radius:22px;overflow:hidden;background:#fff}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tile.contain img{object-fit:contain}
.tile:hover img{transform:scale(1.06)}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.big img{object-position:center 25%}
.tile.wide{grid-column:span 2}
.tile figcaption{position:absolute;inset-inline-start:14px;bottom:14px;padding:8px 14px;border-radius:99px;background:var(--ink);font-weight:600;font-size:14px;line-height:1.3}
@media (max-width:760px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.tile.wide{grid-column:span 1}}

/* tour */
.tour-sec{padding-bottom:40px}
.tour{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:40px}
.tstep{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:.35;transition:opacity .5s}
.tstep.on{opacity:1}
.tstep .n{font:600 13px/1 var(--text);letter-spacing:.14em;color:var(--copper);text-transform:uppercase}
[dir=rtl] .tstep .n{letter-spacing:0;font-size:14px}
.tstep h3{font-size:clamp(32px,4vw,52px)}
[dir=rtl] .tstep h3{font-size:clamp(24px,3vw,38px)}
.tstep p{color:var(--muted);font-size:17px;max-width:28em}
.mini{display:none}
.tsticky{position:sticky;top:calc(var(--nav) + 7vh);height:calc(86vh - var(--nav));display:grid;place-items:center}
.tphone{--w:calc(min(78vh,640px)*.481);position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.09) inset,0 0 0 calc(var(--w)*.008 + 1px) #05070D inset,0 50px 100px -30px rgba(0,0,0,.9),0 0 120px -30px rgba(253,108,38,.45)}
.tphone .scr{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.125);overflow:hidden}
.shot{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .6s,transform .8s}
.shot.on{opacity:1;transform:none}
.dots{position:absolute;inset-inline-end:-26px;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.dots i{width:6px;height:6px;border-radius:4px;background:var(--ink-4);transition:all .4s}
.dots i.on{background:var(--flame);height:22px}
@media (max-width:860px){
  .tour{grid-template-columns:1fr}.tsticky{display:none}
  .tstep{min-height:0;opacity:1;padding-block:30px;border-top:1px solid var(--line)}
  .mini{--w:min(62vw,250px);display:block;margin:14px auto 0}
}

/* journey map */
.journey{position:relative;height:280vh;background:var(--ink-2);border-block:1px solid var(--line)}
.jpin{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));height:calc(100svh - var(--nav));display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(20px,4vw,60px);max-width:1180px;margin-inline:auto;padding-inline:var(--gutter);overflow:hidden}
.map{width:100%;max-height:calc(100vh - 110px);aspect-ratio:1;justify-self:center}
.map .place{fill:var(--ivory);font:600 30px var(--text);paint-order:stroke;stroke:var(--ink-2);stroke-width:10px;stroke-linejoin:round}
.map .route-bg{fill:none;stroke:rgba(253,108,38,.22);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.map .route{fill:none;stroke:var(--flame);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(253,108,38,.55))}
.map .dot-store{fill:var(--copper);stroke:var(--ink-2);stroke-width:4}.map .dot-dest{fill:var(--ink-2);stroke:var(--ivory);stroke-width:4}
.map .rider-halo{fill:rgba(253,108,38,.28)}.map .rider{fill:var(--flame);stroke:#fff;stroke-width:4}
.status{display:grid;gap:14px;margin-top:30px;max-width:420px}
.srow{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--faint);transition:color .4s}
.srow i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink-4);transition:all .4s;flex:none}
.srow.on{color:var(--ivory)}
.srow.on i{background:var(--flame);border-color:var(--flame);box-shadow:0 0 0 5px rgba(253,108,38,.18)}
.srow.done{color:var(--muted)}
.srow.done i{background:var(--copper);border-color:var(--copper)}
@media (max-width:860px){
  .jpin{grid-template-columns:1fr;align-content:center;gap:4px}
  .jpin .head h2{font-size:clamp(28px,8vw,40px)}
  .jpin .lead{font-size:15px}
  .map{max-height:46vh}
  .status{grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:14px}.srow{font-size:14px}
}
@media (max-height:620px) and (max-width:860px){.jpin .lead{display:none}}

/* stores */
.kilim{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E9926A' stroke-opacity='.10' stroke-width='1.2'%3E%3Cpath d='M32 6 58 32 32 58 6 32Z'/%3E%3Cpath d='M32 18 46 32 32 46 18 32Z'/%3E%3Cpath d='M32 27 37 32 32 37 27 32Z'/%3E%3Cpath d='M6 32H0M64 32h-6M32 6V0M32 64v-6M19 19l-5-5M45 19l5-5M19 45l-5 5M45 45l5 5'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.plist{list-style:none;padding:0;margin-top:28px}
.plist li{display:flex;gap:14px;align-items:center;padding:15px 0;border-top:1px solid var(--line);font-size:16.5px;font-weight:500}
.plist .ic{width:22px;height:22px;color:var(--flame);flex:none}
.laptop{position:relative;margin-top:24px}
.lid{border-radius:18px 18px 4px 4px;background:#1A2130;padding:10px 10px 14px;box-shadow:0 0 0 1px #353E52 inset,0 50px 90px -30px rgba(0,0,0,.9)}
.lid img{border-radius:6px;width:100%}
.base{height:14px;margin-inline:-5%;border-radius:0 0 16px 16px;background:linear-gradient(#3A4256,#1E2536)}
.notif{position:absolute;top:-24px;inset-inline-end:6%;z-index:2;display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:16px;background:rgba(24,34,58,.95);border:1px solid rgba(233,146,106,.45);box-shadow:0 20px 40px -12px rgba(0,0,0,.8);animation:float 5s ease-in-out infinite}
.notif .dot{width:34px;height:34px}
.notif b{display:block;font-size:14px;line-height:1.3}.notif small{font-size:12.5px;color:var(--muted)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{padding:26px;border-radius:22px;background:var(--ink-2);border:1px solid var(--line);display:grid;gap:10px;align-content:start;transition:border-color .3s,transform .3s}
.card:hover{border-color:rgba(233,146,106,.4);transform:translateY(-3px)}
.card .ic{width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(253,108,38,.12);color:var(--flame);margin-bottom:6px}
.card h3{font-family:var(--text);font-size:19px;font-weight:600;letter-spacing:0;line-height:1.3}
.card p{color:var(--muted);font-size:15px}
@media (max-width:980px){.cards,.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards,.cards-4{grid-template-columns:1fr}}
.lang-strip{padding-block:clamp(40px,7vw,80px);border-block:1px solid var(--line);background:var(--ink-2)}
.lang-strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(18px,4vw,48px);font-size:clamp(40px,7vw,96px);line-height:1.2}
.lang-strip span[lang=en]{font-family:"Cormorant",serif;font-style:italic;color:var(--copper)}
.lang-strip span[lang=ckb],.lang-strip span[lang=ar]{font-family:"Vazirmatn",sans-serif;font-weight:800}
.lang-strip span[lang=ar]{color:var(--muted)}
.lang-strip i{width:10px;height:14px;border-radius:50%/60% 60% 40% 40%;background:var(--flame)}

/* business */
.table-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;min-width:460px}
.cmp th,.cmp td{padding:16px 12px;text-align:start;vertical-align:middle;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.cmp thead th,.cmp thead td{font:600 12px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:0}
[dir=rtl] .cmp thead th{letter-spacing:0;font-size:13.5px}
.cmp thead img{height:30px;width:auto}
.cmp tbody th{font-weight:600}
.cmp .soc{color:var(--faint)}
.cmp .im{background:rgba(233,146,106,.07);border-inline-start:2px solid var(--flame);font-weight:500}
.cmp thead .im{border-radius:14px 14px 0 0}
.vsteps{margin-top:28px}
.vstep{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.vstep .ic{width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(253,108,38,.12);color:var(--flame);flex:none}
.vstep b{display:block;font-size:17px}.vstep small{color:var(--muted);font-size:14.5px}
.duo{position:relative;display:flex;justify-content:center;align-items:center;gap:18px;min-height:420px}
.duo::before{content:"";position:absolute;inset:10% 15%;border-radius:50%;background:radial-gradient(circle,rgba(253,108,38,.35),transparent 65%);filter:blur(30px);z-index:-1}
.duo .ph{--w:min(62vw,250px)}
.duo.two .ph{--w:min(40vw,230px)}
.duo.two .m2{transform:translateY(40px)}
.join-steps{list-style:none;padding:0;display:grid}
.join-steps li{display:flex;gap:22px;align-items:center;padding:24px 0;border-top:1px solid var(--line)}
.join-steps li:last-child{border-bottom:1px solid var(--line)}
.join-steps .num{font:500 44px/1 "Cormorant",serif;color:var(--flame);width:58px;flex:none}
.join-steps b{display:block;font-size:20px}.join-steps small{color:var(--muted);font-size:15px}
.contact-sec{text-align:center;overflow:hidden}
.contact-sec .head,.contact-sec .kicker{justify-content:center}
.contact-sec h2{font-size:clamp(38px,6vw,76px);margin-top:18px}
[dir=rtl] .contact-sec h2{font-size:clamp(30px,4.5vw,56px)}
.contact-sec .lead{margin:18px auto 0}
.contact-sec .flame-glow{inset:auto;width:60vw;height:60vw;max-width:680px;max-height:680px;left:50%;top:65%;transform:translate(-50%,-50%);animation:none;opacity:.4;z-index:-1}
.contact{margin:34px auto 0;max-width:560px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;background:var(--ink-2);border:1px solid rgba(233,146,106,.3);text-align:start}
.contact .who{flex:1;min-width:180px}
.contact .who b{display:block;font-size:17px}.contact .who small{color:var(--muted);font-size:13.5px}
.wa{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#1FAF5A;color:#fff;flex:none}
.wa .bi{width:26px;height:26px}
.wa-btn{padding:10px 16px;border-radius:99px;border:1px dashed rgba(31,175,90,.6);color:#6fdc9b;font:600 13px/1 var(--text);white-space:nowrap}
.contact.live .wa-btn{border-style:solid;background:#1FAF5A;color:#fff}

/* availability */
.platforms{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.platform{padding:34px;border-radius:24px;background:var(--ink-2);border:1px solid var(--line);display:grid;gap:12px;align-content:start}
.platform .pi{width:34px;height:34px}
.platform h2{font-family:"DM Sans",sans-serif;font-size:28px;font-weight:600;letter-spacing:0}
.platform .status{justify-self:start;margin:0;padding:6px 12px;border-radius:99px;background:rgba(253,108,38,.14);color:var(--copper);font-size:13px;font-weight:600;display:block;max-width:none}
.platform p:last-child{color:var(--muted)}
.start{margin-top:clamp(56px,8vw,100px);display:grid;gap:16px;justify-items:start}
.start h2{font-size:clamp(34px,5vw,60px)}
[dir=rtl] .start h2{font-size:clamp(28px,4vw,46px)}
@media (max-width:640px){.platforms{grid-template-columns:1fr}}

/* help */
.routes{display:grid;gap:12px;margin-top:40px;max-width:900px}
.route{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:20px;background:var(--ink-2);border:1px solid var(--line);text-align:start;transition:border-color .3s,transform .3s}
.route:hover{border-color:rgba(233,146,106,.45);transform:translateY(-2px)}
.route .ic:first-child{width:46px;height:46px;padding:11px;border-radius:14px;background:rgba(253,108,38,.12);color:var(--flame);flex:none}
.route span{flex:1}.route b{display:block;font-size:19px}.route small{color:var(--muted);font-size:14.5px}
.route .arrow{color:var(--copper);flex:none}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 36px 22px 0;position:relative;font-size:18px;font-weight:600}
[dir=rtl] .faq summary{padding:22px 0 22px 36px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:0;top:18px;font-size:24px;font-weight:400;color:var(--copper)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:22px;color:var(--muted)}
.faq-sec .split-grid{align-items:start}
.err .err-num{font:600 clamp(96px,16vw,180px)/1 "Cormorant",serif;color:var(--ink-4);margin-bottom:10px}
.err h1{font-size:clamp(40px,6vw,72px)}
.err .skyline{margin-top:60px}

/* soon */
.soon{text-align:center;overflow:hidden}
.soon .wrap{display:grid;justify-items:center}
.soon h2{font-size:clamp(44px,8vw,112px);margin-top:20px}
[dir=rtl] .soon h2{font-size:clamp(34px,6vw,80px)}
.soon .lead{margin:22px auto 0}
.soon .store-badges{justify-content:center;margin-top:34px}
.soon .flame-glow{inset:auto;width:60vw;height:60vw;max-width:720px;max-height:720px;left:50%;top:60%;transform:translate(-50%,-50%);z-index:-1;animation:none;opacity:.55}

/* footer */
.site-footer{position:relative;isolation:isolate;border-top:1px solid var(--line);padding-top:56px;background:var(--ink)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px}
.footer-brand img{height:52px;width:auto;margin-bottom:14px}
.footer-brand p{color:var(--muted)}
.site-footer h2{font:600 13px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:12px}
[dir=rtl] .site-footer h2{letter-spacing:0;font-size:14px}
.site-footer .footer-top a{display:block;padding-block:6px;color:var(--muted)}
.site-footer .footer-top a:hover{color:var(--ivory)}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--faint);font-size:13.5px}
@media (max-width:760px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
/* etched Qalat at night; the sky fades under the legal row */
.footer-scene{position:relative;z-index:-1;margin-top:clamp(-120px,-7vw,-40px);pointer-events:none}
.footer-scene svg{display:block;width:100%;height:clamp(300px,44vw,660px)}
.rider .body{fill:#F3E5CB;stroke:var(--ink);stroke-width:.75;stroke-linejoin:round;stroke-linecap:round}
.rider .line{fill:none;stroke:var(--ink);stroke-width:.75;stroke-linecap:round}
.rider .beam{fill:url(#beam)}
.rider .lamp{fill:#FD6C26;stroke:var(--ink);stroke-width:.4}
.dust circle{fill:var(--ink)}
/* footer Easter egg: the rider notices the cursor, talks when tapped, drops a parcel at 5 taps */
.rider .mark{fill:#FD6C26}
.rider .eye{fill:var(--ink);opacity:0}
.rider.looking .eye{opacity:1}.rider.looking .visor{opacity:0}
.rider .hit{fill:transparent;pointer-events:none;cursor:pointer;touch-action:manipulation}
.rider.live .hit{pointer-events:all}
.parcel .body{fill:#F3E5CB;stroke:var(--ink);stroke-width:.75;stroke-linejoin:round}
.parcel .line{fill:none;stroke:var(--ink);stroke-width:.6}
.egg-bubble,.egg-stamp{position:absolute;left:0;top:0;margin:0;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s}
.egg-bubble{padding:6px 12px;border-radius:14px;background:#F3E5CB;color:var(--ink);border:1px solid var(--ink);font:600 14px/1.3 var(--text);box-shadow:0 6px 18px rgba(10,16,32,.35)}
.egg-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:inherit;border:inherit;border-width:0 1px 1px 0;transform:rotate(45deg)}
.egg-stamp{padding:3px 9px;border:2px solid var(--flame);border-radius:6px;color:var(--flame);font:700 12px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;background:rgba(243,229,203,.85)}
.egg-bubble.on,.egg-stamp.on{opacity:1}

/* reveal: only below-the-fold items are hidden, and only once JS has run */
.pre{opacity:0;transform:translateY(28px)}
.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pre{opacity:1;transform:none}
}