/* ==========================================================================
   PickYard — built on the PickYard Strategic Identity Master.
   Colour roles, type and the Field → Selection → Pick logic come from that
   document. Photography is the material; the brand supplies the frame.
   ========================================================================== */

:root {
  /* Locked brand colours */
  --blue:   #0052FD;
  --orange: #FD3E0C;
  --orange-ink: #C93209;   /* orange TEXT on light grounds: AA-safe */
  --navy:   #010D27;
  --white:  #FFFFFF;

  /* Neutrals carry a navy bias so they belong to the palette */
  --ground:      #FFFFFF;
  --ground-2:    #F3F5FA;
  --surface:     #FFFFFF;
  --line:        #E3E7F0;
  --line-2:      #C9D1E2;
  --ink:         #010D27;
  --ink-2:       #48557A;
  --ink-3:       #616A85;
  --blue-wash:   #E9EFFF;
  --blue-deep:   #0040C8;
  --orange-wash: #FFEDE7;
  --focus:       var(--blue);

  --font: "Alexandria", "Segoe UI", "Noto Sans Arabic", Arial, sans-serif;

  /* Type — display runs tight and large; body stays quiet */
  --t-hero:  clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem);
  --t-h2:    clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  --t-sub:   clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem);  /* the tier between h3 and h2 */
  --t-h3:    clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --t-lede:  clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  --t-kick:  0.8rem;

  /* Arabic is cursive: letter-spacing pulls the joins apart and the word stops
     reading as one word. Tracking is therefore a per-language token, off in
     Arabic and carried by weight instead, and on only for the Latin swap. */
  --track-kick: 0;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;
  --sec: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  --r1: 6px; --r2: 12px; --r3: 20px; --pill: 999px;

  /* Motion — fast, clean, intentional */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --d1: 180ms; --d2: 280ms; --d3: 520ms; --d4: 900ms;

  --shadow: 0 18px 50px rgba(1,13,39,.14);
  --wrap: 1240px;
  --hh: 74px;
  --to-start: left;   /* gradient direction running toward the inline start */
  color-scheme: light;
}

html[lang="en"] { --track-kick:.16em; --t-kick:.72rem; }
[dir="rtl"] { --to-start: right; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#05091A; --ground-2:#080F26; --surface:#0B1430;
    --line:#1B2647; --line-2:#2A3760;
    --ink:#EEF2FB; --ink-2:#A8B3CE; --ink-3:#8A94B2;
    --blue-wash:#11204A; --blue-deep:#3A73FF; --orange-wash:#3A1710;
    --orange-ink:#FF7A52;
    --focus:#6E9BFF; --shadow: 0 18px 50px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:#05091A; --ground-2:#080F26; --surface:#0B1430;
  --line:#1B2647; --line-2:#2A3760;
  --ink:#EEF2FB; --ink-2:#A8B3CE; --ink-3:#8A94B2;
  --blue-wash:#11204A; --blue-deep:#3A73FF; --orange-wash:#3A1710;
  --orange-ink:#FF7A52;
  --focus:#6E9BFF; --shadow: 0 18px 50px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ───────── base ───────── */
*,*::before,*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* clip, not hidden: hidden would make html a scroll container and kill
   position:sticky on the services column. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-weight: 400; line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Alexandria's Arabic glyphs run well past the em box, so display type needs
   noticeably more leading than a Latin face would at the same size. */
h1,h2,h3 { margin:0; line-height:1.5; text-wrap: balance; font-weight: 800; letter-spacing:-.02em; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing:-.01em; line-height:1.5; }
p { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
img { display:block; max-width:100%; height:auto; }
a { color: var(--blue); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r1); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--orange); color:#fff; }

.wrap { width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem); }
.section { padding-block: var(--sec); }

.skip-link {
  position: fixed; inset-block-start: var(--s3); inset-inline-start: var(--s3); z-index: 300;
  transform: translateY(-180%); background: var(--navy); color:#fff;
  padding: var(--s3) var(--s5); border-radius: var(--r2); font-weight: 500;
  transition: transform var(--d1) var(--ease);
}
.skip-link:focus { transform: none; }

