/* ==========================================================================
   Bikri.pk — Home page stylesheet
   Brand purple #7F228A (sampled from the Bikri logo) + orange #F7941D
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --brand: #7f228a;
  --brand-600: #6b1b75;
  --brand-700: #5b1566;
  --brand-400: #9b34a8;
  --brand-300: #b44bc2;
  --brand-100: #efe0f4;
  --brand-50: #f9f2fb;

  --accent: #f7941d;
  --accent-600: #e07c0c;
  --teal: #0e7a63;
  --teal-50: #e4f5f0;

  --ink: #1b1226;
  --ink-2: #3d2b49;
  --muted: #6e6079;
  --line: #ece3f1;
  --bg: #ffffff;
  --bg-soft: #faf6fc;

  --grad-brand: linear-gradient(135deg, #9b34a8 0%, #5b1566 100%);
  --grad-accent: linear-gradient(135deg, #fdba4d 0%, #f0801a 100%);

  --sh-sm: 0 2px 8px rgba(59, 16, 68, .06);
  --sh-md: 0 10px 30px rgba(59, 16, 68, .09);
  --sh-lg: 0 24px 60px rgba(59, 16, 68, .14);
  --sh-brand: 0 14px 34px rgba(127, 34, 138, .32);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shell: 1200px;
  --nav-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: "Poppins", "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.22;
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.25rem + 3.3vw, 3.85rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.85rem); font-weight: 800; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 16px; }
a  { color: var(--brand); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--accent-600); }
img, svg { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--brand); color: #fff; }

:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; border-radius: 6px; }

/* ---------- 3. Layout helpers ---------- */
.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.section { padding: clamp(64px, 7vw, 110px) 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--tint {
  background: radial-gradient(1000px 520px at 12% 0%, #f7ecfa 0%, transparent 62%),
              radial-gradient(900px 480px at 92% 100%, #fdf2e3 0%, transparent 60%),
              var(--bg);
}
.grid { display: grid; gap: 26px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 78px); align-items: center; }

/* ---------- 4. Section heading ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Poppins", sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 8px 16px; border-radius: var(--r-pill); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 62px); text-align: center; }
.head p { font-size: 1.05rem; margin-bottom: 0; }
.head--left { margin-inline: 0; text-align: left; }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .95rem;
  padding: 15px 30px; border-radius: var(--r-pill); border: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap; text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 42px rgba(127, 34, 138, .42); }
.btn--accent { background: var(--grad-accent); color: #fff; box-shadow: 0 14px 34px rgba(240, 128, 26, .34); }
.btn--accent:hover { color: #fff; transform: translateY(-3px); }
.btn--ghost { background: #fff; color: var(--brand); border: 1.6px solid var(--brand-100); }
.btn--ghost:hover { background: var(--brand-50); color: var(--brand-700); transform: translateY(-3px); }
.btn--light { background: rgba(255, 255, 255, .14); color: #fff; border: 1.6px solid rgba(255, 255, 255, .34); backdrop-filter: blur(6px); }
.btn--light:hover { background: #fff; color: var(--brand-700); transform: translateY(-3px); }
.btn--sm { padding: 11px 22px; font-size: .88rem; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: "Poppins", sans-serif; font-weight: 600; }
.link-arrow svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* store badges */
.stores { display: flex; flex-wrap: wrap; gap: 14px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff;
  padding: 11px 22px 11px 18px; border-radius: 14px;
  box-shadow: var(--sh-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.store:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--sh-lg); }
.store img { width: 26px; height: auto; filter: brightness(0) invert(1); }
.store span { display: block; font-size: .66rem; opacity: .72; line-height: 1.5; letter-spacing: .04em; }
.store strong { display: block; font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.store--light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.store--light:hover { color: var(--ink); }
.store--light img { filter: none; }

/* ---------- 6. Header ---------- */
.topbar {
  background: var(--ink); color: rgba(255, 255, 255, .8);
  font-size: .82rem; padding: 9px 0;
}
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: var(--accent); }
.topbar__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__list li { display: inline-flex; align-items: center; gap: 8px; }
.topbar svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.header.is-stuck { box-shadow: 0 8px 30px rgba(59, 16, 68, .09); border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 26px; height: var(--nav-h); }
.brand { flex: none; }
.brand img { height: 46px; width: auto; }

/* the <nav> takes the free space so the menu, pickers and buttons all sit right */
.nav > nav { flex: 1; min-width: 0; }
.nav__menu { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.nav__menu > li { position: relative; }
.nav__menu > li > a {
  position: relative; display: flex; align-items: center; gap: 6px;
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: .95rem;
  color: var(--ink-2); padding: 28px 0;
  transition: color .25s var(--ease);
}
/* sliding underline, like the reference header */
.nav__menu > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 3px;
  border-radius: 2px; background: var(--grad-brand);
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--ease);
}
.nav__menu > li > a:hover, .nav__menu > li > a.is-active { color: var(--brand); }
.nav__menu > li > a:hover::after, .nav__menu > li > a.is-active::after { transform: scaleX(1); }
.nav__menu .caret { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.nav__menu > li:hover .caret { transform: rotate(180deg); }
.dropdown { top: calc(100% - 18px); }

/* ---------- 6b. Language picker ---------- */
.nav__tools { display: flex; align-items: center; gap: 10px; flex: none; margin-left: 26px; }

.picker { position: relative; }
.picker__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.6px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 14px; color: var(--ink-2);
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .86rem;
  transition: border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.picker__btn:hover { border-color: var(--brand-300); color: var(--brand); }
.picker.is-open .picker__btn { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.picker__ico { width: 18px; height: 18px; flex: none; color: var(--brand); }
.picker__label { line-height: 1; letter-spacing: .02em; }
.picker__caret { width: 13px; height: 13px; flex: none; transition: transform .28s var(--ease); }
.picker.is-open .picker__caret { transform: rotate(180deg); }

.picker__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  min-width: 216px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg);
  padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s var(--ease);
  max-height: 336px; overflow-y: auto;
}
.picker.is-open .picker__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.picker__menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 12px; border-radius: 11px;
  font-family: "Inter", sans-serif; font-size: .92rem; color: var(--ink-2);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.picker__menu button span {
  font-size: .95rem; color: var(--muted); font-weight: 500; flex: none;
}
.picker__menu button:hover { background: var(--brand-50); color: var(--brand); }
.picker__menu button[aria-selected="true"] {
  background: var(--brand-50); color: var(--brand); font-weight: 600;
}
.picker__menu button[aria-selected="true"] span { color: var(--brand); }

/* picker inside the mobile drawer */
.drawer__tools { display: flex; gap: 10px; margin-bottom: 18px; }
.drawer__tools .picker { flex: 1; }
.drawer__tools .picker__btn { width: 100%; justify-content: center; }
.drawer__tools .picker__menu { left: 0; right: auto; width: 100%; min-width: 0; }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 234px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .28s var(--ease);
}
.nav__menu > li:hover .dropdown, .nav__menu > li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 11px; font-size: .92rem; color: var(--ink-2);
}
.dropdown a:hover { background: var(--brand-50); color: var(--brand); }
.dropdown .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-300); flex: none; }

