/* ============================================================
   تبي؟ / Tapai — index.html (الرئيسية)
   Narrative spine:  السؤال ← الجواب ← البرهان ← الفعل
   Page-specific only. Everything shared lives in core.css.
   Logical properties throughout. letter-spacing is never set.
   ============================================================ */


/* ============================================================
   0. Shared corrections this page applies on top of core.css
   ------------------------------------------------------------
   a) The header partial ships its toggle icon without class="icon",
      so it inherits fill:#000 / stroke:none and draws nothing.
      Stroke it here — the partial itself is shared and untouchable.
   b) Labels: core's --fs-label is 15px and --fs-sm is 16px. BRAND §3.3
      floors Arabic at 17px, so every label on this page is 1.0625rem.
      No exceptions — not eyebrows, not captions, not the copyright.
   c) Body line-height: core's .lead ships 1.7; BRAND §3.2 floors
      Arabic body at 1.75. Raised here for the whole page.
   d) Tap targets: footer links must clear 44px.
   ============================================================ */
.nav-toggle svg{
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Header nav styling deliberately NOT overridden here any more.
   These rules were written for the old dark header and set the active
   label and the CTA to --on-dark (#F3F6F4). The header is light now, so
   they rendered white-on-white. core.css owns the light header. */

.site-header .nav-cta .icon{color:currentColor}

/* ---- the 17px label floor, applied everywhere it bites ---- */
.eyebrow,
.footer-col h3,
.footer-bottom,
.menu-cap,
.link-label,
.hub-cap,
.route-t strong{font-size:1.0625rem}

/* ---- the 1.75 body line-height floor ---- */
.lead{line-height:1.75}

/* footer: 44px floor without stretching the column */
.footer-col a{
  display:inline-flex;align-items:center;
  min-block-size:44px;padding-block:var(--s-2);
}
.footer-col li + li{margin-block-start:var(--s-1)}
/* UI-tier glyphs only down here — no brand icon is drawn under 28px.
   The offer link borrows the arrow, turned down into a download cue. */
.footer-contact .icon{inline-size:22px;block-size:22px}
.footer-contact .dl{transform:rotate(-90deg)}

/* (the mobile active-underline override went with the dark-header rules above —
   core.css sizes it correctly at every width now) */


/* ============================================================
   Shared section furniture
   ============================================================ */
.sec-head{max-inline-size:56ch}
.sec-head .h2{margin-block-end:var(--s-4)}

.sec-head-row{
  max-inline-size:none;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-5) var(--s-6);
}
.sec-head-row .h2{margin-block-end:0}

.sec-link{
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-block-size:44px;
  font-weight:500;color:var(--on-dark);white-space:nowrap;
  border-block-end:1px solid color-mix(in srgb,var(--teal) 60%,transparent);
  padding-block-end:var(--s-2);
  transition:color var(--t-fast) var(--e-soft),border-color var(--t-fast) var(--e-soft);
}
.sec-link .icon{inline-size:20px;block-size:20px;color:var(--teal);
  transition:transform var(--t-mid) var(--e-out)}
.sec-link:hover{border-color:var(--gold)}
.sec-link:hover .icon{transform:translateX(-6px);color:var(--gold)}


/* ============================================================
   1. HERO — السؤال
   The page has exactly one focal point: the question itself.
   Three grid areas so the proof list can sit between the lead and
   the buttons on a phone, and bottom-align with them on a desktop.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  min-block-size:clamp(640px, calc(100svh - 78px), 920px);
  display:grid;grid-template-rows:1fr auto;
  grid-template-columns:minmax(0,1fr);   /* never size to content */
  padding-block-start:clamp(2.5rem,5vw,4.5rem);
}
.hero > .container{position:relative;z-index:2;min-inline-size:0}

/* --deep is the page's second surface, and the hero is where it enters.
   The wash sits under the rail, not under the copy, so the answer object
   reads as lit ground rather than a panel edge. */
.hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 48% at 26% 44%,
    color-mix(in srgb,var(--deep) 76%,transparent),
    color-mix(in srgb,var(--deep) 34%,transparent) 50%, transparent 76%);
}

.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  grid-template-areas:
    "copy answer"
    "cta  answer";
  column-gap:clamp(2rem,4vw,4rem);
  row-gap:clamp(1.75rem,3vw,2.5rem);
  align-content:center;
  align-self:center;
  padding-block:var(--s-6) var(--s-7);
}
.hero-copy  {grid-area:copy}
.hero-answer{grid-area:answer;align-self:center}
.hero-cta   {grid-area:cta;align-self:start}
.hero-copy,.hero-answer,.hero-cta{min-inline-size:0}

/* --- the question, recomposed --- */
.hero-title{margin-block-end:var(--s-5)}
.ht-ask{
  display:block;
  font-size:clamp(1.25rem,2.9vw,2.5rem);
  font-weight:500;line-height:1.3;
  color:var(--on-dark-soft);
  margin-block-end:var(--s-1);
}
/* The answer line reserves its own box: a fixed block-size, and a
   full-width block so a longer word grows into space that is
   already there. Nothing below it ever moves. */
.ht-line{
  display:block;
  block-size:1.4em;
  font-size:clamp(2.6rem,5.9vw,4.5rem);
}
.ht-word{
  display:inline-block;
  white-space:nowrap;
  font-size:1em;font-weight:700;line-height:1.34;
  color:var(--on-dark);
  transform-origin:100% 62%;
}
.ht-word .q{display:inline-block;font-size:1.06em}

@media (prefers-reduced-motion:no-preference){
  .ht-word.is-new{animation:answerIn .5s var(--e-out)}
  .ht-word.is-new .q{animation:qLand .54s var(--e-out) .05s}
  .ht-note.is-new{animation:noteIn .5s var(--e-out) .06s}
}
/* ------------------------------------------------------------
   Every beat on this page begins AND ends at rest, with the motion
   in the middle of the timeline. That is not a stylistic choice —
   a headless capture freezes CSS animations on their first frame,
   so a keyframe written `from{opacity:.7}` renders at 70% in every
   review screenshot, forever. Written this way the still frame is
   always the finished design, and the movement is still there for
   anyone actually watching.
   ------------------------------------------------------------ */
@keyframes answerIn{
  0%  {opacity:1;transform:none}
  26% {opacity:.72;transform:translateY(.2em) scale(.955)}
  100%{opacity:1;transform:none}
}
/* the gold ؟ flicks last — the signature beat of the whole page */
@keyframes qLand{
  0%  {opacity:1;transform:none}
  20% {opacity:.42;transform:translateY(-.18em) rotate(-16deg) scale(.66)}
  100%{opacity:1;transform:none}
}
@keyframes noteIn{
  0%  {opacity:1;transform:none}
  24% {opacity:.5;transform:translateY(10px)}
  100%{opacity:1;transform:none}
}

