/* ========================================================================== ZIRAK — one app, every service Black page, Kurdish-flag colour blocking. The flag colours are used two ways, and they are NOT the same values: · accents — the true flag colours, on small elements against black · panels — large fills carrying body text (a base colour with a slight gradient across it), so red and green are deepened until white text clears 4.5:1 (the true flag red and green only reach 4.35:1 and 3.07:1 as fills) ========================================================================== */ :root{ /* true flag colours — accents only */ --yellow:#FFCB05; --red:#ED2024; --green:#21A94A; /* panel fills — large areas that carry text. Each is a base plus a lit end (-hi, top-left) and a deep end (-lo, bottom-right), so the panel reads as one colour with light falling across it. The lit end is as bright as the text allows: white text still clears 4.5:1 there (red 4.72, green 4.60), which is why the two darken further than they lighten. */ --panel-yellow:#FFCB05; --panel-yellow-hi:#FFE04A; --panel-yellow-lo:#D9A300; --panel-red:#C41B20; --panel-red-hi:#DE2830; --panel-red-lo:#8C0D15; --panel-green:#0E6E32; --panel-green-hi:#13873F; --panel-green-lo:#05391A; --panel-white:#E8E8E1; --panel-white-hi:#FBFBF6; --panel-white-lo:#C0C0B6; --bg:#050505; --bg-2:#0C0C0D; --ink:#FFFFFF; --ink-dark:#0F0F0F; --muted:rgba(255,255,255,.60); --faint:rgba(255,255,255,.56); --line:rgba(255,255,255,.10); --surface:rgba(255,255,255,.04); --wrap:1200px; --pad:clamp(20px,4vw,40px); --r:20px; --ease:cubic-bezier(.16,1,.3,1); --font-d:'Sora','Noto Kufi Arabic',system-ui,-apple-system,'Segoe UI',sans-serif; --font-b:'Inter','Noto Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-b);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } body.is-locked{overflow:hidden} /* js/i18n.js sets this on when a language other than the one in the markup is loading, and clears it on arrival (or after 1.5s, whichever is first) — better a blink than a page that visibly rewrites itself. */ .i18n-boot body{visibility:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol,dl{margin:0;padding:0;list-style:none} h1,h2,h3{margin:0;font-family:var(--font-d);font-weight:800;line-height:1.02;letter-spacing:-.04em} p{margin:0} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--yellow);color:#000} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .section{position:relative;padding:clamp(70px,7.5vw,100px) 0} section[id]{scroll-margin-top:84px} /* Big, tight, confident display type — the loudest thing on the page */ h1{font-size:clamp(2.6rem,5.6vw,4.6rem);letter-spacing:-.045em} h2{font-size:clamp(2.2rem,5.2vw,3.8rem)} em{font-style:normal;color:var(--yellow)} .eyebrow{ display:inline-block;margin-bottom:16px;font-family:var(--font-d); font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow); } .head{margin-bottom:clamp(48px,5.5vw,68px)} /* the top row's artwork breaks ~95px above the panels, so the services heading needs more clearance than a normal section heading */ #services .head{margin-bottom:clamp(76px,5.8vw,86px)} .head--center{text-align:center} /* ---------- Nav ---------- */ .nav{position:fixed;inset:0 0 auto 0;z-index:100;border-bottom:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease)} .nav.is-stuck{background:rgba(5,5,5,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)} .nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:800;letter-spacing:.16em;font-size:.9rem} .brand img{width:36px;height:36px;border-radius:10px} .nav__links{display:flex;gap:28px} .nav__links a{font-size:.92rem;color:var(--muted);transition:color .25s var(--ease)} .nav__links a:hover{color:var(--ink)} .nav__actions{display:flex;align-items:center;gap:clamp(8px,1.4vw,14px)} /* ---------- Language switcher ---------- Three languages fit a segmented control, so it stays in the bar at every width instead of hiding inside the burger menu — the one control a visitor who cannot read the current language still has to find. It never flips with direction: EN · عربي · کوردی reads the same order in all three. */ .lang{ display:inline-flex;align-items:center;gap:2px;flex:none;direction:ltr; padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface); } .lang__btn{ padding:7px 13px;border-radius:999px;line-height:1;white-space:nowrap; font-family:var(--font-d);font-size:.76rem;font-weight:700;color:var(--muted); transition:color .25s var(--ease),background .25s var(--ease); } .lang__btn:hover{color:var(--ink)} .lang__btn[aria-pressed="true"]{background:var(--yellow);color:var(--ink-dark)} .lang__btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px} /* Arabic script sits lower and needs no tracking */ .lang__btn[lang="ar"],.lang__btn[lang="ku"]{font-size:.82rem;letter-spacing:0} .lang__btn[disabled]{opacity:.35;cursor:not-allowed} .lang__btn[disabled]:hover{color:var(--muted)} /* Only ever rendered while working on the site locally — js/i18n.js builds it when the dictionaries cannot be read, which on a deployed page never happens. It exists so a switcher that cannot work says why. */ .i18n-note{ position:fixed;z-index:120;inset-inline:16px auto;bottom:16px;max-width:min(460px,calc(100vw - 32px)); display:flex;flex-direction:column;gap:10px;padding:16px 42px 16px 18px; border:1px solid rgba(255,203,5,.42);border-inline-start:3px solid var(--yellow);border-radius:14px; background:rgba(18,18,19,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:0 20px 50px -18px rgba(0,0,0,.9); font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.9);text-align:start; } .i18n-note code{ display:block;padding:9px 12px;border-radius:9px;direction:ltr; background:rgba(255,255,255,.06);border:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--yellow); user-select:all; /* one click selects the whole command */ } .i18n-note__x{ position:absolute;inset-inline-end:8px;top:8px;width:26px;height:26px;border-radius:8px; display:grid;place-items:center;font-size:1.1rem;line-height:1;color:var(--faint); } .i18n-note__x:hover{color:var(--ink);background:var(--surface)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:999px; font-family:var(--font-d);font-weight:700;font-size:.88rem;transition:transform .25s var(--ease); } .btn--primary{background:var(--yellow);color:var(--ink-dark)} .btn--primary:hover{transform:translateY(-2px)} .btn--block{width:100%;padding:16px} .stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .stores--center{justify-content:center} .store{ display:inline-flex;align-items:center;gap:11px;padding:11px 22px 11px 17px;border-radius:14px; background:var(--ink-dark);color:var(--ink); transition:transform .25s var(--ease); } .store--dark{background:var(--surface);border:1px solid var(--line)} .store:hover{transform:translateY(-2px)} .store svg{width:22px;height:22px;flex:none} .store span{display:flex;flex-direction:column;line-height:1.15;text-align:start} .store small{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;opacity:.6} .store strong{font-family:var(--font-d);font-size:.94rem;font-weight:700} /* ---------- Burger + mobile menu ---------- */ .burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:5px} .burger span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .burger.is-open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)} .menu{ position:fixed;inset:0;z-index:95;background:rgba(5,5,5,.97); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;flex-direction:column;justify-content:center;gap:36px;padding:100px var(--pad) 60px; opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s; } .menu.is-open{opacity:1;visibility:visible} .menu__links{display:flex;flex-direction:column} .menu__links a{padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--font-d);font-size:clamp(1.7rem,7vw,2.2rem);font-weight:700;letter-spacing:-.03em} /* ========================================================================== HERO — centred statement, then the product ========================================================================== */ .hero{position:relative;padding:clamp(110px,12vw,146px) 0 clamp(44px,5vw,64px);overflow:hidden} /* The device sits beside the copy, not under it, so the hero stays one screen tall. The columns are weighted 1.5:1 rather than the old 1:.95 because the headline now runs across instead of down and needs the width: the art column had ~145px of slack around a 374px-wide phone, and that slack has moved to the copy. The phone itself is untouched. */ .hero__inner{ position:relative;display:grid;grid-template-columns:1.5fr minmax(0,1fr); gap:clamp(24px,4vw,52px);align-items:center; } .hero__bg{position:absolute;inset:0;pointer-events:none} .blob{position:absolute;top:-300px;inset-inline-end:-160px;width:820px;height:640px;border-radius:50%;background:var(--yellow);opacity:.17;filter:blur(120px)} .hero__copy{position:relative} .pill{ display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding-block:8px;padding-inline:12px 16px; border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.8rem;color:rgba(255,255,255,.82); } .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(33,169,74,.6);animation:ping 2.1s infinite} @keyframes ping{70%{box-shadow:0 0 0 9px rgba(33,169,74,0)}100%{box-shadow:0 0 0 0 rgba(33,169,74,0)}} .hero h1{ /* Sized to the copy column, not the viewport: at 1280 that column is 641px and the slogan measures 736px per 72px of type, so ~60px is the most that stays on one line. The 2rem floor keeps it on one line on a phone too. */ font-size:clamp(2rem,4.7vw,3.7rem); line-height:1.05; /* the three words are one phrase; balanced wrapping keeps them from breaking 2 + 1 on the narrow widths where the line does have to fold */ text-wrap:balance; } /* Kurdish runs about half again as long as the English — 946px against 736px at the same size — so it takes one step down to hold the same single line in the same column. Change the slogan and this is the number to re-check. */ html[lang="ku"] .hero h1{font-size:clamp(1.75rem,3.6vw,2.9rem)} .hero p{margin-top:20px;max-width:38ch;color:var(--muted);font-size:clamp(1rem,1.5vw,1.14rem)} /* The map is not a card sitting beside the copy — it runs off the right of the page and dissolves into the background on the left, so the two halves of the hero share one surface instead of butting against each other. --bleed is the distance from the wrap's content edge to the viewport edge. */ /* One switch, on .hero__art: data-art picks which hero art is live. The other is left in the markup, fully styled, so the two can be compared by changing a single word. */ .hero__art[data-art="phone"] .map3d, .hero__art[data-art="phone"] .chip{display:none} .hero__art[data-art="map"] .hero__phone{display:none} /* ---------- hero art: the phone --------------------------------------- */ .hero__phone{ position:relative;display:flex;justify-content:center; /* a glow behind the device, so it is lit by the page rather than cut out and dropped onto it */ isolation:isolate; } .hero__phone::before{ content:"";position:absolute;z-index:0; left:50%;top:46%;translate:-50% -50%; width:min(150%,700px);aspect-ratio:1; background:radial-gradient(closest-side,rgba(255,203,5,.15),rgba(255,203,5,.05) 45%,transparent 72%); } .hero__phone img{ position:relative;z-index:1; width:auto;max-width:100%; /* Sized to the copy column beside it, not to the viewport, so the two read as one block rather than the device floating above the text. That column is 388-427px depending on language and width — it was ~500px when the headline stacked over three lines, and lost the difference when the slogan went onto one line. The vh term only pulls the phone in on a short window. */ height:clamp(300px,55vh,440px); filter:drop-shadow(0 34px 46px rgba(0,0,0,.65)); } .hero__art{ --bleed:calc(var(--pad) + max(0px,(100vw - var(--wrap)) / 2)); position:relative; container-type:inline-size; /* so the frame below can size off its own width */ margin-inline-end:calc(-1 * var(--bleed)); margin-inline-start:calc(-1 * clamp(24px,5vw,90px)); } /* the bleed belongs to the map, which is a surface; the phone is an object and sits inside the column like everything else */ .hero__art[data-art="phone"]{margin-inline:0} /* ---------- hero map ---------------------------------------------------- A city drawn straight down as a plan, then laid down in 3D. One rotateX on .map3d__plane tilts the whole ground; js/main.js runs that same projection by hand so the pins and labels can stand upright on top of it instead of lying flat in it. Four numbers describe the camera and both halves read them from here — change them in one place and the pins follow. The arrow itself stays in the ground plane, the way a navigation chevron sits on the road. js/main.js drives it (see place()) — scrolling pushes it forward, scrolling back pulls it back. */ .map3d{ --tilt:60deg; /* how far the ground is laid down */ --zoom:1.71; /* the plan is enlarged before tilting, so it fills the card */ --dist:1.22; /* eye distance, in card widths — JS turns this into px */ --lift:-14%; /* nudge the tilted plane up, as a share of the plane's height */ position:relative;overflow:hidden;pointer-events:none; /* The frame follows the width, but never gets so tall it swallows the hero — past that the ground simply crops, which is what a viewport onto a city does anyway. The cqw floor is the important half: crop is taken off the top and bottom, so a frame that is short relative to its width starts eating the far pins. Keeping the height above 64% of the width bounds how much can ever be cut, at any viewport. */ width:100%;aspect-ratio:560/460; max-height:max(64cqw,clamp(340px,56vh,600px)); /* No border, no plate. The frame is dissolved on three sides — left into the copy, top and bottom into the page — so the only hard edge is the right one, and that runs off the screen. */ -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 26%), linear-gradient(180deg,transparent 0,#000 13%,#000 80%,transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg,transparent 0,#000 26%), linear-gradient(180deg,transparent 0,#000 13%,#000 80%,transparent 100%); mask-composite:intersect; } /* The ground keeps the viewBox's own 560:460 box whatever shape the frame is, so one viewBox unit is always the same distance on screen and the projection in js/main.js stays exact. margin-top is a share of the WIDTH, which is how it can centre a box whose height it does not know. */ .map3d__plane,.map3d__pins{ position:absolute;left:0;top:50%;width:100%; aspect-ratio:560/460;margin-top:-41.0714%; overflow:visible; } .map3d__plane{ transform:translateY(var(--lift)) rotateX(var(--tilt)) scale(var(--zoom)); transform-origin:50% 50%; } .map3d__pins{pointer-events:none} .mp__land{fill:#101317} .mp__green rect{fill:rgba(33,169,74,.17)} .mp__water{fill:none;stroke:#122A3C;stroke-width:26;stroke-linecap:round;stroke-linejoin:round} .mp__minor path{fill:none;stroke:rgba(255,255,255,.055);stroke-width:2.6;stroke-linecap:round} .mp__blds rect{fill:rgba(255,255,255,.055)} .mp__blds rect.t2{fill:rgba(255,255,255,.078)} .mp__blds rect.t3{fill:rgba(255,255,255,.032)} .mp__haze{fill:url(#haze);pointer-events:none} /* a dark casing under a lighter fill is what makes a line read as a road */ .rd{fill:none;stroke-linecap:round;stroke-linejoin:round} .rd--a-casing{stroke:#05070A;stroke-width:17} .rd--a-fill{stroke:rgba(255,255,255,.14);stroke-width:11} .rd--b-casing{stroke:#05070A;stroke-width:11} .rd--b-fill{stroke:rgba(255,255,255,.105);stroke-width:6.5} .mp__labels text{ fill:rgba(255,255,255,.34);font-family:var(--font-b);font-size:8px;font-weight:600; letter-spacing:.14em;text-anchor:middle; } .route{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round} .route--base{stroke:rgba(255,255,255,.16)} .route--done{stroke:var(--yellow);stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 3px rgba(255,203,5,.26))} /* pins — anchored at the tip, so translate() puts them on the ground */ .stop{opacity:.5;transition:opacity .45s var(--ease)} .stop.is-passed{opacity:1} .pin__shadow{fill:rgba(0,0,0,.6)} .pin__body{fill:var(--c);stroke:rgba(0,0,0,.55);stroke-width:1.3} .pin__hole{fill:#08090B} .pin__ico{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .stop.is-passed .pin__body{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 62%,transparent))} .arrow{transition:opacity .3s var(--ease)} .arrow__halo{fill:rgba(255,203,5,.11);transform-origin:center;animation:halo 2.6s ease-in-out infinite} @keyframes halo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.35}} .arrow__disc{fill:var(--yellow)} .arrow__tip{fill:#0F0F0F} .chip{ position:absolute;z-index:3;bottom:7%;inset-inline-end:var(--bleed); display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:14px; background:rgba(18,18,19,.9);border:1px solid var(--line); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); text-align:start;white-space:nowrap; } .chip strong{display:block;font-family:var(--font-d);font-size:.82rem;font-weight:700} .chip small{display:block;font-size:.7rem;color:var(--faint)} .chip__ico{width:12px;height:12px;flex:none;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,203,5,.18);transition:background .4s var(--ease),box-shadow .4s var(--ease)} .chip strong,.chip small{transition:opacity .25s var(--ease)} .chip.is-swapping strong,.chip.is-swapping small{opacity:0} .stats{ display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px); margin-top:36px;padding-top:28px;border-top:1px solid var(--line); } .stats dt{font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.04em;line-height:1} .stats div:nth-child(1) dt{color:var(--yellow)} .stats div:nth-child(2) dt{color:var(--green)} .stats div:nth-child(3) dt{color:var(--red)} .stats dd{margin:6px 0 0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} /* ========================================================================== SERVICES — solid colour blocks, artwork breaking out of the top ========================================================================== */ .grid{ /* Three columns x two rows, so each COLUMN is one stripe of the Kurdish flag, reading red -> white -> green from left to right. Each column also holds one theme: rides / done-for-you / travel. */ display:grid;grid-template-columns:repeat(3,1fr); column-gap:clamp(16px,1.8vw,20px); /* Art is drawn at --art-scale of its authored --art-h. Tallest art is 235px, so it breaks out 235*scale - art-band above the panel; the row gap is that breakout plus breathing room. Shrink the scale and everything follows. */ --art-scale:.72; --art-band:102px; /* tallest art (235px authored) overhangs by 67px here, so the gap is that plus ~28px of air — measured, not guessed */ row-gap:clamp(92px,6.6vw,96px); } .panel{ --fill:var(--panel-yellow); --fill-hi:var(--panel-yellow-hi); --fill-lo:var(--panel-yellow-lo); --on-fill:var(--ink-dark); --on-soft:rgba(15,15,15,.70); position:relative;display:flex;flex-direction:column; padding:calc(var(--art-band,102px) + 12px) 24px 24px; min-height:248px; border-radius:var(--r); background:var(--fill);color:var(--on-fill); /* light from the top-left, the base colour still holding the middle */ background-image:linear-gradient(154deg,var(--fill-hi) 0%,var(--fill) 46%,var(--fill-lo) 100%); overflow:visible; transition:transform .35s var(--ease); } .panel:hover{transform:translateY(-6px)} .panel--yellow{--fill:var(--panel-yellow);--fill-hi:var(--panel-yellow-hi);--fill-lo:var(--panel-yellow-lo);--on-fill:var(--ink-dark)} .panel--white {--fill:var(--panel-white); --fill-hi:var(--panel-white-hi); --fill-lo:var(--panel-white-lo); --on-fill:var(--ink-dark)} .panel--red {--fill:var(--panel-red); --fill-hi:var(--panel-red-hi); --fill-lo:var(--panel-red-lo); --on-fill:#fff;--on-soft:rgba(255,255,255,.92)} .panel--green {--fill:var(--panel-green); --fill-hi:var(--panel-green-hi); --fill-lo:var(--panel-green-lo); --on-fill:#fff;--on-soft:rgba(255,255,255,.92)} /* One rule places every image: bottom-aligned on a shared line --art-band down from the panel's top edge, so anything taller spills out above it. Each panel sets only its own --art-h, which is then scaled by --art-scale. */ .panel__art{ position:absolute;top:0;inset-inline:0;height:var(--art-band,102px); display:flex;align-items:flex-end;justify-content:center;pointer-events:none; } /* is only a wrapper for the webp source — let the img be the flex item directly so its max-width resolves against the panel, not the wrapper */ .panel__art picture{display:contents} .panel__art img{ height:calc(var(--art-h,180px) * var(--art-scale,1));width:auto; max-width:116%;object-fit:contain; /* wide art may bleed, never off-page */ filter:drop-shadow(0 12px 18px rgba(0,0,0,.30)); transition:transform .45s var(--ease); } .panel:hover .panel__art img{transform:translateY(-8px) scale(1.04)} /* Careem-style verb-first name: light action word, bold object beneath. The two halves are separate elements so each is its own translation key — word order between them is fixed, which every language here agrees on. */ .panel h3{font-size:clamp(1.3rem,1.75vw,1.55rem);line-height:1.04} .panel h3 span{display:block} .panel__verb{font-weight:600;color:var(--on-soft)} .panel p{margin:9px 0 14px;font-size:.87rem;line-height:1.5;color:var(--on-soft);max-width:34ch} .panel__go::before{content:'→'} .panel__go{ align-self:flex-end;margin-top:auto;padding-top:0; display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%; border:1.5px solid var(--on-soft);color:var(--on-fill);font-size:.95rem;opacity:.75; transition:opacity .3s var(--ease),transform .3s var(--ease); } .panel:hover .panel__go{opacity:1;transform:translateX(4px)} /* ========================================================================== HOW IT WORKS ========================================================================== */ .how{background:var(--bg-2)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,22px)} .step{padding:34px 30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:transform .35s var(--ease),border-color .35s var(--ease)} .step:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)} .step__n{ display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:13px; font-family:var(--font-d);font-size:1.1rem;font-weight:800;background:var(--yellow);color:var(--ink-dark); } .step:nth-child(2) .step__n{background:var(--green);color:#fff} .step:nth-child(3) .step__n{background:var(--red);color:#fff} .step h3{font-size:1.2rem;margin-bottom:8px} .step p{color:var(--muted);font-size:.92rem} /* ========================================================================== REVIEWS ========================================================================== */ .reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,20px)} .review{ margin:0;padding:clamp(26px,2.6vw,32px); border:1px solid var(--line);border-radius:var(--r);background:var(--surface); display:flex;flex-direction:column; transition:transform .35s var(--ease),border-color .35s var(--ease); } .review:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)} .stars{display:flex;gap:3px;color:var(--yellow)} .stars svg{width:17px;height:17px} .review blockquote{margin:18px 0 0;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.88)} .review blockquote::before{content:'\201C'} .review blockquote::after{content:'\201D'} .review figcaption{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:2px} .review figcaption strong{font-family:var(--font-d);font-size:.94rem;font-weight:700} .review figcaption span{font-size:.82rem;color:var(--faint)} /* ========================================================================== FAQ — native
, exclusive via name="faq", no JS ========================================================================== */ .faq{background:var(--bg-2)} .faq__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start} .faq__intro p{margin-top:18px;color:var(--muted);max-width:32ch} .faq__list{border-top:1px solid var(--line)} .qa{border-bottom:1px solid var(--line)} .qa summary{ position:relative;display:block;padding-block:22px;padding-inline:0 40px; cursor:pointer;list-style:none; font-family:var(--font-d);font-size:clamp(1rem,1.5vw,1.12rem);font-weight:700; letter-spacing:-.02em;line-height:1.35; transition:color .25s var(--ease); } .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--yellow)} .qa[open] summary{color:var(--yellow)} /* plus that becomes a minus: two bars, only the upright one rotates flat */ .qa summary::before,.qa summary::after{ content:'';position:absolute;inset-inline-end:2px;top:50%; width:14px;height:2px;border-radius:2px;background:currentColor; transition:transform .3s var(--ease); } .qa summary::before{transform:translateY(-50%) rotate(90deg)} .qa summary::after{transform:translateY(-50%)} .qa[open] summary::before{transform:translateY(-50%) rotate(0deg)} .qa > div{overflow:hidden} .qa p{padding-bottom:24px;max-width:52ch;color:var(--muted);font-size:.96rem} .qa a{color:var(--yellow);font-weight:600} .qa[open] > div{animation:qaIn .35s var(--ease)} @keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ========================================================================== GET THE APP — full yellow block, the page's one bright moment ========================================================================== */ .get{position:relative;overflow:hidden;background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(72px,9vw,110px) 0;text-align:center} .get__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 58% at 50% 0%,rgba(255,203,5,.13),transparent 72%)} .get__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px} .get__logo{width:70px;height:70px;border-radius:20px;box-shadow:0 18px 44px -16px rgba(255,203,5,.45)} .get p{max-width:40ch;color:var(--muted)} .calls{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px;width:100%} .call{ flex:1 1 250px;max-width:330px;padding:20px 26px;border-radius:16px; background:var(--surface);border:1px solid var(--line);color:var(--ink); transition:transform .3s var(--ease); } .call:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26)} .call small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600} .calls .call:nth-child(1) small{color:var(--yellow)} .calls .call:nth-child(2) small{color:var(--red)} .calls .call:nth-child(3) small{color:var(--green)} .call strong{display:block;margin-top:5px;font-family:var(--font-d);font-size:1.45rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap} /* ========================================================================== FOOTER — a proper closing block: brand, sitemap, and the numbers people actually call. ========================================================================== */ .footer{background:var(--bg);border-top:1px solid var(--line)} .footer__inner{padding-top:clamp(56px,6.5vw,84px)} .footer__top{ display:grid;grid-template-columns:1.6fr .9fr .9fr 1.25fr; gap:clamp(34px,4.4vw,60px);padding-bottom:clamp(44px,5vw,62px); } .footer__brand{max-width:34ch} .footer__brand .brand{margin-bottom:18px} .footer__brand p{color:var(--muted);font-size:.94rem} .footer__brand .pill{margin:20px 0 0} .fcol h3{ margin-bottom:16px;font-family:var(--font-d);font-size:.7rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9); } .fcol li+li{margin-top:2px} .fcol ul a{ display:inline-block;padding-block:5px;font-size:.92rem;color:var(--faint); transition:color .25s var(--ease),transform .25s var(--ease); } .fcol ul a:hover{color:var(--ink);transform:translateX(3px)} /* the numbers are already carded in the block above, so here they read as a list — a flag-coloured rule instead of a second row of boxes */ .fcol--contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px} .fcol--contact h3{margin-bottom:2px} .fcall{ display:block;padding-block:2px;padding-inline-start:14px; border-inline-start:2px solid var(--yellow); transition:transform .25s var(--ease),border-color .25s var(--ease); } .fcall--red{border-inline-start-color:var(--red)} .fcall--green{border-inline-start-color:var(--green)} .fcall:hover{transform:translateX(3px)} .fcall small{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--faint)} .fcall strong{display:block;margin-top:2px;font-family:var(--font-d);font-size:1.18rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap} .fcol__note{margin-top:2px;font-size:.8rem;color:var(--faint)} .footer__bar{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:14px 24px;padding-block:24px 28px; border-top:1px solid var(--line);font-size:.82rem;color:var(--faint); } .footer__made{display:inline-flex;align-items:center;gap:10px} /* Privacy, terms and support: the stores ask for a reachable policy, and a visitor looking for one looks next to the copyright. Inherits the bar's muted colour so it reads as fine print, not as another nav. */ .footer__legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 18px} .footer__legal a{color:var(--faint);transition:color .18s ease} .footer__legal a:hover,.footer__legal a:focus-visible{color:var(--yellow)} .flagbar{display:flex;gap:5px} .flagbar i{width:16px;height:4px;border-radius:3px} .flagbar i:nth-child(1){background:var(--red)} .flagbar i:nth-child(2){background:#fff} .flagbar i:nth-child(3){background:var(--green)} .flagbar i:nth-child(4){background:var(--yellow)} .social{display:flex;gap:10px} .social a{ display:grid;place-items:center;width:38px;height:38px;border-radius:12px; background:var(--surface);border:1px solid var(--line);color:var(--muted); transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } .social a:hover{transform:translateY(-2px);background:var(--yellow);border-color:var(--yellow);color:var(--ink-dark)} .social svg{width:18px;height:18px} .totop{ position:fixed;inset-inline-end:20px;bottom:20px;z-index:90;width:44px;height:44px;border-radius:50%; background:var(--yellow);color:var(--ink-dark);font-size:1.05rem;font-weight:700;display:grid;place-items:center; opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s; } .totop.is-show{opacity:1;visibility:visible;transform:none} /* ========================================================================== SCROLL REVEAL — in on the way down, out on the way up ========================================================================== */ [data-reveal]{opacity:0;transition:opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)} [data-reveal="up"]{transform:translateY(40px)} [data-reveal="scale"]{transform:scale(.94)} [data-reveal]:where(.is-in){opacity:1;transform:none} /* ========================================================================== RIGHT TO LEFT — Arabic and Kurdish Layout mirrors itself: the rules above use logical properties (inset-inline, margin-inline, border-inline-start), so grids, flex rows and the nav flip on their own. What is left here is the handful of things direction alone cannot fix — hard-coded glyphs, gradients aimed at a corner, and typography. The type is the important half. Arabic script is cursive: letters join, so letter-spacing pulls the joins apart and is always wrong. It also carries marks above and below the line, so the tight display leading that suits Sora clips it. Both are reset here rather than in the base rules, because both are right for the Latin faces. ========================================================================== */ [dir="rtl"] h1,[dir="rtl"] h2{letter-spacing:0;line-height:1.24} /* One line, so the leading only matters if it folds on a narrow screen — but the space above an Arabic line is not padding, it is where the hamza on أمان and طمأنينة sits, so it still needs more room than the Latin does. */ [dir="rtl"] .hero h1{line-height:1.28} [dir="rtl"] h3{letter-spacing:0;line-height:1.4} [dir="rtl"] .panel h3{line-height:1.34} [dir="rtl"] .menu__links a{letter-spacing:0;line-height:1.35} [dir="rtl"] .eyebrow, [dir="rtl"] .fcol h3, [dir="rtl"] .stats dd, [dir="rtl"] .store small, [dir="rtl"] .call small, [dir="rtl"] .fcall small{letter-spacing:0;text-transform:none} [dir="rtl"] .stats dt, [dir="rtl"] .call strong, [dir="rtl"] .fcall strong, [dir="rtl"] .step__n{letter-spacing:0} /* the brand wordmark stays Latin, so it keeps its tracking and its direction */ [dir="rtl"] .brand{direction:ltr} /* corner arrow follows the reading direction */ [dir="rtl"] .panel__go::before{content:'←'} [dir="rtl"] .panel:hover .panel__go{transform:translateX(-4px)} [dir="rtl"] .fcol ul a:hover, [dir="rtl"] .fcall:hover{transform:translateX(-3px)} /* quotation marks are not mirrored by the bidi algorithm — swap them by hand */ [dir="rtl"] .review blockquote::before{content:'\201D'} [dir="rtl"] .review blockquote::after{content:'\201C'} /* light still falls from the outer top corner, which is now the right one */ [dir="rtl"] .panel{background-image:linear-gradient(206deg,var(--fill-hi) 0%,var(--fill) 46%,var(--fill-lo) 100%)} /* the map dissolves into the copy column, which has swapped sides with it */ [dir="rtl"] .map3d{ -webkit-mask-image: linear-gradient(270deg,transparent 0,#000 26%), linear-gradient(180deg,transparent 0,#000 13%,#000 80%,transparent 100%); mask-image: linear-gradient(270deg,transparent 0,#000 26%), linear-gradient(180deg,transparent 0,#000 13%,#000 80%,transparent 100%); } /* SVG text does not inherit direction from the page */ [dir="rtl"] .mp__labels text{direction:rtl;letter-spacing:0} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:940px){ .nav__links,.nav__actions .btn{display:none} .lang__btn{padding:6px 10px;font-size:.72rem} .lang__btn[lang="ar"],.lang__btn[lang="ku"]{font-size:.78rem} .grid{grid-template-columns:repeat(2,1fr)} .reviews__grid{grid-template-columns:1fr} .faq__inner{grid-template-columns:1fr;gap:32px} .burger{display:flex} .hero__inner{grid-template-columns:1fr} .hero{padding-top:96px} .hero__art{--bleed:var(--pad);order:-1;margin-inline:calc(-1 * var(--pad))} .hero__art[data-art="phone"]{margin-inline:0} .hero__phone img{height:clamp(320px,46vh,480px)} .map3d{max-height:max(64cqw,clamp(260px,40vh,420px))} /* full width here, so only the top and bottom need dissolving. The RTL rule above is more specific than a bare .map3d, so it is named again here. */ .map3d,[dir="rtl"] .map3d{ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 74%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 74%,transparent 100%); } .chip{inset-inline-end:var(--pad);bottom:8%} .steps{grid-template-columns:1fr} .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px} .footer__brand{max-width:40ch} } @media (max-width:640px){ /* a shallower camera on a narrow card, so the far half stays readable */ .map3d{--tilt:55deg;--zoom:1.56;--dist:1.14;--lift:-11%} /* one column: art is scaled up a little, so it overhangs ~80px — gap follows */ .grid{grid-template-columns:1fr;--art-scale:.8;--art-band:108px;row-gap:clamp(96px,21vw,112px)} .panel{min-height:0} .chip{inset-inline-end:var(--pad);bottom:6%;padding:9px 14px} .chip strong{font-size:.78rem} .stats{gap:22px 34px;justify-content:space-between} .call strong{font-size:1.3rem} .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px} .footer__brand{grid-column:1/-1;max-width:none} .fcol--contact{grid-column:1/-1} .footer__bar{justify-content:center;text-align:center} .footer__bar>span:first-child{order:3;width:100%} .footer__legal{order:2;justify-content:center;width:100%} } @media (max-width:420px){ /* brand + switcher + burger have to share the bar alone here, so the row tightens before anything is allowed to squeeze */ .nav__inner{gap:12px} .lang{padding:2px} .lang__btn{padding:6px 8px} .lang__btn[lang="ar"],.lang__btn[lang="ku"]{font-size:.74rem} .stores{flex-direction:column;align-items:stretch;width:100%} .store{justify-content:flex-start} .fcol ul a{font-size:.88rem} } /* below this the wordmark no longer fits beside the switcher, and a clipped ZIRAK reads worse than the mark on its own */ @media (max-width:340px){ .brand span{display:none} } @media (prefers-reduced-motion:reduce){ .arrow__halo{animation:none} html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} [data-reveal]{opacity:1!important;transform:none!important} }