.progress { position: fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:200; pointer-events:none; }
.progress__bar { display:block; height:100%; width:100%; background: var(--orange);
  transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .progress__bar { transform-origin: right center; }

/* ───────── type helpers ───────── */
.kicker {
  display:block; font-size: var(--t-kick); font-weight: 700;
  letter-spacing: var(--track-kick); text-transform: uppercase;
  color: var(--blue); margin:0;
}
.kicker--light { color: #8FB2FF; }
.shead { display:flex; flex-direction:column; gap: var(--s4); max-width: 720px; margin-block-end: clamp(2.5rem,1.5rem + 3vw,4.5rem); }
.shead__title { font-size: var(--t-h2); }
.shead__lede { font-size: var(--t-lede); color: var(--ink-2); max-width: 58ch; }
.shead--light .shead__lede { color:#B4C0DA; }
.shead--light .shead__lede b { color:#fff; }
.shead--light .shead__title { color:#fff; }
.shead--row { flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap: var(--s5) clamp(2rem, 1rem + 4vw, 5rem); max-width:none; }
.shead--row .shead__lede { max-width: 36ch; }

/* ───────── buttons ───────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s2);
  min-height:50px; padding-inline: var(--s6); border:1px solid transparent;
  border-radius: var(--pill); font-weight:500; font-size:.95rem;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease),
              border-color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height:42px; padding-inline: var(--s5); font-size:.86rem; }
.btn--lg { min-height:58px; padding-inline: var(--s7); font-size:1rem; }
.btn--block { display:flex; width:100%; }
/* Orange is the pick: one per view */
.btn--pick { background: var(--orange); color: var(--navy); font-weight:700; }
.btn--pick:hover { background:#E1330A; }
/* The blue is the button, not a hover reward: it reads as an action standing
   still. Deep blue on hover so the press still has somewhere to go.
   White on Pick Blue measures 5.74:1, so the label clears AA. */
.btn--blue { background: var(--blue); color:#fff; border-color: var(--blue); font-weight:700; }
.btn--blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--dark { background: var(--navy); color:#fff; }
.btn--dark:hover { background: var(--blue); }
.btn--line { background:transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn--line:hover { background: rgba(255,255,255,.14); border-color:#fff; }

/* ───────── header ───────── */
.header {
  position: fixed; inset-block-start:0; inset-inline:0; z-index:150;
  transition: background-color var(--d2) var(--ease), border-color var(--d2) var(--ease);
  border-block-end: 1px solid transparent;
}
.header__inner {
  width:100%; max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  display:flex; align-items:center; gap: var(--s5); min-height: var(--hh);
  justify-content: space-between;
}
/* The logo is pinned to the physical left in both directions, so the row is
   reversed under RTL rather than relying on inline-direction auto margins. */
[dir="rtl"] .header__inner { flex-direction: row-reverse; }
.header.is-stuck {
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  border-block-end-color: var(--line);
}
.header__logo { display:inline-flex; align-items:center; flex:0 0 auto; }
.logo { width:auto; height:28px; }
.logo--pos { display:none; }
.header.is-stuck .logo--rev { display:none; }
.header.is-stuck .logo--pos { display:block; }

.nav { margin-inline-start:0; }
.nav__list { display:flex; align-items:center; gap: var(--s1); }
.nav__link {
  position:relative; display:inline-flex; align-items:center; min-height:42px;
  padding-inline: var(--s3); border-radius: var(--r1);
  color: rgba(255,255,255,.82); font-weight:500; font-size:.9rem;
  transition: color var(--d1) var(--ease);
}
.header.is-stuck .nav__link { color: var(--ink-2); }
.nav__link:hover { color:#fff; }
.header.is-stuck .nav__link:hover { color: var(--ink); }
.nav__link::after {
  content:""; position:absolute; inset-block-end:7px;
  inset-inline-start: var(--s3); inset-inline-end: var(--s3); height:2px;
  background: var(--blue-deep); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d2) var(--ease);
}
.header:not(.is-stuck) .nav__link::after { background: #8FB2FF; }
[dir="rtl"] .nav__link::after { transform-origin: right center; }
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color:#fff; }
.header.is-stuck .nav__link.is-current { color: var(--ink); }

.header__actions { display:flex; align-items:center; gap: var(--s2); }
.iconbtn {
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid rgba(255,255,255,.35); border-radius: var(--pill);
  background: rgba(255,255,255,.08); color:#fff;
  transition: background-color var(--d1) var(--ease), border-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.header.is-stuck .iconbtn { border-color: var(--line); background: var(--surface); color: var(--ink-2); }
.iconbtn:hover { background: rgba(255,255,255,.2); }
.header.is-stuck .iconbtn:hover { color: var(--ink); border-color: var(--line-2); }
.iconbtn__text { font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.icon { width:19px; height:19px; }
.icon--moon { display:none; }

.burger { display:none; width:42px; height:42px; padding:0; position:relative;
  border:1px solid rgba(255,255,255,.35); border-radius: var(--pill); background: rgba(255,255,255,.08); }
.header.is-stuck .burger { border-color: var(--line); background: var(--surface); }
.burger span { position:absolute; inset-inline:12px; height:2px; background:#fff; border-radius:2px;
  transition: transform var(--d2) var(--ease), opacity var(--d1) var(--ease); }
.header.is-stuck .burger span { background: var(--ink); }
.burger span:nth-child(1){ inset-block-start:14px; }
.burger span:nth-child(2){ inset-block-start:20px; }
.burger span:nth-child(3){ inset-block-start:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.drawer { position:fixed; inset:0; z-index:160; background: rgba(1,13,39,.6); }
.drawer__panel {
  position:absolute; inset-block:0; inset-inline-end:0; inline-size:min(360px,86vw);
  background: var(--ground); border-inline-start:1px solid var(--line);
  padding: calc(var(--hh) + var(--s5)) var(--s6) var(--s6);
  display:flex; flex-direction:column; gap: var(--s5); overflow-y:auto;
}
.drawer__list { display:flex; flex-direction:column; gap:var(--s1); }
.drawer__list a { display:block; padding: var(--s3) var(--s2); border-radius: var(--r1);
  color: var(--ink); font-weight:500; font-size:1.05rem; }
.drawer__list a:hover { background: var(--ground-2); }

/* ═════════ HERO — photography first ═════════ */
.hero {
  position: relative; isolation: isolate;
  min-height: min(88dvh, 860px);
  display: grid; grid-template-rows: 1fr auto;
  padding-block: calc(var(--hh) + var(--s8)) var(--s6);
  overflow: hidden; color: #fff;
}
.hero__media { position:absolute; inset:-8% 0; z-index:-2; }
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:30% 45%; }
/* Legibility scrim, keyed to the brand navy rather than plain black */
.hero__scrim {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(1,13,39,.94) 0%, rgba(1,13,39,.70) 34%, rgba(1,13,39,.52) 68%, rgba(1,13,39,.66) 100%),
    linear-gradient(to var(--to-start), rgba(1,13,39,.04), rgba(1,13,39,.80) 84%);
}
.hero__body {
  width:100%; max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  align-self: center;
  display:flex; flex-direction:column; gap: var(--s5); max-width: min(var(--wrap), 100%);
}
.hero__title { font-size: var(--t-hero); display:flex; flex-direction:column; line-height:1.3;
  max-inline-size: min(100%, 620px); }
/* Alexandria's Arabic descends well past the em box, so the mask needs room
   underneath or the tails of ي and ج get sheared off. */
.hero__title .line { display:block; overflow:hidden; padding-block-end:.18em; margin-block-end:-.06em; }
.hero__title .line__in { display:block; }
.line--pick { color:#fff; }

@keyframes lineUp { from { transform: translateY(108%) } to { transform:none } }
@keyframes riseIn { from { opacity:0; transform: translateY(18px) } to { opacity:1; transform:none } }
.hero.is-ready .line__in { animation: lineUp var(--d4) var(--ease) both; }
.hero.is-ready .line:nth-child(2) .line__in { animation-delay: 110ms; }
.hero.is-ready .kicker     { animation: riseIn var(--d3) var(--ease) both; }
.hero.is-ready .hero__lede { animation: riseIn var(--d3) var(--ease) 340ms both; }
.hero.is-ready .hero__actions { animation: riseIn var(--d3) var(--ease) 440ms both; }
.hero.is-ready .hero__foot { animation: riseIn var(--d3) var(--ease) 620ms both; }
.hero__lede { font-size: var(--t-lede); color: rgba(255,255,255,.9); max-width: 46ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap: var(--s3); margin-block-start: var(--s2); }

.hero__foot {
  width:100%; max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap: var(--s5);
  padding-block-start: var(--s7);
}
.hero__cue { display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.hero__cue::after { content:""; width:1px; height:34px; background:currentColor; opacity:.6;
  animation: cue 1.9s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0%,100%{ transform:scaleY(.35); opacity:.25 } 50%{ transform:scaleY(1); opacity:.75 } }

/* ═════════ TICKER ═════════ */
/* The track is duplicated in JS, so half of it is one full pass. --tick-dur is
   written from the measured width to hold a constant speed whatever the
   language, and the loop is seamless because the halves are identical. */
.ticker { background: var(--blue); color:#fff; overflow:hidden; padding-block: var(--s4);
  --tick-dur: 20s; }
.ticker__track { display:flex; align-items:center; gap: var(--s5); width:max-content;
  will-change: transform;
  animation: tick var(--tick-dur) linear infinite; }
.ticker__track span { font-weight:700; font-size: clamp(1rem,.9rem + .5vw,1.35rem); white-space:nowrap; }
.ticker__track i { width:8px; height:8px; background: var(--orange); border-radius:2px; flex:0 0 auto; }
@keyframes tick    { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes tickRtl { from { transform: translateX(0) } to { transform: translateX(50%) } }
/* Under RTL the overflow runs the other way, so the pass runs the other way. */
[dir="rtl"] .ticker__track { animation-name: tickRtl; }

/* ═════════ SERVICES ═════════ */
.svc__list {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.svc__item {
  position:relative; display:grid; grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s5); align-content:start;
  padding-block: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  border-block-start: 1px solid var(--line);
  transition: border-color var(--d2) var(--ease);
}
.svc__item::before {
  content:""; position:absolute; inset-block-start:-1px; inset-inline:0;
  height:2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d3) var(--ease);
}
[dir="rtl"] .svc__item::before { transform-origin: right center; }
.svc__item:hover::before, .svc__item:focus-within::before { transform: scaleX(1); }
.svc__item:hover .svc__n, .svc__item:focus-within .svc__n { color: var(--orange-ink); }
.svc__n {
  grid-row: 1 / span 2; font-size:.78rem; font-weight:700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-block-start:.5rem;
  transition: color var(--d2) var(--ease);
}
.svc__item h3, .svc__item p {
  transition: color var(--d2) var(--ease), transform var(--d3) var(--ease);
}
.svc__item:hover h3, .svc__item:focus-within h3 { color: var(--blue); }
@media (hover:hover) and (pointer:fine) {
  .svc__item:hover h3, .svc__item:hover p { transform: translateX(6px); }
  [dir="rtl"] .svc__item:hover h3, [dir="rtl"] .svc__item:hover p { transform: translateX(-6px); }
}
.svc__item p { color: var(--ink-2); font-size:.95rem; max-width: 46ch; }

/* What each service actually contains. A 2px square is the brand's mark shape,
   so it marks a list item without turning the row into a chip or a card. */
.svc__tags {
  grid-column: 2; display:flex; flex-wrap:wrap;
  gap: var(--s2) var(--s5); margin-block-start: var(--s3);
}
.svc__tags li {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:500; color: var(--ink-3);
}
.svc__tags li::before {
  content:""; flex:0 0 auto; inline-size:5px; block-size:5px;
  border-radius:2px; background: var(--blue); opacity:.7;
}
.svc__item:hover .svc__tags li::before { opacity:1; }

/* The line that closes the section and hands the reader to the form. */
.svc__cta {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--s4) var(--s6);
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-block-start: var(--s6); border-block-start:1px solid var(--line);
  font-size: var(--t-lede); font-weight:500; color: var(--ink);
}
.svc__cta span { max-width: 46ch; }

/* The name story sits between the executive summary and the three moves. */
.moves__lede {
  color:#B4C0DA; font-size: var(--t-lede); max-width: 58ch;
  margin-block-end: var(--s6);
}
.moves__lede b { color:#fff; font-weight:700; }

/* ═════════ METHOD ═════════ */
.method { position:relative; background: var(--navy); color:#fff; }
.method__sticky { position:relative; padding-block: var(--sec); overflow:hidden; }
.method__bg { position:absolute; inset:0; z-index:0; }
.method__bg img { width:100%; height:100%; object-fit:cover; opacity:.2; filter: grayscale(1); }
.method__sticky::after {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, var(--navy) 0%, rgba(1,13,39,.82) 45%, var(--navy) 100%);
}
.method__inner { position:relative; z-index:2; }
.moves { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,250px),1fr));
  gap: var(--s6) clamp(2rem, 1rem + 3vw, 4.5rem); }
.move {
  display:flex; flex-direction:column; gap: var(--s3);
  padding-block-start: var(--s5);
  border-block-start: 2px solid rgba(255,255,255,.14);
  transition: border-color var(--d3) var(--ease);
}
.move.is-on { border-block-start-color: rgba(255,255,255,.45); }
.move--pick.is-on { border-block-start-color: var(--orange); }
.move__tag { align-self:flex-start; font-size:var(--t-kick); font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:#8FB2FF; direction:ltr; }
.move--pick .move__tag { color: var(--orange); }
.move h3 { color:#fff; font-size: var(--t-sub); line-height:1.45; }
.move p { color:#B4C0DA; font-size:.95rem; }

/* ═════════ WORK REEL ═════════ */
.work { padding-block: var(--sec) calc(var(--sec) * .55); overflow:hidden; }
.reel { margin-block-start: var(--s6); }
.reel__track {
  display:flex; gap: clamp(1rem,.6rem + 1.4vw,2rem);
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-block-end: var(--s4);
}
.reel__track::-webkit-scrollbar { display:none; }
.shot {
  margin:0; flex:0 0 auto; inline-size: clamp(250px, 30vw, 440px);
  scroll-snap-align: center; cursor: zoom-in;
}
.shot img {
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius: var(--r3);
  transition: transform var(--d3) var(--ease), filter var(--d3) var(--ease);
  background: var(--ground-2);
}
.shot:hover img, .shot:focus-visible img { transform: translateY(-6px) scale(1.012); }
/* each frame settles from slightly oversize as it enters, so the reel reads as
   a strip of film arriving rather than a grid that was already there */
@keyframes shotIn { from { opacity:0; transform: scale(1.055) } to { opacity:1; transform:none } }
.js .shot.is-in img { animation: shotIn var(--d4) var(--ease) both; }
.reel__bar {
  /* ستة بكسلات لا ثلاثة: المقبض لا بد أن يُرى قبل أن يُمسك. وهدف اللمس
     يُوسَّع بعنصر زائف فوقه وتحته، و touch-action يمنع الصفحة من الانزلاق. */
  height:6px; background: var(--line); border-radius: var(--pill);
  margin-block-start: var(--s5);
  margin-inline: clamp(1rem,.4rem + 2.4vw,2.75rem); max-width: var(--wrap);
  position: relative; cursor: grab; touch-action: none;
}
.reel__bar::before { content:""; position:absolute; inset-block:-10px; inset-inline:0; }
.reel__bar:active { cursor: grabbing; }
.reel__bar:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
.reel__bar:hover span, .reel__bar:focus-visible span { background: #E1330A; }
/* أثناء السحب لا انتقال، وإلا تأخّر الشريط عن الإصبع */
.reel__bar.is-scrubbing span { transition: none; }
.reel__bar span {
  position:absolute; inset-block:0; inset-inline-start:0;
  inline-size:18%; background: var(--orange); border-radius: var(--pill);
}

/* ═════════ STATEMENT BAND ═════════ */
.band { position:relative; isolation:isolate; color:#fff; padding-block: clamp(4rem,2rem + 7vw,8rem); overflow:hidden; }
.band__media { position:absolute; inset:-12% 0; z-index:-2; }
.band__media img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.band::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to var(--to-start), rgba(0,82,253,.9), rgba(1,13,39,.92));
}
.band__quote { font-size: clamp(1.4rem,1rem + 2.2vw,2.7rem); font-weight:800; line-height:1.5;
  letter-spacing:-.02em; max-width: 22ch; }

/* ═════════ WHY ═════════ */
.proc, .why { background: var(--ground-2); }
.why__grid { display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(2rem,1rem + 4vw,5rem); align-items:start; }
.why__copy { display:flex; flex-direction:column; gap: var(--s4); align-items:flex-start; }
.why__copy .btn { margin-block-start: var(--s2); }
.why__list { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: var(--s5) var(--s6); }
.why__list li { display:flex; flex-direction:column; gap: var(--s2);
  padding-inline-start: var(--s5); border-inline-start:2px solid var(--line-2); }
.why__list li:first-child { border-inline-start-color: var(--orange); }
.why__list p { color: var(--ink-2); font-size:.93rem; }

/* ═════════ PROCESS ═════════ */
.steps { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: var(--s5); }
.step { position:relative; display:flex; flex-direction:column; gap: var(--s2);
  padding-block-start: var(--s5); border-block-start:2px solid var(--line); }
.step::before { content:""; position:absolute; inset-block-start:-2px; inset-inline-start:0;
  width:40px; height:2px; background: var(--blue); }
.step:last-child::before { background: var(--orange); }
.step__n { font-size:.78rem; font-weight:700; color: var(--blue); letter-spacing:.1em;
  direction:ltr; font-variant-numeric: tabular-nums; }
.step:last-child .step__n { color: var(--orange-ink); }
.step p { color: var(--ink-2); font-size:.92rem; }

/* ═════════ CONTACT ═════════ */
.contact { position:relative; isolation:isolate; background: var(--navy); color:#fff;
  padding-block: var(--sec); overflow:hidden; }
.contact__media {
  position:absolute; inset-block:0; inset-inline-start:0; inline-size:52%; z-index:-2;
  /* the photograph ended on a hard vertical edge; it now dissolves into the
     navy on its inner side, in whichever direction the page is running */
  -webkit-mask-image: linear-gradient(to var(--to-start), transparent, #000 36%);
          mask-image: linear-gradient(to var(--to-start), transparent, #000 36%);
}
.contact__media img { width:100%; height:100%; object-fit:cover;
  object-position: 35% 40%; filter: grayscale(.35) brightness(.96); }
.contact::before { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to var(--to-start), var(--navy) 36%, rgba(1,13,39,.92) 56%, rgba(1,13,39,.74) 100%); }
.contact__grid { display:grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(2rem,1rem + 4vw,4.5rem); align-items:start; }
.contact__copy { display:flex; flex-direction:column; gap: var(--s4); }
.contact__copy .shead__title { color:#fff; font-size: var(--t-h2); }
.contact__copy .shead__lede { color:#B4C0DA; }
.contact__meta { display:flex; flex-direction:column; gap: var(--s4); margin-block-start: var(--s3); }
.contact__meta li { display:flex; flex-direction:column; gap:2px; }
.contact__meta span { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#8A94B2; }
.contact__meta a { color:#fff; font-weight:500; }
.contact__meta a:hover { color:#8FB2FF; }

.form { background: var(--surface); border:1px solid var(--line); border-radius: var(--r3);
  padding: clamp(1.5rem,1rem + 2vw,2.75rem); display:flex; flex-direction:column; gap: var(--s4);
  color: var(--ink); box-shadow: var(--shadow); }
.row { display:flex; flex-direction:column; gap: var(--s2); }
.label { font-weight:500; font-size:.92rem; }
.input { width:100%; min-height:52px; padding: var(--s3) var(--s4);
  border:1px solid var(--line-2); border-radius: var(--r2);
  background: var(--ground); color: var(--ink); font:inherit; font-size:.95rem;
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease); }
textarea.input { min-height:124px; resize:vertical; line-height:1.7; }
.input:focus { outline:none; border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--orange); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 24%, transparent); }
.err { color: var(--orange-ink); font-size:.84rem; font-weight:500; }
.form__note { color: var(--ink-3); font-size:.84rem; text-align:center; }
.form__ok { background: var(--blue-wash); color: var(--blue); border-radius: var(--r2);
  padding: var(--s4); font-weight:500; font-size:.95rem; }
.form__summary { background: var(--orange-wash); border:1px solid var(--orange);
  border-radius: var(--r2); padding: var(--s4) var(--s5); display:flex; flex-direction:column; gap: var(--s2); }
.form__summary h3 { font-size:1rem; color: var(--orange-ink); }
.form__summary a { color: var(--orange-ink); font-size:.92rem; font-weight:500; }

/* ═════════ FOOTER ═════════ */
.footer { background: var(--navy); color:#B4C0DA; padding-block: var(--s8) var(--s5); }
.footer__top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--s5); padding-block-end: var(--s7); border-block-end:1px solid rgba(255,255,255,.12); }
/* الهامش التلقائي يبقي الشعار في نهاية السطر حتى حين ينزل وحده على سطر ضيّق. */
.footer__logo { height:34px; width:auto; margin-inline-start:auto; }
.footer__line { font-size: clamp(1rem,.9rem + .6vw,1.4rem); font-weight:700; color:#fff; }
.footer__grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap: var(--s6); padding-block: var(--s7); }
.footer h2 { font-size:.9rem; color:#fff; margin-block-end: var(--s3); }
.footer ul { display:flex; flex-direction:column; gap: var(--s1); }
.footer ul a { display:inline-flex; align-items:center; min-height:28px; }
.footer a, .footer li { color:#B4C0DA; font-size:.92rem; }
.footer a:hover { color:#fff; }
.footer__bar { border-block-start:1px solid rgba(255,255,255,.12); padding-block-start: var(--s5);
  font-size:.84rem; color:#8A94B2; }

/* ═════════ LIGHTBOX ═════════ */
.lb { position:fixed; inset:0; z-index:250; background: rgba(1,13,39,.94);
  display:grid; place-items:center; padding: var(--s6); }
.lb__img { max-width:min(1100px,92vw); max-height:84vh; width:auto; border-radius: var(--r2); }
.lb__close, .lb__nav { position:absolute; background: rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius: var(--pill);
  width:52px; height:52px; font-size:1.6rem; line-height:1; display:grid; place-items:center; }
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.24); }
.lb__close { inset-block-start: var(--s5); inset-inline-end: var(--s5); }
.lb__nav--prev { inset-inline-start: var(--s5); }
.lb__nav--next { inset-inline-end: var(--s5); }

/* ═════════ REVEAL — readable at rest ═════════ */
@keyframes rise { from { opacity:0; transform: translateY(14px) } to { opacity:1; transform:none } }
.js .reveal.is-in { animation: rise var(--d3) var(--ease) both; }

/* ═════════ THEME SWAPS ═════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon--sun { display:none; }
  :root:not([data-theme="light"]) .icon--moon { display:block; }
  :root:not([data-theme="light"]) .header.is-stuck .logo--rev { display:block; }
  :root:not([data-theme="light"]) .header.is-stuck .logo--pos { display:none; }
}
:root[data-theme="dark"] .icon--sun { display:none; }
:root[data-theme="dark"] .icon--moon { display:block; }
:root[data-theme="dark"] .header.is-stuck .logo--rev { display:block; }
:root[data-theme="dark"] .header.is-stuck .logo--pos { display:none; }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width:1024px){
  .why__grid, .contact__grid { grid-template-columns:1fr; }
  .contact__media { inline-size:100%; opacity:.35; }
  .contact::before { background: linear-gradient(to bottom, rgba(1,13,39,.88), var(--navy) 62%); }
}
@media (max-width:860px){
  :root { --hh:64px; }
  .nav, .header__cta { display:none; }
  .burger { display:block; }
  .header__actions { margin-inline-start:auto; }
  .hero__foot { flex-direction:column; align-items:flex-start; }
  .hero__cue { display:none; }
}
@media (max-width:560px){
  .logo { height:24px; } .footer__logo { height:28px; }
  .btn { width:100%; }
  .hero__actions { flex-direction:column; align-items:stretch; }
  .hero { min-height:auto; }
  .shot { inline-size: 78vw; }
  .lb__nav { width:44px; height:44px; }
}

/* ═════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  .ticker__track { animation:none; transform:none; }
  .hero__cue::after { animation:none; }
  .js .reveal.is-in, .js .shot.is-in img { animation:none; }
  .hero.is-ready .line__in, .hero.is-ready .kicker, .hero.is-ready .hero__lede,
  .hero.is-ready .hero__actions, .hero.is-ready .hero__foot { animation:none; }
  .boot { display:none; }
}

/* ═════════ PARTNERS — a dark chapter of its own ═════════ */
.partners {
  position:relative; isolation:isolate; overflow:hidden;
  background: var(--navy); color:#fff;
  padding-block: var(--sec);
}
.partners::before {
  content:""; position:absolute; z-index:-1;
  inset-block-start:-30%; inset-inline-start:-8%;
  width:48vw; aspect-ratio:1; max-width:100%;
  background: radial-gradient(circle, rgba(0,82,253,.55), transparent 68%);
}
.partners__head { margin-block-end: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }

.pgrid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }
.pcard {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: var(--s3); padding: var(--s6) var(--s4);
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14); border-radius: var(--r3);
  transition: border-color var(--d2) var(--ease), background-color var(--d2) var(--ease),
              transform var(--d3) var(--ease);
}
/* the pick square sweeps into the corner on hover */
.pcard::after {
  content:""; position:absolute; inset-block-start:0; inset-inline-end:0;
  width:46px; height:46px; background: var(--orange);
  border-end-start-radius: 16px;
  transform: translate(0,-100%); opacity:0;
  transition: transform var(--d3) var(--ease), opacity var(--d2) var(--ease);
}
[dir="rtl"] .pcard::after { transform: translate(0,-100%); }
.pcard:hover, .pcard:focus-within {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.09);
  transform: translateY(-6px);
}
.pcard:hover::after, .pcard:focus-within::after { transform: translate(0,0); opacity:1; }

.pcard__logo {
  display:grid; place-items:center; flex:0 0 auto;
  width:100%; height:64px;
}
.pcard__logo img { max-height:56px; width:auto; object-fit:contain; }
/* no logo file yet: a monogram keeps the grid even */
.pcard__mono {
  display:grid; place-items:center; width:58px; height:58px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  font-size:1.5rem; font-weight:800; color:#fff; line-height:1;
}
.pcard__name { font-weight:700; font-size:1.02rem; line-height:1.5; color:#fff; }
a.pcard:hover { text-decoration:none; }
.pgrid:empty { display:none; }

@media (max-width:1024px){ .pgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .pgrid { grid-template-columns: 1fr; } }

/* ═════════ WHY ═════════ */
.why__title {
  font-size: clamp(2rem, 1.5rem + 2.3vw, 3.3rem);
  line-height:1.4; letter-spacing:-.025em;
}


/* ═════════ DIRECT LINES ═════════ */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.direct { background: var(--ground); border-block-start:1px solid var(--line); }
.direct__inner {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap: var(--s5) clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.direct__lines { display:flex; flex-wrap:wrap; align-items:center; gap: var(--s4) clamp(1.5rem,1rem + 3vw,4rem); }
.social { display:flex; align-items:center; gap: var(--s3); }
.social__btn {
  display:grid; place-items:center; width:48px; height:48px;
  border-radius: var(--pill); border:1px solid var(--line-2);
  color: var(--ink-2); background: var(--surface);
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease),
              border-color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.social__btn svg { width:21px; height:21px; }
.social__btn:hover { background: var(--navy); border-color: var(--navy); color:#fff; transform: translateY(-2px); }
.direct__item {
  display:inline-flex; align-items:center; gap: var(--s3);
  color: var(--ink); font-weight:700;
  font-size: clamp(1rem, .92rem + .5vw, 1.35rem);
  padding: var(--s2) var(--s3); border-radius: var(--r2);
  transition: color var(--d1) var(--ease);
}
.direct__item:hover { color: var(--blue); text-decoration:none; }
.direct__ico {
  display:grid; place-items:center; flex:0 0 auto;
  width:48px; height:48px; border-radius: var(--pill);
  background: var(--blue-wash); color: var(--blue);
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.direct__item:hover .direct__ico { background: var(--orange); color:#fff; }
.direct__ico svg { width:22px; height:22px; }
.direct__val { letter-spacing:.01em; }

.footer__lines a { display:inline-flex; align-items:center; gap: var(--s2); }
.footer__lines svg { width:17px; height:17px; flex:0 0 auto; }

@media (max-width:760px){
  .svc__list { grid-template-columns: 1fr; }
  .direct__inner { flex-direction:column; align-items:center; }
  .direct__lines { flex-direction:column; align-items:center; }
  .direct__item { justify-content:center; }
}

/* ═════════ BOOT ═════════
   A navy sheet sits over the first paint and lifts once the fonts have
   resolved, so the hero never flashes a fallback face mid-animation. It is
   inserted by JavaScript, so a page without JavaScript never sees it. */
.boot {
  position: fixed; inset: 0; z-index: 400; background: var(--navy);
  pointer-events: none; animation: bootOut 620ms var(--ease) both;
}
@keyframes bootOut { 0%,38% { opacity:1 } 100% { opacity:0 } }

/* ═════════ REEL: keyboard parity with the drag ═════════ */
.reel__track { scroll-behavior: smooth; }
.reel__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r2); }
.shot:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r3); }
.reel__bar span { transition: transform var(--d2) var(--ease); }

/* ═════════ LIGHTBOX: arrives, not appears ═════════ */
@keyframes lbIn  { from { opacity:0 } to { opacity:1 } }
@keyframes lbImg { from { opacity:0; transform: scale(.965) } to { opacity:1; transform:none } }
.js .lb:not([hidden])     { animation: lbIn var(--d2) var(--ease) both; }
.js .lb:not([hidden]) .lb__img { animation: lbImg var(--d3) var(--ease) both; }
.lb__close, .lb__nav { transition: background-color var(--d1) var(--ease), transform var(--d1) var(--ease); }
.lb__close:hover, .lb__nav:hover { transform: scale(1.06); }

/* ═════════ FORM: the submit says what it is doing ═════════ */
.form { transition: opacity var(--d2) var(--ease); }
.form.is-busy { opacity:.62; pointer-events:none; }
.btn[aria-busy="true"] { position:relative; color: transparent; }
.btn[aria-busy="true"]::after {
  content:""; position:absolute; inset-block-start:calc(50% - 9px); inset-inline-start:calc(50% - 9px);
  width:18px; height:18px; border-radius:50%;
  border:2px solid currentColor; border-block-start-color: var(--navy);
  color: rgba(1,13,39,.35);
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.form__ok--bad { background: var(--orange-wash); color: var(--orange-ink); }

/* ═════════ LANGUAGE SWAP: a beat, not a jump ═════════ */
.js body { transition: opacity var(--d1) var(--ease); }
.js body.is-swapping { opacity:.35; }

/* ═════════ SECTION HEADINGS rise with their section ═════════ */
.js .shead__title.reveal.is-in { animation: rise var(--d4) var(--ease) both; }

/* ═════════ PARTNERS: the row settles one card at a time ═════════ */
.pcard__name { transition: color var(--d2) var(--ease); }
.pcard:hover .pcard__name { color:#fff; }
.pcard__logo img { transition: transform var(--d3) var(--ease); }
.pcard:hover .pcard__logo img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .js .lb:not([hidden]), .js .lb:not([hidden]) .lb__img,
  .js .shead__title.reveal.is-in { animation:none; }
  .reel__track { scroll-behavior:auto; }
  .js body.is-swapping { opacity:1; }
}

/* ═════════ ACCEPTANCE CHECKBOX ═════════
   The native box is kept in the accessibility tree and driven from the label;
   only its painted face is replaced, so focus, Space and the required state
   all behave exactly as the browser intends. */
.row--check { margin-block-start: var(--s2); }
.check {
  display:flex; align-items:flex-start; gap: var(--s3);
  cursor:pointer; font-size:.9rem; line-height:1.7; color: var(--ink-2);
}
.check__box { position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer; }
.check__mark {
  flex:0 0 auto; display:grid; place-items:center;
  inline-size:22px; block-size:22px; margin-block-start:.2rem;
  border:1px solid var(--line-2); border-radius: var(--r1);
  background: var(--ground); color: transparent;
  transition: background-color var(--d1) var(--ease), border-color var(--d1) var(--ease),
              color var(--d1) var(--ease);
}
.check__mark svg { inline-size:15px; block-size:15px; }
.check:hover .check__mark { border-color: var(--blue); }
.check__box:checked ~ .check__mark { background: var(--blue); border-color: var(--blue); color:#fff; }
.check__box:focus-visible ~ .check__mark { outline:3px solid var(--focus); outline-offset:3px; }
.check__box[aria-invalid="true"] ~ .check__mark { border-color: var(--orange); }
.check__text a { color: var(--blue); text-decoration: underline; text-underline-offset:3px; }
.check__text a:hover { color: var(--blue-deep); }

/* the footer rule now carries the legal link beside the notice */
.footer__bar {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--s2) var(--s5);
}
.footer__bar a { color:#8A94B2; }
.footer__bar a:hover { color:#fff; }

/* ═════════ TERMS PAGE ═════════ */
.legal { padding-block: calc(var(--hh) + var(--s8)) var(--sec); }
.legal__head { margin-block-end: clamp(2rem,1.2rem + 2.4vw,3.5rem); }
.legal__head h1 { font-size: var(--t-h2); margin-block-start: var(--s3); }
.legal__updated { color: var(--ink-3); font-size:.88rem; margin-block-start: var(--s3); }
.legal__body { max-width: 68ch; display:flex; flex-direction:column; gap: var(--s6); }
.legal__body section { display:flex; flex-direction:column; gap: var(--s3); }
.legal__body h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); }
.legal__body p, .legal__body li { color: var(--ink-2); font-size:.98rem; }
.legal__body ul { display:flex; flex-direction:column; gap: var(--s2); }
.legal__body li { padding-inline-start: var(--s5); position:relative; }
.legal__body li::before {
  content:""; position:absolute; inset-block-start:.7em; inset-inline-start:0;
  inline-size:5px; block-size:5px; border-radius:2px; background: var(--blue); opacity:.7;
}
.legal__note {
  border-inline-start:2px solid var(--orange); padding-inline-start: var(--s5);
  color: var(--ink-2); font-size:.92rem;
}
.legal__back { display:inline-flex; align-items:center; gap:var(--s2); font-weight:500; }

/* ═════════ LANDING — صفحة هدف واحد ═════════
   لا قائمة تنقّل ولا روابط جانبية: كل شيء يقود إلى النموذج. */
.lp { background: var(--ground); }
.lp__bar {
  position:sticky; inset-block-start:0; z-index:100;
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block-end:1px solid rgba(255,255,255,.1);
}
.lp__bar .wrap { display:flex; align-items:center; justify-content:space-between;
  gap: var(--s4); min-height:66px; }
[dir="rtl"] .lp__bar .wrap { flex-direction: row-reverse; }
.lp__bar .logo { height:26px; }

.lp__hero { position:relative; isolation:isolate; color:#fff; overflow:hidden;
  padding-block: clamp(3.5rem,2rem + 7vw,7rem); }
.lp__hero .hero__media { inset:-6% 0; }
/* العلم هو موضوع الصورة، والقص الافتراضي كان يزيحه خارج الكادر. هذا الموضع
   يضعه في الفراغ بين بطاقة النموذج والنص، فيُقرأ بدل أن يصير حافة داكنة. */
.lp__hero .hero__media img { object-position: 58% 45%; }
.lp__grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(2rem,1rem + 4vw,4.5rem); align-items:center; }
.lp__copy { display:flex; flex-direction:column; gap: var(--s5); align-items:flex-start; }
.lp__title { font-size: clamp(2rem,1.4rem + 2.6vw,3.4rem); line-height:1.32;
  max-inline-size: 18ch; }
.lp__lede { font-size: var(--t-lede); color: rgba(255,255,255,.9); max-width: 46ch; }

/* ما يشمله العرض: قائمة تُقرأ بلمحة */
.lp__list { display:flex; flex-direction:column; gap: var(--s3); }
.lp__list li { display:flex; align-items:flex-start; gap: var(--s3);
  font-size:.98rem; color:#E4EAF6; }
.lp__tick { flex:0 0 auto; display:grid; place-items:center;
  inline-size:22px; block-size:22px; margin-block-start:.15rem;
  border-radius: var(--pill); background: rgba(255,255,255,.14); color:#fff; }
.lp__tick svg { inline-size:13px; block-size:13px; }

/* بطاقة النموذج: هي السطح الوحيد ذو الظل في الصفحة، كما في الرئيسية */
.lp__form { background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r3); padding: clamp(1.5rem,1rem + 2vw,2.5rem);
  display:flex; flex-direction:column; gap: var(--s4); color: var(--ink);
  box-shadow: var(--shadow); }
.lp__form h2 { font-size: clamp(1.3rem,1.1rem + .7vw,1.7rem); }
.lp__form .shead__lede { font-size:.95rem; }

/* شريط الأعمال: دليل بصري بلا تفاصيل تشتّت */
.lp__proof { padding-block: clamp(2.5rem,1.5rem + 3vw,4rem); }
.lp__shots { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: var(--s4); }
.lp__shots img { width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: var(--r2); background: var(--ground-2); }

.form__consent { color: var(--ink-3); font-size:.82rem; line-height:1.7; text-align:center; }
.form__consent a { color: var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.form__consent a:hover { color: var(--blue); }

@media (max-width:900px){
  .lp__grid { grid-template-columns:1fr; }
  .lp__copy { order:1 }
  .lp__form { order:2 }
}