.nav__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__burger {
  display: none; width: 46px; height: 46px; border-radius: 13px;
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand);
  align-items: center; justify-content: center;
}
.nav__burger svg { width: 22px; height: 22px; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); z-index: 120;
  background: #fff; box-shadow: -20px 0 60px rgba(27, 18, 38, .22);
  transform: translateX(105%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column; padding: 22px; overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.drawer__top img { height: 40px; }
.drawer__close {
  width: 42px; height: 42px; border-radius: 12px; background: var(--brand-50);
  border: 1px solid var(--brand-100); color: var(--brand); display: grid; place-items: center;
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer nav a {
  display: block; padding: 13px 4px; font-family: "Poppins", sans-serif; font-weight: 500;
  color: var(--ink-2); border-bottom: 1px solid var(--line);
}
.drawer nav a:hover { color: var(--brand); }
.drawer nav .sub { padding-left: 18px; font-size: .9rem; color: var(--muted); font-weight: 400; }
.drawer .btn { width: 100%; margin-top: 12px; }
.scrim {
  position: fixed; inset: 0; z-index: 110; background: rgba(27, 18, 38, .5);
  backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: all .3s var(--ease);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(50px, 6vw, 92px) 0 clamp(60px, 7vw, 104px);
  background: radial-gradient(900px 620px at 8% -10%, #f6e9fa 0%, transparent 58%),
              radial-gradient(760px 560px at 96% 18%, #fdf1e0 0%, transparent 58%),
              #fff;
}
.hero__grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero__lead { font-size: clamp(1rem, .95rem + .25vw, 1.14rem); max-width: 560px; margin-bottom: 28px; }
.hero .stores { margin-bottom: 30px; }

.hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--brand-100); box-shadow: var(--sh-sm);
  border-radius: var(--r-pill); padding: 7px 18px 7px 8px; margin-bottom: 22px;
  font-size: .87rem; font-weight: 500; color: var(--ink-2);
}
.hero__pill b {
  background: var(--grad-accent); color: #fff; font-family: "Poppins", sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  padding: 5px 13px; border-radius: var(--r-pill);
}

.hero__proof { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars span {
  width: 44px; height: 44px; border-radius: 50%; margin-left: -14px;
  border: 3px solid #fff; box-shadow: var(--sh-sm);
  display: grid; place-items: center; color: #fff;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: .88rem;
}
.avatars span:first-child { margin-left: 0; }
.avatars span:nth-child(1) { background: linear-gradient(135deg, #9b34a8, #5b1566); }
.avatars span:nth-child(2) { background: linear-gradient(135deg, #fdba4d, #f0801a); }
.avatars span:nth-child(3) { background: linear-gradient(135deg, #17a388, #0c6b57); }
.avatars span:nth-child(4) { background: linear-gradient(135deg, #b44bc2, #7f228a); }
.hero__proof small { display: block; font-size: .84rem; line-height: 1.6; }
.hero__proof strong { font-family: "Poppins", sans-serif; color: var(--ink); font-size: .96rem; }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 15px; height: 15px; }

.hero__art { position: relative; }
.hero__art > img { width: 100%; }
.hero__blob {
  position: absolute; inset: auto -8% -12% auto; width: 62%; aspect-ratio: 1;
  background: var(--grad-brand); filter: blur(90px); opacity: .18; border-radius: 50%; z-index: -1;
}

/* ---------- 8. Marquee of services ---------- */
.marquee { background: var(--ink); padding: 15px 0; overflow: hidden; position: relative; }
/* fade the strip out at both edges so items don't pop in and out */
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

.marquee__track { display: flex; gap: 40px; width: max-content; animation: slide 100s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: .96rem;
  color: rgba(255, 255, 255, .88); white-space: nowrap;
}
/* full-colour service icon on a soft glass chip */
.m-ico {
  width: 40px; height: 40px; flex: none; box-sizing: border-box;
  padding: 7px; border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.marquee__track span:hover .m-ico { transform: translateY(-3px) rotate(-6deg); background: rgba(255, 255, 255, .18); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 9. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 26px; text-align: center; box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stat:hover { transform: translateY(-7px); box-shadow: var(--sh-md); border-color: var(--brand-100); }
.stat__ico {
  width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand);
}
.stat__ico svg { width: 27px; height: 27px; }
.stat:nth-child(2) .stat__ico { background: #fdf1e2; color: var(--accent-600); }
.stat:nth-child(3) .stat__ico { background: var(--teal-50); color: var(--teal); }
.stat b {
  display: block; font-family: "Poppins", sans-serif; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 800; color: var(--ink); line-height: 1.1; letter-spacing: -.02em;
}
.stat p { margin: 6px 0 0; font-size: .93rem; }

/* ---------- 10. Service cards ---------- */
.services { grid-template-columns: repeat(4, 1fr); }
.svc {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 26px 28px; box-shadow: var(--sh-sm);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.svc::after {
  content: ""; position: absolute; right: -46px; top: -46px; width: 132px; height: 132px;
  border-radius: 50%; background: var(--brand-50); transition: transform .45s var(--ease); z-index: 0;
}
.svc:hover { transform: translateY(-9px); box-shadow: var(--sh-lg); border-color: var(--brand-100); }
.svc:hover::after { transform: scale(2.6); }
.svc > * { position: relative; z-index: 1; }
.svc__ico {
  width: 62px; height: 62px; border-radius: 19px; display: grid; place-items: center;
  background: var(--grad-brand); color: #fff; margin-bottom: 20px;
  box-shadow: 0 12px 26px rgba(127, 34, 138, .28);
  transition: transform .32s var(--ease);
}
.svc:hover .svc__ico { transform: rotate(-7deg) scale(1.06); }
.svc__ico svg { width: 29px; height: 29px; }
.svc:nth-child(4n+2) .svc__ico { background: var(--grad-accent); box-shadow: 0 12px 26px rgba(240, 128, 26, .3); }
.svc:nth-child(4n+3) .svc__ico { background: linear-gradient(135deg, #17a388, #0c6b57); box-shadow: 0 12px 26px rgba(14, 122, 99, .28); }
.svc:nth-child(4n+4) .svc__ico { background: linear-gradient(135deg, #b44bc2, #7f228a); }
.svc h3 { font-size: 1.09rem; margin-bottom: 9px; }
.svc p { font-size: .92rem; margin-bottom: 0; }

/* ---------- 11. Feature split ---------- */
.feat__list { display: grid; gap: 18px; margin: 26px 0 30px; }
.feat__list li {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 22px; box-shadow: var(--sh-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.feat__list li:hover { transform: translateX(6px); box-shadow: var(--sh-md); }
.feat__list .ico {
  width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
}
.feat__list li:nth-child(2) .ico { background: #fdf1e2; color: var(--accent-600); }
.feat__list li:nth-child(3) .ico { background: var(--teal-50); color: var(--teal); }
.feat__list .ico svg { width: 23px; height: 23px; }
.feat__list h3 { font-size: 1.03rem; margin-bottom: 3px; }
.feat__list p { font-size: .91rem; margin: 0; }
.feat__art { position: relative; }
.feat__art img { width: 100%; }

.checks { display: grid; gap: 12px; margin: 0 0 28px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; }
.checks svg { width: 22px; height: 22px; flex: none; color: var(--teal); margin-top: 3px; }

/* ---------- 12. How it works ---------- */
.steps { grid-template-columns: repeat(4, 1fr); position: relative; }
.steps::before {
  content: ""; position: absolute; top: 46px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand-100) 0 12px, transparent 12px 24px);
}
.step { text-align: center; position: relative; }
.step__num {
  width: 92px; height: 92px; margin: 0 auto 22px; border-radius: 28px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md);
  display: grid; place-items: center; color: var(--brand); position: relative;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.step:hover .step__num { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.step__num svg { width: 38px; height: 38px; }
.step__num b {
  position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-accent); color: #fff; display: grid; place-items: center;
  font-family: "Poppins", sans-serif; font-size: .88rem; font-weight: 700;
  box-shadow: 0 8px 18px rgba(240, 128, 26, .35);
}
.step h3 { font-size: 1.09rem; margin-bottom: 8px; }
.step p { font-size: .93rem; margin: 0; }

/* ---------- 13. Screenshots ---------- */
.shots { position: relative; }
.shots__track {
  display: flex; gap: 26px; overflow-x: auto; padding: 10px 4px 26px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.shots__track::-webkit-scrollbar { display: none; }
.phone {
  flex: 0 0 246px; scroll-snap-align: center;
  background: var(--ink); border-radius: 34px; padding: 11px;
  box-shadow: var(--sh-lg); position: relative;
  transition: transform .32s var(--ease);
}
.phone:hover { transform: translateY(-10px); }
.phone::before {
  content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 15px; border-radius: 0 0 12px 12px; background: var(--ink); z-index: 2;
}
.phone img { width: 100%; border-radius: 24px; display: block; }
.shots__nav { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }
.shots__nav button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--brand); display: grid; place-items: center;
  box-shadow: var(--sh-sm); transition: all .25s var(--ease);
}
.shots__nav button:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-3px); }
.shots__nav svg { width: 21px; height: 21px; }

/* ---------- 14. Why / benefits ---------- */
.why { grid-template-columns: repeat(3, 1fr); }
.why__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px; box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why__card:hover { transform: translateY(-7px); box-shadow: var(--sh-md); }
.why__card .ico {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); margin-bottom: 18px;
}
.why__card .ico svg { width: 26px; height: 26px; }
.why__card h3 { font-size: 1.05rem; }
.why__card p { font-size: .92rem; margin: 0; }

/* ---------- 15. Join the community — role cards ---------- */
.roles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }

.role {
  position: relative; overflow: hidden; display: block;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 22px 20px; box-shadow: var(--sh-sm);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
/* pale disc tucked behind the heading */
.role::before {
  content: ""; position: absolute; left: -24px; top: -20px;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--brand-100); opacity: .8;
  transition: transform .45s var(--ease);
}
.role:hover { transform: translateY(-9px); box-shadow: var(--sh-lg); border-color: var(--brand-100); }
.role:hover::before { transform: scale(1.4); }

.role h3 {
  position: relative; z-index: 1;
  font-size: 1.02rem; line-height: 1.35; margin-bottom: 16px; min-height: 2.7em;
  display: flex; align-items: flex-start;
}
.role img { position: relative; z-index: 1; width: 100%; }

.role__go {
  position: absolute; z-index: 2; right: 18px; bottom: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand); color: #fff;
  opacity: 0; transform: translateY(8px) scale(.8);
  transition: all .3s var(--ease);
}
.role__go svg { width: 17px; height: 17px; }
.role:hover .role__go, .role:focus-visible .role__go { opacity: 1; transform: none; }

/* ---------- 15b. Scan-to-download band ---------- */
.qr-band { background: var(--bg-soft); padding: clamp(48px, 5vw, 76px) 0; }
.qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.qr {
  display: flex; align-items: center; gap: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.qr:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--brand-100); }
/* white plate keeps the code scannable whatever sits behind it */
.qr__code {
  width: 104px; height: 104px; flex: none;
  background: #fff; border-radius: 10px; padding: 4px;
}
.qr__text { min-width: 0; }
.qr__text strong {
  display: block; font-family: "Poppins", sans-serif; font-weight: 600;
  font-size: 1.16rem; color: var(--ink); line-height: 1.3;
}
.qr__text small { display: block; font-size: .92rem; color: var(--muted); }
.qr__go {
  margin-left: auto; flex: none; width: 34px; height: 34px;
  display: grid; place-items: center; color: var(--ink);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.qr__go svg { width: 22px; height: 22px; }
.qr:hover .qr__go { color: var(--brand); transform: translateX(5px); }

/* ---------- 16. Testimonials ---------- */
.quotes__track {
  display: flex; gap: 26px; overflow-x: auto; padding: 8px 4px 26px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quote {
  flex: 0 0 min(390px, 84vw); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 30px; box-shadow: var(--sh-sm); position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote:hover { transform: translateY(-7px); box-shadow: var(--sh-md); }
.quote__mark {
  position: absolute; top: 22px; right: 26px; font-family: "Poppins", sans-serif;
  font-size: 4.6rem; line-height: 1; color: var(--brand-100); font-weight: 800;
}
.quote .stars { margin-bottom: 14px; }
.quote p { font-size: .98rem; color: var(--ink-2); position: relative; }
.quote__who { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote__who .av {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--grad-brand); color: #fff; font-family: "Poppins", sans-serif; font-weight: 700;
}
.quote__who strong { display: block; font-family: "Poppins", sans-serif; color: var(--ink); font-size: .98rem; }
.quote__who small { font-size: .84rem; }

/* ---------- 17. Download CTA ---------- */
.cta {
  position: relative; overflow: hidden; border-radius: 34px;
  background: var(--grad-brand); color: #fff; padding: clamp(38px, 5vw, 64px);
}
.cta::before, .cta::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07);
}
.cta::before { width: 340px; height: 340px; top: -130px; right: -80px; }
.cta::after { width: 240px; height: 240px; bottom: -110px; left: -60px; }
.cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .84); max-width: 520px; }
.cta .eyebrow { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .24); color: #fff; }
.cta__art { position: relative; }
.cta__art img { width: 100%; filter: drop-shadow(0 26px 46px rgba(20, 6, 26, .38)); }

/* ---------- 18. FAQ ---------- */
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 14px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-sm); overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq details[open] { border-color: var(--brand-100); box-shadow: var(--sh-md); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sign {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); transition: all .28s var(--ease);
}
.faq summary .sign svg { width: 17px; height: 17px; }
.faq details[open] summary .sign { background: var(--brand); color: #fff; transform: rotate(180deg); }
.faq .answer { padding: 0 26px 24px; font-size: .96rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- 19. Footer ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .68); padding: clamp(58px, 6vw, 92px) 0 0; position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 34, 138, .5) 0%, transparent 68%);
  top: -190px; right: -120px;
}
.footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 42px; }
.footer h4 {
  font-family: "Poppins", sans-serif; color: #fff; font-size: 1.06rem; font-weight: 600; margin: 0 0 22px;
  position: relative; padding-bottom: 12px;
}
.footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--accent); }
.footer__logo {
  display: inline-block; background: #fff; padding: 11px 17px; border-radius: 14px; margin-bottom: 22px;
}
.footer__logo img { height: 40px; }
.footer p { font-size: .94rem; }
.footer__links { display: grid; gap: 12px; }
.footer__links a { color: rgba(255, 255, 255, .68); font-size: .94rem; display: inline-flex; align-items: center; gap: 9px; }
.footer__links a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-300); flex: none; transition: transform .25s var(--ease); }
.footer__links a:hover { color: #fff; }
.footer__links a:hover::before { transform: scale(1.5); background: var(--accent); }

.footer__contact { display: grid; gap: 16px; margin-bottom: 24px; }
.footer__contact li { display: flex; gap: 13px; align-items: flex-start; font-size: .94rem; }
.footer__contact svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 4px; }
.footer__contact a { color: rgba(255, 255, 255, .78); }
.footer__contact a:hover { color: #fff; }

.socials { display: flex; gap: 11px; }
.socials a {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: all .28s var(--ease);
}
.socials a:hover { background: var(--brand); transform: translateY(-4px); }
.socials svg { width: 19px; height: 19px; }

.newsletter { display: flex; gap: 10px; margin-bottom: 22px; }
.newsletter input {
  flex: 1; min-width: 0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill); padding: 14px 20px; color: #fff; font: inherit; font-size: .93rem;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .45); }
.newsletter input:focus { outline: none; border-color: var(--brand-300); background: rgba(255, 255, 255, .12); }
.newsletter button {
  width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%;
  background: var(--grad-accent); color: #fff; display: grid; place-items: center;
  transition: transform .25s var(--ease);
}
.newsletter button:hover { transform: translateY(-3px) rotate(-8deg); }
.newsletter svg { width: 20px; height: 20px; }
.form-note { font-size: .84rem; margin: 0; }

.footer__bottom {
  position: relative; z-index: 1; margin-top: clamp(42px, 5vw, 66px);
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .9rem;
}
.footer__bottom a { color: rgba(255, 255, 255, .8); }
.footer__bottom a:hover { color: var(--accent); }
.footer__bottom ul { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- 20. Floating actions ---------- */
.to-top, .wa {
  position: fixed; right: 22px; z-index: 80; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: var(--sh-lg); border: 0; color: #fff;
  transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s var(--ease);
}
.to-top { bottom: 22px; background: var(--grad-brand); opacity: 0; visibility: hidden; }
.to-top.is-on { opacity: 1; visibility: visible; }
.to-top:hover, .wa:hover { transform: translateY(-5px); color: #fff; }
.wa { bottom: 86px; background: #25d366; }
.to-top svg, .wa svg { width: 24px; height: 24px; }

/* ---------- 21. Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width: 1200px) {
  .services { grid-template-columns: repeat(3, 1fr); }
  .roles { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__grid > div:last-child { grid-column: span 3; }
}

/* below this the logo starts crowding the menu, so collapse to the burger */
@media (max-width: 1120px) {
  .nav__menu, .nav__cta .btn, .nav > .nav__tools { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__cta { margin-left: auto; }
}

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__lead, .hero .head--left { margin-inline: auto; }
  .hero .stores, .hero__proof, .hero__pill { justify-content: center; }
  .hero__art { max-width: 520px; margin: 10px auto 0; }
  .split { grid-template-columns: 1fr; }
  .split .feat__art { order: -1; max-width: 560px; margin-inline: auto; }
  .split--flip .feat__art { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .steps::before { display: none; }
  .cta__grid { grid-template-columns: 1fr; }
  .cta__art { max-width: 400px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .qr-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --nav-h: 74px; }
  .services, .why { grid-template-columns: repeat(2, 1fr); }
  .roles { grid-template-columns: repeat(2, 1fr); }
  .role h3 { min-height: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:last-child { grid-column: span 2; }
  .topbar__row { justify-content: center; }
  .topbar__list--right { display: none; }
}

@media (max-width: 620px) {
  .shell { width: calc(100% - 32px); }
  .services, .why, .stats, .roles { grid-template-columns: 1fr; }
  .role { max-width: 420px; margin-inline: auto; width: 100%; }
  .qr { gap: 16px; padding: 18px; }
  .qr__code { width: 88px; height: 88px; }
  .qr__go { display: none; }
  .brand img { height: 38px; }
  .stores { gap: 10px; }
  .store { padding: 10px 18px 10px 14px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__grid > div:last-child { grid-column: auto; }
  .footer__bottom { justify-content: center; text-align: center; }
  .cta { border-radius: 24px; }
  .quote { flex-basis: 86vw; }
}

/* ---------- Earn page ---------- */
.earn-paths {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.earn-path {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 26px 22px 22px;
  box-shadow: var(--sh-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  color: inherit;
}
.earn-path:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-100);
  color: inherit;
}
.earn-path__ico {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid var(--brand-100);
}
.earn-path__ico svg { width: 24px; height: 24px; }
.earn-path h3 { font-size: 1.08rem; margin: 0; }
.earn-path p { margin: 0; font-size: .94rem; flex: 1; }
.earn-path__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; font-family: "Poppins", sans-serif;
  font-weight: 600; font-size: .92rem; color: var(--brand);
}
.earn-path__go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.earn-path:hover .earn-path__go svg { transform: translateX(5px); }

.why__card .ico--img {
  width: 52px; height: 52px; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center; background: var(--brand-50);
}
.why__card .ico--img img { width: 28px; height: 28px; object-fit: contain; }

/* Benefits: 3 on top, 2 centered below */
.earn-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.earn-benefits .why__card {
  flex: 0 1 calc((100% - 52px) / 3);
  max-width: calc((100% - 52px) / 3);
}

.earn-cta { padding-top: clamp(40px, 5vw, 70px); }
.earn-cta__box {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 36px;
  align-items: center;
  background: var(--ink);
  color: rgba(255,255,255,.78);
  border-radius: 32px;
  padding: clamp(36px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}
.earn-cta__box::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,34,138,.55) 0%, transparent 68%);
  top: -140px; right: -80px;
}
.earn-cta__box > * { position: relative; z-index: 1; }
.earn-cta__box h2 { color: #fff; margin-bottom: 14px; }
.earn-cta__box p { margin: 0; max-width: 520px; }

@media (max-width: 980px) {
  .earn-cta__box { grid-template-columns: 1fr; }
  .earn-paths { grid-template-columns: 1fr 1fr; }
  .earn-benefits .why__card {
    flex: 0 1 calc((100% - 26px) / 2);
    max-width: calc((100% - 26px) / 2);
  }
}
@media (max-width: 620px) {
  .earn-paths { grid-template-columns: 1fr; }
  .earn-cta__box { border-radius: 24px; padding: 28px 22px; }
  .earn-benefits .why__card {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

/* ---------- About & Contact pages ---------- */
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }

/* ===== About 3D ===== */
.about-3d { overflow-x: clip; }
.about-hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 100px);
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(127, 34, 138, .14), transparent 55%),
    radial-gradient(720px 480px at 92% 18%, rgba(247, 148, 29, .16), transparent 52%),
    linear-gradient(180deg, #fff 0%, #faf6fc 100%);
  overflow: hidden;
}
.about-hero__glow {
  position: absolute; inset: auto -10% -30% 40%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 34, 138, .12), transparent 68%);
  filter: blur(40px); pointer-events: none;
}
.about-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  position: relative; z-index: 1;
}
.about-hero__brand {
  display: block;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand);
  margin-bottom: .2em;
}
.about-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.08;
}
.about-hero .hero__lead { max-width: 34em; }
.about-hero__meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.about-hero__meta div { min-width: 88px; }
.about-hero__meta strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.35rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em;
}
.about-hero__meta span { font-size: .84rem; color: var(--muted); }

