/* ==========================================================================
   RAKNTY — ركنتي  |  Smart Parking Management
   Design system: "Wayfinding" — civic signage, bay-lines, directional motifs
   Arabic display face: Droid Arabic Kufi. RTL-first, logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root{
  --ink:        #050D18;
  --navy-900:   #071426;
  --navy-800:   #0B1D33;
  --navy-700:   #0D2340;
  --navy-600:   #143257;
  --navy-500:   #1E4270;

  --gold:       #C89A4B;
  --gold-400:   #D6AE68;
  --gold-300:   #E7C98E;

  /* Gold as text on a light surface.
     The original --gold-600 (#A87A2E) measured 3.7:1 against white and plain
     --gold only 2.6:1 — neither clears the 4.5:1 that normal-size text needs.
     This tone reads as the same colour at 5.4:1. Every --gold-600 rule in this
     file sits on white or sand (each one is overridden by a .dark/.hero/--hot
     variant on dark surfaces), so retuning the token fixes them all at once
     without touching the gold used on navy, which is already past 6:1. */
  --gold-ink:   #7E5A1F;
  --gold-600:   var(--gold-ink);

  --sand-50:    #FBF8F3;
  --sand-100:   #F5F0E7;
  --sand-200:   #EAE2D4;
  --line:       #E3DCCE;

  --white:      #FFFFFF;
  --text:       #12213A;
  --text-soft:  #5A6B84;
  --on-dark:    rgba(255,255,255,.76);
  --on-dark-dim:rgba(255,255,255,.55);

  /* type */
  /* Beiruti carries both scripts, so Arabic and English are one typeface
     rather than two that happen to sit together.

     The fallbacks are ordered for the gap before the webfont arrives, and
     for the case where Google is unreachable. Geeza Pro ships with macOS
     and Segoe UI with Windows; the previous stack listed only Windows
     faces, so a Mac fell through to a generic sans and rendered Arabic in
     whatever the browser chose. That is the Mac problem. */
  --f-ar: "Beiruti", "Geeza Pro", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-en: "Beiruti", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;
  --f-body: var(--f-ar);
  --f-display: var(--f-ar);

  --step--1: clamp(.76rem, .74rem + .1vw, .82rem);
  --step-0:  clamp(.9rem, .88rem + .14vw, 1rem);
  --step-1:  clamp(1.04rem, .98rem + .3vw, 1.24rem);
  --step-2:  clamp(1.26rem, 1.14rem + .56vw, 1.68rem);
  --step-3:  clamp(1.5rem, 1.28rem + 1vw, 2.3rem);
  --step-4:  clamp(1.85rem, 1.42rem + 1.9vw, 3.3rem);
  --step-5:  clamp(1.8rem, 1.34rem + 2.1vw, 3.1rem);

  --gap: clamp(1rem, .7rem + 1.2vw, 1.6rem);
  --sec: clamp(3.6rem, 2.2rem + 5.4vw, 7.5rem);
  --shell: 1280px;
  --wide: 1440px;
  --pad: clamp(1.1rem, .4rem + 3vw, 3rem);
  --strip-drop: 48px;    /* how far the feature strip hangs below the hero */
  --strip-reserve: 168px; /* space kept clear at the bottom of the hero for it */

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sh-1: 0 1px 2px rgba(7,20,38,.06), 0 6px 18px rgba(7,20,38,.06);
  --sh-2: 0 18px 44px -18px rgba(7,20,38,.28);
  --sh-3: 0 40px 90px -30px rgba(7,20,38,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
html[dir="ltr"]{ --f-body: var(--f-en); --f-display: var(--f-en); }

/* --------------------------------------------------------------- 2. Reset */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ overflow-x:hidden; overflow-x:clip; max-width:100%; }
body{
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.85;
  color:var(--text);
  background:var(--sand-50);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--f-display); font-weight:700; line-height:1.2; }
html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3{ letter-spacing:-.028em; }
/* Kufi is tall and wide — it needs more leading and no tracking */
html[dir="rtl"] h1{ line-height:1.5; }
html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{ line-height:1.6; }
html[dir="rtl"] p,html[dir="rtl"] li{ line-height:2; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:#fff; }

/* --------------------------------------------------------------- 3. Layout */
.shell{ width:min(100% - (var(--pad)*2), var(--shell)); margin-inline:auto; }
.shell-wide{ width:min(100% - (var(--pad)*2), var(--wide)); margin-inline:auto; }
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:calc(var(--sec) * .6); }
.section--strip{ padding-block-start:calc(var(--sec) + var(--strip-drop)); }
.dark{ background:var(--navy-800); color:#fff; }
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff; }
.sand{ background:var(--sand-100); }
.paper{ background:var(--white); }

/* --------------------------------------------------- 4. Signage components */
.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:30px; height:2px; background:currentColor; flex:none; }
html[dir="rtl"] .eyebrow{
  font-family:var(--f-ar); font-size:.85rem; font-weight:700;
  letter-spacing:normal; text-transform:none;
}
.dark .eyebrow,.hero .eyebrow,.pagehead .eyebrow{ color:var(--gold-400); }