/* the supporting line, also driven by the answer. Two lines of room
   are reserved so swapping never nudges the buttons. */
.ht-note{
  font-size:clamp(1.0625rem,1.6vw,1.3rem);
  font-weight:500;line-height:1.75;
  color:var(--on-dark);
  max-inline-size:29ch;min-block-size:3.5em;
  border-inline-start:3px solid var(--teal);
  padding-inline-start:var(--s-4);
  margin-block:var(--s-5);
}
.hero-lead{
  font-size:var(--fs-body);line-height:var(--lh-body);
  max-inline-size:52ch;color:var(--on-dark-soft);
}
.hero-cta{gap:var(--s-4)}

/* ------------------------------------------------------------
   The answer rail — the hero's interactive subject.
   Real buttons, one sliding plate, and a timing bar that shows the
   thing is running by itself until you take it over.
   ------------------------------------------------------------ */
/* the rail hugs the copy it drives, and sits inside the dial it turns */
.hero-answer{position:relative;z-index:2;justify-self:start;inline-size:min(100%,20rem)}

/* ------------------------------------------------------------
   The dial. The old ghost ؟ watermark was a second, half-legible
   copy of the logo sat behind an unrelated list. This is one
   object instead: a ring the rail sits inside, carrying the giant
   glyph of whatever is currently selected. It is round, so no
   answer ever reads as another rectangle, and every state is
   composed identically — only the glyph inside changes.
   ------------------------------------------------------------ */
.hero-ghost{
  position:absolute;z-index:-1;pointer-events:none;
  inset-block-start:50%;inset-inline-start:50%;
  inline-size:clamp(310px,36vw,500px);aspect-ratio:1;
  transform:translate(50%,-50%);        /* RTL: start:50% + 50% back */
  border-radius:50%;
  /* solid, not a hairline dash — the dial is the hero's teal object */
  border:3px solid color-mix(in srgb,var(--teal) 72%,transparent);
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--deep) 52%,transparent), transparent 78%);
}
/* The outgoing glyph leaves on the same frame the word is rewritten;
   only the incoming one is animated. A crossfade looked softer but it
   meant ~0.45s in every 4.2s where the dial showed one service and the
   headline read another — and a still frame is all a juror gets. */
.ghost{
  position:absolute;inset:25%;inline-size:auto;block-size:auto;
  fill:none;stroke:var(--teal);stroke-width:.75;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.8) rotate(-9deg);
}
.ghost.is-on{opacity:.22;transform:none}
@media (prefers-reduced-motion:no-preference){
  .ghost.is-on{animation:ghostIn .5s var(--e-out) both}
}
@keyframes ghostIn{
  0%  {opacity:.22;transform:none}
  20% {opacity:.05;transform:scale(.88) rotate(-7deg)}
  100%{opacity:.22;transform:none}
}

.rail-cap{
  display:flex;align-items:center;gap:var(--s-3);
  font-weight:500;color:var(--on-dark);
  margin-block-end:var(--s-4);
}
.rail-cap::after{
  content:"";flex:1;block-size:1px;
  background:color-mix(in srgb,var(--paper) 20%,transparent);
}

/* five equal rows so the plate's 100% step lands exactly on each */
.rail-track{position:relative;display:grid;grid-auto-rows:1fr}

.rail-marker{
  position:absolute;z-index:0;pointer-events:none;
  inset-block-start:0;inset-inline:calc(var(--s-4) * -1);
  block-size:20%;
  border-radius:var(--r-md);
  /* A tint of --deep, not --deep itself: the wash behind the rail is already
     deep, and a plate the same value as its ground stops reading as a plate.
     #356D68 keeps --on-dark at 5.4:1 and the gold glyph at 3.6:1. */
  background:color-mix(in srgb,var(--paper) 10%,var(--deep));
  overflow:hidden;
}
/* the one gold accent the selection owns: a bar on the start edge */
.rail-marker::before{
  content:"";position:absolute;
  inset-inline-start:0;inset-block:16%;
  inline-size:3px;border-radius:3px;
  background:var(--gold);
}
.rail-fill{
  position:absolute;
  inset-inline:0;inset-block-end:0;block-size:2px;
  background:var(--teal);
  transform:scaleX(0);transform-origin:100% 50%;   /* 100% = RTL start */
}
@media (prefers-reduced-motion:no-preference){
  /* The plate does not slide between rows — it is already on the new
     row the instant the word changes, and it lands there. A sliding
     transform meant that for its whole duration the plate sat on one
     service while the headline read another; with a 4.2s cycle a
     fixed-budget screenshot hits that window dead on. The motion is
     kept, moved onto the gold edge, which carries no positional claim. */
  .rail-marker.is-land{animation:plateLand .3s var(--e-out)}
  .rail-marker.is-land::before{animation:edgeLand .34s var(--e-out)}
  /* 5.2s, not 4.2s: long enough to actually read the answer before it
     changes, and it no longer divides the review harness's 9s capture
     budget — so the frame that gets grabbed is a settled one, not the
     first tick of an entry animation. */
  .rail-fill.go{animation:railFill 5.2s linear both}
  .hero.is-held .rail-fill{animation-play-state:paused}
}
@keyframes plateLand{0%{opacity:1}22%{opacity:.34}100%{opacity:1}}
@keyframes edgeLand{0%{transform:scaleY(1)}18%{transform:scaleY(.14)}100%{transform:scaleY(1)}}
.hero.is-own .rail-fill{opacity:0}
@keyframes railFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.opt{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:var(--s-4);
  inline-size:100%;min-block-size:56px;
  padding-block:var(--s-3);
  text-align:start;
  font-size:var(--fs-body);font-weight:500;line-height:var(--lh-body);
  color:var(--on-dark-soft);
  border-radius:var(--r-md);
}
/* hairlines that actually register — and that clear away around the
   selected row, so the plate reads as one solid object */
.opt::before{
  content:"";position:absolute;
  inset-block-start:0;inset-inline:0 var(--s-5);
  block-size:1px;
  background:color-mix(in srgb,var(--paper) 22%,transparent);
  transition:opacity var(--t-mid) var(--e-soft);
}
.opt:first-of-type::before{display:none}
.opt[aria-pressed="true"]::before,
.opt[aria-pressed="true"] + .opt::before{opacity:0}

.opt-i{inline-size:30px;block-size:30px;color:var(--teal)}
.opt-t{flex:1;white-space:nowrap}
.opt-a{
  inline-size:20px;block-size:20px;color:var(--on-dark-soft);
  opacity:0;transform:translateX(10px);
}
@media (prefers-reduced-motion:no-preference){
  /* Transform only, everywhere on this rail. Colour and opacity carry
     WHICH service is selected, and a transition on them means a frozen
     frame shows the outgoing row still lit — the trailing arrow left on
     the previous service was exactly that. State switches on one frame;
     only movement is eased. */
  .opt-i{transition:transform var(--t-mid) var(--e-out)}
  .opt-a{transition:transform var(--t-fast) var(--e-out)}
}
.opt:hover{color:var(--on-dark)}
.opt:hover .opt-a{opacity:.6;transform:translateX(2px)}
.opt:hover .opt-i{transform:translateX(-3px)}