/* 3D scene */
.about-scene {
  perspective: 1200px;
  min-height: 460px;
  display: grid; place-items: center;
}
.about-scene__stage {
  position: relative;
  width: min(100%, 520px);
  height: 460px;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-8deg);
  transition: transform .45s var(--ease);
}
.about-scene__floor {
  position: absolute; left: 8%; right: 8%; bottom: 28px; height: 28px;
  background: radial-gradient(ellipse at center, rgba(27, 18, 38, .18), transparent 70%);
  filter: blur(10px);
  transform: translateZ(-40px);
}
.about-float--core {
  position: absolute; inset: 24px 40px 70px;
  transform: translateZ(40px);
  animation: aboutFloat 5.5s ease-in-out infinite;
}
.about-orb {
  width: 100%; height: 100%;
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(249,242,251,.75));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 30px 60px rgba(59, 16, 68, .18),
    0 8px 20px rgba(127, 34, 138, .12),
    inset 0 1px 0 rgba(255,255,255,.9);
  display: grid; place-items: center;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.about-orb img {
  width: 92%; height: auto;
  filter: drop-shadow(0 18px 28px rgba(27, 18, 38, .16));
}
.about-chip {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(236, 227, 241, .95);
  box-shadow:
    0 18px 40px rgba(59, 16, 68, .14),
    0 2px 0 rgba(255,255,255,.8) inset;
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  min-width: 168px;
}
.about-chip b {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: .9rem; font-weight: 700;
  color: var(--ink); line-height: 1.2;
}
.about-chip small { color: var(--muted); font-size: .76rem; }
.about-chip__ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid var(--brand-100); flex: none;
}
.about-chip__ico svg { width: 20px; height: 20px; }
.about-chip__ico--accent { background: #fff6ea; color: var(--accent-600); border-color: #fde2b8; }
.about-chip__ico--teal { background: var(--teal-50); color: var(--teal); border-color: #c7ebe0; }
.about-chip--a { top: 28px; left: -8px; transform: translateZ(90px); animation: aboutFloat 4.8s ease-in-out infinite .2s; }
.about-chip--b { top: 56px; right: -12px; transform: translateZ(120px); animation: aboutFloat 5.2s ease-in-out infinite .6s; }
.about-chip--c { bottom: 88px; left: -18px; transform: translateZ(110px); animation: aboutFloat 5.6s ease-in-out infinite 1s; }
.about-chip--d { bottom: 54px; right: 4px; transform: translateZ(80px); animation: aboutFloat 4.6s ease-in-out infinite .4s; }

@keyframes aboutFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

/* Mission glass panel */
.about-mission { padding-top: 0; }
.about-mission__panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(249,242,251,.88));
  border: 1px solid var(--line);
  box-shadow:
    0 24px 50px rgba(59, 16, 68, .08),
    0 1px 0 rgba(255,255,255,.9) inset;
  position: relative;
  overflow: hidden;
}
.about-mission__panel::before {
  content: "";
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,148,29,.16), transparent 70%);
  top: -80px; right: -40px; pointer-events: none;
}
.about-mission__left,
.about-mission__right { position: relative; z-index: 1; }
.about-mission__right p {
  font-size: 1.08rem; line-height: 1.75; color: var(--ink-2); margin: 0;
}
.about-more { margin-top: 16px; }
.about-more summary {
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 600; font-size: .92rem;
  color: var(--brand);
  list-style: none;
}
.about-more summary::-webkit-details-marker { display: none; }
.about-more[open] summary { margin-bottom: 12px; }
.about-prose--inline { display: none; }