.sec-head{ max-width:62ch; margin-bottom:clamp(1.8rem,1rem+2.4vw,3.2rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:var(--step-3); }
.sec-head p{ margin-top:.9rem; color:var(--text-soft); font-size:var(--step-1); }
.dark .sec-head p{ color:var(--on-dark); }

/* buttons */
.btn{
  --btn-bg:var(--navy-700); --btn-fg:#fff; --btn-bd:var(--navy-700);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.6rem; border-radius:100px;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  font-family:var(--f-display); font-weight:700; font-size:var(--step--1); line-height:1.4;
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), color .3s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; flex:none; transition:transform .4s var(--ease-out); }
html[dir="rtl"] .btn svg.arw{ transform:scaleX(-1); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gold); transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg.arw{ transform:translateX(-4px); }
html[dir="rtl"] .btn:hover svg.arw{ transform:scaleX(-1) translateX(-4px); }
.btn--gold{ --btn-bg:var(--gold); --btn-bd:var(--gold); --btn-fg:#0B1D33; }
.btn--gold::before{ background:var(--navy-700); }
.btn--gold:hover{ color:#fff; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line); }
.btn--ghost::before{ background:var(--gold); }
.btn--ghost:hover{ color:#0B1D33; border-color:var(--gold); }
/* ghost on any dark surface */
.dark .btn--ghost,.hero .btn--ghost,.pagehead .btn--ghost,
.panel--dark .btn--ghost,.gov .btn--ghost,.auth__art .btn--ghost{
  --btn-fg:#fff; --btn-bd:rgba(255,255,255,.45);
}
.btn--sm{ padding:.65rem 1.15rem; }
/* header "get the app" button — gold outline on the dark bar */
.btn--dl{ --btn-bg:transparent; --btn-fg:var(--gold); --btn-bd:rgba(200,154,75,.55); }
.btn--dl::before{ background:var(--gold); }
.btn--dl:hover{ color:#0B1D33; border-color:var(--gold); }
.btn--dl svg{ width:1.05em; height:1.05em; }
@media (max-width:1340px){
  .btn--dl .btn__lbl{ display:none; }
  .btn--dl{ padding-inline:.7rem; }
}
.btn--lg{ padding:1.05rem 2rem; font-size:var(--step-0); }

.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-display); font-weight:700; color:var(--gold-600); font-size:var(--step--1);
}
.dark .tlink,.hero .tlink,.pagehead .tlink{ color:var(--gold-400); }
.tlink svg{ width:1em;height:1em; transition:transform .35s var(--ease-out); }
html[dir="rtl"] .tlink svg{ transform:scaleX(-1); }
.tlink:hover svg{ transform:translateX(-5px); }
html[dir="rtl"] .tlink:hover svg{ transform:scaleX(-1) translateX(-5px); }

.hazard{
  height:6px; width:100%;
  background:repeating-linear-gradient(115deg, var(--gold) 0 14px, transparent 14px 28px);
}
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* media frame */
.media{
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:var(--navy-700); box-shadow:var(--sh-2);
}
.media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform .9s var(--ease-out); }
.media--sq img{ aspect-ratio:1; }
.media--tall img{ aspect-ratio:4/5; }
.media:hover img{ transform:scale(1.05); }

/* ------------------------------------------------------------ 5. Header */
.site-head{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:900;
}
/* The stuck background lives on a pseudo-element, NOT on .site-head itself.
   backdrop-filter (like filter and transform) makes an element a containing
   block for its position:fixed descendants — which would re-anchor the mobile
   drawer to the 68px header bar instead of the viewport the moment you scroll,
   and the drawer's overflow:hidden wrapper would then clip it out of sight. */
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(7,20,38,.9);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 18px 40px -28px rgba(0,0,0,.9);
  opacity:0; transition:opacity .4s var(--ease);
}
.site-head.is-stuck::before{ opacity:1; }
.site-head__inner{ display:flex; align-items:center; gap:clamp(.8rem,1.8vw,2rem); min-height:82px; transition:min-height .35s var(--ease); }
.site-head.is-stuck .site-head__inner{ min-height:68px; }

.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:42px; width:auto; transition:height .35s var(--ease); }
.site-head.is-stuck .brand img{ height:36px; }

.nav-wrap{ display:contents; }
.nav{ display:flex; align-items:center; gap:clamp(.5rem,1.1vw,1.35rem); margin-inline-start:auto; }
.nav__head,.nav__cta{ display:none; }
.nav a{
  position:relative; font-size:.88rem; font-weight:400; color:rgba(255,255,255,.84);
  padding:.5rem .1rem; white-space:nowrap; transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  width:100%; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:inline-end; transition:transform .38s var(--ease-out);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); transform-origin:inline-start; }
.nav a.is-active{ color:var(--gold); }

.head-actions{ display:flex; align-items:center; gap:.5rem; margin-inline-start:auto; flex:none; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem; color:#fff;
  font-family:var(--f-mono); font-size:.74rem; font-weight:600; letter-spacing:.06em;
  padding:.5rem .75rem; border-radius:100px; border:1px solid rgba(255,255,255,.24);
  transition:border-color .3s, background .3s; white-space:nowrap;
}
.lang-btn:hover{ border-color:var(--gold); background:rgba(200,154,75,.14); }
.lang-btn svg{ width:14px; height:14px; opacity:.8; }

