/* ============ TOKENS ============ */
:root{
  --ink:#0A1A2F;
  --ink-2:#4A5C74;
  --ink-3:#8394AA;
  --blue:#1B4FA6;
  --blue-deep:#0F2E5E;
  --blue-soft:#EAF1FC;
  --gold:#A8791F;
  --gold-soft:#FAF2E1;
  --paper:#FFFFFF;
  --mist:#F6F8FC;
  --line:#E3EAF4;
  --wa:#25D366;
  --nav-h:66px;
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --shadow-1:0 1px 2px rgba(10,26,47,.05), 0 8px 24px rgba(10,26,47,.06);
  --shadow-2:0 2px 6px rgba(10,26,47,.06), 0 24px 60px rgba(15,46,94,.12);
  --shadow-lift:0 2px 6px rgba(10,26,47,.06), 0 20px 44px rgba(15,46,94,.11);
  --display:"Fraunces", Georgia, serif;
  --body:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.68,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  font-weight:400;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.sec{padding:96px 0;position:relative}

/* ============ SECTION SURFACES ============
   Every band sits on its own ground, so the eye can tell where one
   section stops and the next one starts. */
.sec-paper{background:var(--paper)}
.sec-tint{background:var(--mist);border-block:1px solid var(--line)}
.sec-dark{
  background:linear-gradient(163deg,#0A1E3C 0%,#123763 56%,#0D2950 100%);
  color:#fff;overflow:hidden;
  border-block:1px solid rgba(255,255,255,.09);
}
.sec-dark h2{color:#fff}
.sec-dark .sec-head p{color:rgba(255,255,255,.72)}
.sec-dark > .wrap,.sec-dark > .mq-wrap{position:relative;z-index:1}
.sec-jaali{position:absolute;inset:0;width:100%;height:100%;opacity:.055;z-index:0;pointer-events:none}

/* ============ CHAPTER CHIP ============
   A numbered label at the head of each band: "01 Registration". */
.chapter{
  display:inline-flex;align-items:center;gap:9px;
  padding-inline:6px 15px;padding-block:5px;
  border-radius:999px;background:var(--blue-soft);border:1px solid #D5E2F6;
}
.sec-head .chapter{margin-bottom:18px}
.chapter b{
  width:25px;height:25px;border-radius:50%;flex:none;
  background:var(--blue);color:#fff;display:grid;place-items:center;
  font-family:var(--body);font-size:11px;font-weight:700;line-height:1;
}
.chapter > span{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-deep);line-height:1.5;
}
body.ur .chapter b{font-family:"Noto Nastaliq Urdu",serif;font-size:11px;line-height:1.7}
body.ur .chapter > span{letter-spacing:0;text-transform:none;font-size:12.5px;line-height:1.9}
.sec-dark .chapter{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.sec-dark .chapter b{background:var(--gold);color:#0A1A2F}
.sec-dark .chapter > span{color:#F2CB80}

/* ============ SIDE SECTION RAIL ============ */
.rail{
  position:fixed;z-index:150;top:50%;inset-inline-end:22px;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:15px;
}
.rail-dot{display:flex;align-items:center;gap:10px}
.rail-dot::after{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:#C3D2E7;box-shadow:0 0 0 0 rgba(27,79,166,.2);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.rail-dot > span{
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;box-shadow:var(--shadow-1);line-height:1.5;
}
html[dir="rtl"] .rail-dot > span{transform:translateX(-8px)}
.rail-dot:hover > span,.rail-dot.on > span{opacity:1;transform:none}
.rail-dot.on::after{background:var(--blue);box-shadow:0 0 0 4px rgba(27,79,166,.17)}
body.ur .rail-dot > span{font-size:12px;line-height:1.9;padding-block:2px}

/* nav link that matches the band you are looking at */
.nav-link.on{background:rgba(255,255,255,.2);color:#fff}
.nav-link.is-current{background:rgba(255,255,255,.2);color:#fff}

/* ============ CTA SPACING ============ */
.cta{margin-block-start:100px}

/* ============ URDU MODE ============ */
body.ur{
  font-family:"Noto Nastaliq Urdu", serif;
  line-height:2.5;
  font-size:15px;
}
body.ur h1,body.ur h2,body.ur h3,body.ur h4,body.ur .stat-num,body.ur .flow-num,body.ur .brand-name,body.ur .btn{
  font-family:"Noto Nastaliq Urdu", serif;
}
body.ur h1{line-height:1.9}
body.ur h2{line-height:2}
body.ur h3{line-height:2}
body.ur .eyebrow{letter-spacing:0;line-height:2.2}
body.ur .stat-num{line-height:1.6}
body.ur .btn{line-height:1.9;padding-block:12px}
body.ur .nav-link{line-height:1.8}
body.ur p{line-height:2.6}
body.ur .nav-login{line-height:1.9}
body.ur .sheet a{line-height:1.9;padding-block:11px}
body.ur .stat-label,body.ur .stat-sub{line-height:2}
body.ur .hero-note{line-height:2.1}
body.ur .foot ul a,body.ur .foot ul span{line-height:2.1}
body.ur .foot-bot{line-height:2.1}

/* ============ TYPE ============ */
.eyebrow{
  font-family:var(--body);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
h1{
  font-family:var(--display);
  font-size:clamp(38px,5.4vw,64px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 120,"SOFT" 20;
}
h2{
  font-family:var(--display);
  font-size:clamp(28px,3.6vw,42px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.018em;
  font-variation-settings:"opsz" 60;
}
h3{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.lede{font-size:clamp(16px,1.6vw,18.5px);color:var(--ink-2);line-height:1.7}
.sec-head{max-width:640px;margin-bottom:42px}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:16.5px}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(27,79,166,.28)}
.btn-primary:hover{background:var(--blue-deep);box-shadow:0 10px 26px rgba(27,79,166,.34);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.3)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.38)}
.btn svg{width:17px;height:17px;flex:none}

/* ============ NAV (iOS glass) ============ */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:200;
  height:var(--nav-h);
  background:rgba(8,24,52,.14);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, backdrop-filter .35s;
}
.nav.scrolled{
  background:rgba(10,31,66,.86);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:rgba(255,255,255,.14);
  box-shadow:0 6px 30px rgba(6,18,40,.28);
}
.nav-in{height:100%;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex:none}
/* No frame of its own: the logo file is already a rounded tile with its own
   shadow, so a radius and a box-shadow here would only draw a second one. */
.brand-mark{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
}
.brand-mark svg{width:23px;height:23px}
.brand-name{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1}
.brand-name span{opacity:.72;font-weight:400}

.nav-links{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav-link{
  color:rgba(255,255,255,.86);font-size:14px;font-weight:500;
  padding:8px 13px;border-radius:999px;transition:background .2s,color .2s;
}
.nav-link:hover{background:rgba(255,255,255,.14);color:#fff}

.nav-right{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.nav-links + .nav-right{margin-inline-start:14px}

/* iOS segmented language control */
.seg{
  display:flex;background:rgba(255,255,255,.16);border-radius:999px;padding:3px;
  position:relative;flex:none;
}
.seg button{
  position:relative;z-index:2;
  padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.82);transition:color .3s var(--ease);line-height:1.6;
}
.seg button.on{color:var(--blue-deep)}
.seg button[data-lang="ur"]{font-family:"Noto Nastaliq Urdu",serif;font-size:13px;padding-block:2px}
.seg-pill{
  position:absolute;z-index:1;top:3px;bottom:3px;left:0;width:0;
  background:#fff;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.16);
  transition:left .34s var(--ease), width .34s var(--ease);
}
.nav-login{
  background:#fff;color:var(--blue-deep);
  padding:9px 19px;border-radius:999px;font-size:14px;font-weight:700;
  transition:transform .2s var(--ease),box-shadow .2s;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.nav-login:hover{transform:translateY(-1.5px);box-shadow:0 6px 16px rgba(0,0,0,.2)}

.burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:11px;
  background:rgba(255,255,255,.17);
  transition:background .2s, transform .2s var(--ease);
}
.burger:hover{background:rgba(255,255,255,.26)}
.burger:active{transform:scale(.92)}
.burger i{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .18s}
.burger i + i{margin-top:3.6px}
.burger.on i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.sheet{
  position:fixed;inset-block-start:var(--nav-h);inset-inline:0;z-index:190;
  background:rgba(12,37,78,.95);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  padding:10px 20px 20px;
  display:none;flex-direction:column;gap:2px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sheet.open{display:flex;animation:sheetIn .3s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.sheet a{color:#fff;padding:13px 6px;font-size:15px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.09)}
.sheet a:last-child{border:none}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding-block:calc(var(--nav-h) + 70px) 76px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(64,128,228,.5), transparent 60%),
    radial-gradient(780px 540px at 6% 104%, rgba(168,121,31,.26), transparent 62%),
    linear-gradient(163deg,#081C3B 0%,#0E2E60 46%,#164788 100%);
}
.hero::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:190px;z-index:1;
  background:linear-gradient(to bottom,rgba(3,12,28,.34),transparent);
  pointer-events:none;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 92% at 50% 38%, transparent 42%, rgba(3,12,28,.5));
}
.jaali-box{
  position:absolute;inset-block-start:0;inset-inline-end:0;
  width:min(760px,72vw);height:100%;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left,#000,transparent 88%);
  mask-image:linear-gradient(to left,#000,transparent 88%);
}
html[dir="rtl"] .jaali-box{
  -webkit-mask-image:linear-gradient(to right,#000,transparent 88%);
  mask-image:linear-gradient(to right,#000,transparent 88%);
}
.jaali-layer{position:absolute;inset:0;width:100%;height:100%}
.jaali-base{opacity:.55}
/* the lattice catches the light, the way a real jaali screen does */
.jaali-lit{
  opacity:.92;
  -webkit-mask-image:radial-gradient(58% 52% at 74% 16%,#000 0%,rgba(0,0,0,.5) 46%,transparent 78%);
  mask-image:radial-gradient(58% 52% at 74% 16%,#000 0%,rgba(0,0,0,.5) 46%,transparent 78%);
}
html[dir="rtl"] .jaali-lit{
  -webkit-mask-image:radial-gradient(58% 52% at 26% 16%,#000 0%,rgba(0,0,0,.5) 46%,transparent 78%);
  mask-image:radial-gradient(58% 52% at 26% 16%,#000 0%,rgba(0,0,0,.5) 46%,transparent 78%);
}
/* a slow beam drifting across the screen */
.jaali-beam{
  position:absolute;inset:-40% -70%;
  background:linear-gradient(102deg,transparent 40%,rgba(160,200,255,.10) 47%,rgba(244,208,142,.14) 52%,transparent 61%);
  animation:beam 12s ease-in-out infinite;
  will-change:transform;
}
@keyframes beam{0%,100%{transform:translateX(-34%)}50%{transform:translateX(34%)}}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px}
.hero .eyebrow{color:#F2CB80}
.hero .eyebrow-dot{background:#F2CB80}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.hero h1 em{font-style:normal;color:#F5CE86;position:relative}
.hero h1 em::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:.06em;height:.13em;
  background:rgba(245,206,134,.26);border-radius:2px;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  animation:swipe 1s var(--ease) .8s forwards;
}
html[dir="rtl"] .hero h1 em::after{transform-origin:right}
@keyframes swipe{to{transform:scaleX(1)}}
.hero .lede{margin-top:22px;max-width:520px;color:rgba(255,255,255,.78)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .btn-primary{background:#fff;color:var(--blue-deep);box-shadow:0 10px 30px rgba(2,10,26,.34)}
.hero .btn-primary:hover{background:#E9F0FB;color:var(--blue-deep);box-shadow:0 14px 36px rgba(2,10,26,.42)}
.hero .btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.09)}
.hero-note{display:flex;align-items:flex-start;gap:9px;margin-top:24px;font-size:13.5px;color:rgba(255,255,255,.62);font-weight:500;line-height:1.5}
.hero-note svg{width:15px;height:15px;color:#84B4F7;flex:none;margin-top:3px}

/* staggered reveal */
.rise{opacity:0;transform:translateY(18px);animation:rise .7s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}
.d4{animation-delay:.28s}.d5{animation-delay:.36s}.d6{animation-delay:.44s}

/* ---- signature: rishta cards ---- */
.stage{position:relative;height:430px}
.stage::before{
  content:"";position:absolute;inset:-6% -14%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(102,157,240,.2),transparent 74%);
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.rcard{
  position:absolute;width:246px;background:var(--paper);
  border:1px solid rgba(255,255,255,.5);border-radius:var(--r-lg);
  box-shadow:0 30px 70px rgba(2,10,26,.5), 0 2px 10px rgba(0,0,0,.24);padding:14px;
}
.rcard.a{inset-block-start:6px;inset-inline-start:0;animation:cardIn .9s var(--ease) .2s both, float 7s ease-in-out 1.1s infinite}
.rcard.b{inset-block-end:6px;inset-inline-end:0;animation:cardIn .9s var(--ease) .4s both, float 7s ease-in-out 2.5s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes floatSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes floatXs{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.rcard-photo{
  height:126px;border-radius:16px;background:var(--blue-soft);
  position:relative;overflow:hidden;display:grid;place-items:center;
}
.rcard-photo svg.mesh{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.lockbox{position:relative;text-align:center;z-index:2}
.lockbox svg{width:20px;height:20px;margin-inline:auto;color:var(--blue);opacity:.85}
.lockbox span{display:block;margin-top:5px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);opacity:.8;line-height:1.4}
body.ur .lockbox span{font-family:"Noto Nastaliq Urdu",serif;letter-spacing:0;text-transform:none;font-size:10px;line-height:1.9}
.rcard-body{padding:13px 4px 2px}
.rcard-name{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
body.ur .rcard-name{font-family:"Noto Nastaliq Urdu",serif;line-height:1.9}
.rcard-meta{font-size:12px;color:var(--ink-3);margin-top:2px;font-weight:500}
body.ur .rcard-meta{line-height:2}
.rcard-tag{
  display:inline-flex;align-items:center;gap:5px;margin-top:11px;
  background:var(--gold-soft);color:var(--gold);
  padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
}
body.ur .rcard-tag{line-height:2;font-size:11px}
.rcard-tag svg{width:11px;height:11px}

.link-arc{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible}
.link-arc{animation:fadeIn 1s var(--ease) .5s both}
.arc-dot{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.85))}
.link-arc path{
  stroke:rgba(255,255,255,.9);stroke-width:1.6;fill:none;opacity:.34;
  stroke-dasharray:5 7;
  animation:dash 22s linear infinite;
}
@keyframes dash{to{stroke-dashoffset:-240}}
.wa-node{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--wa);
  display:grid;place-items:center;color:#fff;z-index:5;
  box-shadow:0 10px 28px rgba(37,211,102,.42), 0 0 0 7px rgba(37,211,102,.10);
  animation:fadeIn .8s var(--ease) .62s both, nodePulse 3.2s ease-in-out 1.4s infinite;
}
html[dir="rtl"] .wa-node{transform:translate(50%,-50%)}
@keyframes nodePulse{0%,100%{box-shadow:0 10px 28px rgba(37,211,102,.42),0 0 0 7px rgba(37,211,102,.10)}50%{box-shadow:0 10px 28px rgba(37,211,102,.42),0 0 0 15px rgba(37,211,102,0)}}
.wa-node svg{width:26px;height:26px}

/* ============ STATS ============ */
.stats{background:var(--mist);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:38px 26px;text-align:center;border-inline-end:1px solid var(--line)}
.stat:last-child{border-inline-end:none}
.stat-num{
  font-family:var(--display);font-size:clamp(32px,3.6vw,44px);font-weight:600;
  color:var(--blue-deep);letter-spacing:-.03em;line-height:1;
  font-variation-settings:"opsz" 80;
}
.stat-num i{font-style:normal;color:var(--gold)}
.stat-label{margin-top:11px;font-size:13.5px;color:var(--ink-2);font-weight:500}
.stat-sub{margin-top:3px;font-size:11.5px;color:var(--ink-3)}

/* ============ STEPS / FLOW ============ */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.flow-step{position:relative}

/* rail running from one node to the next */
.flow-step::after{
  content:"";position:absolute;z-index:0;
  inset-block-start:27px;height:2px;border-radius:2px;
  inset-inline-start:68px;inset-inline-end:-26px;
  background:linear-gradient(to right,rgba(27,79,166,.32),rgba(27,79,166,.32));
}
html[dir="rtl"] .flow-step::after{background:linear-gradient(to left,rgba(27,79,166,.32),rgba(27,79,166,.32))}
.flow-step:nth-child(3)::after{background:linear-gradient(to right,rgba(27,79,166,.32),rgba(37,211,102,.62))}
html[dir="rtl"] .flow-step:nth-child(3)::after{background:linear-gradient(to left,rgba(27,79,166,.32),rgba(37,211,102,.62))}
.flow-step:last-child::after{display:none}

.flow-node{
  position:relative;z-index:1;
  width:56px;height:56px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;margin-bottom:22px;
  box-shadow:0 0 0 6px rgba(27,79,166,.055);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.flow-step:hover .flow-node{transform:translateY(-3px);box-shadow:0 0 0 10px rgba(27,79,166,.08)}
.flow-node > svg{width:24px;height:24px}
.flow-step:last-child .flow-node{background:rgba(37,211,102,.15);color:#0E8B3E;box-shadow:0 0 0 6px rgba(37,211,102,.075)}
.flow-step:last-child:hover .flow-node{box-shadow:0 0 0 10px rgba(37,211,102,.11)}

.flow-num{
  position:absolute;inset-block-start:-5px;inset-inline-end:-5px;
  min-width:25px;height:25px;padding-inline:6px;border-radius:999px;
  background:var(--ink);color:#fff;border:2.5px solid #fff;
  font-family:var(--display);font-size:12.5px;font-weight:600;line-height:1;
  display:grid;place-items:center;
}
body.ur .flow-num{font-family:"Noto Nastaliq Urdu",serif;font-size:11.5px;line-height:1.5}

.flow-body h3{margin-bottom:9px}
.flow-body p{font-size:14.5px;color:var(--ink-2)}
.step-time{
  display:inline-block;margin-top:16px;
  background:var(--blue-soft);color:var(--blue-deep);
  padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
}
.flow-step:last-child .step-time{background:rgba(37,211,102,.13);color:#0B7A36}
body.ur .step-time{line-height:2}

/* ============ WHY ============ */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px 26px 30px;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#CFDCEF}
.why-ico{
  width:42px;height:42px;border-radius:12px;background:var(--blue-soft);
  display:grid;place-items:center;color:var(--blue);margin-bottom:18px;
}
.why-ico svg{width:20px;height:20px}
.why-card.accent .why-ico{background:var(--gold-soft);color:var(--gold)}
.why-card h3{margin-bottom:8px}
.why-card p{font-size:14.5px;color:var(--ink-2)}

/* ============ TESTIMONIALS ============ */
.sec-head-c{max-width:660px;margin-inline:auto;text-align:center}
.sec-head-c .eyebrow{margin-bottom:16px}
.t-badge{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;
}
.t-badge .t-stars{width:88px;height:16px}
.t-badge span{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em}
body.ur .t-badge span{line-height:2;font-size:13px}
.sec-dark .t-badge{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.sec-dark .t-badge span{color:rgba(255,255,255,.88)}
.sec-dark .t-card:hover{border-color:#fff}
.sec-dark .car-dot{background:rgba(255,255,255,.3)}
.sec-dark .car-dot.on{background:#F2CB80}

.marquee{
  position:relative;overflow:hidden;padding-block:10px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.mq-track{display:flex;width:max-content;direction:ltr}

.t-card{
  flex:0 0 372px;width:372px;margin-right:20px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px 26px 24px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.t-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#CFDCEF}
body.ur .t-card{direction:rtl;text-align:right}
.t-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.t-mark{width:26px;height:20px;color:var(--gold);opacity:.42;flex:none}
.t-stars{width:96px;height:17px;color:var(--gold);flex:none}
.t-quote{font-family:var(--display);font-size:17.5px;line-height:1.55;letter-spacing:-.01em;color:var(--ink);flex:1}
body.ur .t-quote{font-family:"Noto Nastaliq Urdu",serif;font-size:15px;line-height:2.5}
.t-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.t-av{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--blue-soft);color:var(--blue-deep);
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:16px;
  box-shadow:inset 0 0 0 1px rgba(27,79,166,.1);
}
/* --- slide mode: one card at a time with bullets (phones) --- */
.mq-wrap.slide{max-width:560px;margin-inline:auto;padding-inline:20px}
.mq-wrap.slide .marquee{
  padding-block:10px 2px;
  -webkit-mask-image:none;mask-image:none;
}
.mq-wrap.slide .mq-track{
  width:100%;will-change:auto;
  transition:transform .5s var(--ease);
}
.mq-wrap.slide .marquee{
  padding:14px 16px 8px;       /* room for the card shadow on every side */
  touch-action:pan-y;          /* vertical scroll stays the browser's, horizontal is ours */
  -webkit-user-select:none;user-select:none;
  cursor:grab;
}
.mq-wrap.slide .marquee:active{cursor:grabbing}
.mq-wrap.slide .t-card{flex:0 0 100%;width:100%;margin-right:32px;box-shadow:var(--shadow-1)}
.mq-wrap.slide .t-card:hover{transform:none;box-shadow:var(--shadow-1);border-color:var(--line)}

.car-dots{display:none;justify-content:center;align-items:center;gap:9px;margin-top:20px;direction:ltr}
.mq-wrap.slide .car-dots{display:flex}
.car-dot{
  width:8px;height:8px;padding:0;border-radius:999px;
  background:#D2DCEB;cursor:pointer;
  transition:width .35s var(--ease), background .3s;
}
.car-dot.on{width:26px;background:var(--blue)}

.t-name{font-size:14px;font-weight:700;line-height:1.3}
.t-city{font-size:12.5px;color:var(--ink-3)}
body.ur .t-name,body.ur .t-city{line-height:2}

/* ============ PACKAGES ============ */
.plans-slider{position:relative;--plan-gap:22px;--plan-per:3}
.plans{
  display:flex;gap:var(--plan-gap);align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:30px 6px 34px;margin:-30px -6px -34px;scroll-padding-inline:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.plans::-webkit-scrollbar{display:none}
.plans > .plan{flex:0 0 calc((100% - (var(--plan-per) - 1) * var(--plan-gap)) / var(--plan-per));scroll-snap-align:start}
.plans-arrow{
  position:absolute;inset-block-start:50%;z-index:3;
  width:46px;height:46px;border-radius:50%;margin-block-start:-23px;
  display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--blue-deep);
  box-shadow:var(--shadow-2);cursor:pointer;
  transition:opacity .25s, transform .25s var(--ease), background .2s;
}
.plans-arrow svg{width:20px;height:20px;stroke:currentColor}
[dir="rtl"] .plans-arrow svg{transform:scaleX(-1)}
.plans-arrow:hover{background:var(--blue-soft);transform:scale(1.06)}
.plans-arrow:disabled{opacity:0;pointer-events:none}
.plans-prev{inset-inline-start:-23px}
.plans-next{inset-inline-end:-23px}
.plans-slider.is-static .plans-arrow,.plans-slider.is-static .plans-dots{display:none}
.plans-dots{display:flex;justify-content:center;gap:8px;margin-block-start:26px}
.plans-dots button{
  width:9px;height:9px;padding:0;border:none;border-radius:999px;
  background:#C9D6E8;cursor:pointer;transition:width .3s var(--ease), background .3s;
}
.plans-dots button.on{width:26px;background:var(--blue)}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 28px 28px;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:#CFDCEF}
.plan.featured{
  background:linear-gradient(163deg,#0A1E3C 0%,#123763 56%,#0D2950 100%);
  border-color:var(--blue-deep);color:#fff;transform:translateY(-10px);
  box-shadow:var(--shadow-2);
}
.plan.featured:hover{transform:translateY(-16px)}
.ribbon{
  position:absolute;inset-block-start:-13px;inset-inline:0;
  margin-inline:auto;width:fit-content;
  background:var(--gold);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 18px rgba(168,121,31,.4);
}
body.ur .ribbon{letter-spacing:0;text-transform:none;font-size:12.5px;line-height:1.9}
.plan-name{font-size:21px;color:var(--blue-deep);margin:0}
.plan.featured .plan-name{color:#fff}
.plan-desc{margin:8px 0 0;font-size:14.5px;color:var(--ink-2);min-height:42px}
.plan.featured .plan-desc{color:rgba(255,255,255,.72)}
.price-row{margin:20px 0 6px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.price-amount{font-family:var(--display);font-size:34px;font-weight:600;line-height:1.1;color:var(--blue-deep)}
.plan.featured .price-amount{color:#fff}
.price-period{font-size:14px;font-weight:500;color:var(--ink-3)}
.plan.featured .price-period{color:rgba(255,255,255,.6)}
body.ur .price-amount{font-family:"Noto Nastaliq Urdu", serif;font-size:26px;line-height:1.9}
body.ur .price-period{line-height:2}
.plan-note{margin:0 0 20px;font-size:13px;color:var(--ink-3)}
.plan.featured .plan-note{color:rgba(255,255,255,.6)}
.feature-list{list-style:none;margin:0 0 26px;padding:0;flex:1 1 auto}
.feature-list li{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;font-size:14.5px;color:var(--ink);
  border-block-start:1px solid rgba(15,46,94,.07);
}
.feature-list li:first-child{border-block-start:none}
.plan.featured .feature-list li{color:rgba(255,255,255,.9);border-block-start-color:rgba(255,255,255,.12)}
.feature-list li svg{
  flex:none;width:20px;height:20px;margin-block-start:2px;
  border-radius:50%;background:var(--blue-soft);padding:3px;stroke:var(--blue);
}
.plan.featured .feature-list li svg{background:rgba(255,255,255,.14);stroke:#8FE3B0}
body.ur .feature-list li{line-height:2.2}
.plan-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 18px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1.5px solid var(--blue);color:var(--blue);background:transparent;
  transition:transform .25s var(--ease), background .2s, color .2s, box-shadow .25s var(--ease);
}
.plan-cta:hover{background:var(--blue-soft);transform:translateY(-2px)}
.plan.featured .plan-cta{
  background:var(--wa);border-color:var(--wa);color:#fff;
  box-shadow:0 6px 18px rgba(37,211,102,.3);
}
.plan.featured .plan-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.38)}
body.ur .plan-cta{line-height:1.9;padding-block:12px}
.plans-foot{margin:30px 0 0;text-align:center;font-size:13.5px;color:var(--ink-3)}

/* ============ FAQ ============ */
.faq-list{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:13px}
.faq-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:2px 24px;box-shadow:var(--shadow-1);
  transition:border-color .3s, box-shadow .3s var(--ease);
}
.faq-item[open]{border-color:#CFDCEF;box-shadow:var(--shadow-2)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 0;
  font-family:var(--display);font-size:17px;font-weight:600;line-height:1.35;
  color:var(--blue-deep);
}
.faq-item summary::-webkit-details-marker{display:none}
body.ur .faq-item summary{font-family:"Noto Nastaliq Urdu", serif;font-size:15px;line-height:2}
.faq-chev{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;
  transition:transform .25s var(--ease), background .25s, color .25s;
}
.faq-chev svg{width:14px;height:14px}
.faq-item[open] .faq-chev{transform:rotate(180deg);background:var(--blue);color:#fff}
.faq-answer{
  margin:0;padding:0 0 21px;max-width:680px;
  font-size:15px;line-height:1.75;color:var(--ink-2);
}
body.ur .faq-answer{line-height:2.4}
.faq-foot{margin-block-start:38px;text-align:center}
.faq-foot p{margin:0 0 16px;font-size:15px;color:var(--ink-2)}

/* ============ CTA BAND ============ */
.band{
  background:linear-gradient(135deg,var(--blue-deep),#1B4FA6 62%,#2A63C4);
  color:#fff;border-radius:var(--r-lg);padding:56px 52px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.band-jaali{position:absolute;inset-block-start:0;inset-inline-end:0;height:100%;width:420px;opacity:.16}
.band-copy{position:relative;z-index:2;max-width:520px}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.78);margin-top:14px;font-size:16px}
.band-actions{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap}
.band .btn-primary{background:#fff;color:var(--blue-deep);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.band .btn-primary:hover{background:#EFF4FD}
.band .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.band .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ============ FOOTER ============ */
.foot{background:#08172B;color:rgba(255,255,255,.68);padding:60px 0 0;margin-top:76px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:46px}
.foot .brand-name{color:#fff}
.foot-about{margin-top:16px;font-size:14px;max-width:300px;line-height:1.75}
body.ur .foot-about{line-height:2.5}
.foot h4{color:#fff;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:16px}
body.ur .foot h4{font-family:"Noto Nastaliq Urdu",serif;line-height:2}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:14px;transition:color .2s}
.foot ul a:hover{color:#fff}
.socials{display:flex;gap:10px;margin-top:18px}
.soc{
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;transition:transform .25s var(--ease),background .25s;
}
.soc svg{width:18px;height:18px}
.soc:hover{transform:translateY(-3px)}
.soc.fb:hover{background:#1877F2}
.soc.wa:hover{background:var(--wa)}
.soc.ig:hover{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888)}
.soc.em:hover{background:var(--blue)}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.09);padding:22px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;
}

/* ============ FLOATING WHATSAPP ============ */
.wa-float{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:150;
  display:flex;align-items:center;gap:0;
  background:var(--wa);color:#fff;border-radius:999px;
  padding:14px;box-shadow:0 10px 30px rgba(37,211,102,.42);
  transition:gap .35s var(--ease), padding .35s var(--ease), transform .25s var(--ease);
}
.wa-float svg{width:28px;height:28px;flex:none}
.wa-float span{
  max-width:0;overflow:hidden;white-space:nowrap;font-size:14.5px;font-weight:700;
  transition:max-width .38s var(--ease);
}
.wa-float:hover{gap:10px;padding-inline-end:22px;transform:translateY(-3px)}
.wa-float:hover span{max-width:190px}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  border:2px solid var(--wa);animation:ring 2.6s ease-out infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
body.ur .wa-float span{font-family:"Noto Nastaliq Urdu",serif;line-height:1.9}

/* ============ SCROLL REVEAL ============ */
.rv{opacity:1;transform:none}                 /* visible by default — no JS, no blank page */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1120px){
  .nav-links{display:none}
  .nav-links + .nav-right{margin-inline-start:auto}
  .burger{display:flex}
}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-links + .nav-right{margin-inline-start:auto}
  .burger{display:flex}
  .hero-in{grid-template-columns:1fr;gap:48px}
  .stage{height:400px;max-width:520px;margin-inline:auto}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-inline-end:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .flow{grid-template-columns:repeat(2,1fr);gap:44px 30px}
  .flow-step::after{display:none}
  .rail{display:none}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .plans-slider{--plan-per:2}
  .plans-prev{inset-inline-start:-10px}
  .plans-next{inset-inline-end:-10px}
  .plan.featured{transform:none}
  .plan.featured:hover{transform:translateY(-6px)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:640px){
  :root{--nav-h:58px}
  .wrap{width:min(1160px,100% - 36px)}
  .sec{padding:60px 0}
  .sec-head{margin-bottom:28px}
  .sec-head .chapter{margin-bottom:14px}
  .chapter{padding-inline:5px 12px}
  .chapter b{width:22px;height:22px;font-size:10px}
  .chapter > span{font-size:10.5px;letter-spacing:.12em}
  .cta{margin-block-start:60px}
  .sec-head p{font-size:15px;margin-top:12px}
  .plan{padding:28px 20px 22px;border-radius:20px}
  .plans-slider{--plan-gap:14px}
  .plans > .plan{flex-basis:86%}
  .plans-arrow{display:none}
  .price-amount{font-size:29px}
  .plan-desc{min-height:0}
  .faq-item{padding:0 16px}
  .faq-item summary{font-size:15.5px;padding:16px 0;gap:12px}
  .faq-chev{width:26px;height:26px}
  .faq-answer{font-size:14.5px;padding-bottom:18px}
  .eyebrow{font-size:10.5px;letter-spacing:.13em}
  body{font-size:15.5px}
  body.ur{font-size:14px;line-height:2.3}
  body.ur p{line-height:2.4}

  /* --- nav: compact so brand + language + login + menu all fit --- */
  .nav-in{gap:10px}
  .nav-right{gap:8px}
  .brand{gap:8px}
  .brand-mark{width:30px;height:30px}
  .brand-mark svg{width:20px;height:20px}
  .brand-name{font-size:16px}
  .brand-name span{display:none}
  .seg{padding:2.5px}
  .seg button{padding:4px 9px;font-size:11.5px}
  .seg button[data-lang="ur"]{font-size:11.5px;padding-block:2px}
  .seg-pill{top:2.5px;bottom:2.5px}
  .nav-login{padding:7px 13px;font-size:12.5px}
  .burger{width:34px;height:34px;border-radius:10px}
  .sheet{padding:6px 18px 16px}
  .sheet a{padding:12px 4px;font-size:14.5px}

  /* --- hero --- */
  .hero{padding-block:calc(var(--nav-h) + 30px) 42px}
  .hero-in{gap:32px}
  .hero h1{font-size:clamp(29px,8.4vw,38px)}
  .hero .lede{font-size:15px;margin-top:16px}
  .hero-note{font-size:12.5px;margin-top:18px}
  .hero-cta{gap:10px;margin-top:22px}
  .hero-cta .btn{flex:1 1 100%;padding-block:12px}
  .jaali-box{
    inset-block-start:auto;inset-block-end:0;
    width:100%;height:56%;
    -webkit-mask-image:linear-gradient(to top,#000,transparent 88%);
    mask-image:linear-gradient(to top,#000,transparent 88%);
  }
  html[dir="rtl"] .jaali-box{
    -webkit-mask-image:linear-gradient(to top,#000,transparent 88%);
    mask-image:linear-gradient(to top,#000,transparent 88%);
  }
  .jaali-base{opacity:.5}
  .jaali-lit,html[dir="rtl"] .jaali-lit{
    -webkit-mask-image:radial-gradient(64% 60% at 50% 74%,#000 0%,rgba(0,0,0,.5) 46%,transparent 80%);
    mask-image:radial-gradient(64% 60% at 50% 74%,#000 0%,rgba(0,0,0,.5) 46%,transparent 80%);
  }

  /* --- hero cards: stack in flow instead of absolute positioning --- */
  /* two cards side by side, node bridging them — same idea as desktop */
  .stage{
    position:relative;height:auto;
    display:flex;flex-direction:row;align-items:stretch;
    gap:44px;max-width:410px;margin-inline:auto;
  }
  .stage::after{
    content:"";position:absolute;z-index:0;
    inset-block-start:50%;height:2px;
    inset-inline-start:calc(50% - 26px);width:52px;
    transform:translateY(-50%);
    background:repeating-linear-gradient(to right,rgba(255,255,255,.45) 0 5px,transparent 5px 12px);
    animation:flowRight 1.8s linear infinite;
  }
  @keyframes flowRight{from{background-position:0 0}to{background-position:12px 0}}

  .rcard{
    position:relative;inset:auto;flex:1 1 0;width:auto;max-width:none;
    padding:10px;border-radius:20px;
  }
  .rcard.a,.rcard.b{inset:auto}
  .rcard.a{animation:cardIn .85s var(--ease) .2s both, floatXs 6.4s ease-in-out 1.05s infinite}
  .rcard.b{animation:cardIn .85s var(--ease) .4s both, floatXs 6.4s ease-in-out 2.6s infinite}
  .rcard-photo{height:86px;border-radius:14px}
  .lockbox svg{width:17px;height:17px}
  .lockbox span{font-size:8.5px;margin-top:4px;letter-spacing:.04em}
  body.ur .lockbox span{font-size:9.5px;line-height:1.6}
  .rcard-body{padding:10px 2px 0}
  .rcard-name{font-size:12.5px}
  .rcard-meta{font-size:10.5px;margin-top:2px;line-height:1.45}
  .rcard-tag{margin-top:8px;padding:3px 8px;font-size:9px}
  .link-arc{display:none}
  .wa-node{width:40px;height:40px;box-shadow:0 8px 22px rgba(37,211,102,.42), 0 0 0 5px rgba(8,28,58,.55)}
  .wa-node svg{width:20px;height:20px}

  /* --- stats: 2 x 2 instead of one long column --- */
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:26px 14px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-inline-end:none}
  .stat:nth-child(n+3){border-bottom:none}
  .stat-num{font-size:30px}
  .stat-label{font-size:12.5px;margin-top:8px}
  .stat-sub{font-size:11px;line-height:1.45}

  /* --- steps: vertical timeline --- */
  .flow{grid-template-columns:1fr;gap:0}
  .flow-step{display:grid;grid-template-columns:52px 1fr;column-gap:17px;padding-bottom:30px}
  .flow-step:last-child{padding-bottom:0}
  .flow-node{width:52px;height:52px;margin-bottom:0;box-shadow:0 0 0 5px rgba(27,79,166,.055)}
  .flow-node > svg{width:22px;height:22px}
  .flow-step:last-child .flow-node{box-shadow:0 0 0 5px rgba(37,211,102,.075)}
  .flow-step::after{
    display:block;
    inset-block-start:62px;inset-block-end:8px;
    inset-inline-start:25px;inset-inline-end:auto;width:2px;height:auto;
    background:linear-gradient(to bottom,rgba(27,79,166,.32),rgba(27,79,166,.32));
  }
  html[dir="rtl"] .flow-step::after{inset-inline-end:auto;background:linear-gradient(to bottom,rgba(27,79,166,.32),rgba(27,79,166,.32))}
  .flow-step:nth-child(3)::after{background:linear-gradient(to bottom,rgba(27,79,166,.32),rgba(37,211,102,.62))}
  html[dir="rtl"] .flow-step:nth-child(3)::after{background:linear-gradient(to bottom,rgba(27,79,166,.32),rgba(37,211,102,.62))}
  .flow-body h3{margin-bottom:7px}
  .flow-body p{font-size:14px}
  .step-time{margin-top:13px}

  /* --- why --- */
  .why-grid{grid-template-columns:1fr;gap:14px}
  .why-card{padding:24px 22px 26px;border-radius:16px}
  .why-ico{width:38px;height:38px;border-radius:11px;margin-bottom:14px}
  .why-card p{font-size:14px}

  /* --- testimonials marquee --- */
  .t-badge{padding:6px 13px;margin-bottom:18px;gap:8px}
  .t-badge .t-stars{width:76px;height:14px}
  .t-badge span{font-size:11.5px}
  .marquee{
    padding-block:8px 14px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .t-card{flex-basis:290px;width:290px;margin-right:14px;padding:24px 22px 20px;gap:14px}
  .t-mark{width:22px;height:17px}
  .t-stars{width:84px;height:15px}
  .t-quote{font-size:15.5px}
  body.ur .t-quote{font-size:14px;line-height:2.3}
  .t-av{width:38px;height:38px;font-size:15px}

  /* --- CTA band --- */
  .band{padding:36px 24px;border-radius:22px;gap:26px}
  .band-jaali{width:100%;opacity:.1}
  .band p{font-size:15px;margin-top:11px}
  .band-actions{flex-direction:column;width:100%;gap:10px}
  .band .btn{width:100%}

  /* --- footer --- */
  .foot{padding-top:48px;margin-top:56px}
  .foot-grid{grid-template-columns:1fr;gap:32px;padding-bottom:34px}
  .foot-about{max-width:none}
  .foot-bot{justify-content:center;text-align:center;padding:20px 0 84px;gap:6px}

  /* --- floating WhatsApp --- */
  .wa-float{inset-block-end:18px;inset-inline-end:18px;padding:13px}
  .wa-float svg{width:26px;height:26px}
  .wa-float span{display:none}
}

@media (max-width:380px){
  .wrap{width:min(1160px,100% - 28px)}
  .nav-in{gap:8px}
  .nav-right{gap:6px}
  .brand-name{font-size:15px}
  .seg button{padding:4px 7px;font-size:11px}
  .nav-login{padding:7px 11px;font-size:12px}
  .hero h1{font-size:29px}
  .stage{max-width:100%;gap:38px}
  .stage::after{inset-inline-start:calc(50% - 23px);width:46px}
  .rcard{padding:9px}
  .rcard-photo{height:78px}
  .rcard-name{font-size:11.5px}
  .rcard-meta{font-size:10px}
  .lockbox span{font-size:8px}
  .wa-node{width:36px;height:36px}
  .wa-node svg{width:18px;height:18px}
  .t-card{flex-basis:268px;width:268px}
}

/* no hover on touch: keep the WhatsApp pill from getting stuck open */
@media (hover:none){
  .btn:hover,.why-card:hover,.nav-login:hover,.soc:hover,.wa-float:hover,.t-card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  .rise{opacity:1;transform:none}
  .marquee{overflow-x:auto}
}

/* The site logo inside the brand mark — the bundled one, or whatever admin
   uploaded over it. The artwork is transparent (and an uploaded one may be
   either), so the tile is painted flat white underneath rather than left as
   the gradient the old line-art mark was drawn on. The logo brings its own
   background, corners and margin — the frame adds none of them. */
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- Register Profile modal (guest enquiry) ---------- */
body.rq-open{overflow:hidden}
/* above the sticky nav (200) and the side rail (150) */
.rq-veil{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(10,26,47,.55);backdrop-filter:blur(3px);overflow-y:auto}
.rq-veil[hidden]{display:none}
/* the card never grows past the viewport — its body scrolls inside instead */
.rq-card{position:relative;width:min(640px,100%);max-height:min(88vh,760px);
  display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:18px;
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(10,26,47,.28);padding:26px 24px 22px;margin:auto}
.rq-head{flex:none}
/* scrolls, but the bar itself stays out of the design */
.rq-form{flex:1 1 auto;min-height:0;overflow-y:auto;padding-inline-end:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.rq-form::-webkit-scrollbar{width:0;height:0}
.rq-close{position:absolute;z-index:2;inset-inline-end:14px;top:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.rq-close svg{width:17px;height:17px}
.rq-close:hover{color:var(--ink);border-color:var(--blue)}
.rq-head h3{margin:0 0 6px;font-size:22px;color:var(--navy)}
.rq-head p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.7}
.rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rq-field.rq-full{grid-column:1/-1}
.rq-field > span{font-size:13px;font-weight:700;color:var(--ink)}
.rq-field input,.rq-field select,.rq-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;
  font:inherit;font-size:15px;color:var(--ink);background:#fff}
.rq-field textarea{resize:vertical;min-height:78px;line-height:1.7}
.rq-field input:focus,.rq-field select:focus,.rq-field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3.5px rgba(27,79,166,.12)}
.rq-msg{margin:12px 0 0;font-size:14px;color:var(--muted)}
.rq-msg.bad{color:#B42318}
.rq-submit{width:100%;margin-top:14px;justify-content:center}
.rq-note{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.rq-done{flex:1 1 auto;min-height:0;overflow-y:auto;text-align:center;padding:26px 4px 10px}
.rq-done h3{margin:22px 0 6px;font-size:21px;color:var(--navy);animation:rqRise .5s .28s both}
.rq-done p{margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.7;animation:rqRise .5s .38s both}
.rq-done .btn{animation:rqRise .5s .48s both}

/* the tick lands, and two rings ripple out from under it */
.rq-tick{position:relative;width:64px;height:64px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);
  animation:rqPop .5s cubic-bezier(.2,1.3,.4,1) both}
.rq-tick::before,.rq-tick::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);
  animation:rqRipple 2.2s cubic-bezier(.2,.7,.3,1) infinite}
.rq-tick::after{animation-delay:1.1s}
.rq-tick svg{position:relative;width:30px;height:30px;
  stroke-dasharray:30;stroke-dashoffset:30;animation:rqDraw .45s .3s ease-out forwards}

@keyframes rqPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rqDraw{to{stroke-dashoffset:0}}
@keyframes rqRipple{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes rqRise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .rq-tick,.rq-tick svg,.rq-done h3,.rq-done p,.rq-done .btn{animation:none}
  .rq-tick svg{stroke-dashoffset:0}
  .rq-tick::before,.rq-tick::after{display:none}
}
body.ur .rq-field input,body.ur .rq-field select,body.ur .rq-field textarea{line-height:1.9}
@media (max-width:620px){
  .rq-card{padding:22px 16px 18px;border-radius:15px;max-height:92vh}
  .rq-grid{grid-template-columns:1fr}
}

.chapter b svg{width:13px;height:13px}

.abroad-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.abroad-copy .chapter{margin-bottom:18px}
.abroad-copy p{margin-top:16px;color:rgba(255,255,255,.74);font-size:16.5px;max-width:560px}
.abroad-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-line{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-line svg{color:var(--wa)}
.abroad-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:30px 28px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 30px 70px rgba(2,10,26,.35);
}
.abroad-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F2CB80;margin-bottom:16px}
body.ur .abroad-label{letter-spacing:0;font-size:13px}
.abroad-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.abroad-chips li{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px 8px 11px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-size:14px;font-weight:600;color:#fff;
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.abroad-chips li:hover{background:rgba(242,203,128,.14);border-color:rgba(242,203,128,.5);transform:translateY(-2px)}
.abroad-chips svg{width:15px;height:15px;color:#F2CB80;flex:none}
.abroad-bridge{
  display:flex;align-items:center;gap:10px;margin-top:28px;padding-top:26px;
  border-top:1px dashed rgba(255,255,255,.18);
}
.abroad-node{
  padding:9px 16px;border-radius:12px;font-size:14px;font-weight:700;
  background:#fff;color:var(--blue-deep);white-space:nowrap;
}
.abroad-node:last-child{background:#F2CB80;color:#0A1A2F}
.abroad-line{flex:1;height:2px;min-width:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 5px,transparent 5px 10px)}
.abroad-wa{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--wa);color:#fff;box-shadow:0 0 0 6px rgba(37,211,102,.16);
}
.abroad-wa svg{width:21px;height:21px}

.both-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.both-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 30px 28px;box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.both-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--blue),#5B8BD8);
}
.both-card.alt::before{background:linear-gradient(90deg,var(--gold),#F2CB80)}
.both-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#CFDCEF}
.both-route{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.both-end{
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--mist);color:var(--ink-2);border:1px solid var(--line);
}
.both-end.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.both-card.alt .both-end.on{background:var(--gold);border-color:var(--gold)}
.both-path{flex:1;display:flex;align-items:center;color:var(--ink-3);max-width:90px}
.both-path::before{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,#C3D2E7 0 5px,transparent 5px 10px)}
.both-path svg{width:18px;height:18px;flex:none}
html[dir="rtl"] .both-path svg,html[dir="rtl"] .both-link svg,html[dir="rtl"] .search-go svg{transform:scaleX(-1)}
.both-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.both-card.alt .both-kicker{color:var(--gold)}
body.ur .both-kicker{letter-spacing:0;font-size:13.5px;line-height:2}
.both-card h3{font-size:23px;margin:10px 0 14px}
.both-card p{font-size:15px;color:var(--ink-2)}
.both-card p + p{margin-top:12px}
.both-places{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 24px}
.both-places li{
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--blue-soft);color:var(--blue-deep);
}
.both-card.alt .both-places li{background:var(--gold-soft);color:#7A5715}
.both-places li.more{background:transparent;border:1px dashed #C3D2E7;color:var(--ink-3)}
.both-link{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--blue);
}
.both-card.alt .both-link{color:var(--gold)}
.both-link svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.both-link:hover svg{transform:translateX(4px)}

.search-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.search-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;min-height:218px;
  padding:24px 22px 22px;border-radius:var(--r-md);
  background:linear-gradient(160deg,#fff 0%,#F3F7FD 100%);
  border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.search-card.wide{grid-column:span 2;background:linear-gradient(150deg,#0F2E5E 0%,#1B4FA6 100%);color:#fff;border-color:transparent}
.search-art{
  position:absolute;z-index:-1;width:150px;height:150px;
  inset-inline-end:-10px;bottom:-8px;color:#B9CBE6;opacity:.75;
  transition:color .35s,opacity .35s,transform .5s var(--ease);
}
.search-card.wide .search-art{width:200px;height:200px;color:#F2CB80;opacity:.8}
.search-arc{
  position:absolute;z-index:-1;inset-inline-start:0;top:14px;width:78%;
  color:#C9D8EE;opacity:.8;
}
.search-card.wide .search-arc{color:rgba(255,255,255,.28)}
.search-code{
  align-self:flex-start;padding:4px 10px;border-radius:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.1em;
  background:var(--blue-soft);color:var(--blue-deep);
}
.search-card.wide .search-code{background:rgba(242,203,128,.2);color:#F2CB80}
.search-card h3{font-size:19px;margin:14px 0 6px;max-width:80%}
.search-card.wide h3{font-size:26px;color:#fff}
.search-cities{font-size:13px;color:var(--ink-3);max-width:75%}
.search-card.wide .search-cities{color:rgba(255,255,255,.7)}
.search-go{
  margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:var(--blue);
}
.search-card.wide .search-go{color:#F2CB80}
.search-go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.search-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#CFDCEF}
.search-card:hover .search-art{color:var(--gold);opacity:.55;transform:translateY(-4px) scale(1.04)}
.search-card.wide:hover .search-art{color:#F2CB80;opacity:.75}
.search-card:hover .search-go svg{transform:translateX(4px)}
body.ur .search-code{letter-spacing:.04em}
body.ur .search-card h3{line-height:1.9}

@media (max-width:980px){
  .abroad-in{grid-template-columns:1fr;gap:36px}
  .search-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .both-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .abroad-copy p{font-size:15px}
  .abroad-cta .btn{flex:1 1 100%}
  .abroad-card{padding:24px 18px}
  .abroad-node{padding:8px 11px;font-size:13px}
  .both-card{padding:26px 20px 22px;border-radius:20px}
  .both-card h3{font-size:20px}
  .search-grid{grid-template-columns:1fr;gap:14px}
  .search-card.wide{grid-column:auto}
  .search-card{min-height:180px}
  .search-card.wide h3{font-size:22px}
}