.about-prose {
  max-width: 820px;
  margin: 0 auto;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.8;
}
.about-prose h1, .about-prose h2, .about-prose h3, .about-prose h4 {
  margin: 0 0 14px; color: var(--ink);
}
.about-prose p { margin: 0 0 16px; color: var(--muted); }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose ul, .about-prose ol { margin: 0 0 18px; padding-left: 1.2em; }
.about-prose li { margin-bottom: 8px; color: var(--muted); }
.about-prose img {
  border-radius: var(--r-lg);
  margin: 18px 0;
  box-shadow: var(--sh-md);
}

/* 3D pillars */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  perspective: 1000px;
}
.about-pillar {
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
}
.about-pillar:hover { transform: rotateY(-6deg) rotateX(4deg) translateY(-8px); }
.about-pillar__face {
  height: 100%;
  padding: 28px 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow:
    0 18px 40px rgba(59, 16, 68, .08),
    8px 8px 0 rgba(127, 34, 138, .04);
  position: relative;
}
.about-pillar__n {
  position: absolute; top: 18px; right: 20px;
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 1.6rem;
  color: var(--brand-100); letter-spacing: -.04em;
}
.about-pillar .ico { margin-bottom: 18px; }
.about-pillar h3 { margin: 0 0 10px; font-size: 1.15rem; }
.about-pillar p { margin: 0; font-size: .95rem; }

/* Journey + stacked 3D cards */
.about-journey {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about-timeline { display: grid; gap: 0; margin: 28px 0 0; }
.about-timeline li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 0 0 28px;
  position: relative;
}
.about-timeline li:last-child { padding-bottom: 0; }
.about-timeline li:not(:last-child)::before {
  content: "";
  position: absolute; left: 12px; top: 22px; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--brand-300), var(--brand-100));
}
.about-timeline__dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 6px var(--brand-50), 0 8px 18px rgba(127, 34, 138, .28);
  margin-top: 2px;
}
.about-timeline strong {
  display: block;
  font-family: "Poppins", sans-serif;
  color: var(--ink); font-size: 1.05rem; margin-bottom: 4px;
}
.about-timeline p { margin: 0; }