.burger{ display:none; width:44px;height:44px; align-items:center; justify-content:center; border-radius:12px; border:1px solid rgba(255,255,255,.24); flex:none; }
.burger span{ display:block; width:19px; height:1.8px; background:#fff; position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; inset-inline-start:0; width:19px;height:1.8px; background:#fff; transition:transform .35s var(--ease-out); }
.burger span::before{ inset-block-start:-6px; }
.burger span::after{ inset-block-start:6px; }
body.nav-open .burger span{ background:transparent; }
body.nav-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
body.nav-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

.nav-scrim{
  position:fixed; inset:0; z-index:880; background:rgba(5,13,24,.6);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
body.nav-open .nav-scrim{ opacity:1; visibility:visible; }

@media (max-width:980px){
  .burger{ display:inline-flex; }

  /* The wrapper is a fixed, clipped layer. The drawer slides inside it, so an
     off-canvas panel can never add horizontal scroll to the page. */
  .nav-wrap{
    display:block; position:fixed; inset:0; z-index:890;
    overflow:hidden; pointer-events:none;
  }
  .nav{
    position:absolute; inset-block:0;
    /* inline-start resolves to the RIGHT edge in RTL and the LEFT edge in LTR,
       so the drawer always opens from the reading-start side. */
    inset-inline-start:0;
    width:min(86vw,340px);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:0 0 2.5rem; margin:0;
    background:var(--navy-900);
    transform:translateX(102%);
    /* visibility is what takes the closed drawer out of the tab order and the
       accessibility tree — without it, keyboard users walked through eight
       invisible off-canvas links before reaching the page. */
    visibility:hidden;
    transition:transform .5s var(--ease-out), visibility .5s;
    box-shadow:var(--sh-3); overflow-y:auto; overscroll-behavior:contain;
    pointer-events:auto;
  }
  html[dir="ltr"] .nav{ transform:translateX(-102%); }
  body.nav-open .nav{ transform:translateX(0); visibility:visible; }

  .nav__head{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:1.1rem var(--pad);
    border-block-end:1px solid rgba(255,255,255,.1);
    position:sticky; inset-block-start:0; background:var(--navy-900); z-index:2;
  }
  .nav__head img{ height:34px; width:auto; }
  .nav-close{
    width:38px;height:38px;border-radius:50%; flex:none;
    border:1px solid rgba(255,255,255,.22); color:#fff;
    display:grid; place-items:center;
  }
  .nav-close svg{ width:15px;height:15px; }
  .nav a{
    font-size:1.02rem; padding:.95rem var(--pad);
    border-block-end:1px solid rgba(255,255,255,.07);
  }
  .nav a::after{ display:none; }
  .nav__cta{ display:grid; gap:.6rem; margin:1.4rem var(--pad) 0; }
  .nav__cta .btn{ width:100%; }
  .head-actions .btn{ display:none; }
  .head-actions .btn--dl{ display:inline-flex; }  /* keep the app button on mobile */

  /* Drawer carries its own logo and close button, so the header bar behind it
     fades out instead of stacking a second X on top of the first. */
  body.nav-open .brand,
  body.nav-open .head-actions{ opacity:0; pointer-events:none; }
  .brand,.head-actions{ transition:opacity .3s var(--ease); }
  body.nav-open .site-head::before{ opacity:0; }
  body.nav-open .progress{ opacity:0; }
  .site-head__inner{ min-height:68px; gap:.5rem; }
  .brand img{ height:36px; }
}
@media (max-width:420px){
  .brand img{ height:32px; }
  .lang-btn{ padding:.45rem .6rem; font-size:.7rem; }
}

/* ------------------------------------------------------------- 6. Hero */
/* z-index:2 matters. Every .section is position:relative with an auto z-index,
   so the section that follows the hero paints on top of it and was slicing the
   overhanging part of the feature strip clean off. Lifting the hero above the
   following sections is what lets the strip straddle the boundary. */
.hero{ position:relative; z-index:2; isolation:isolate; color:#fff; background:var(--navy-900); }
/* Slides are stacked in one grid cell, so the tallest one sets the hero height.
   Nothing is absolutely centred any more — copy can never overflow into the header. */
.hero__stage{ position:relative; display:grid; overflow:hidden; }
.hslide{
  grid-area:1/1; position:relative;
  opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
}
.hslide.is-on{ opacity:1; visibility:visible; }
.hslide__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04);
}
.hslide.is-on .hslide__bg{ animation:kenburns 11s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
.hslide__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to left, rgba(5,13,24,.94) 0%, rgba(5,13,24,.82) 34%, rgba(6,17,31,.5) 66%, rgba(6,17,31,.34) 100%),
    linear-gradient(to top, rgba(5,13,24,.9) 0%, rgba(5,13,24,.15) 46%, transparent 70%);
}
html[dir="ltr"] .hslide__veil{
  background:
    linear-gradient(to right, rgba(5,13,24,.94) 0%, rgba(5,13,24,.82) 34%, rgba(6,17,31,.5) 66%, rgba(6,17,31,.34) 100%),
    linear-gradient(to top, rgba(5,13,24,.9) 0%, rgba(5,13,24,.15) 46%, transparent 70%);
}
.hslide__body{
  position:relative; z-index:1; display:flex; align-items:center;
  min-height:clamp(520px, 78vh, 720px);
  padding-block:calc(82px + 2.6rem) var(--strip-reserve);
}
.hero__copy{ max-width:34ch; }
html[dir="ltr"] .hero__copy{ max-width:26ch; }
.hero h1{ font-size:var(--step-5); }
.hero h1 .em{ color:var(--gold-300); display:block; }
.hero__lead{ margin-block-start:1rem; font-size:var(--step-1); color:var(--on-dark); max-width:42ch; }
.hero__cta{ margin-block-start:1.8rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.hslide.is-on .hero__copy > *{ animation:riseIn .8s var(--ease-out) both; }
.hslide.is-on .hero__copy > *:nth-child(1){ animation-delay:.05s; }
.hslide.is-on .hero__copy > *:nth-child(2){ animation-delay:.16s; }
.hslide.is-on .hero__copy > *:nth-child(3){ animation-delay:.27s; }
.hslide.is-on .hero__copy > *:nth-child(4){ animation-delay:.38s; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

.hero__badge{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.1rem;
  padding:.4rem .9rem; border-radius:100px;
  background:rgba(200,154,75,.14); border:1px solid rgba(200,154,75,.38);
  font-size:.76rem; color:var(--gold-300); font-weight:700; line-height:1.6;
}
.hero__badge{ max-width:100%; }
.hero__badge i{ width:7px;height:7px;border-radius:50%; background:var(--gold); flex:none; animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(200,154,75,.7);} 70%{ box-shadow:0 0 0 10px rgba(200,154,75,0);} 100%{ box-shadow:0 0 0 0 rgba(200,154,75,0);} }

.hero__dots{
  position:absolute; inset-inline-end:clamp(.8rem,2vw,2rem);
  inset-block-start:calc(50% - (var(--strip-reserve) / 2)); transform:translateY(-50%);
  display:grid; gap:.7rem; z-index:4;
}
.hero__dots button{ width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.35); transition:all .35s var(--ease); }
.hero__dots button.is-on{ background:var(--gold); height:26px; border-radius:6px; }

/* feature strip — hangs off the bottom edge of the hero */
/* Absolutely anchored to the hero's bottom edge and pushed down by --strip-drop,
   so it hangs into the next section without affecting the hero's height. */