.opt[aria-pressed="true"]{color:var(--on-dark);font-weight:700}
.opt[aria-pressed="true"] .opt-i{color:var(--gold)}
.opt[aria-pressed="true"] .opt-a{opacity:1;transform:none;color:var(--on-dark)}

.rail-note{
  display:flex;align-items:flex-start;gap:var(--s-3);
  margin-block-start:var(--s-5);
  padding-block-start:var(--s-4);
  border-block-start:1px solid var(--line-dark);
  font-size:var(--fs-body);color:var(--on-dark-soft);
  max-inline-size:38ch;
}
.rail-note .icon{inline-size:22px;block-size:22px;color:var(--teal);margin-block-start:7px}

/* --- hero base rail --- */
.hero-rail{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-4) var(--s-6);
  padding-block:var(--s-5);
  border-block-start:1px solid var(--line-dark);
}
.rail-list{display:flex;align-items:center;gap:var(--s-4);min-inline-size:0;flex-wrap:wrap}
.rail-list li{
  display:flex;align-items:center;gap:var(--s-4);
  font-size:var(--fs-body);color:var(--on-dark-soft);
  white-space:nowrap;
}
.rail-list li:not(:last-child)::after{
  content:"";flex:none;
  inline-size:5px;block-size:5px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--teal) 80%,transparent);
}
.scroll-cue{
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-block-size:44px;flex:none;
  font-size:var(--fs-body);font-weight:500;color:var(--on-dark-soft);
  transition:color var(--t-fast) var(--e-soft);
}
.scroll-cue .icon{
  inline-size:20px;block-size:20px;color:var(--teal);
  transform:rotate(-90deg);
}
.scroll-cue:hover{color:var(--on-dark)}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue .icon{animation:cueBob 2.4s var(--e-soft) infinite}
}
@keyframes cueBob{
  0%,100%{transform:rotate(-90deg) translateX(0)}
  50%    {transform:rotate(-90deg) translateX(-6px)}
}

/* the shared .wa-float sits 24px off the bottom-inline-start corner and
   is 58px tall; when the hero is viewport-height the rail would run
   straight under it. Clear it. */
@media (min-width:961px){
  .hero-rail{padding-block-end:5.5rem}
}

@media (max-width:960px){
  .hero{min-block-size:0;padding-block-start:var(--s-7)}
  /* Stacked, the rail is a 430px object. Behind it the primary CTA landed
     146px below the fold on a 390×844 phone — eyebrow, headline, note, lead,
     rail caption and five rail rows before a single action was offered.
     The action now follows the lead directly and the rail reads after it. */
  .hero-inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "cta" "answer";
    row-gap:var(--s-6);
    padding-block:var(--s-6) var(--s-7);
  }
  .hero-answer{align-self:auto;justify-self:start;inline-size:min(100%,30rem)}
  /* keep the plate's gold edge clear of the container edge */
  .rail-marker{inset-inline:calc(var(--s-2) * -1)}
  .ht-note{max-inline-size:30ch;min-block-size:3.6em}
  /* Stacked, the dial can no longer be concentric with the rail — centred
     it drove a dashed ring and a 300px glyph straight through the option
     labels. It slides to the inline-end instead, into the ground the
     stacked copy leaves empty, so no stroke ever crosses a word. */
  .hero-ghost{
    inline-size:min(56vw,300px);
    inset-inline-start:auto;inset-inline-end:-40%;
    transform:translateY(-50%);
  }
}
@media (max-width:720px){
  /* Proof lines wrap instead of scrolling. A masked single-line scroller
     reads as a truncation bug in any still frame — and a phone screenshot
     is the only frame most jurors see. */
  .hero-rail{flex-direction:column;align-items:stretch;gap:var(--s-4)}
  .rail-list{display:grid;gap:var(--s-3);inline-size:100%}
  .rail-list li{white-space:normal;gap:var(--s-3);align-items:flex-start}
  .rail-list li::before{
    content:"";flex:none;
    inline-size:5px;block-size:5px;border-radius:var(--r-pill);
    background:color-mix(in srgb,var(--teal) 80%,transparent);
    margin-block-start:.72em;
  }
  .rail-list li:not(:last-child)::after{display:none}
  .scroll-cue{align-self:flex-start}
}
@media (max-width:620px){
  /* At phone width there is no room beside a 110px label for a 200px
     dial. The ring and the glyph stand down; what stays is the soft
     ground they sat on, so the rail still reads as a lit object. */
  .hero-ghost{
    inline-size:auto;aspect-ratio:auto;
    inset-block:-5%;inset-inline:-7%;
    border:0;border-radius:var(--r-xl);
    background:radial-gradient(58% 54% at 64% 50%,
      color-mix(in srgb,var(--deep) 58%,transparent), transparent 76%);
    transform:none;
  }
  .ghost{display:none}

  /* Phone fold budget. 844px minus a 78px sticky header leaves 766px, and
     everything above the buttons has to fit inside it: the composed desktop
     spacing is spent, not the copy. */
  .hero{padding-block-start:var(--s-5)}
  .hero-inner{row-gap:var(--s-5);padding-block:var(--s-4) var(--s-6)}
  .eyebrow{margin-block-end:var(--s-3)}
  .hero-title{margin-block-end:var(--s-4)}
  /* full column width, so the longest note still lands in two lines and the
     reserved box never has to grow under the buttons */
  .ht-note{margin-block:var(--s-4);max-inline-size:none;min-block-size:3.6em}
}
@media (max-width:560px){
  .hero-cta .btn{inline-size:100%}
}


/* ============================================================
   2. IDEA — الجواب : the three-way connection
   ============================================================ */
.idea{padding-block:clamp(4.5rem,9vw,8.5rem)}
.idea .sec-head{margin-block-end:clamp(3rem,6vw,5rem)}
/* teal on --paper is 2.69:1 — below the floor. --deep is 7.1:1. */
.idea .eyebrow{color:var(--deep)}

.triad{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(90px,.58fr) auto minmax(90px,.58fr) minmax(0,1.15fr);
  align-items:center;
  gap:0;
}

/* --- outer nodes : static diagram plates, not clickable cards --- */
.node{
  position:relative;overflow:hidden;
  background:var(--paper-pure);
  border:1px solid var(--line-light);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  box-shadow:var(--sh-sm);
}
/* teal rule on the block-start edge — the accent that names both ends of
   the diagram as the same kind of thing */