.about-stack {
  position: relative;
  height: 340px;
  perspective: 900px;
}
.about-stack__card {
  position: absolute; left: 50%; top: 50%;
  width: 180px; height: 210px;
  margin: -105px 0 0 -90px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  font-family: "Poppins", sans-serif; font-weight: 700;
  color: var(--ink);
  box-shadow: 0 22px 44px rgba(59, 16, 68, .14);
  transform-style: preserve-3d;
}
.about-stack__card svg { width: 36px; height: 36px; color: var(--brand); }
.about-stack__card--1 { transform: translate3d(-90px, 20px, 0) rotateY(18deg) rotateZ(-8deg); background: linear-gradient(160deg, #fff, #f9f2fb); }
.about-stack__card--2 { transform: translate3d(-20px, -10px, 40px) rotateY(6deg) rotateZ(-2deg); z-index: 2; }
.about-stack__card--3 { transform: translate3d(50px, 8px, 10px) rotateY(-12deg) rotateZ(6deg); background: linear-gradient(160deg, #fff, #fff8ef); }
.about-stack__card--4 { transform: translate3d(110px, 28px, -20px) rotateY(-22deg) rotateZ(10deg); z-index: 1; }
.about-stack:hover .about-stack__card--1 { transform: translate3d(-110px, 10px, 20px) rotateY(24deg) rotateZ(-10deg); }
.about-stack:hover .about-stack__card--2 { transform: translate3d(-20px, -24px, 70px) rotateY(0deg); }
.about-stack:hover .about-stack__card--3 { transform: translate3d(70px, -4px, 30px) rotateY(-16deg) rotateZ(8deg); }
.about-stack:hover .about-stack__card--4 { transform: translate3d(130px, 18px, 0) rotateY(-28deg) rotateZ(12deg); }
.about-stack__card { transition: transform .45s var(--ease); }

.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.about-value {
  padding: 26px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.about-value:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 22px 44px rgba(59, 16, 68, .12);
}
.about-value .ico { margin-bottom: 16px; }
.about-value h3 { margin: 0 0 8px; font-size: 1.05rem; }
.about-value p { margin: 0; font-size: .92rem; }

.about-cta {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 32px;
  background: var(--ink);
  color: rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(27, 18, 38, .28);
}
.about-cta::before {
  content: "";
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,34,138,.55), transparent 68%);
  top: -140px; right: -60px;
}
.about-cta > * { position: relative; z-index: 1; }
.about-cta h2 { color: #fff; margin-bottom: 12px; }
.about-cta p { margin: 0 0 8px; max-width: 480px; }
.about-cta .eyebrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.about-cta__visual {
  position: relative;
  display: grid; place-items: center;
}
.about-cta__ring {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 18px rgba(255,255,255,.04);
  animation: aboutPulse 4s ease-in-out infinite;
}
.about-cta__visual img {
  width: min(100%, 320px);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.35));
  position: relative; z-index: 1;
}
@keyframes aboutPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 980px) {
  .about-hero__grid,
  .about-mission__panel,
  .about-journey,
  .about-cta { grid-template-columns: 1fr; }
  .about-pillars { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr 1fr; }
  .about-scene { min-height: 380px; order: -1; }
  .about-scene__stage {
    transform: none !important;
    height: 380px;
  }
  .about-chip--a { left: 0; }
  .about-chip--b { right: 0; }
  .about-chip--c { left: 0; }
  .about-journey__art { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .about-values { grid-template-columns: 1fr; }
  .about-chip { min-width: 140px; padding: 10px 12px; }
  .about-chip b { font-size: .82rem; }
  .about-float--core { inset: 40px 28px 90px; }
  .about-stack { height: 280px; }
  .about-stack__card { width: 140px; height: 170px; margin: -85px 0 0 -70px; }
}

/* ===== Contact 3D ===== */
.contact-3d { overflow-x: clip; }
.contact-hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 100px);
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(127, 34, 138, .14), transparent 55%),
    radial-gradient(720px 480px at 92% 18%, rgba(247, 148, 29, .16), transparent 52%),
    linear-gradient(180deg, #fff 0%, #faf6fc 100%);
  overflow: hidden;
}
.contact-hero__glow {
  position: absolute; inset: auto -10% -30% 40%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 34, 138, .12), transparent 68%);
  filter: blur(40px); pointer-events: none;
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  position: relative; z-index: 1;
}
.contact-hero__brand {
  display: block;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand);
  margin-bottom: .2em;
}
.contact-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.08;
}
.contact-hero .hero__lead { max-width: 34em; }
.contact-hero__meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.contact-hero__meta div { min-width: 88px; }
.contact-hero__meta strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.35rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em;
}
.contact-hero__meta span { font-size: .84rem; color: var(--muted); }

.contact-scene {
  perspective: 1200px;
  min-height: 460px;
  display: grid; place-items: center;
}
.contact-scene__stage {
  position: relative;
  width: min(100%, 520px);
  height: 460px;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-8deg);
  transition: transform .45s var(--ease);
}
.contact-scene__floor {
  position: absolute; left: 8%; right: 8%; bottom: 28px; height: 28px;
  background: radial-gradient(ellipse at center, rgba(27, 18, 38, .18), transparent 70%);
  filter: blur(10px);
  transform: translateZ(-40px);
}
.contact-float--core {
  position: absolute; inset: 24px 40px 70px;
  transform: translateZ(40px);
  animation: aboutFloat 5.5s ease-in-out infinite;
}
.contact-orb {
  width: 100%; height: 100%;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(249,242,251,.75));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 30px 60px rgba(59, 16, 68, .18),
    0 8px 20px rgba(127, 34, 138, .12),
    inset 0 1px 0 rgba(255,255,255,.9);
  display: grid; place-items: center;
  overflow: hidden;
  backdrop-filter: blur(12px);
  position: relative;
}
.contact-orb img {
  width: 78%; height: auto;
  filter: drop-shadow(0 18px 28px rgba(27, 18, 38, .16));
}
.contact-orb__badge {
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  font-family: "Poppins", sans-serif;
  font-size: .78rem; font-weight: 600;
  color: var(--ink);
  z-index: 2;
}
.contact-orb__badge svg { width: 16px; height: 16px; color: var(--brand); }

.contact-chip {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(236, 227, 241, .95);
  box-shadow:
    0 18px 40px rgba(59, 16, 68, .14),
    0 2px 0 rgba(255,255,255,.8) inset;
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  min-width: 168px;
  max-width: 220px;
}
.contact-chip b {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: .9rem; font-weight: 700;
  color: var(--ink); line-height: 1.2;
}
.contact-chip small {
  color: var(--muted); font-size: .72rem;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 140px;
}
.contact-chip__ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid var(--brand-100); flex: none;
}
.contact-chip__ico svg { width: 20px; height: 20px; }
.contact-chip__ico--accent { background: #fff6ea; color: var(--accent-600); border-color: #fde2b8; }
.contact-chip__ico--teal { background: var(--teal-50); color: var(--teal); border-color: #c7ebe0; }
.contact-chip--a { top: 28px; left: -8px; transform: translateZ(90px); animation: aboutFloat 4.8s ease-in-out infinite .2s; }
.contact-chip--b { top: 56px; right: -12px; transform: translateZ(120px); animation: aboutFloat 5.2s ease-in-out infinite .6s; }
.contact-chip--c { bottom: 88px; left: -18px; transform: translateZ(110px); animation: aboutFloat 5.6s ease-in-out infinite 1s; }
.contact-chip--d { bottom: 54px; right: 4px; transform: translateZ(80px); animation: aboutFloat 4.6s ease-in-out infinite .4s; }

.contact-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  perspective: 1000px;
}
.contact-channel {
  display: block;
  color: inherit;
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
}
a.contact-channel:hover { color: inherit; transform: rotateY(-6deg) rotateX(4deg) translateY(-8px); }
.contact-channel__face {
  height: 100%;
  padding: 26px 22px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow:
    0 18px 40px rgba(59, 16, 68, .08),
    8px 8px 0 rgba(127, 34, 138, .04);
}
.contact-channel .ico { margin-bottom: 16px; }
.contact-channel h3 { margin: 0 0 8px; font-size: 1.08rem; }
.contact-channel p {
  margin: 0 0 10px; font-size: .94rem; color: var(--ink-2);
  word-break: break-word;
}
.contact-channel small { color: var(--muted); font-size: .82rem; }

.contact-form-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-form-shell {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(249,242,251,.9));
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow:
    0 28px 56px rgba(59, 16, 68, .12),
    0 1px 0 rgba(255,255,255,.9) inset;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-2deg);
}
.contact-form-shell__glow {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,148,29,.18), transparent 70%);
  top: -90px; right: -50px; pointer-events: none;
}
.contact-form-shell > * { position: relative; z-index: 1; }