.featstrip{
  position:absolute; inset-inline:0;
  inset-block-end:calc(var(--strip-drop) * -1); z-index:6;
}
.featstrip__card{
  background:linear-gradient(180deg,#123152,#0B2039);
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-lg);
  box-shadow:0 30px 60px -24px rgba(5,13,24,.62), 0 4px 14px -6px rgba(5,13,24,.4);
  display:grid; grid-template-columns:repeat(5,1fr); overflow:hidden;
}
.feat{ padding:1.5rem 1.15rem; display:flex; align-items:flex-start; gap:.75rem; position:relative; }
.feat + .feat::before{ content:""; position:absolute; inset-block:22%; inset-inline-start:0; width:1px; background:rgba(255,255,255,.12); }
.feat svg{ width:28px;height:28px; color:var(--gold); flex:none; margin-block-start:3px; }
.feat h4{ font-size:.92rem; color:#fff; margin-bottom:.15rem; line-height:1.5; }
.feat p{ font-size:.78rem; color:var(--on-dark-dim); line-height:1.65; }

@media (max-width:980px){
  :root{ --strip-drop:40px; --strip-reserve:152px; }
  .hslide__body{ min-height:clamp(560px,82vh,760px); padding-block:calc(68px + 2rem) var(--strip-reserve); }
  /* On a narrow screen the copy sits over the middle of the photo, so the veil
     has to work vertically rather than from the reading edge. */
  .hslide__veil,html[dir="ltr"] .hslide__veil{
    background:linear-gradient(to top, rgba(5,13,24,.96) 18%, rgba(5,13,24,.78) 58%, rgba(5,13,24,.58) 100%);
  }
  .hero__lead{ font-size:var(--step-0); }
  .hero__dots{
    inset-block-start:auto; inset-block-end:calc(var(--strip-reserve) - 34px);
    inset-inline-start:var(--pad); inset-inline-end:auto;
    transform:none; grid-auto-flow:column;
  }
  .hero__dots button.is-on{ height:8px; width:26px; }

  /* Carousel: each feature becomes its own card so a peeking neighbour reads as
     a second card rather than a broken half of the first. */
  .featstrip__card{
    background:none; border:0; box-shadow:none; border-radius:0;
    display:flex; gap:.7rem; overflow-x:auto;
    scroll-snap-type:x mandatory; scroll-padding-inline:0;
    padding-block:2px 6px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .featstrip__card::-webkit-scrollbar{ display:none; }
  .feat{
    min-width:78%; scroll-snap-align:start; border-radius:var(--r);
    background:linear-gradient(180deg,#123152,#0B2039);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:var(--sh-3);
  }
  .feat + .feat::before{ display:none; }
}
@media (max-width:560px){
  .feat{ min-width:84%; }
  .hero__copy{ max-width:100%; }
  .hero__cta .btn{ flex:1 1 auto; }
}

/* --- Desktop hero measure -------------------------------------------------
   `ch` resolves against the PARENT font size, so 34ch on .hero__copy was only
   ~330px — a quarter of the shell — which forced the headline onto four lines
   and pushed the hero past 900px tall. Measured in rem/% instead, and scoped
   to >=981px so the mobile hero below is untouched.                         */
@media (min-width:981px){
  :root{ --strip-reserve:150px; }

  .hero__copy{ max-width:min(54rem, 60%); }
  html[dir="ltr"] .hero__copy{ max-width:min(44rem, 52%); }
  .hero__lead{ max-width:46rem; }

  /* Kufi ships a generous default leading; a two-line display headline
     doesn't need it, and the saved height is what keeps the hero compact. */
  html[dir="rtl"] .hero h1{ line-height:1.32; }
  html[dir="rtl"] .hero__lead{ line-height:1.85; }

  .hslide__body{
    min-height:clamp(560px, 70vh, 660px);
    padding-block:calc(82px + 2.2rem) var(--strip-reserve);
  }
}

/* ------------------------------------------------- 7. Audience cards */
.aud-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.aud{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.8rem 1.5rem 1.4rem; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s;
}
.aud::after{
  content:""; position:absolute; inset-block-start:0; inset-inline-start:0;
  height:3px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:inline-start; transition:transform .5s var(--ease-out);
}
.aud:hover{ transform:translateY(-8px); box-shadow:var(--sh-2); }
.aud:hover::after{ transform:scaleX(1); }
.aud__ico{ width:50px;height:50px;border-radius:15px; display:grid; place-items:center; background:var(--navy-700); color:var(--gold); margin-bottom:1.1rem; transition:background .4s var(--ease); }
.aud:hover .aud__ico{ background:var(--gold); color:var(--navy-700); }
.aud__ico svg{ width:24px;height:24px; }
.aud h3{ font-size:var(--step-1); margin-bottom:.45rem; }
.aud p{ color:var(--text-soft); font-size:.88rem; margin-bottom:1rem; }
@media (max-width:1080px){ .aud-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .aud-grid{ grid-template-columns:1fr;} }

/* --------------------------------------------------------- 8. Stats */
.stats{ display:grid; grid-template-columns:repeat(5,1fr); }
.stat{ padding:1.5rem 1rem; text-align:center; position:relative; }
.stat + .stat::before{ content:""; position:absolute; inset-block:26%; inset-inline-start:0; width:1px; background:rgba(255,255,255,.13); }
.stat__n{
  font-family:var(--f-mono); font-weight:600; font-size:clamp(1.7rem,1.1rem+1.8vw,2.6rem);
  color:var(--gold); line-height:1; letter-spacing:-.03em;
  display:flex; justify-content:center; align-items:baseline; gap:2px; direction:ltr;
}
.stat__l{ margin-block-start:.55rem; font-size:.82rem; color:var(--on-dark); line-height:1.6; }
.stat__ico{ width:24px;height:24px;color:var(--gold-400); margin:0 auto .8rem; opacity:.85; }
@media (max-width:900px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .stat + .stat::before{ display:none; }
  .stat{ border:1px solid rgba(255,255,255,.1); border-radius:var(--r); }
}
.stats--light .stat{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); }
.stats--light{ gap:.7rem; }
.stats--light .stat + .stat::before{ display:none; }
.stats--light .stat__l{ color:var(--text-soft); }
.stats--light .stat__n{ color:var(--gold-ink); }

/* ------------------------------------------------------ 9. Solutions */
.sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.sol{ background:var(--white); padding:2rem 1.6rem; position:relative; transition:background .45s var(--ease); }
.sol__num{ font-family:var(--f-mono); font-size:.7rem; color:var(--gold-600); letter-spacing:.16em; display:block; margin-bottom:1rem; }
.sol svg.ico{ width:34px;height:34px; color:var(--navy-700); margin-bottom:1rem; transition:color .45s, transform .5s var(--ease-out); }
.sol h3{ font-size:var(--step-1); margin-bottom:.45rem; }
.sol p{ color:var(--text-soft); font-size:.88rem; }
.sol:hover{ background:var(--navy-700); }
.sol:hover h3{ color:#fff; }
.sol:hover p{ color:var(--on-dark); }
.sol:hover svg.ico{ color:var(--gold); transform:translateY(-4px); }
.sol:hover .sol__num{ color:var(--gold-400); }
@media (max-width:980px){ .sol-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .sol-grid{ grid-template-columns:1fr;} }

/* ------------------------------------------------ 10. Split panels */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.panel{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  padding:clamp(1.5rem,2.6vw,2.6rem);
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid var(--line); background:var(--white);
}
.panel--dark{ background:linear-gradient(150deg,#0D2340,#071426); border-color:rgba(255,255,255,.08); color:#fff; }
.panel--dark p{ color:var(--on-dark); }
.panel--gold{ background:linear-gradient(150deg,#F3E7CE,#EADCBB); border-color:#E0CFA8; }
.panel__tag{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-600); margin-bottom:.8rem; display:block; }
html[dir="rtl"] .panel__tag{ font-family:var(--f-ar); font-size:.82rem; letter-spacing:normal; text-transform:none; font-weight:700; }
.panel--dark .panel__tag{ color:var(--gold-400); }
.panel h3{ font-size:var(--step-2); margin-bottom:.7rem; }
.panel p{ color:var(--text-soft); max-width:44ch; }
.panel__art{ margin-block:1.6rem; }
.panel__cta{ margin-block-start:auto; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

/* ------------------------------------------- 11. Government band */
.gov{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#0B1D33 0%, #123259 52%, #0B1D33 100%);
  color:#fff; border-radius:var(--r-xl); padding:clamp(1.8rem,3.4vw,3.6rem);
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.2rem,2.6vw,2.6rem); align-items:center;
}
.gov__seal{ width:86px;height:86px;border-radius:50%; display:grid; place-items:center; border:2px solid rgba(200,154,75,.5); background:rgba(200,154,75,.1); flex:none; }
.gov__seal svg{ width:40px;height:40px;color:var(--gold); }
.gov h2{ font-size:var(--step-2); margin-bottom:.6rem; }
.gov p{ color:var(--on-dark); max-width:62ch; }
.gov .eyebrow{ color:var(--gold-400); }
@media (max-width:900px){ .gov{ grid-template-columns:1fr; } .gov__seal{ display:none; } }

/* ------------------------------------------------ 12. Coverage map */
.cover{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.map-wrap svg{ width:100%; height:auto; overflow:visible; }
.pin circle.dot{ fill:var(--gold); }
.pin circle.halo{ fill:var(--gold); opacity:.28; transform-origin:center; animation:ripple 3s ease-out infinite; }
.pin:nth-of-type(2n) circle.halo{ animation-delay:.7s; }
.pin:nth-of-type(3n) circle.halo{ animation-delay:1.4s; }
@keyframes ripple{ 0%{ transform:scale(.6); opacity:.4;} 100%{ transform:scale(2.6); opacity:0;} }
.pin text{ font-family:var(--f-mono); font-size:9px; fill:rgba(255,255,255,.72); }
.city-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem 1.2rem; margin-block-start:1.6rem; }
.city-list li{ display:flex; align-items:center; gap:.55rem; font-size:.88rem; color:var(--on-dark); line-height:1.7; }
.city-list li::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--gold); flex:none; }
@media (max-width:900px){ .cover{ grid-template-columns:1fr; } }
@media (max-width:420px){ .city-list{ grid-template-columns:1fr; } }

/* --------------------------------------------------- 13. Steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); counter-reset:s; }
.step{ position:relative; padding-block-start:2.2rem; }
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; inset-block-start:0; inset-inline-start:0;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; color:var(--gold-600); font-weight:600;
}
.step::after{
  content:""; position:absolute; inset-block-start:.5rem; inset-inline-start:2.4rem;
  height:1px; inline-size:calc(100% - 2rem);
  background:linear-gradient(to left, var(--line), transparent);
}
html[dir="ltr"] .step::after{ background:linear-gradient(to right, var(--line), transparent); }
.dark .step::after{ background:linear-gradient(to left, rgba(255,255,255,.22), transparent); }
html[dir="ltr"] .dark .step::after{ background:linear-gradient(to right, rgba(255,255,255,.22), transparent); }
.step:last-child::after{ display:none; }
.step h3{ font-size:var(--step-1); margin-bottom:.4rem; }
.step p{ color:var(--text-soft); font-size:.88rem; }
.dark .step p{ color:var(--on-dark); }
.dark .step::before{ color:var(--gold-400); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } .step::after{ display:none; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ------------------------------------------------- 14. Projects */
.proj-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.proj{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5;
  background:var(--navy-700); display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.4rem; color:#fff; isolation:isolate;
}
.proj img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.proj::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(5,13,24,.94) 8%, rgba(5,13,24,.4) 52%, rgba(5,13,24,.18));
}
.proj:hover img{ transform:scale(1.07); }
.proj__cat{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin-bottom:.35rem; display:block; }
html[dir="rtl"] .proj__cat{ font-family:var(--f-ar); font-size:.76rem; letter-spacing:normal; text-transform:none; font-weight:700; }
.proj h3{ font-size:1rem; line-height:1.55; }
.proj__meta{ font-size:.78rem; color:var(--on-dark-dim); margin-block-start:.3rem; }
@media (max-width:1080px){ .proj-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .proj-grid{ grid-template-columns:1fr;} }

/* ------------------------------------------------ 15. Clients strip */
.clients{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.2rem,3vw,3rem); }
.client{ display:flex; align-items:center; gap:.65rem; opacity:.7; transition:opacity .35s; filter:grayscale(1); }
.client:hover{ opacity:1; filter:none; }
.client svg{ width:28px;height:28px;color:var(--gold-600); flex:none; }
.client b{ display:block; font-size:.88rem; font-weight:700; color:var(--text); line-height:1.4; }
.client b + span{ display:block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); }
.trust-label{ font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--text-soft); }
html[dir="rtl"] .trust-label{ font-family:var(--f-ar); font-size:.82rem; letter-spacing:normal; text-transform:none; font-weight:700; }