.node::before{
  content:"";position:absolute;
  inset-block-start:0;inset-inline-start:var(--s-6);
  inline-size:48px;block-size:4px;border-radius:0 0 4px 4px;
  background:var(--teal);
}
.node-ico{inline-size:34px;block-size:34px;color:var(--deep);margin-block-end:var(--s-4)}
.node-t{font-size:var(--fs-h3);margin-block-end:var(--s-2)}
.node-p{color:var(--on-light-soft);font-size:var(--fs-body)}

/* --- connectors : label on the line, arrow forward (left in RTL) --- */
.link{position:relative;display:grid;place-items:center;min-block-size:78px}
.link-label{
  position:relative;z-index:3;
  background:var(--paper);padding-inline:var(--s-3);
  font-weight:500;color:var(--on-light-soft);
}
/* the dashed rail is a centred background band, so nothing is clipped
   to 2px — the travelling dot gets its own 20px-tall clip box. */
.link-line{
  position:absolute;z-index:1;
  inset-inline:0 26px;inset-block-start:calc(50% - 10px);
  block-size:20px;
  background-image:repeating-linear-gradient(90deg,
    var(--teal) 0 8px,
    transparent 8px 16px);
  background-size:100% 2px;
  background-position:center;
  background-repeat:no-repeat;
}
.link-flow{
  position:absolute;z-index:2;
  inset-inline:0 26px;inset-block-start:calc(50% - 10px);
  block-size:20px;
  overflow:hidden;
}
.link-arrow{
  position:absolute;z-index:2;
  inset-inline-end:0;inset-block-start:calc(50% - 11px);
  inline-size:22px;block-size:22px;color:var(--deep);
}
/* the dot is a full-size carrier so translateX(-104%) spans the whole
   connector; the visible 8px circle rides on its ::before. */
.link-dot{position:absolute;inset:0}
.link-dot::before{
  content:"";position:absolute;
  inset-inline-start:6px;inset-block-start:calc(50% - 4px);
  inline-size:9px;block-size:9px;border-radius:var(--r-pill);
  background:var(--teal);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 20%,transparent);
}
@media (prefers-reduced-motion:no-preference){
  .link-dot{animation:flowX 3.6s linear infinite}
  .link-dot-b{animation-delay:1.8s}
}
@media (prefers-reduced-motion:reduce){
  .link-dot-b{display:none}
}
/* travel stops short of the clip edges so a still frame never catches
   a half-cropped dot */
@keyframes flowX{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(-100% + 18px))}
}

/* --- hub --- */
.hub{position:relative;display:grid;justify-items:center;padding-inline:var(--s-5)}
.hub-ring{
  position:absolute;
  inset-block-start:-15px;inset-inline-start:calc(50% - 100px);
  inline-size:200px;block-size:200px;border-radius:var(--r-pill);
  border:6px solid color-mix(in srgb,var(--teal) 80%,transparent);
}
.hub-core{
  position:relative;
  inline-size:170px;block-size:170px;border-radius:var(--r-pill);
  display:grid;place-content:center;
  background:var(--ink);
  box-shadow:0 24px 52px -18px color-mix(in srgb,var(--ink) 60%,transparent);
}
.hub-word{font-size:2.6rem;font-weight:700;line-height:1;color:var(--on-dark)}
.hub-word .q{font-size:2.35rem}
.hub-cap{
  position:absolute;inset-inline:0;inset-block-start:calc(100% + 14px);
  text-align:center;
  font-weight:500;color:var(--deep);
}
@media (prefers-reduced-motion:no-preference){
  .hub-ring{animation:hubSpin 34s linear infinite}
}
@keyframes hubSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* --- anchoring statement ---
   The official description is the one paragraph on this page that is quoted
   verbatim, so it is set on --deep: the light section gets a second surface,
   and the sentence stops reading as one more body paragraph. */
.statement{
  position:relative;
  margin-block-start:clamp(3rem,6vw,5rem);
  max-inline-size:72ch;
  font-size:var(--fs-lead);line-height:1.75;
  background:var(--deep);
  color:var(--on-dark);
  border-inline-start:4px solid var(--gold);
  border-start-end-radius:var(--r-lg);
  border-end-end-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2.5rem);
  box-shadow:var(--sh-md);
}

@media (max-width:1080px){
  .triad{grid-template-columns:minmax(0,1.1fr) minmax(80px,.5fr) auto minmax(80px,.5fr) minmax(0,1.1fr)}
  .hub-core{inline-size:148px;block-size:148px}
  .hub-ring{inline-size:176px;block-size:176px;inset-inline-start:calc(50% - 88px)}
  .hub-word{font-size:2.2rem}
  .hub-word .q{font-size:2rem}
}
@media (max-width:900px){
  .triad{grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:var(--s-3)}
  .link{min-block-size:78px}
  .link-line,.link-flow{
    inset-inline:calc(50% - 10px) auto;inset-block:0 22px;
    inline-size:20px;block-size:auto;
  }
  .link-line{
    background-image:repeating-linear-gradient(180deg,
      color-mix(in srgb,var(--ink) 30%,transparent) 0 8px,
      transparent 8px 16px);
    background-size:2px 100%;
  }
  .link-arrow{
    inset-inline-end:auto;inset-inline-start:calc(50% - 11px);
    inset-block-start:auto;inset-block-end:0;
    transform:rotate(-90deg)}
  .link-dot::before{inset-block-start:6px;inset-inline-start:calc(50% - 4px)}
  .hub{justify-self:center}
  .hub-cap{position:static;inset:auto;margin-block-start:var(--s-3)}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .link-dot{animation-name:flowY}
}
@keyframes flowY{
  from{transform:translateY(0)}
  to  {transform:translateY(calc(100% - 18px))}
}


/* ============================================================
   3. SERVICES — البرهان
   ------------------------------------------------------------
   The section ground is --deep. It is the largest single block of
   the brand's secondary surface on the page, and it is what stops
   §3 and §4 reading as one 2,200px slab: #1E5E59 against the
   #0A2C2D of .how is a tone break you cannot miss at speed.

   The grid was four equal 215px tiles whose two rows divided at
   different columns (x≈409 then x≈510) — a broken gutter under
   four identical rounded rectangles. Rebuilt at three scales:

     ┌───────────┬─────────────────────────┐
     │           │  المنظّمون   (wide band) │
     │ الحشود    ├─────────────────────────┤
     │ (feature) │  النقل / الطبية / الإسعاف│
     │           │  (one ruled ledger)      │
     └───────────┴─────────────────────────┘

   Both rows divide at the same column, 5 | 7. One gutter.
   ============================================================ */
.services{position:relative;overflow:hidden;padding-block:clamp(4rem,8vw,7.5rem)}
.services > .container{position:relative;z-index:1}
.services .sec-head-row{margin-block-end:clamp(2.5rem,5vw,4rem)}
/* on --deep, teal drops to 2.5:1 — the rule and the glyph go paper-side and
   the accent is carried by the objects below, where it has the ground for it */