.contact-aside-stack {
  position: relative;
  height: 180px;
  margin-top: 28px;
  perspective: 800px;
}
.contact-aside-card {
  position: absolute; left: 0; top: 30px;
  width: 140px; height: 120px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: .9rem;
  color: var(--ink);
  box-shadow: 0 16px 32px rgba(59, 16, 68, .12);
  transition: transform .4s var(--ease);
}
.contact-aside-card svg { width: 28px; height: 28px; color: var(--brand); }
.contact-aside-card--1 { transform: translate3d(0, 10px, 0) rotateY(14deg) rotateZ(-6deg); }
.contact-aside-card--2 { transform: translate3d(70px, -8px, 30px) rotateY(2deg); z-index: 2; background: linear-gradient(160deg, #fff, #f9f2fb); }
.contact-aside-card--3 { transform: translate3d(140px, 14px, 0) rotateY(-16deg) rotateZ(8deg); background: linear-gradient(160deg, #fff, #fff8ef); }
.contact-form-aside:hover .contact-aside-card--1 { transform: translate3d(-10px, 0, 10px) rotateY(18deg) rotateZ(-8deg); }
.contact-form-aside:hover .contact-aside-card--2 { transform: translate3d(70px, -20px, 50px); }
.contact-form-aside:hover .contact-aside-card--3 { transform: translate3d(155px, 4px, 10px) rotateY(-20deg) rotateZ(10deg); }

.contact-cta {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 32px;
  background: var(--ink);
  color: rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(27, 18, 38, .28);
}
.contact-cta::before {
  content: "";
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,34,138,.55), transparent 68%);
  top: -140px; right: -60px;
}
.contact-cta > * { position: relative; z-index: 1; }
.contact-cta h2 { color: #fff; margin-bottom: 12px; }
.contact-cta p { margin: 0 0 8px; max-width: 480px; }
.contact-cta .eyebrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.contact-cta__visual {
  position: relative;
  display: grid; place-items: center;
}
.contact-cta__ring {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 18px rgba(255,255,255,.04);
  animation: aboutPulse 4s ease-in-out infinite;
}
.contact-cta__visual img {
  width: min(100%, 280px);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.35));
  position: relative; z-index: 1;
}

.bf-form { display: grid; gap: 16px; }
.bf-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.bf-field { display: grid; gap: 8px; }
.bf-field label {
  font-family: "Poppins", sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.bf-field input,
.bf-field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bf-field textarea { resize: vertical; min-height: 120px; }
.bf-field input:focus,
.bf-field textarea:focus {
  outline: none;
  border-color: var(--brand-300);
  box-shadow: 0 0 0 4px rgba(127, 34, 138, .12);
}
.bf-field.has-error input,
.bf-field.has-error textarea { border-color: #d64545; }
.bf-field .help-block.error,
.bf-field__err { color: #c0392b; font-size: .84rem; }
.bf-field--captcha { margin-top: 4px; }
.bf-form .btn { justify-self: start; margin-top: 6px; }

.bf-alert {
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: .95rem;
}
.bf-alert--ok { background: #e8f8f0; color: #0e7a63; border: 1px solid #b7e6d3; }
.bf-alert--err { background: #fdeeee; color: #a12828; border: 1px solid #f3c1c1; }

.contact-page .countryPhoneSelectWrapper { height: auto !important; }
.contact-page #mobile-form .phoneinput,
.contact-page #mobile-form .vPhoneNumber { width: 100%; }

@media (max-width: 980px) {
  .contact-hero__grid,
  .contact-form-layout,
  .contact-cta { grid-template-columns: 1fr; }
  .contact-channels { grid-template-columns: 1fr 1fr; }
  .contact-scene { min-height: 380px; order: -1; }
  .contact-scene__stage { transform: none !important; height: 380px; }
  .contact-chip--a, .contact-chip--c { left: 0; }
  .contact-chip--b { right: 0; }
  .contact-form-shell { transform: none; }
  .contact-aside-stack { display: none; }
}
@media (max-width: 620px) {
  .contact-channels { grid-template-columns: 1fr; }
  .bf-form__row { grid-template-columns: 1fr; }
  .contact-chip { min-width: 140px; padding: 10px 12px; max-width: 170px; }
  .contact-chip b { font-size: .82rem; }
  .contact-float--core { inset: 40px 28px 90px; }
}
/* ===== All Services 3D catalog ===== */
.services-3d { overflow-x: clip; }
.services-hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px);
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(127, 34, 138, .14), transparent 55%),
    radial-gradient(720px 480px at 92% 18%, rgba(247, 148, 29, .16), transparent 52%),
    linear-gradient(180deg, #fff 0%, #faf6fc 100%);
  overflow: hidden;
}
.services-hero__glow {
  position: absolute; inset: auto -10% -30% 40%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 34, 138, .12), transparent 68%);
  filter: blur(40px); pointer-events: none;
}
.services-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  position: relative; z-index: 1;
}
.services-hero__brand {
  display: block;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand);
  margin-bottom: .2em;
}
.services-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.08;
}
.services-hero .hero__lead { max-width: 34em; }
.services-hero__meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.services-hero__meta strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.35rem; font-weight: 800;
  color: var(--ink);
}
.services-hero__meta span { font-size: .84rem; color: var(--muted); }

.services-scene {
  perspective: 1200px;
  min-height: 420px;
  display: grid; place-items: center;
}
.services-scene__stage {
  position: relative;
  width: min(100%, 500px);
  height: 420px;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-8deg);
  transition: transform .45s var(--ease);
}
.services-scene__floor {
  position: absolute; left: 8%; right: 8%; bottom: 24px; height: 28px;
  background: radial-gradient(ellipse at center, rgba(27, 18, 38, .18), transparent 70%);
  filter: blur(10px);
}
.services-float {
  position: absolute; inset: 20px 36px 64px;
  transform: translateZ(40px);
  animation: aboutFloat 5.5s ease-in-out infinite;
}
.services-orb {
  width: 100%; height: 100%;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(249,242,251,.75));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 30px 60px rgba(59, 16, 68, .18);
  display: grid; place-items: center;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.services-orb img { width: 86%; height: auto; }

.services-chip {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(236, 227, 241, .95);
  box-shadow: 0 18px 40px rgba(59, 16, 68, .14);
  backdrop-filter: blur(10px);
  min-width: 150px;
}
.services-chip b {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: .88rem; font-weight: 700; color: var(--ink);
}
.services-chip small { color: var(--muted); font-size: .74rem; }
.services-chip__ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid var(--brand-100); flex: none;
}
.services-chip__ico svg { width: 20px; height: 20px; }
.services-chip__ico--accent { background: #fff6ea; color: var(--accent-600); border-color: #fde2b8; }
.services-chip__ico--teal { background: var(--teal-50); color: var(--teal); border-color: #c7ebe0; }
.services-chip--a { top: 24px; left: -6px; transform: translateZ(90px); animation: aboutFloat 4.8s ease-in-out infinite .2s; }
.services-chip--b { top: 48px; right: -10px; transform: translateZ(120px); animation: aboutFloat 5.2s ease-in-out infinite .6s; }
.services-chip--c { bottom: 78px; left: -14px; transform: translateZ(110px); animation: aboutFloat 5.6s ease-in-out infinite 1s; }
.services-chip--d { bottom: 48px; right: 2px; transform: translateZ(80px); animation: aboutFloat 4.6s ease-in-out infinite .4s; }

.services-toolbar {
  display: grid; gap: 18px;
  margin-bottom: 28px;
}
.services-search {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--sh-sm);
  max-width: 420px;
}
.services-search svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.services-search input {
  border: 0; outline: none; width: 100%;
  font: inherit; color: var(--ink); background: transparent;
}
.services-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.services-filter {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: "Poppins", sans-serif;
  font-size: .86rem; font-weight: 600;
  transition: all .25s var(--ease);
}
.services-filter:hover { border-color: var(--brand-100); color: var(--brand); }
.services-filter.is-active {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-brand);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  perspective: 1600px;
  transform-style: preserve-3d;
  padding: 12px 4px 28px;
}
.svc-card {
  display: block;
  color: inherit;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform .5s cubic-bezier(.22, .61, .36, 1),
    opacity .45s ease,
    filter .45s ease,
    z-index 0s;
  will-change: transform, opacity, filter;
}
.svc-card.is-hidden { display: none !important; }