/* -------------------------------------------------- 16. App CTA */
.appcta{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.store{ display:inline-flex; align-items:center; gap:.65rem; padding:.7rem 1.2rem; border-radius:14px; border:1px solid rgba(255,255,255,.24); transition:border-color .3s, background .3s; }
.store:hover{ border-color:var(--gold); background:rgba(200,154,75,.12); }
.store svg{ width:24px;height:24px;color:#fff; flex:none; }
.store small{ display:block; font-size:.64rem; color:var(--on-dark-dim); line-height:1.4; }
.store b{ display:block; font-size:.92rem; color:#fff; font-family:var(--f-en); line-height:1.3; }
@media (max-width:900px){ .appcta{ grid-template-columns:1fr; } }

/* ---------------------------------------------------- 17. News */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.news{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .5s var(--ease-out), box-shadow .5s; }
.news:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); }
.news__img{ aspect-ratio:16/10; overflow:hidden; background:var(--navy-700); }
.news__img img{ width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease-out); }
.news:hover .news__img img{ transform:scale(1.06); }
.news__body{ padding:1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.news__date{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; color:var(--gold-600); }
html[dir="rtl"] .news__date{ font-family:var(--f-ar); font-size:.76rem; letter-spacing:normal; }
.news h3{ font-size:1rem; line-height:1.6; }
.news p{ font-size:.86rem; color:var(--text-soft); flex:1; }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr; } }