.services .sec-link{border-color:color-mix(in srgb,var(--paper) 42%,transparent)}
.services .sec-link .icon{color:var(--on-dark)}
.services .sec-link:hover .icon{color:var(--gold)}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--s-4);
}

/* every tile sits on ink over the deep ground, so a panel is always a
   darker object on a lighter section — never a tint of the same colour */
.svc{
  position:relative;
  display:flex;flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-6);
  border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  background:var(--ink);
  color:var(--on-dark);
  transition:transform var(--t-mid) var(--e-out),
             border-color var(--t-mid) var(--e-soft),
             background-color var(--t-mid) var(--e-soft);
}
.svc:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--teal) 80%,transparent);
  background:var(--ink-700);
}
.svc-ico{
  inline-size:36px;block-size:36px;color:var(--teal);flex:none;
  transition:color var(--t-mid) var(--e-soft),transform var(--t-mid) var(--e-out);
}
.svc:hover .svc-ico{transform:translateY(-3px)}
.svc-t{font-size:var(--fs-h3);color:var(--on-dark)}
.svc-p{font-size:var(--fs-body);line-height:1.78;color:var(--on-dark-soft);max-inline-size:44ch}
.svc-arrow{
  inline-size:22px;block-size:22px;flex:none;color:var(--on-dark-soft);
  transition:transform var(--t-mid) var(--e-out),color var(--t-mid) var(--e-soft);
}
.svc:hover .svc-arrow{transform:translateX(-6px);color:var(--gold)}

/* ---- 1. the feature : the page's second focal point ---- */
.svc-feature{
  grid-column:span 5;grid-row:span 2;
  gap:var(--s-4);
  padding:clamp(1.75rem,2.6vw,2.5rem);
  background:linear-gradient(200deg,var(--ink) 8%,var(--ink-900));
  border-color:color-mix(in srgb,var(--paper) 15%,transparent);
}
.svc-feature:hover{
  background:linear-gradient(200deg,var(--ink-700) 8%,var(--ink-900));
}
/* Solid teal, not a tinted well — the one place the accent is a whole
   object. Two class names because core's `.surface-deep .icon-well` sets
   the gold tint at (0,2,0) and a bare `.svc-well` would lose to it. */
.svc-feature .svc-well{
  inline-size:88px;block-size:88px;margin-block-end:auto;
  background:var(--teal);color:var(--ink);
}
.svc-feature:hover .svc-well{background:color-mix(in srgb,var(--teal) 88%,#fff)}
.svc-feature .svc-t{font-size:clamp(1.75rem,2.6vw,2.35rem);line-height:1.28}
.svc-feature .svc-p{max-inline-size:40ch}
.svc-go{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding-block-start:var(--s-5);
  font-size:var(--fs-body);font-weight:500;color:var(--gold);
}
.svc-go .icon{inline-size:20px;block-size:20px;transition:transform var(--t-mid) var(--e-out)}
.svc-feature:hover .svc-go .icon{transform:translateX(-6px)}

/* ---- 2. the wide band : second weight, laid out on one line ---- */
.svc-wide{
  grid-column:span 7;
  flex-direction:row;align-items:center;
  gap:clamp(1.25rem,2.2vw,2rem);
  min-block-size:168px;
  padding-inline:clamp(1.5rem,2.4vw,2.25rem);
}
.svc-wide .svc-ico{inline-size:44px;block-size:44px}
.svc-body{display:flex;flex-direction:column;gap:var(--s-1);min-inline-size:0}
.svc-wide .svc-t{font-size:1.5rem}
.svc-wide .svc-p{max-inline-size:52ch}

/* ---- 3. the ledger : one panel, three ruled lines, aligned columns.
        Not three more cards — the columns are what carry the reading. ---- */
.svc-ledger{
  grid-column:span 7;
  border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  background:var(--ink-900);
  padding:var(--s-5) clamp(1.5rem,2.4vw,2.25rem);
}
.ledger-cap{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:1.0625rem;font-weight:500;color:var(--on-dark-soft);
  margin-block-end:var(--s-2);
}
.ledger-cap::before{
  content:"";flex:none;
  inline-size:22px;block-size:2px;border-radius:2px;
  background:var(--teal);
}
.svc-ledger li + li{border-block-start:1px solid var(--line-dark)}
.svc-row{
  display:grid;
  grid-template-columns:auto minmax(0,11rem) minmax(0,1fr) auto;
  align-items:center;
  column-gap:var(--s-4);
  min-block-size:44px;
  padding:var(--s-4) 0;
  border:0;border-radius:0;background:transparent;
}
.svc-row:hover{transform:none;background:transparent}
.svc-row .svc-ico{inline-size:30px;block-size:30px}
.svc-row .svc-t{font-size:1.25rem}
.svc-row .svc-p{font-size:var(--fs-body);line-height:var(--lh-body)}
.svc-row .svc-arrow{opacity:0;transform:translateX(8px)}
.svc-row:hover .svc-arrow{opacity:1;transform:none}
.svc-row:hover .svc-t{color:var(--gold)}

/* ------------------------------------------------------------
   داخل التطبيق — the in-app tier.
   التقارير / الرسائل / الموقع are not things a company drives to
   your venue; they are screens. Sat in the same bento they became
   a third row of look-alike cards — the exact shape §8 bans. They
   are written as one captioned strip instead: no box, no fill,
   hairlines between, so the eye reads a different KIND of thing.
   ------------------------------------------------------------ */
.inapp{
  margin-block-start:clamp(2rem,4vw,3rem);
  padding:clamp(1.75rem,3.2vw,2.5rem) clamp(1.5rem,2.4vw,2.25rem);
  border-radius:var(--r-lg);
  background:var(--ink-900);
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  column-gap:clamp(1.5rem,3vw,3rem);
  row-gap:var(--s-5);
  align-items:start;
}
.inapp-cap{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:1.0625rem;font-weight:500;color:var(--on-dark);
  padding-block-start:var(--s-1);
}
.inapp-cap::before{
  content:"";flex:none;
  inline-size:22px;block-size:2px;border-radius:2px;
  background:var(--teal);
}
.inapp-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.inapp-list li{padding-inline:clamp(1.1rem,2.2vw,2rem)}
.inapp-list li:first-child{padding-inline-start:0}
.inapp-list li:last-child{padding-inline-end:0}
.inapp-list li + li{border-inline-start:1px solid var(--line-dark)}
.inapp-list a{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--s-4);row-gap:var(--s-1);
  align-items:center;
}
.inapp-i{
  grid-row:span 2;align-self:start;
  inline-size:28px;block-size:28px;color:var(--teal);
  margin-block-start:4px;
  transition:color var(--t-mid) var(--e-soft),transform var(--t-mid) var(--e-out);
}
.inapp-t{font-size:1.25rem;color:var(--on-dark)}
.inapp-p{font-size:var(--fs-body);color:var(--on-dark-soft)}
.inapp-list a:hover .inapp-i{color:var(--gold);transform:translateY(-2px)}
.inapp-list a:hover .inapp-t{color:var(--gold)}

@media (max-width:1100px){
  /* one column: the three weights stay, stacked. */
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc-feature{grid-column:auto;grid-row:auto}
  .svc-wide,.svc-ledger{grid-column:auto}
  .inapp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  /* the ledger's title column can no longer hold a fixed measure */
  .svc-row{
    grid-template-columns:auto minmax(0,1fr) auto;
    row-gap:var(--s-1);
  }
  .svc-row .svc-p{grid-column:2 / -1}
}
@media (max-width:760px){
  .inapp-list{grid-template-columns:minmax(0,1fr)}
  .inapp-list li{padding-inline:0;padding-block:var(--s-4)}
  .inapp-list li + li{
    border-inline-start:0;
    border-block-start:1px solid var(--line-dark);
  }
  .inapp-list li:first-child{padding-block-start:0}
  .inapp-list li:last-child{padding-block-end:0}
}
@media (max-width:620px){
  .svc-grid{gap:var(--s-5)}

  /* the feature tile keeps every bit of its weight */
  .svc-feature{min-block-size:0;padding:var(--s-6)}
  .svc-feature .svc-well{inline-size:80px;block-size:80px;margin-block-end:var(--s-5)}

  /* the band folds to icon-over-copy rather than shrinking to a card */
  .svc-wide{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:start;column-gap:var(--s-4);row-gap:var(--s-1);
    padding:var(--s-5);
  }
  .svc-wide .svc-ico{inline-size:34px;block-size:34px;margin-block-start:2px}
  .svc-wide .svc-t{font-size:1.375rem}
  .svc-wide .svc-body{grid-column:2}
  .svc-wide .svc-arrow{display:none}

  .svc-ledger{padding:var(--s-5)}
  .svc-row{padding:var(--s-4) 0}
  .svc-row .svc-arrow{display:none}

  .inapp{margin-block-start:var(--s-5);padding:var(--s-6) var(--s-5)}
}


/* ============================================================
   4. HOW — كيف تشتغل
   The deepest ground on the page. Each step is ONE typographic
   line: numeral, title, leader rule, and the thing that line
   produces — then the paragraph beneath at a 54ch measure.
   The leader is what occupies the width, so nothing is stretched
   and nothing is orphaned at the far edge.
   ============================================================ */
.how{
  background:var(--ink-900);
  padding-block:clamp(4.5rem,9.5vw,10rem);
}

/* masthead: title then deck, both hugging the inline-start edge —
   no interior gutter to read as a hole. */
.how-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:var(--s-5) clamp(1.5rem,3.6vw,3.25rem);
  padding-block-end:clamp(2rem,3.5vw,3rem);
  border-block-end:1px solid var(--line-dark);
}
.how-head-main{flex:0 1 auto}
.how-head-main .h2{margin-block-end:0}
.how-sub{
  flex:1 1 20rem;
  color:var(--on-dark-soft);
  max-inline-size:46ch;
  padding-block-end:var(--s-2);
}