/* Spotlight: hovered card zooms forward, others recede */
@media (hover: hover) and (pointer: fine) {
  .services-grid:hover .svc-card:not(:hover):not(.is-hidden) {
    transform: scale(.86) translateZ(-120px) translateY(14px);
    opacity: .34;
    filter: blur(2px) saturate(.75);
    z-index: 0;
  }
  .services-grid .svc-card:hover {
    color: inherit;
    transform: scale(1.14) translateZ(100px) translateY(-22px);
    opacity: 1;
    filter: none;
    z-index: 12;
  }
  .services-grid .svc-card:hover .svc-card__face {
    border-color: var(--brand-100);
    box-shadow:
      0 36px 70px rgba(59, 16, 68, .22),
      0 14px 28px rgba(127, 34, 138, .18),
      0 0 0 1px rgba(127, 34, 138, .08);
  }
  .services-grid .svc-card:hover .svc-card__media {
    transform: scale(1.08);
    box-shadow: 0 10px 24px rgba(127, 34, 138, .16);
  }
  .services-grid .svc-card:hover .svc-card__go {
    letter-spacing: .01em;
  }
  .services-grid .svc-card:hover .svc-card__go svg {
    transform: translateX(6px);
  }
}

.svc-card__face {
  height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow:
    0 18px 40px rgba(59, 16, 68, .08),
    10px 10px 0 rgba(127, 34, 138, .045);
  position: relative;
  overflow: hidden;
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.svc-card__face::after {
  content: "";
  position: absolute; inset: auto -20% -40% auto;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,34,138,.08), transparent 70%);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.svc-card:hover .svc-card__face::after {
  opacity: 1;
  transform: scale(1.35);
}
.svc-card__media {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc-card__media img {
  width: 100%; height: 100%;
  object-fit: contain; padding: 8px;
}
.svc-card__ico {
  display: grid; place-items: center;
  color: var(--brand); width: 100%; height: 100%;
}
.svc-card__ico svg { width: 28px; height: 28px; }
.svc-card__tag {
  display: inline-flex; align-self: flex-start;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-50);
  border-radius: 999px;
  padding: 4px 10px;
}
.svc-card h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
}
.svc-card p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
  flex: 1;
}
.svc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-family: "Poppins", sans-serif;
  font-weight: 600; font-size: .9rem;
  color: var(--brand);
  transition: letter-spacing .35s var(--ease);
}
.svc-card__go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__face,
  .svc-card__media,
  .svc-card__go,
  .svc-card__go svg { transition: none !important; }
  .services-grid:hover .svc-card:not(:hover):not(.is-hidden) {
    transform: none; opacity: .55; filter: none;
  }
  .services-grid .svc-card:hover {
    transform: translateY(-6px);
  }
}

.services-empty, .services-empty-filter {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.services-empty h2 { color: var(--ink); }

.services-cta {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 32px;
  background: var(--ink);
  color: rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(27, 18, 38, .28);
}
.services-cta::before {
  content: "";
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,34,138,.55), transparent 68%);
  top: -140px; right: -60px;
}
.services-cta > * { position: relative; z-index: 1; }
.services-cta h2 { color: #fff; margin-bottom: 12px; }
.services-cta p { margin: 0 0 8px; max-width: 480px; }
.services-cta .eyebrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.services-cta__visual { position: relative; display: grid; place-items: center; }
.services-cta__ring {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 18px rgba(255,255,255,.04);
  animation: aboutPulse 4s ease-in-out infinite;
}
.services-cta__visual img {
  width: min(100%, 300px);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.35));
  position: relative; z-index: 1;
}

@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .services-hero__grid,
  .services-cta { grid-template-columns: 1fr; }
  .services-scene { min-height: 360px; order: -1; }
  .services-scene__stage { transform: none !important; height: 360px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-chip { min-width: 130px; padding: 10px 12px; }
  .services-float { inset: 36px 24px 80px; }
}
.svc-card.is-hidden { display: none !important; }


/* ===== Taxi booking page ===== */
.taxi-3d { overflow-x: clip; }
.bikri-final-taxi .common-inner-heading-section,
.bikri-final-taxi .banner-section,
.bikri-final-taxi .include-download-section { display: none !important; }

.taxi-hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(900px 520px at 10% -8%, rgba(127, 34, 138, .14), transparent 55%),
    radial-gradient(720px 480px at 94% 16%, rgba(247, 148, 29, .18), transparent 52%),
    linear-gradient(180deg, #fff 0%, #faf6fc 100%);
  overflow: hidden;
}
.taxi-hero__glow {
  position: absolute; inset: auto -12% -35% 35%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,148,29,.14), transparent 68%);
  filter: blur(40px); pointer-events: none;
}
.taxi-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  position: relative; z-index: 1;
}
.taxi-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.55rem);
  line-height: 1.08;
}
.taxi-hero .hero__lead { max-width: 34em; }
.taxi-hero__meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.taxi-hero__meta strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem; font-weight: 800; color: var(--ink);
}
.taxi-hero__meta span { font-size: .84rem; color: var(--muted); }

.taxi-scene {
  perspective: 1200px;
  min-height: 440px;
  display: grid; place-items: center;
}
.taxi-scene__stage {
  position: relative;
  width: min(100%, 520px);
  height: 440px;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-8deg);
  transition: transform .45s var(--ease);
}
.taxi-scene__floor {
  position: absolute; left: 10%; right: 10%; bottom: 28px; height: 28px;
  background: radial-gradient(ellipse at center, rgba(27,18,38,.18), transparent 70%);
  filter: blur(10px);
}
.taxi-float {
  position: absolute; inset: 20px 36px 70px;
  transform: translateZ(40px);
  animation: aboutFloat 5.5s ease-in-out infinite;
}
.taxi-orb {
  width: 100%; height: 100%;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(249,242,251,.78));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 30px 60px rgba(59,16,68,.18);
  display: grid; place-items: center;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.taxi-orb img {
  width: 88%; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(27,18,38,.14));
}
.taxi-chip {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(59,16,68,.14);
  backdrop-filter: blur(10px);
  min-width: 158px;
}
.taxi-chip b {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: .88rem; font-weight: 700; color: var(--ink);
}
.taxi-chip small { color: var(--muted); font-size: .74rem; }
.taxi-chip__ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid var(--brand-100); flex: none;
}
.taxi-chip__ico svg { width: 20px; height: 20px; }
.taxi-chip__ico--accent { background: #fff6ea; color: var(--accent-600); border-color: #fde2b8; }
.taxi-chip__ico--teal { background: var(--teal-50); color: var(--teal); border-color: #c7ebe0; }
.taxi-chip--a { top: 30px; left: -8px; transform: translateZ(90px); animation: aboutFloat 4.8s ease-in-out infinite .2s; }
.taxi-chip--b { top: 52px; right: -10px; transform: translateZ(120px); animation: aboutFloat 5.2s ease-in-out infinite .5s; }
.taxi-chip--c { bottom: 70px; left: 8px; transform: translateZ(100px); animation: aboutFloat 5.6s ease-in-out infinite .9s; }

.taxi-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.taxi-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 20px 22px;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.taxi-step:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.taxi-step__n {
  position: absolute; top: 14px; right: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 1.4rem;
  color: var(--brand-100);
}
.taxi-step .ico { margin-bottom: 14px; }
.taxi-step h3 { margin: 0 0 8px; font-size: 1.05rem; }
.taxi-step p { margin: 0; font-size: .92rem; }

.taxi-fare {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.taxi-fare__card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,242,251,.92));
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 28px 56px rgba(59,16,68,.12);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-2deg);
}
.taxi-fare__form { display: grid; gap: 16px; position: relative; z-index: 1; }
.taxi-field { display: grid; gap: 8px; }
.taxi-field label {
  font-family: "Poppins", sans-serif;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.taxi-field input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit; color: var(--ink); background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.taxi-field input:focus {
  outline: none;
  border-color: var(--brand-300);
  box-shadow: 0 0 0 4px rgba(127,34,138,.12);
}
.taxi-field__row { display: grid; grid-template-columns: 1fr 48px; gap: 10px; }
.taxi-detect {
  width: 48px; height: 48px; border-radius: 14px;
  border: 1.5px solid var(--brand-100);
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center;
}
.taxi-detect svg { width: 20px; height: 20px; }
.taxi-fare__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 6px;
}
.taxi-fare__art {
  position: absolute; right: -10px; bottom: -16px;
  width: 42%; opacity: .22; pointer-events: none;
}
.taxi-fare__art img { width: 100%; }