/* ----------------------------------------------- 18. Page header */
.pagehead{
  position:relative; padding-block:clamp(8rem,11vw,11rem) clamp(3rem,5vw,5rem);
  background:linear-gradient(160deg,#0B1D33 0%,#123259 60%,#08182C 100%);
  color:#fff; overflow:hidden; isolation:isolate;
}
.pagehead img.ph-bg{ position:absolute; inset:0; z-index:-2; width:100%;height:100%;object-fit:cover; }
.pagehead::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to left, rgba(5,13,24,.94), rgba(6,17,31,.72) 55%, rgba(6,17,31,.55));
}
html[dir="ltr"] .pagehead::after{ background:linear-gradient(to right, rgba(5,13,24,.94), rgba(6,17,31,.72) 55%, rgba(6,17,31,.55)); }
.pagehead h1{ font-size:var(--step-4); max-width:22ch; }
.pagehead p{ margin-block-start:1rem; color:var(--on-dark); font-size:var(--step-1); max-width:58ch; }
.crumb{ display:flex; gap:.5rem; align-items:center; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:var(--on-dark-dim); text-transform:uppercase; margin-bottom:1rem; }
html[dir="rtl"] .crumb{ font-family:var(--f-ar); font-size:.8rem; letter-spacing:normal; text-transform:none; }
.crumb a:hover{ color:var(--gold); }
.crumb i{ opacity:.5; font-style:normal; }

/* ------------------------------------------------- 19. Content bits */
.rich h2{ font-size:var(--step-2); margin-block:2.2rem .9rem; }
.rich h3{ font-size:var(--step-1); margin-block:1.6rem .6rem; }
.rich p{ color:var(--text-soft); margin-bottom:.9rem; }
.rich ul{ display:grid; gap:.5rem; margin-bottom:1.2rem; }
.rich ul li{ position:relative; padding-inline-start:1.5rem; color:var(--text-soft); }
.rich ul li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.8em; width:7px;height:7px;border-radius:2px; background:var(--gold); }

.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.value{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; }
.value svg{ width:30px;height:30px;color:var(--gold-600); margin-bottom:.9rem; }
.value h3{ font-size:var(--step-1); margin-bottom:.4rem; }
.value p{ color:var(--text-soft); font-size:.88rem; }
@media (max-width:900px){ .value-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .value-grid{ grid-template-columns:1fr; } }

.tl{ position:relative; padding-inline-start:2rem; }
.tl::before{ content:""; position:absolute; inset-inline-start:6px; inset-block:.6rem; width:2px; background:linear-gradient(var(--gold),transparent); }
.tl li{ position:relative; padding-block-end:1.8rem; }
.tl li::before{ content:""; position:absolute; inset-inline-start:-2rem; inset-block-start:.5rem; width:14px;height:14px;border-radius:50%; background:var(--navy-700); border:3px solid var(--gold); }
.tl b{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; color:var(--gold-600); display:block; margin-bottom:.25rem; }
.tl p{ color:var(--text-soft); font-size:.9rem; }

.acc{ border-block-start:1px solid var(--line); }
.acc__item{ border-block-end:1px solid var(--line); }
.acc__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0; text-align:start; font-weight:700; font-size:var(--step-1); font-family:var(--f-display); line-height:1.6; }
.acc__q i{ width:26px;height:26px;border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex:none; position:relative; transition:background .3s,border-color .3s; }
.acc__q i::before,.acc__q i::after{ content:""; position:absolute; background:var(--gold-600); transition:transform .35s var(--ease-out); }
.acc__q i::before{ width:11px;height:1.6px; }
.acc__q i::after{ width:1.6px;height:11px; }
.acc__item.is-open .acc__q i{ background:var(--gold); border-color:var(--gold); }
.acc__item.is-open .acc__q i::before,.acc__item.is-open .acc__q i::after{ background:#fff; }
.acc__item.is-open .acc__q i::after{ transform:scaleY(0); }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.acc__a p{ padding-block-end:1.3rem; color:var(--text-soft); max-width:76ch; }

.form{ display:grid; gap:1rem; }
.field label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:.4rem; color:var(--text); }
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 1rem; border-radius:12px;
  border:1.5px solid var(--line); background:var(--white);
  transition:border-color .3s, box-shadow .3s; font-size:.92rem;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(200,154,75,.15); }
.field--2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .field--2{ grid-template-columns:1fr; } }
.form-note{ font-size:.8rem; color:var(--text-soft); line-height:1.7; }
.form-msg{ display:none; margin-block-start:1rem; padding:.85rem 1rem; border-radius:12px; background:rgba(200,154,75,.14); border:1px solid rgba(200,154,75,.4); font-size:.88rem; }
.form-msg.is-on{ display:block; }

.cinfo{ display:grid; gap:.9rem; }
.cinfo__row{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white); }
.cinfo__row svg{ width:22px;height:22px;color:var(--gold-600); flex:none; margin-block-start:4px; }
.cinfo__row b{ display:block; margin-bottom:.1rem; }
.cinfo__row span{ color:var(--text-soft); font-size:.88rem; }

/* ------------------------------------------- 20. Solution rows */
.srow{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,4rem); align-items:center;
  padding-block:clamp(2.4rem,4.5vw,4.5rem);
  border-block-end:1px solid var(--line);
}
.srow:last-child{ border-block-end:0; }
.srow:nth-child(even) .srow__art{ order:-1; }
.srow h2{ font-size:var(--step-2); margin-bottom:.8rem; }
.srow p{ color:var(--text-soft); }
.srow .chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-block-start:1.3rem; }
.chip{ font-family:var(--f-mono); font-size:.7rem; padding:.35rem .75rem; border-radius:100px; border:1px solid var(--line); background:var(--white); color:var(--text-soft); }
html[dir="rtl"] .chip{ font-family:var(--f-ar); font-size:.78rem; }
@media (max-width:900px){ .srow{ grid-template-columns:1fr; } .srow:nth-child(even) .srow__art{ order:0; } }

/* packages */
.pack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.pack{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; transition:transform .5s var(--ease-out), box-shadow .5s; }
.pack:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); }
.pack--hot{ background:linear-gradient(160deg,#0D2340,#071426); color:#fff; border-color:transparent; }
.pack--hot p,.pack--hot li{ color:var(--on-dark) !important; }
.pack__tag{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-600); }
html[dir="rtl"] .pack__tag{ font-family:var(--f-ar); font-size:.78rem; letter-spacing:normal; text-transform:none; font-weight:700; }
.pack--hot .pack__tag{ color:var(--gold-400); }
.pack h3{ font-size:var(--step-2); }
.pack ul{ display:grid; gap:.5rem; margin-block:.3rem .8rem; }
.pack li{ position:relative; padding-inline-start:1.4rem; font-size:.88rem; color:var(--text-soft); }
.pack li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.7em; width:7px;height:7px;border-radius:50%; background:var(--gold); }
.pack .btn{ margin-block-start:auto; }
@media (max-width:900px){ .pack-grid{ grid-template-columns:1fr; } }