/* the process spine runs through the centre of the numeral column;
   each numeral knocks it out with the section ground. */
.steps{
  position:relative;
  --n-col:clamp(58px,5.4vw,78px);
}
.steps::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-inline-start:calc(var(--n-col) / 2 - 1.5px);
  inset-block:clamp(2rem,3.4vw,3rem) clamp(2.4rem,3.8vw,3.4rem);
  inline-size:3px;border-radius:3px;
  background:linear-gradient(to bottom,
    var(--teal),
    color-mix(in srgb,var(--teal) 22%,transparent));
}

/* The row is written as one specimen line — numeral, title, a leader
   that runs out to the outcome — and then a second line carrying the
   paragraph and the things the step covers. Before this the title and
   the paragraph were stacked in the middle column and the outcome sat
   alone at the far edge, which left a ~210px hole through the centre
   of all three rows. The leader now occupies that width on purpose,
   and the paragraph is no longer capped short of its own column. */
.step{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:var(--n-col) minmax(0,1fr) minmax(0,.86fr);
  grid-template-areas:
    "n head yield"
    "n body yield";
  column-gap:clamp(1.25rem,2.6vw,2.25rem);
  row-gap:var(--s-4);
  align-items:start;
  padding-block:clamp(2rem,3.4vw,3rem);
  border-block-end:1px solid var(--line-dark);
}
/* the numerals are the page's loudest teal — solid, not outlined. On
   #0A2C2D teal reads 5.0:1, so it can carry weight instead of hinting. */
.step-n{
  grid-area:n;
  display:block;text-align:center;
  padding-block:.1em .25em;
  background:var(--ink-900);
  font-size:clamp(2.25rem,3.6vw,3.25rem);
  font-weight:700;line-height:1.1;
  color:var(--teal);
}

/* line one: title, then the leader that carries the eye to the outcome */
.step-head{
  grid-area:head;
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem);
  min-block-size:2.6rem;
}
.step-t{font-size:var(--fs-h3);line-height:1.3;color:var(--on-dark);flex:none}
.step-leader{
  flex:1;min-inline-size:2rem;block-size:1px;
  background:linear-gradient(to left,
    color-mix(in srgb,var(--paper) 30%,transparent), transparent);
}
.step-p{grid-area:body;color:var(--on-dark-soft)}

/* ------------------------------------------------------------
   الناتج — one --deep panel per step, spanning both lines of the row.
   It replaced a row of tag pills that restated the paragraph word for
   word («نوع الفعالية · التاريخ · عدد الحضور» under a sentence that had
   just named all three), and it fixes the alignment complaint at the
   same time: the pills and the outcome line ended on two different
   inline-end edges because they were two ragged runs of text. A panel
   has two edges, and everything inside it shares them.
   ------------------------------------------------------------ */
.step-yield{
  grid-area:yield;
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--deep);
  padding:clamp(1.25rem,2.2vw,1.75rem) clamp(1.25rem,2.2vw,1.75rem);
}
.step-yield::before{
  content:"";position:absolute;
  inset-block-start:0;inset-inline-start:clamp(1.25rem,2.2vw,1.75rem);
  inline-size:44px;block-size:4px;border-radius:0 0 4px 4px;
  background:var(--teal);
}
.yield-cap{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:1.0625rem;font-weight:500;
  color:var(--on-dark-soft);
  margin-block-end:var(--s-2);
}
.yield-cap::before{
  content:"";flex:none;
  inline-size:7px;block-size:7px;border-radius:var(--r-pill);
  background:var(--gold);
}
.yield-t{
  font-size:clamp(1.25rem,1.7vw,1.5rem);
  font-weight:500;line-height:1.4;
  color:var(--on-dark);
}
.yield-n{
  margin-block-start:var(--s-3);
  padding-block-start:var(--s-3);
  border-block-start:1px solid color-mix(in srgb,var(--paper) 22%,transparent);
  font-size:var(--fs-body);
  color:var(--on-dark-soft);
}