.taxi-perks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.taxi-perk {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px 20px;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease);
}
.taxi-perk:hover { transform: translateY(-7px); }
.taxi-perk .ico { margin-bottom: 14px; }
.taxi-perk h3 { margin: 0 0 8px; font-size: 1.02rem; }
.taxi-perk p { margin: 0; font-size: .9rem; }

.taxi-cta {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px; align-items: center;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 32px;
  background: var(--ink);
  color: rgba(255,255,255,.8);
  position: relative; overflow: hidden;
  box-shadow: 0 30px 60px rgba(27,18,38,.28);
}
.taxi-cta::before {
  content: "";
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,34,138,.55), transparent 68%);
  top: -140px; right: -60px;
}
.taxi-cta > * { position: relative; z-index: 1; }
.taxi-cta h2 { color: #fff; margin-bottom: 12px; }
.taxi-cta p { margin: 0 0 8px; max-width: 480px; }
.taxi-cta .eyebrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.taxi-cta__visual { position: relative; display: grid; place-items: center; }
.taxi-cta__ring {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 18px rgba(255,255,255,.04);
  animation: aboutPulse 4s ease-in-out infinite;
}
.taxi-cta__visual img {
  width: min(100%, 300px);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.35));
  position: relative; z-index: 1;
}

@media (max-width: 980px) {
  .taxi-hero__grid,
  .taxi-fare,
  .taxi-cta { grid-template-columns: 1fr; }
  .taxi-steps,
  .taxi-perks { grid-template-columns: 1fr 1fr; }
  .taxi-scene { min-height: 360px; order: -1; }
  .taxi-scene__stage { transform: none !important; height: 360px; }
  .taxi-fare__card { transform: none; }
  .taxi-fare__art { display: none; }
}
@media (max-width: 620px) {
  .taxi-steps,
  .taxi-perks { grid-template-columns: 1fr; }
  .taxi-chip { min-width: 140px; }
  .taxi-float { inset: 40px 24px 86px; }
}

/* ===== RTL: html[dir=rtl] already mirrors flex — do NOT row-reverse nav ===== */
html[dir="rtl"],
html[data-dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body,
html[data-dir="rtl"] body,
html[dir="rtl"] .topbar,
html[data-dir="rtl"] .topbar,
html[dir="rtl"] .header,
html[data-dir="rtl"] .header,
html[dir="rtl"] .footer,
html[data-dir="rtl"] .footer,
html[dir="rtl"] .drawer,
html[data-dir="rtl"] .drawer,
html[dir="rtl"] .bikri-final-wrap,
html[data-dir="rtl"] .bikri-final-wrap,
html[dir="rtl"] #main-uber-page,
html[data-dir="rtl"] #main-uber-page {
  font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
  text-align: right;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] .btn,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .nav__menu > li > a,
html[dir="rtl"] .picker__btn,
html[dir="rtl"] .store strong,
html[data-dir="rtl"] h1,
html[data-dir="rtl"] h2,
html[data-dir="rtl"] h3,
html[data-dir="rtl"] h4,
html[data-dir="rtl"] h5,
html[data-dir="rtl"] .btn,
html[data-dir="rtl"] .eyebrow,
html[data-dir="rtl"] .nav__menu > li > a,
html[data-dir="rtl"] .picker__btn,
html[data-dir="rtl"] .store strong {
  font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", "Poppins", sans-serif !important;
}

html[dir="rtl"] .nav__tools,
html[data-dir="rtl"] .nav__tools {
  margin-left: 0 !important;
  margin-right: 26px !important;
}
html[dir="rtl"] .nav__cta,
html[data-dir="rtl"] .nav__cta {
  margin-left: 0 !important;
  margin-right: auto !important;
}
html[dir="rtl"] .nav__menu,
html[data-dir="rtl"] .nav__menu {
  justify-content: flex-start;
}
html[dir="rtl"] .picker__menu,
html[data-dir="rtl"] .picker__menu {
  right: auto;
  left: 0;
}
html[dir="rtl"] .picker__menu button,
html[data-dir="rtl"] .picker__menu button {
  text-align: right;
  flex-direction: row-reverse;
}
html[dir="rtl"] .dropdown,
html[data-dir="rtl"] .dropdown {
  left: auto !important;
  right: 0 !important;
  text-align: right;
}
html[dir="rtl"] .footer h4::after,
html[data-dir="rtl"] .footer h4::after {
  left: auto;
  right: 0;
}
html[dir="rtl"] .drawer,
html[data-dir="rtl"] .drawer {
  inset: 0 auto 0 0 !important;
  box-shadow: 20px 0 60px rgba(27, 18, 38, .22);
  transform: translateX(-105%);
}
html[dir="rtl"] .drawer.is-open,
html[data-dir="rtl"] .drawer.is-open {
  transform: translateX(0);
}
html[dir="rtl"] .drawer nav .sub,
html[data-dir="rtl"] .drawer nav .sub {
  padding-left: 0;
  padding-right: 18px;
}
html[dir="rtl"] .head--left,
html[data-dir="rtl"] .head--left {
  text-align: right;
}
html[dir="rtl"] .checks li,
html[data-dir="rtl"] .checks li,
html[dir="rtl"] .feat__list li,
html[data-dir="rtl"] .feat__list li,
html[dir="rtl"] .footer__contact li,
html[data-dir="rtl"] .footer__contact li,
html[dir="rtl"] .topbar__list li,
html[data-dir="rtl"] .topbar__list li,
html[dir="rtl"] .quote__who,
html[data-dir="rtl"] .quote__who {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .avatars,
html[data-dir="rtl"] .avatars {
  flex-direction: row-reverse;
}
html[dir="rtl"] .avatars span,
html[data-dir="rtl"] .avatars span {
  margin-left: 0;
  margin-right: -14px;
}
html[dir="rtl"] .avatars span:first-child,
html[data-dir="rtl"] .avatars span:first-child {
  margin-right: 0;
}
html[dir="rtl"] .btn svg,
html[data-dir="rtl"] .btn svg,
html[dir="rtl"] .link-arrow svg,
html[data-dir="rtl"] .link-arrow svg,
html[dir="rtl"] .role__go svg,
html[data-dir="rtl"] .role__go svg,
html[dir="rtl"] .qr__go svg,
html[data-dir="rtl"] .qr__go svg,
html[dir="rtl"] .svc-card__go svg,
html[data-dir="rtl"] .svc-card__go svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .link-arrow:hover svg,
html[data-dir="rtl"] .link-arrow:hover svg,
html[dir="rtl"] .btn--primary:hover svg,
html[data-dir="rtl"] .btn--primary:hover svg {
  transform: scaleX(-1) translateX(5px);
}
html[dir="rtl"] .about-prose ul,
html[dir="rtl"] .about-prose ol,
html[data-dir="rtl"] .about-prose ul,
html[data-dir="rtl"] .about-prose ol {
  padding-left: 0;
  padding-right: 1.2em;
}
html[dir="rtl"] .wa,
html[data-dir="rtl"] .wa {
  left: 22px;
  right: auto;
}
html[dir="rtl"] .to-top,
html[data-dir="rtl"] .to-top {
  left: 22px;
  right: auto;
}

/* Keep numbers / phone / email LTR */
html[dir="rtl"] .hero__meta strong,
html[dir="rtl"] .taxi-hero__meta strong,
html[dir="rtl"] .about-hero__meta strong,
html[dir="rtl"] .contact-hero__meta strong,
html[dir="rtl"] .services-hero__meta strong,
html[dir="rtl"] .stat b,
html[dir="rtl"] .taxi-step__n,
html[dir="rtl"] a[href^="tel"],
html[dir="rtl"] a[href^="mailto"],
html[dir="rtl"] .contact-chip small,
html[dir="rtl"] .picker__label,
html[data-dir="rtl"] .hero__meta strong,
html[data-dir="rtl"] .taxi-hero__meta strong,
html[data-dir="rtl"] .about-hero__meta strong,
html[data-dir="rtl"] .contact-hero__meta strong,
html[data-dir="rtl"] .services-hero__meta strong,
html[data-dir="rtl"] .stat b,
html[data-dir="rtl"] .taxi-step__n,
html[data-dir="rtl"] a[href^="tel"],
html[data-dir="rtl"] a[href^="mailto"],
html[data-dir="rtl"] .contact-chip small,
html[data-dir="rtl"] .picker__label {
  direction: ltr;
  unicode-bidi: isolate;
}