/* listings */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:900px){ .post-grid{ grid-template-columns:1fr; } }
.filters{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:2.2rem; }
.filters button{ padding:.5rem 1rem; border-radius:100px; border:1px solid var(--line); background:var(--white); font-size:.82rem; font-weight:700; font-family:var(--f-display); color:var(--text-soft); transition:all .3s var(--ease); }
.filters button:hover{ border-color:var(--gold); color:var(--navy-700); }
.filters button.is-on{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }

.pcard{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .5s var(--ease-out), box-shadow .5s; }
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); }
.pcard__img{ aspect-ratio:16/10; overflow:hidden; background:var(--navy-700); }
.pcard__img img{ width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease-out); }
.pcard:hover .pcard__img img{ transform:scale(1.06); }
.pcard__body{ padding:1.4rem; display:grid; gap:.45rem; }
.pcard__meta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-block-start:.5rem; padding-block-start:.9rem; border-block-start:1px solid var(--line); }
.pcard__meta div{ font-size:.76rem; color:var(--text-soft); line-height:1.5; }
.pcard__meta b{ display:block; font-family:var(--f-mono); font-size:.98rem; color:var(--navy-700); }

/* ------------------------------------------------------ 21. Footer */
.site-foot{ background:var(--navy-900); color:#fff; position:relative; overflow:hidden; }
.foot-top{ padding-block:clamp(2.6rem,4.5vw,4.5rem) 2.2rem; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(1.4rem,3vw,3rem); }
.foot-brand img{ height:52px; width:auto; }
.foot-brand p{ color:var(--on-dark-dim); font-size:.86rem; margin-block:1rem; max-width:40ch; }
.foot h5{ font-size:.8rem; font-family:var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin-bottom:1.1rem; }
html[dir="rtl"] .foot h5{ font-family:var(--f-ar); font-size:.9rem; letter-spacing:normal; text-transform:none; font-weight:700; }
.foot ul{ display:grid; gap:.55rem; }
.foot a{ color:var(--on-dark); font-size:.86rem; transition:color .25s, padding .25s; }
.foot a:hover{ color:var(--gold); padding-inline-start:5px; }
.newsletter{ display:flex; gap:.4rem; margin-block-start:.9rem; }
.newsletter input{ flex:1; min-width:0; padding:.75rem .95rem; border-radius:100px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#fff; font-size:.84rem; }
.newsletter input::placeholder{ color:rgba(255,255,255,.4); }
.newsletter input:focus{ outline:none; border-color:var(--gold); }
.socials{ display:flex; gap:.5rem; margin-block-start:1.2rem; }
.socials a{ width:36px;height:36px;border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; transition:all .3s var(--ease); }
.socials a svg{ width:15px;height:15px; }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy-900); transform:translateY(-3px); }
.foot-bot{ border-block-start:1px solid rgba(255,255,255,.09); padding-block:1.2rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--on-dark-dim); }
.foot-bot nav{ display:flex; gap:1.2rem; flex-wrap:wrap; }
@media (max-width:980px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .foot-top{ grid-template-columns:1fr; } }

/* --------------------------------------------- 21b. App promo dialog */
.appmodal{
  position:fixed; inset:0; z-index:950; display:grid; place-items:center;
  padding:var(--pad); background:rgba(5,13,24,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.appmodal.is-on{ opacity:1; visibility:visible; }
.appmodal__card{
  position:relative; width:min(100%, 440px); text-align:center;
  background:linear-gradient(160deg,#143257,#071426);
  border:1px solid rgba(200,154,75,.28); border-radius:var(--r-xl);
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.6vw,2rem);
  color:#fff; box-shadow:var(--sh-3); overflow:hidden;
  transform:translateY(18px) scale(.97); transition:transform .4s var(--ease-out);
}
.appmodal.is-on .appmodal__card{ transform:none; }
.appmodal__card::after{
  content:""; position:absolute; inset-block-start:-45%; inset-inline-end:-25%;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,154,75,.28), transparent 65%);
  pointer-events:none;
}
.appmodal__inner{ position:relative; }
.appmodal__x{
  position:absolute; inset-block-start:.9rem; inset-inline-end:.9rem; z-index:2;
  width:32px; height:32px; border-radius:50%; color:#fff;
  border:1px solid rgba(255,255,255,.22); display:grid; place-items:center;
  transition:background .25s, border-color .25s;
}
.appmodal__x:hover{ background:var(--gold); border-color:var(--gold); color:#0B1D33; }
.appmodal__x svg{ width:14px; height:14px; }
.appmodal img.mark{ height:56px; width:auto; margin:0 auto 1.1rem; }
.appmodal h3{ font-size:var(--step-2); margin-bottom:.6rem; }
.appmodal p{ color:var(--on-dark); font-size:.9rem; max-width:34ch; margin-inline:auto; }
.appmodal__stores{ display:flex; gap:.55rem; justify-content:center; flex-wrap:wrap; margin-block:1.5rem 1rem; }
.appmodal .btn{ width:100%; }
.appmodal__later{
  display:block; margin:.9rem auto 0; font-size:.82rem;
  color:var(--on-dark-dim); border-block-end:1px solid transparent;
}
.appmodal__later:hover{ color:#fff; border-block-end-color:currentColor; }
@media (max-width:420px){
  .appmodal__stores{ flex-direction:column; }
  .appmodal__stores .store{ justify-content:center; }
}

/* --------------------------------------------------- 22. Utilities */

/* The `hidden` attribute is only a default style, so any rule that sets an
   explicit display — .btn, .appmodal__stores, .storerow — silently beats it.
   That is what left the Android-only Install button on screen for iPhone
   users, where tapping it could do nothing at all. */
[hidden]{ display:none !important; }

[data-rev]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-rev].is-in{ opacity:1; transform:none; }
[data-rev-d="1"]{ transition-delay:.09s; }
[data-rev-d="2"]{ transition-delay:.18s; }
[data-rev-d="3"]{ transition-delay:.27s; }
[data-rev-d="4"]{ transition-delay:.36s; }
[data-rev-d="5"]{ transition-delay:.45s; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-rev]{ opacity:1; transform:none; }
  .hslide.is-on .hero__copy > *{ opacity:1; }
}