@media (max-width:1040px){
  .step{
    grid-template-columns:var(--n-col) minmax(0,1fr);
    grid-template-areas:
      "n head"
      "n body"
      "n yield";
    row-gap:var(--s-4);
  }
  .step-yield{margin-block-start:var(--s-2)}
}
@media (max-width:560px){
  .how-head{padding-block-end:var(--s-6)}
  .steps::before{display:none}
  .step{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"n" "head" "body" "yield";
    row-gap:var(--s-4);
  }
  .step-n{text-align:start;padding-block:0}
  .step-head{min-block-size:0}
  .step-leader{display:none}
}


/* ============================================================
   5. APP — phone mockups, pure CSS.
   The stage never cuts the hardware: the phone sits fully inside.
   ============================================================ */
.app{padding-block:clamp(3.5rem,7vw,6.5rem)}
.app-stage{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  gap:clamp(1.5rem,2.5vw,3rem);
  align-items:center;
  padding:clamp(2.25rem,4.6vw,4.25rem);
}
.app-copy,.phones{position:relative;z-index:1;min-inline-size:0}
.app-stage .pattern-field{z-index:0}
.app-copy .lead{max-inline-size:40ch}

.app-list{display:grid;gap:var(--s-3);margin-block:var(--s-6)}
.app-list li{
  display:flex;align-items:flex-start;gap:var(--s-3);
  color:var(--on-dark);
}
.app-list .icon{inline-size:22px;block-size:22px;color:var(--teal);margin-block-start:6px}

/* --- phone stage --- */
.phones{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
}
.phone-plinth{
  position:absolute;z-index:0;pointer-events:none;
  inset-block-end:-6%;inset-inline:-6%;
  block-size:46%;
  border-radius:50%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--teal) 26%,transparent), transparent 78%);
}

/* One declaration drives the whole mockup type scale.
   Everything inside .phone is sized in em from it.
   This is decorative in-app chrome (aria-hidden), not page body copy.
   The pair (front + rotated back, minus their overlap) measures ~41.8em
   across; at the old .95vw it grew past the stage and .app-stage's
   overflow sliced the back handset in half. Held below the column now. */
.phone{
  position:relative;z-index:1;
  font-size:clamp(9.5px,.84vw,12.2px);
  inline-size:23.4em;block-size:47em;
  flex:none;
  border:.72em solid var(--ink-900);
  border-radius:3.6em;
  background:var(--ink-900);
  box-shadow:0 40px 70px -28px color-mix(in srgb,var(--ink-900) 82%,transparent);
}
.phone-front{z-index:2}
.phone-back{
  z-index:1;
  margin-inline-start:-6.4em;
  margin-block-end:3.2em;
  transform:rotate(-6deg) scale(.88);
  transform-origin:50% 100%;
  opacity:.96;
}
.notch{
  position:absolute;z-index:3;
  inset-block-start:.85em;inset-inline:0;
  margin-inline:auto;
  inline-size:7.6em;block-size:2em;
  border-radius:var(--r-pill);
  background:var(--ink-900);
}
.screen{
  position:absolute;inset:0;
  border-radius:2.95em;overflow:hidden;
  background:var(--paper-pure);
  color:var(--ink);
  display:flex;flex-direction:column;
  font-size:1em;line-height:1.7;
}
.phone .icon{inline-size:1.55em;block-size:1.55em;stroke-width:1.7}

/* BRAND §2: gold is never text on a light ground — #F5C26B on white is
   1.7:1, which fails even the large-text floor. Inside the mock the
   screens are white, so the ؟ is set in --deep (7.1:1) and gold stays
   where it belongs here: as a fill (the primary button, the badge). */
.phone .q{color:var(--deep)}

/* status bar */
.sbar{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:1.4em .2em;padding-inline:2em;
  font-size:1.05em;font-weight:500;color:var(--ink);
}
.sig{display:flex;align-items:flex-end;gap:.25em}
.sig i{inline-size:.32em;border-radius:.2em;background:var(--ink)}
.sig i:nth-child(1){block-size:.5em}
.sig i:nth-child(2){block-size:.8em}
.sig i:nth-child(3){block-size:1.1em}

/* app bar */
.abar{
  display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding-block:1em .9em;padding-inline:1.6em;
}
.mini-brand{font-size:1.45em;font-weight:700;line-height:1;color:var(--ink)}
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.4em 1em;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--teal) 12%,transparent);
  color:var(--deep);font-size:1.02em;font-weight:500;
}
.chip .icon{inline-size:1.25em;block-size:1.25em;color:var(--deep)}
.chip-back{padding:.45em;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.chip-back .icon{color:var(--ink);transform:scaleX(-1)}
.abar-t{font-size:1.25em;font-weight:700}

.scr-body{flex:1;padding-block:.3em 0;padding-inline:1.6em;display:flex;flex-direction:column}

.scr-ask{
  font-size:2.35em;font-weight:700;line-height:1.24;
  color:var(--ink);
  margin-block:.3em .75em;
}

/* service circles — wells, never tinted squares */
.picks{display:flex;justify-content:space-between;gap:.6em;margin-block-end:1.5em}
.pick{
  display:flex;flex-direction:column;align-items:center;gap:.5em;
  font-size:1.08em;font-weight:500;line-height:1.3;color:var(--on-light-soft);
}
.pick i{
  inline-size:4em;block-size:4em;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--teal) 11%,transparent);
  color:var(--deep);
}
.pick:first-child i{background:var(--ink);color:var(--gold)}
.pick:first-child{color:var(--ink);font-weight:700}

/* order card */
.ocard{
  border:1px solid var(--line-light);
  border-radius:1.6em;
  padding:1.2em 1.4em;
  background:var(--paper);
}
.ocard-h{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:1.05em;font-weight:700}
.badge{
  font-size:.95em;font-weight:500;
  padding:.25em .9em;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--gold) 32%,transparent);
  color:var(--ink);
}
.obar{
  block-size:.55em;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--ink) 10%,transparent);
  margin-block:.9em .6em;overflow:hidden;
}
.obar i{display:block;inline-size:62%;block-size:100%;border-radius:var(--r-pill);background:var(--deep)}
.osteps{display:flex;justify-content:space-between;font-size:.98em;color:var(--on-light-soft)}
.osteps .on{color:var(--deep);font-weight:500}