/* fixed header — keep in-page anchor targets from landing underneath it */
[id]{ scroll-margin-block-start:100px; }

.progress{ position:fixed; inset-block-start:0; inset-inline-start:0; height:2px; background:var(--gold); width:0; z-index:1000; transition:width .1s linear, opacity .3s var(--ease); }

.totop{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:800;
  width:44px;height:44px;border-radius:50%; background:var(--navy-700); color:#fff;
  display:grid; place-items:center; box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .4s var(--ease-out);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--gold); color:var(--navy-900); }
.totop svg{ width:17px;height:17px; }
@media (max-width:720px){ .totop{ inset-block-end:14px; inset-inline-end:14px; width:38px;height:38px; } }

/* login */
.auth{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth__art{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:linear-gradient(160deg,#0B1D33,#123259 60%,#071426);
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  padding:clamp(1.8rem,3.4vw,3.4rem);
}
.auth__art img.ph-bg{ position:absolute; inset:0; z-index:-2; width:100%;height:100%;object-fit:cover; }
.auth__art::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(160deg, rgba(6,17,31,.9), rgba(6,17,31,.78)); }
.auth__form{ display:grid; place-items:center; padding:clamp(2rem,5vw,4rem) var(--pad); background:var(--sand-50); }
.auth__box{ width:min(100%,420px); }
.auth__box h1{ font-size:var(--step-3); margin-bottom:.5rem; }
.auth__box > p{ color:var(--text-soft); margin-bottom:1.8rem; }
.tabs{ display:flex; gap:.35rem; background:var(--sand-200); padding:.28rem; border-radius:100px; margin-bottom:1.5rem; }
.tabs button{ flex:1; padding:.55rem; border-radius:100px; font-size:.85rem; font-weight:700; font-family:var(--f-display); color:var(--text-soft); transition:all .3s; }
.tabs button.is-on{ background:var(--white); color:var(--navy-700); box-shadow:var(--sh-1); }
@media (max-width:900px){ .auth{ grid-template-columns:1fr; } .auth__art{ display:none; } }

.center{ text-align:center; }
.mt-2{ margin-block-start:2rem; }
.mt-3{ margin-block-start:2.6rem; }
.muted{ color:var(--text-soft); }
.gold{ color:var(--gold); }
.sr{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap; }

/* ==========================================================================
   23. CMS-rendered sections
   --------------------------------------------------------------------------
   Small classes that replace the inline styles the static pages carried, now
   that sections are composed from the database rather than written by hand.
   ========================================================================== */

/* Dark bands clip their own grain overlay and decorative circles. */
.sec-clip{ position:relative; overflow:hidden; }

/* Figure list inside the "at a glance" side panel. */
.panel__figures{ display:grid; gap:1.4rem; margin-block-start:2rem; }

/* App Store / Google Play button row. */
.storerow{ display:flex; gap:.6rem; flex-wrap:wrap; margin-block-start:1.8rem; }

/* Footer newsletter blurb and contact block. */
.foot-note{ color:var(--on-dark-dim); font-size:.86rem; }
.foot-contact{ margin-block-start:1.2rem; font-family:var(--f-mono); font-size:.8rem; color:var(--on-dark); }
.foot-contact div{ text-align:start; }
.foot-contact div + div{ margin-block-start:.3rem; }
.foot-contact a{ color:inherit; font-size:inherit; }

/* Shown by main.js when a filter matches nothing. */
.filter-empty{ text-align:center; color:var(--text-soft); padding-block:2.5rem; }

/* Install affordances inside the app dialog. */
.appmodal__install{ margin-block-end:.6rem; }

/* When a real install prompt is available the demo link steps back a level. */
.appmodal.has-install .appmodal__demo{
  --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.45);
}

/* ------------------------------------------------------------ iOS install
   Safari cannot be prompted, so the dialog teaches the gesture instead. The
   steps are numbered and carry the real Share glyph, because "use the share
   button" means nothing to someone who has never looked for it. */
.iossteps{
  background:rgba(200,154,75,.1); border:1px solid rgba(200,154,75,.32);
  border-radius:var(--r); padding:.9rem 1rem; margin-block-end:1rem; text-align:start;
}
.iossteps__lead{
  font-size:.84rem; color:var(--gold-300); line-height:1.75;
  margin-block-end:.8rem; max-width:none;
}
.iossteps__list{ display:grid; gap:.55rem; margin:0; padding:0; list-style:none; }
.iossteps__list li{
  display:flex; align-items:center; gap:.55rem;
  font-size:.85rem; color:#fff; line-height:1.6;
}
.iossteps__n{
  width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--gold); color:var(--navy-800);
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
}
.iossteps__ico{ width:19px; height:19px; color:var(--gold-300); flex:none; }
.iossteps__go{
  color:var(--gold-300); font-weight:700;
  border-block-end:1px solid currentColor; padding-block-end:1px;
}
.iossteps__go:hover{ color:#fff; }
/* Already on the app page — step one is done. */
.iossteps.is-here .iossteps__list li:first-child{ opacity:.45; }
.iossteps__note{
  margin-block-start:.8rem; padding-block-start:.7rem;
  border-block-start:1px solid rgba(200,154,75,.25);
  font-size:.78rem; color:var(--on-dark); line-height:1.7; max-width:none;
}
/* On iOS the store buttons are a distraction, so the steps lead. */
.appmodal.is-ios .appmodal__demo{
  --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.45);
}

/* Install banner on the app prototype itself. */
.iosbanner{
  position:fixed; inset-inline:12px; inset-block-end:12px; z-index:120;
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .8rem; border-radius:16px;
  background:rgba(11,29,51,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(200,154,75,.4); box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
  color:#fff; opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
  /* clear the iPhone home indicator */
  margin-block-end:env(safe-area-inset-bottom, 0px);
}
.iosbanner.is-on{ opacity:1; visibility:visible; transform:none; }
.iosbanner img{ border-radius:11px; flex:none; }
.iosbanner__t{ flex:1; min-width:0; }
.iosbanner__t b{ display:block; font-size:.86rem; line-height:1.45; }
.iosbanner__t small{ display:block; font-size:.72rem; color:var(--on-dark); line-height:1.5; }
.iosbanner__share{ width:20px; height:20px; color:var(--gold); flex:none; }
.iosbanner__x{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); color:#fff;
}
.iosbanner__x svg{ width:11px; height:11px; }
@media (min-width:620px){ .iosbanner{ inset-inline:auto; inset-inline-end:20px; width:340px; } }