/* tab bar */
.tabs{
  display:flex;justify-content:space-around;align-items:center;
  padding-block:1em 2.2em;padding-inline:1.6em;
  border-block-start:1px solid var(--line-light);
  background:var(--paper-pure);
}
.tabs span{color:color-mix(in srgb,var(--ink) 38%,transparent)}
.tabs .on{color:var(--deep)}
.tabs .icon{inline-size:1.75em;block-size:1.75em}

/* back phone — service checklist */
.plist{flex:1;display:flex;flex-direction:column;gap:.6em;padding-block:.5em 0;padding-inline:1.5em}
.plist li{
  display:flex;align-items:center;gap:.9em;
  padding:.75em 1em;border-radius:1.3em;
  border:1px solid var(--line-light);
  font-size:1.08em;font-weight:500;
}
.plist li i{
  inline-size:2.7em;block-size:2.7em;border-radius:var(--r-pill);
  display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--ink) 7%,transparent);
  color:var(--on-light-soft);
}
.plist li span{flex:1}
.plist li .tick{inline-size:1.3em;block-size:1.3em;color:var(--deep)}
.plist .on{
  border-color:color-mix(in srgb,var(--teal) 45%,transparent);
  background:color-mix(in srgb,var(--teal) 8%,transparent);
}
.plist .on i{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--deep)}
.pbtn{
  margin-block:1.2em 2.2em;margin-inline:1.5em;
  padding-block:.95em;
  border-radius:var(--r-pill);
  background:var(--gold);color:var(--ink);
  font-size:1.15em;font-weight:500;text-align:center;
}

@media (max-width:1040px){
  .app-stage{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
  .phone{font-size:clamp(9.5px,1.85vw,12.6px)}
  .phone-plinth{block-size:34%}
}
@media (max-width:600px){
  .app-stage{padding:var(--s-6) var(--s-5);border-radius:var(--r-lg)}
  .phone-back{display:none}
  .phone{font-size:clamp(10px,2.85vw,13px)}
}


/* ============================================================
   6. CTA — الفعل
   Deliberately the tallest section on the page: the last breath
   before the footer. The two routes are packed objects, not
   containers — each card is only as wide as what is inside it.
   ============================================================ */
.cta{position:relative;overflow:hidden;padding-block:clamp(5.5rem,11vw,11rem)}
/* The ؟ watermark is gone. It sat on the inline-start half — the same
   half as the copy — so a second, half-legible ؟ hung directly behind a
   heading whose whole point is its own ؟. Two of the brand's one glyph,
   one of them a smudge. The pattern field carries the texture; the
   finale's focal point is the type and the single gold button. */
.cta-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
/* last beat on the page — it is allowed to be the biggest heading
   below the hero */
.cta-t{font-size:var(--fs-h1);margin-block-end:var(--s-5)}
.cta-t .q{font-size:1.1em}
.cta-copy .lead{margin-block-end:var(--s-6);max-inline-size:42ch}

/* the direct-contact panel: a captioned object that fills its column
   edge to edge, so the section closes on two written halves instead
   of one column of copy and a hole. */
.cta-side{
  justify-self:stretch;
  inline-size:auto;max-inline-size:100%;
}
.routes-cap{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:1.0625rem;font-weight:500;
  color:var(--on-dark-soft);
  margin-block-end:var(--s-4);
}
.routes-cap::after{
  content:"";flex:1;block-size:1px;
  background:var(--line-dark);
}
/* Three equal boxes stacked in a column is the shape §8 calls out.
   These are not three equal things: واتساب is how people actually
   reach a Saudi business, so it is the one object here — filled,
   welled, raised. البريد and النموذج are two quiet ruled lines under
   it. One focal point, two footnotes. */
.routes{display:grid;gap:0}
.routes a{
  display:flex;align-items:center;gap:var(--s-4);
  min-block-size:44px;
  transition:transform var(--t-mid) var(--e-out),
             border-color var(--t-mid) var(--e-soft),
             background-color var(--t-mid) var(--e-soft);
}

/* on the --deep ground the panel is ink, not a tint of the section */
.route-lead a{
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  background:color-mix(in srgb,var(--ink) 78%,transparent);
  box-shadow:var(--sh-md);
}
.route-lead a:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--gold) 62%,transparent);
  background:var(--ink);
}
/* solid teal well — the accent as an object, matching the services feature */
.routes .icon-well{
  inline-size:64px;block-size:64px;
  background:var(--teal);
  color:var(--ink);
}
.route-lead{margin-block-end:var(--s-5)}

/* the two quiet lines — bare icons on the ground, never a small
   tinted square, never a shrunken well */
.routes li:not(.route-lead) a{
  padding-block:var(--s-4);
  border-block-end:1px solid var(--line-dark);
}
.route-lead + li a{border-block-start:1px solid var(--line-dark)}
.routes li:not(.route-lead) a:hover{border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
/* teal on --deep is 2.5:1; these two glyphs carry a label, so they stay
   paper-side and the accent is spent on the well above them instead */
.route-i{
  inline-size:28px;block-size:28px;flex:none;color:var(--on-dark);
  transition:color var(--t-mid) var(--e-soft);
}
.routes li:not(.route-lead) a:hover .route-i{color:var(--gold)}
.routes li:not(.route-lead) .route-v{font-size:var(--fs-body);font-weight:500}

/* label over value, both hugging the RTL start edge; the pair takes
   only the width it needs so the arrow sits a normal gap away. */
.route-t{
  display:flex;flex-direction:column;align-items:flex-start;
  flex:0 1 auto;min-inline-size:0;line-height:1.75;
}
.route-t strong{font-weight:500;color:var(--on-dark-soft)}
.route-v{
  align-self:flex-start;text-align:start;
  font-size:1.125rem;font-weight:700;color:var(--on-dark);
}
.route-a{
  margin-inline-start:auto;
  inline-size:22px;block-size:22px;color:var(--on-dark-soft);
  transition:transform var(--t-mid) var(--e-out),color var(--t-mid) var(--e-soft);
}
.routes a:hover .route-a{transform:translateX(-6px);color:var(--gold)}

.routes-foot{
  margin-block-start:var(--s-5);
  padding-block-start:var(--s-4);
  border-block-start:1px solid var(--line-dark);
  font-size:var(--fs-body);color:var(--on-dark-soft);
}

@media (max-width:900px){
  .cta-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .cta-copy .btn{inline-size:100%}
  .cta-side{inline-size:100%}
  .route-lead a{gap:var(--s-4);padding:var(--s-4)}
}


/* ============================================================
   7. Small-screen rhythm — the composed desktop spacing collapses
   to one tighter cadence so the phone read isn't a long scroll.
   Kept last so it wins over the per-section padding above.
   ============================================================ */
@media (max-width:620px){
  .idea,.services,.app{padding-block:clamp(3.5rem,11vw,4.5rem)}
  .how{padding-block:clamp(3.75rem,12vw,5rem)}
  .cta{padding-block:clamp(4.25rem,13vw,5.5rem)}
}