/* ============================================================
   BND — Design System  (allset-derived, RTL Arabic)
   ------------------------------------------------------------
   TOKENS ONLY. No hardcoded colours below this block.
   ============================================================ */
:root{
  /* — colour: 4 neutrals + 1 accent — */
  --paper:      #F4F4F7;   /* page ground, lavender-tinted */
  --surface:    #FFFFFF;   /* cards */
  --sunken:     #EDEDF2;   /* inset wells, inputs */
  --paper-2:    #F9F9FC;   /* alternating section ground, a hair off --paper */
  --ink:        #101018;   /* headlines */
  --ink-60:     rgba(16,16,24,.60);
  --ink-40:     rgba(16,16,24,.40);
  --ink-12:     rgba(16,16,24,.12);
  --ink-07:     rgba(16,16,24,.07);
  --accent:     #0059BA;   /* ← sampled from the logo artwork */
  --accent-ink: #00417F;
  --accent-deep:#04213F;   /* device screen gradient floor */
  --accent-08:  rgba(0,89,186,.08);
  --accent-16:  rgba(0,89,186,.18);
  --on-accent:  #FFFFFF;
  --wa:         #25D366;

  /* — radius: exactly three — */
  --r-pill:  999px;
  --r-card:  20px;
  --r-block: 32px;

  /* — elevation: exactly two — */
  --lift-1: 0 1px 2px rgba(16,16,24,.04);
  --lift-2: 0 24px 48px -28px rgba(16,16,24,.28);

  /* — rhythm — */
  --gutter: 24px;
  --max: 1340px;
  --sec: clamp(72px, 9vw, 132px);

  /* — type — */
  --display: 'Zain', system-ui, sans-serif;
  --body: 'Zain', system-ui, sans-serif;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:16px; line-height:1.8;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none }
button,input,select{ font:inherit; color:inherit }
img,svg{ display:block; max-width:100% }
::selection{ background:var(--accent-16) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

/* ── Type scale ───────────────────────────────────────────── */
/* Arabic never takes negative tracking. Hierarchy = size + colour. */
.d1,.d2,.d3{ font-family:var(--display); font-weight:600; letter-spacing:0 }
.d1{ font-size:clamp(2.5rem, 6.2vw, 4.9rem); line-height:1.28 }
.d2{ font-size:clamp(2rem, 4.4vw, 3.4rem);  line-height:1.32 }
.d3{ font-size:clamp(1.35rem, 2.2vw, 1.85rem); line-height:1.45; font-weight:500 }
.lede{ font-size:clamp(1rem,1.35vw,1.12rem); color:var(--ink-60); line-height:1.85; font-weight:300 }
.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.02em;
  color:var(--accent); display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:''; width:5px; height:5px; border-radius:var(--r-pill); background:var(--accent) }
.hl{ color:var(--accent) }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }

/* ── Layout ───────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.sec{ padding-block:var(--sec) }
.center{ text-align:center }
.stack{ display:flex; flex-direction:column }
.head{ display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; margin-bottom:3.5rem }
.head .lede{ max-width:52ch }

/* Elevation by background difference, not shadow. */
.block{ background:var(--surface); border-radius:var(--r-block) }
.card{ background:var(--surface); border-radius:var(--r-card); box-shadow:var(--lift-1) }
.well{ background:var(--sunken); border-radius:var(--r-card) }

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.72rem .78rem .72rem 1.45rem;
  border-radius:var(--r-pill); border:0; cursor:pointer;
  font-family:var(--display); font-size:.9rem; font-weight:500;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn .chip{
  width:1.65rem; height:1.65rem; border-radius:var(--r-pill);
  display:grid; place-items:center; flex:none;
  transition:transform .25s ease;
}
.btn:hover .chip{ transform:translateX(-3px) }
.btn-primary{ background:var(--accent); color:var(--on-accent) }
.btn-primary .chip{ background:rgba(255,255,255,.22) }
.btn-primary:hover{ background:var(--accent-ink) }
.btn-ghost{ background:var(--surface); color:var(--ink); box-shadow:var(--lift-1) }
.btn-ghost .chip{ background:var(--accent-08); color:var(--accent) }
.btn-ghost:hover{ background:var(--sunken) }
.btn-dark{ background:var(--ink); color:var(--surface) }
.btn-dark .chip{ background:rgba(255,255,255,.18) }
.btn-dark:hover{ background:var(--accent) }

/* ── Header — wide bar that condenses on scroll ────────────── */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:95;
  display:flex; justify-content:center;
  padding:clamp(.7rem,1.4vw,1.15rem) var(--gutter);
  transition:padding .45s cubic-bezier(.22,1,.36,1);
}
.hdr-in{
  display:flex; align-items:center; gap:1.4rem;
  width:100%; max-width:1400px; height:74px;
  padding-inline:1.5rem .8rem;
  background:var(--surface); border-radius:26px;
  box-shadow:var(--lift-1);
  transition:max-width .55s cubic-bezier(.22,1,.36,1),
             height .45s cubic-bezier(.22,1,.36,1),
             border-radius .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s ease;
}
.hdr.compact{ padding-top:.7rem }
.hdr.compact .hdr-in{
  max-width:1060px; height:58px; border-radius:var(--r-pill);
  box-shadow:var(--lift-2);
}
.hdr.compact .mark-txt{ font-size:.95rem }
.hdr.compact .mark-badge{ width:2rem; height:2rem }

.mark{ display:flex; align-items:center; gap:.65rem; flex:none }
.mark-badge{
  width:2.4rem; height:2.4rem; border-radius:12px; flex:none;
  background:var(--accent); display:grid; place-items:center;
  transition:width .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1);
}
.mark-badge svg{ width:80%; height:auto; color:var(--on-accent) }
.mark-lockup{ display:flex; flex-direction:column; line-height:1.25 }
.mark-txt{ font-family:var(--display); font-weight:600; font-size:1.08rem;
  transition:font-size .45s ease }
.mark-sub{ font-size:.62rem; color:var(--ink-40); white-space:nowrap }

.hnav{ display:flex; align-items:center; gap:1.6rem; margin-inline:auto; font-size:.84rem; color:var(--ink-60) }
.hnav a{ transition:color .2s }
.hnav a:hover{ color:var(--accent) }
.hdr-cta{ display:flex; align-items:center; gap:.55rem; flex:none }
.hdr-cta .auth-login,
.hdr-cta .auth-reports,
.hdr-cta .auth-out{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:.84rem; font-weight:600;
  padding:.42rem .95rem; border-radius:var(--r-pill); white-space:nowrap;
}
.hdr-cta .auth-login{ background:var(--accent-08); color:var(--accent) }
.hdr-cta .auth-login:hover{ background:rgba(0,89,186,.14) }
.hdr-cta .auth-reports{ background:var(--accent); color:var(--on-accent) }
.hdr-cta .auth-reports:hover{ background:var(--accent-ink) }
.hdr-cta .auth-out{ font-weight:500; font-size:.82rem; color:var(--ink-40); padding:.42rem .75rem }
.hdr-cta .auth-out:hover{ background:var(--sunken); color:var(--ink) }
.hdr-cta [hidden]{ display:none !important }

/* ── Mobile navigation ────────────────────────────────────── */
.burger{ display:none; width:2.4rem; height:2.4rem; flex:none; border:0; cursor:pointer;
  background:var(--sunken); border-radius:12px; color:var(--ink);
  flex-direction:column; align-items:center; justify-content:center }
.burger:focus-visible{ outline-offset:2px; border-radius:12px }
.burger span{ display:block; width:16px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s }
.burger span+span{ margin-top:4px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

.drawer{ position:fixed; inset:0; z-index:94; display:none;
  background:color-mix(in srgb, var(--ink) 40%, transparent);
  opacity:0; transition:opacity .3s ease }
/* the attribute is the source of truth — the mobile rule below turns the
   drawer on, and without this it would stay a full-screen click trap */
.drawer[hidden]{ display:none }
.drawer.open{ opacity:1 }
.drawer-in{ position:absolute; inset-inline:var(--gutter); top:calc(58px + 1.4rem);
  background:var(--surface); border-radius:var(--r-card); box-shadow:var(--lift-2);
  padding:.6rem; transform:translateY(-12px); opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease }
.drawer.open .drawer-in{ transform:none; opacity:1 }
.drawer a{ display:flex; align-items:center; justify-content:flex-start;
  padding:.85rem 1rem; border-radius:12px; font-size:.92rem; transition:background .2s }
.drawer a:hover{ background:var(--sunken) }
.drawer a.auth-login{ background:var(--accent-08); color:var(--accent); font-weight:600 }
.drawer a.auth-reports{ background:var(--accent); color:var(--on-accent); font-weight:600 }
.drawer a.auth-reports:hover{ background:var(--accent-ink) }
.drawer a.auth-out{ color:var(--ink-40) }
.drawer a[hidden]{ display:none !important }
body.locked{ overflow:hidden }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{ padding-top:calc(104px + clamp(48px,6vw,88px)); padding-bottom:1rem }
.hero h1{ max-width:16ch; margin-inline:auto }
.hero h1 span{ display:block }
.hero-cta{ display:flex; gap:.65rem; justify-content:center; flex-wrap:wrap; margin-top:2rem }

@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ── Calculator ───────────────────────────────────────────── */
.calc{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:1rem; align-items:start }
.panel{ padding:1.9rem }
.field{ margin-bottom:1.15rem }
.field label{ display:block; font-size:.78rem; color:var(--ink-60); margin-bottom:.45rem }
.field input, .field select{
  width:100%; padding:.82rem 1rem; background:var(--sunken);
  border:1px solid transparent; border-radius:14px;
  font-family:var(--display); font-weight:500; font-size:1.02rem;
  transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus{ outline:0; border-color:var(--accent); background:var(--surface) }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-40) 50%),linear-gradient(135deg,var(--ink-40) 50%,transparent 50%);
  background-position:left 1.1rem center, left .85rem center; background-size:5px 5px; background-repeat:no-repeat }

.levels{ display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; padding:.25rem; background:var(--sunken); border-radius:var(--r-pill) }
.levels button{
  padding:.6rem .3rem; border:0; background:transparent; cursor:pointer;
  border-radius:var(--r-pill); font-size:.82rem; color:var(--ink-60);
  transition:background .2s, color .2s;
}
.levels button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent) }

.toggle{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; border-top:1px solid var(--ink-07); margin-bottom:1.4rem }
.toggle span{ font-size:.86rem }
.switch{ width:2.6rem; height:1.5rem; border-radius:var(--r-pill); background:var(--ink-12); border:0; cursor:pointer; position:relative; transition:background .25s }
.switch::after{ content:''; position:absolute; top:.2rem; inset-inline-end:.2rem; width:1.1rem; height:1.1rem; border-radius:var(--r-pill); background:var(--surface); transition:transform .25s cubic-bezier(.22,1,.36,1) }
.switch[aria-pressed="true"]{ background:var(--accent) }
.switch[aria-pressed="true"]::after{ transform:translateX(-1.1rem) }

.calc-out{ padding:1.9rem; display:flex; flex-direction:column; gap:1.6rem }
.chart{ display:flex; align-items:flex-end; gap:.3rem; height:190px; padding-top:1.6rem }
.bar{ flex:1; border-radius:6px 6px 3px 3px; background:var(--accent-16); position:relative; transition:height .7s cubic-bezier(.22,1,.36,1), background .3s }
.bar.peak{ background:var(--accent) }
.bar:hover{ background:var(--accent-ink) }
.bar .tip{
  position:absolute; bottom:calc(100% + .5rem); inset-inline-start:50%; transform:translateX(50%);
  background:var(--ink); color:var(--surface); font-size:.66rem; padding:.35rem .6rem;
  border-radius:9px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s;
}
.bar:hover .tip, .bar.peak .tip{ opacity:1 }
.axis{ display:flex; gap:.3rem; margin-top:.5rem }
.axis span{ flex:1; text-align:center; font-size:.6rem; color:var(--ink-40) }

.total{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap }
.total b{ font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1 }
.total small{ font-size:.9rem; color:var(--ink-60) }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem }
.stat{ padding:.9rem 1rem; border-radius:14px; background:var(--sunken) }
.stat b{ display:block; font-family:var(--display); font-weight:500; font-size:1.05rem }
.stat i{ font-style:normal; font-size:.68rem; color:var(--ink-40) }

.items{ display:flex; flex-direction:column; gap:.55rem }
.item{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; align-items:center }
.item span{ font-size:.82rem; color:var(--ink-60) }
.item b{ font-family:var(--display); font-weight:500; font-size:.86rem }
.item .track{ grid-column:1/-1; height:4px; border-radius:var(--r-pill); background:var(--ink-07); overflow:hidden }
.item .fill{ height:100%; background:var(--accent); border-radius:var(--r-pill); transition:width .7s cubic-bezier(.22,1,.36,1) }

/* ── Brand reveal — the scene ─────────────────────────────── */
.scene{ position:relative; overflow:hidden }
.rings{ position:absolute; inset-inline-start:50%; transform:translateX(50%);
  top:30%; width:min(1150px,165vw); aspect-ratio:1; pointer-events:none; z-index:0 }
.rings i{ position:absolute; inset:0; margin:auto; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 7%, transparent) }
.rings i:nth-child(1){ width:40%; height:40%;
  background:radial-gradient(circle, var(--accent-08) 0%, transparent 68%); border:0 }
.rings i:nth-child(2){ width:62%; height:62% }
.rings i:nth-child(3){ width:84%; height:84% }
.rings i:nth-child(4){ width:106%; height:106% }

.stage{ position:relative; z-index:2; margin-top:2.8rem; padding-bottom:1rem;
  display:flex; align-items:flex-start; justify-content:center }

/* phone — cropped by the section edge, as in the reference */
/* iPhone 17 Pro Max — 440x956pt, 19.5:9 — drawn at 0.58 scale.
   Screen 255x555, bezel .5rem, radii scaled to match. */
.phone{ position:relative; z-index:3; width:min(271px,64vw);
  background:var(--ink); border-radius:40px; padding:.5rem; box-shadow:var(--lift-2);
  will-change:transform }
.phone::before{ content:''; position:absolute; top:.85rem; inset-inline-start:50%;
  transform:translateX(50%); width:72px; height:21px; background:var(--ink);
  border-radius:var(--r-pill); z-index:2 }
.screen{ border-radius:32px; overflow:hidden; min-height:555px;
  background:linear-gradient(172deg, var(--accent) 0%, var(--accent-ink) 58%, var(--accent-deep) 100%);
  color:var(--on-accent); display:flex; flex-direction:column }

.st-bar{ display:flex; justify-content:space-between; align-items:center;
  font-size:.58rem; opacity:.85; padding:.8rem 1.2rem .5rem }
.st-bar b{ font-weight:500 }

.app-bar{ display:flex; align-items:center; gap:.6rem; padding:0 1.15rem .6rem; font-size:.63rem }
.app-bar .ib{ width:1.5rem; height:1.5rem; border-radius:9px; flex:none;
  background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:.7rem }
.app-bar .ttl{ margin-inline:auto; opacity:.8 }

.rep-head{ padding:0 1.2rem .75rem }
.rep-head h4{ font-family:var(--display); font-weight:500; font-size:.88rem }
.rep-head p{ font-size:.57rem; opacity:.6; margin-top:.1rem }
.rep-total{ font-family:var(--display); font-weight:600; font-size:1.6rem; line-height:1.2; margin-top:.6rem;
  font-variant-numeric:tabular-nums }
.rep-total-sub{ font-size:.57rem; opacity:.6 }
.rep-chips{ display:flex; gap:.32rem; margin-top:.65rem }
.rep-chips span{ flex:1; background:rgba(255,255,255,.13); border-radius:10px;
  padding:.36rem .28rem; text-align:center }
.rep-chips b{ display:block; font-family:var(--display); font-weight:500; font-size:.7rem;
  font-variant-numeric:tabular-nums }
.rep-chips i{ font-style:normal; font-size:.48rem; opacity:.6 }

/* the report sheet — a document, not a dashboard */
.sheet{ margin-top:auto; background:var(--surface); color:var(--ink);
  border-radius:22px 22px 0 0; padding:.85rem 1.15rem 1rem }
.sheet-h{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:.55rem; color:var(--ink-40); margin-bottom:.5rem }
.sheet-h b{ font-family:var(--display); font-weight:500; font-size:.7rem; color:var(--ink) }
.lines{ display:flex; flex-direction:column; gap:.42rem }
.line{ display:grid; grid-template-columns:1fr auto; gap:.08rem .6rem; align-items:baseline }
.line span{ font-size:.56rem; color:var(--ink-60) }
.line b{ font-family:var(--display); font-weight:500; font-size:.6rem; font-variant-numeric:tabular-nums }
.line .tr{ grid-column:1/-1; height:3px; border-radius:var(--r-pill); background:var(--ink-07); overflow:hidden }
.line .fl{ height:100%; background:var(--accent); border-radius:var(--r-pill) }
.line.soft .fl{ opacity:.38 }

.sheet-div{ height:1px; background:var(--ink-07); margin:.65rem 0 .55rem }
.mini-card{ position:relative }
.mini-card .rows{ position:absolute; inset:0; display:flex;
  flex-direction:column; justify-content:space-between }
.mini-card .rows span{ height:1px; background:var(--ink-07) }
.mini-bars{ position:relative; height:42px; display:flex; align-items:flex-end; gap:2px }
.mini-bars i{ flex:1; background:var(--accent-16); border-radius:2px 2px 0 0;
  transform-origin:bottom; animation:grow .8s cubic-bezier(.22,1,.36,1) both }
.mini-bars i.hot{ background:var(--accent) }
.mini-tip{ position:absolute; top:-4%; inset-inline-start:52%; transform:translateX(50%);
  background:var(--ink); color:var(--surface); border-radius:9px;
  padding:.3rem .55rem; text-align:center; z-index:2; white-space:nowrap }
.mini-tip b{ display:block; font-size:.58rem; font-weight:500; font-variant-numeric:tabular-nums }
.mini-tip i{ font-style:normal; font-size:.48rem; opacity:.55 }

.acts{ display:flex; gap:.4rem; margin-top:.7rem }
.acts span{ flex:1; text-align:center; padding:.5rem; border-radius:var(--r-pill); font-size:.61rem }
.acts .pri{ background:var(--accent); color:var(--on-accent) }
.acts .sec{ background:var(--sunken); color:var(--ink-60) }

/* the fan of cards arcing over the device */
.sc{ position:absolute; z-index:4; will-change:transform, opacity; opacity:0 }
.sc-card{ background:var(--surface); border-radius:15px; padding:.75rem .95rem;
  box-shadow:var(--lift-2); white-space:nowrap }
.sc-card .lbl{ display:flex; align-items:center; gap:.4rem; font-size:.6rem;
  color:var(--ink-40); margin-bottom:.28rem }
.sc-card .lbl::before{ content:''; width:.9rem; height:.9rem; border-radius:4px;
  background:var(--accent-16); flex:none }
.sc-card b{ font-family:var(--display); font-weight:500; font-size:1.08rem;
  font-variant-numeric:tabular-nums }
.sc-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .8rem;
  background:var(--surface); border-radius:11px; box-shadow:var(--lift-2); font-size:.68rem }
.sc-chip::before{ content:''; width:1.1rem; height:1.1rem; border-radius:5px;
  background:var(--accent-16); flex:none }
.sc-gauge{ background:var(--surface); border-radius:17px; padding:1rem 1.2rem 1.05rem;
  box-shadow:var(--lift-2); text-align:center; width:172px }
.sc-gauge svg{ width:100%; height:58px; margin-bottom:.35rem }
.sc-gauge .k{ font-size:.58rem; color:var(--ink-40) }
.sc-gauge b{ display:block; font-family:var(--display); font-weight:600; font-size:1.3rem;
  line-height:1.25; font-variant-numeric:tabular-nums }
.sc-gauge .go{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.55rem;
  font-size:.62rem; color:var(--accent); white-space:nowrap }
.sc-gauge .go::before{ content:'+'; width:1.1rem; height:1.1rem; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent); display:grid; place-items:center;
  font-size:.62rem; flex:none }
.sc-mini{ background:var(--surface); border-radius:15px; padding:.85rem; box-shadow:var(--lift-2); width:116px }
.sc-mini .bars{ height:50px; display:flex; align-items:flex-end; gap:2px }
.sc-mini .bars i{ flex:1; background:var(--accent-16); border-radius:2px }
.sc-mini .bars i:nth-child(n+7){ background:var(--accent) }
.sc-mini .t{ font-size:.52rem; color:var(--ink-40); margin-bottom:.45rem }

.ft-word{ display:flex; align-items:center; gap:.7rem }
.ft-badge{ display:grid; place-items:center; width:3rem; height:3rem; flex:none;
  border-radius:14px; background:var(--accent) }
.ft-badge svg{ width:80%; height:auto; color:var(--on-accent) }

/* ── Bento ────────────────────────────────────────────────── */
.bento{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.bento > *:first-child{ grid-column:1/-1 }
.cell{ padding:2.2rem; display:flex; flex-direction:column; gap:.85rem }
.cell .d3{ margin-top:.3rem }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem }
.chip-t{ font-size:.72rem; padding:.4rem .8rem; border-radius:var(--r-pill); background:var(--sunken); color:var(--ink-60) }

/* ── Comparison ───────────────────────────────────────────── */
.cmp-scroll{ overflow-x:auto; padding-bottom:.5rem; -webkit-overflow-scrolling:touch }
.scroll-hint{ display:none; align-items:center; gap:.4rem; font-size:.72rem;
  color:var(--ink-40); margin-bottom:.7rem }
.cmp{ width:100%; min-width:780px; border-collapse:separate; border-spacing:0 }
.cmp th, .cmp td{ padding:1.15rem 1.2rem; text-align:center; font-size:.85rem; vertical-align:middle }
.cmp thead th{ font-family:var(--display); font-weight:500; font-size:.86rem; color:var(--ink-60) }
.cmp tbody th{ text-align:start; font-weight:400; color:var(--ink-60); font-size:.84rem; width:22% }
.cmp tbody tr td{ border-top:1px solid var(--ink-07) }
/* the lifted accent column — allset's category-framing device */
.cmp .own{ background:var(--accent); color:var(--on-accent); font-weight:500 }
.cmp thead .own{ color:var(--on-accent); font-family:var(--display); font-weight:600; font-size:1rem;
  border-radius:var(--r-card) var(--r-card) 0 0 }
.cmp tbody tr:last-child .own{ border-radius:0 0 var(--r-card) var(--r-card) }
.cmp tbody .own{ border-top:1px solid rgba(255,255,255,.16) }

/* ── Services ─────────────────────────────────────────────── */
.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.svc{ padding:1.8rem; display:flex; flex-direction:column; gap:.6rem; text-align:start;
  border:1px solid transparent; cursor:pointer; font:inherit; color:inherit; width:100%;
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease }
.svc:hover{ transform:translateY(-4px) }
.svc[aria-current="true"]{ border-color:var(--accent); box-shadow:var(--lift-2) }
.svc .pick, .subsvc .pick{ margin-top:.4rem; font-size:.72rem; color:var(--accent);
  display:inline-flex; align-items:center; gap:.35rem; opacity:0; transition:opacity .25s }
.svc:hover .pick, .svc[aria-current="true"] .pick,
.subsvc:hover .pick, .subsvc[aria-current="true"] .pick{ opacity:1 }
.svc .idx{ font-family:var(--display); font-weight:500; font-size:.74rem; color:var(--accent) }
.svc p{ font-size:.86rem; color:var(--ink-60); line-height:1.75 }
.subsvcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.subsvc{ padding:1.8rem; border-radius:var(--r-card); background:var(--surface);
  box-shadow:var(--lift-1);
  border:1px solid transparent; cursor:pointer; font:inherit; color:inherit;
  text-align:start; width:100%;
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease }
.subsvc .idx{ font-family:var(--display); font-weight:500; font-size:.74rem; color:var(--accent) }
.subsvc:hover{ transform:translateY(-4px) }
.subsvc[aria-current="true"]{ box-shadow:var(--lift-2) }
.subsvc[aria-current="true"]{ border-color:var(--accent) }
.subsvc b{ font-family:var(--display); font-weight:500; font-size:1.08rem; display:block }
.subsvc i{ font-style:normal; font-size:.86rem; color:var(--ink-60); line-height:1.75 }

/* two service tiers — main projects, then complementary calculators */
.svc-group + .svc-group{ margin-top:2.6rem }
.svc-group-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1rem;
  padding-bottom:.9rem; margin-bottom:1.2rem; border-bottom:1px solid var(--ink-12) }
.svc-group-note{ font-size:.86rem; color:var(--ink-60); line-height:1.75 }

.svc.soon, .subsvc.soon, .ft-link.soon{
  opacity:.48; filter:grayscale(.25); cursor:default; pointer-events:none;
  transform:none !important; box-shadow:var(--lift-1) !important;
}
.svc.soon .pick, .subsvc.soon .pick{ opacity:1; color:var(--ink-40) }
.soon-tag{ font-size:.72rem; font-weight:500; color:var(--ink-40) }

/* ── FAQ — question column beside a standing heading ───────── */
#faq .wrap{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.55fr);
  gap:clamp(2rem,5vw,5.5rem); align-items:start }
#faq .head{ text-align:start; align-items:flex-start; margin-bottom:0;
  position:sticky; top:118px; gap:.9rem }
#faq .head .lede{ max-width:30ch }
.faqs{ max-width:none; margin-inline:0; display:flex; flex-direction:column; gap:.5rem }
.faq{ background:var(--surface); border-radius:var(--r-card); overflow:hidden }
.faq summary{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.4rem; background:transparent; border:0; cursor:pointer; text-align:start;
  font-size:.92rem; font-weight:400; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::marker{ content:'' }
.faq .pm{ width:1.7rem; height:1.7rem; flex:none; border-radius:var(--r-pill); background:var(--ink-07);
  display:grid; place-items:center; transition:background .25s, color .25s, transform .3s }
.faq[open] .pm{ background:var(--accent); color:var(--on-accent); transform:rotate(45deg) }
.faq .ans{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1) }
.faq[open] .ans{ max-height:32rem }
.faq .ans p{ padding:0 1.4rem 1.4rem; font-size:.86rem; color:var(--ink-60); line-height:1.9 }

/* ── Marquee ──────────────────────────────────────────────── */
.marq{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marq-track{ display:flex; gap:.6rem; width:max-content; animation:slide 34s linear infinite }
.marq:hover .marq-track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(50%) } }
.pill{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1.2rem; background:var(--surface); border-radius:var(--r-pill); white-space:nowrap; font-size:.84rem }
.pill b{ font-family:var(--display); font-weight:500; color:var(--accent) }

/* ── Close — the marquee and the CTA read as one movement ─── */
.close .marq{ margin-bottom:clamp(2.4rem,5vw,4.2rem) }
.cta{ padding:clamp(3.2rem,5.5vw,5rem) 2rem; text-align:center;
  display:flex; flex-direction:column; align-items:center }
.cta .lede{ max-width:44ch; margin-top:1.1rem }
.cta .btns{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:2rem }

/* ── Footer ───────────────────────────────────────────────── */
.ft{ padding-block:clamp(2.8rem,5vw,4rem) 2.5rem }
.ft-grid{ display:grid; grid-template-columns:1.55fr .85fr .95fr 1.15fr;
  gap:clamp(1.6rem,3vw,3rem); align-items:start }
.ft-cities{ font-size:.68rem; color:var(--ink-40); letter-spacing:.08em; margin-top:1.2rem }
.ft-link{ background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-align:start; transition:color .2s }
.ft-link:hover{ color:var(--accent) }
.ft h4{ font-size:.7rem; font-weight:500; color:var(--ink-40); margin-bottom:1rem; letter-spacing:.04em }
.ft ul{ list-style:none; display:flex; flex-direction:column; gap:.55rem; font-size:.86rem; color:var(--ink-60) }
.ft ul a:hover{ color:var(--accent) }
.ft-word{ font-family:var(--display); font-weight:600; font-size:2.4rem; line-height:1; color:var(--accent) }
.ft-note{ font-size:.86rem; color:var(--ink-60); max-width:34ch; margin-top:.9rem; line-height:1.8 }
.ft-dark{ background:var(--ink); color:var(--surface); border-radius:var(--r-card);
  padding:1.5rem; display:flex; flex-direction:column; align-items:flex-start }
.ft-dark p{ font-family:var(--display); font-weight:500; font-size:1rem; line-height:1.6; margin-bottom:1.2rem }
.ft-wa{
  width:3.15rem; height:3.15rem; flex:none;
  border-radius:var(--r-pill);
  background:var(--wa); color:var(--on-accent);
  display:grid; place-items:center;
  transition:transform .25s ease, filter .25s ease;
}
.ft-wa svg{ width:1.55rem; height:1.55rem }
.ft-wa:hover{ transform:translateY(-2px); filter:brightness(1.06) }
.ft-wa:focus-visible{ outline-color:var(--wa) }
.ft-base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(2.2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid var(--ink-07);
  font-size:.7rem; color:var(--ink-40); letter-spacing:.05em }
.ft-base a{ color:inherit }
.ft-base a:hover{ color:var(--accent) }

/* ── Scroll reveal ────────────────────────────────────────── */
[data-r]{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1) }
[data-r].shown{ opacity:1; transform:none }


/* alternating section ground — every other band lifts a couple of points
   off --paper, enough to separate the sections without reading as stripes */
body > section:nth-of-type(even){ background:var(--paper-2) }

/* sections own their stacking context for the layout guides */
.sec, .hero{ position:relative }
.sec > .wrap, .hero > .wrap{ position:relative; z-index:2 }

/* dashed layout guides that bleed off the edges (ref. image 2) */
.guide{
  position:absolute; border:1px dashed var(--ink-12);
  border-radius:6px; pointer-events:none; z-index:1;
}
.guide-l{ inset-inline-start:-13%; top:16%; width:26%; height:36% }
.guide-r{ inset-inline-end:-11%; bottom:12%; width:24%; height:32% }

/* ══ Hero card cluster ═══════════════════════════════════════ */
.cluster{
  position:relative; z-index:2; margin-top:3rem;
  width:100%; max-width:900px; margin-inline:auto;
  min-height:clamp(330px,36vw,410px);
  display:flex; align-items:flex-start; justify-content:center;
}
@keyframes inR{ from{ opacity:0; transform:translate3d(90px,12px,0) } to{ opacity:1; transform:none } }
@keyframes inL{ from{ opacity:0; transform:translate3d(-90px,12px,0) } to{ opacity:1; transform:none } }
@keyframes inU{ from{ opacity:0; transform:translate3d(0,26px,0) } to{ opacity:1; transform:none } }
@keyframes inUc{ from{ opacity:0; transform:translateX(50%) translate3d(0,26px,0) }
                 to{ opacity:1; transform:translateX(50%) } }

.hero-card{
  position:relative; z-index:3; width:min(320px,80vw);
  background:var(--surface); border-radius:var(--r-card);
  padding:1.6rem 1.5rem 1.4rem; box-shadow:var(--lift-2);
  animation:inU .95s cubic-bezier(.22,1,.36,1) .7s both;
}
.hero-card .mini{ height:98px; display:flex; align-items:flex-end; gap:3px; margin-bottom:1.4rem }
.hero-card .mini i{ flex:1; border-radius:3px 3px 2px 2px; background:var(--accent-16);
  transform-origin:bottom; animation:grow .8s cubic-bezier(.22,1,.36,1) both }
.hero-card .mini i.hot{ background:var(--accent) }
.hero-card .big{ font-family:var(--display); font-weight:600; font-size:2.3rem; line-height:1.1;
  font-variant-numeric:tabular-nums }
.hero-card .cap{ font-size:.72rem; color:var(--ink-40); line-height:1.6; margin-top:.25rem }

.tag-pill{
  position:absolute; inset-inline-start:-2.4rem; top:-.9rem; z-index:4;
  display:flex; align-items:center; gap:.45rem; padding:.36rem .4rem .36rem .85rem;
  background:var(--ink); color:var(--surface); border-radius:var(--r-pill);
  font-size:.68rem; white-space:nowrap; box-shadow:var(--lift-2);
  animation:inR .8s cubic-bezier(.22,1,.36,1) 1.45s both;
}
.tag-pill b{ background:var(--surface); color:var(--ink); font-family:var(--display);
  font-weight:500; padding:.16rem .55rem; border-radius:var(--r-pill) }

.under-card{
  position:absolute; inset-inline-start:50%; bottom:-2.3rem; z-index:4;
  width:min(280px,74vw); transform:translateX(50%);
  display:flex; align-items:center; gap:.7rem; padding:.8rem .95rem;
  background:var(--surface); border-radius:14px; box-shadow:var(--lift-2);
  animation:inUc .85s cubic-bezier(.22,1,.36,1) 1.6s both;
}
.under-card .ico{ width:1.9rem; height:1.9rem; border-radius:10px; flex:none;
  background:var(--accent-08); color:var(--accent); display:grid; place-items:center }
.under-card b{ display:block; font-family:var(--display); font-weight:500; font-size:.78rem }
.under-card i{ font-style:normal; font-size:.66rem; color:var(--ink-40) }

/* satellites — arrive from both flanks */
.sat{
  position:absolute; z-index:2; display:flex; align-items:center; gap:.6rem;
  padding:.68rem .85rem; background:var(--surface); border-radius:13px;
  box-shadow:var(--lift-2); white-space:nowrap;
}
.sat .ico{ width:1.8rem; height:1.8rem; border-radius:9px; flex:none;
  background:var(--accent-08); color:var(--accent); display:grid; place-items:center }
.sat b{ display:block; font-family:var(--display); font-weight:500; font-size:.95rem;
  font-variant-numeric:tabular-nums; line-height:1.3 }
.sat i{ font-style:normal; font-size:.62rem; color:var(--ink-40) }
.sat-r1{ inset-inline-start:1%; top:12%; animation:inR .85s cubic-bezier(.22,1,.36,1) 1.00s both }
.sat-r2{ inset-inline-start:6%; top:50%; animation:inR .85s cubic-bezier(.22,1,.36,1) 1.20s both }
.sat-l1{ inset-inline-end:1%;   top:16%; animation:inL .85s cubic-bezier(.22,1,.36,1) 1.10s both }
.sat-l2{ inset-inline-end:5%;   top:54%; animation:inL .85s cubic-bezier(.22,1,.36,1) 1.30s both }

.flags{ position:absolute; inset-inline-end:6%; top:-1.1rem; z-index:4; display:flex; gap:.4rem;
  animation:inL .8s cubic-bezier(.22,1,.36,1) 1.5s both }
.flag{ display:flex; align-items:center; gap:.4rem; padding:.4rem .75rem;
  background:var(--surface); border-radius:9px; box-shadow:var(--lift-1);
  font-size:.62rem; color:var(--ink-60); white-space:nowrap }
.flag::before{ content:''; width:4px; height:4px; border-radius:var(--r-pill);
  background:var(--accent); flex:none }

/* ══ Calculator — charted ════════════════════════════════════ */
.calc{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:1rem; align-items:stretch }
.panel{ padding:1.6rem; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-card); box-shadow:var(--lift-1);
  outline:0 solid var(--accent-16); transition:outline-width .5s ease }
.panel.flash{ outline-width:5px }
#calc{ scroll-margin-top:110px }
.field{ margin-bottom:1.1rem }
.field label{ display:block; font-size:.76rem; color:var(--ink-60); margin-bottom:.4rem }
.field input, .field select{
  width:100%; padding:.78rem .95rem; background:var(--surface);
  border:1px solid var(--ink-12); border-radius:12px;
  font-family:var(--display); font-weight:500; font-size:1rem; transition:border-color .2s;
}
.field input:focus, .field select:focus{ outline:0; border-color:var(--accent) }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-40) 50%),
                   linear-gradient(135deg,var(--ink-40) 50%,transparent 50%);
  background-position:left 1.05rem center, left .8rem center;
  background-size:5px 5px; background-repeat:no-repeat }

.levels{ display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; padding:.25rem;
  background:var(--sunken); border-radius:var(--r-pill) }
.levels button{ padding:.58rem .3rem; border:0; background:transparent; cursor:pointer;
  border-radius:var(--r-pill); font-size:.8rem; color:var(--ink-60);
  transition:background .2s, color .2s }
.levels button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent) }

.toggle{ display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0; border-top:1px solid var(--ink-07); margin-bottom:1.05rem }
.toggle span{ font-size:.84rem }
/* RTL: the knob rests at the inline-start (right) and travels toward the
   inline-end (left) when on — the previous rule anchored it to the wrong edge. */
.switch{ width:2.6rem; height:1.5rem; border-radius:var(--r-pill); background:var(--ink-12);
  border:0; padding:0; cursor:pointer; position:relative; flex:none;
  transition:background .25s ease }
.switch::after{ content:''; position:absolute; top:.2rem; inset-inline-start:.2rem;
  width:1.1rem; height:1.1rem; border-radius:var(--r-pill); background:var(--surface);
  box-shadow:0 1px 3px rgba(16,16,24,.22);
  transition:transform .28s cubic-bezier(.22,1,.36,1) }
.switch:hover{ background:var(--ink-40) }
.switch[aria-checked="true"]{ background:var(--accent) }
.switch[aria-checked="true"]:hover{ background:var(--accent-ink) }
.switch[aria-checked="true"]::after{ transform:translateX(-1.1rem) }

/* a pointer press should not leave a focus ring behind on any control */
.switch:focus:not(:focus-visible),
.levels button:focus:not(:focus-visible),
.svc:focus:not(:focus-visible),
.subsvc:focus:not(:focus-visible),
.icon-btn:focus:not(:focus-visible){ outline:none }

.toggle{ cursor:pointer; user-select:none }
.toggle:hover span{ color:var(--ink) }

.run{ display:flex; gap:.5rem; align-items:center }
.run .btn{ flex:1; justify-content:center }
.icon-btn{ width:2.85rem; height:2.85rem; flex:none; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--ink-12); cursor:pointer;
  display:grid; place-items:center; color:var(--ink-60);
  transition:border-color .2s, color .2s }
.icon-btn:hover{ border-color:var(--accent); color:var(--accent) }

/* the six BOQ lines sit in the left column so both cards end level */
.bd{ margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--ink-07);
  display:flex; flex-direction:column; gap:1.05rem }
.bd-h{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:.72rem; color:var(--ink-40) }
.item{ display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; align-items:baseline }
.item span{ font-size:.78rem; color:var(--ink-60) }
.item b{ font-family:var(--display); font-weight:500; font-size:.82rem;
  font-variant-numeric:tabular-nums }
.item .track{ grid-column:1/-1; height:5px; margin-top:.15rem; border-radius:var(--r-pill);
  background:var(--ink-07); overflow:hidden }
.item .fill{ height:100%; background:var(--accent); border-radius:var(--r-pill);
  transition:width .7s cubic-bezier(.22,1,.36,1) }

.calc-out{ padding:1.6rem; display:flex; flex-direction:column }
.legend{ display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem }
.legend span{ display:flex; align-items:center; gap:.42rem; font-size:.7rem; color:var(--ink-60) }
.legend i{ width:.62rem; height:.62rem; border-radius:3px; flex:none }

.plot{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85rem }
.yaxis{ display:flex; flex-direction:column; justify-content:space-between; height:300px;
  font-size:.6rem; color:var(--ink-40); text-align:start; padding-bottom:1px; white-space:nowrap }
.plot-area{ position:relative; height:300px; width:100% }
.rules{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between }
.rules span{ height:1px; background:var(--ink-07) }
.cols{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:4px }
.col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; height:100% }
.col .seg{ width:100%; transition:height .75s cubic-bezier(.22,1,.36,1) }
.col .fin{ background:var(--accent-16); border-radius:4px 4px 0 0 }
.col .str{ background:var(--accent) }
.col:hover .str{ background:var(--accent-ink) }
.badge{ position:absolute; inset-inline-start:50%; z-index:4;
  transform:translateX(50%) translateY(-.55rem);
  background:var(--ink); color:var(--surface); border-radius:11px; padding:.4rem .7rem;
  text-align:center; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .25s ease; box-shadow:var(--lift-2) }
.badge b{ display:block; font-family:var(--display); font-weight:500; font-size:.78rem }
.badge i{ font-style:normal; font-size:.56rem; opacity:.6 }
.col:hover .badge, .col.peak .badge{ opacity:1 }
.col:hover .badge{ z-index:5 }
.xaxis{ display:flex; gap:4px; margin-top:.6rem; width:100% }
.xaxis span{ flex:1; min-width:0; font-size:.6rem; color:var(--ink-40); text-align:center; white-space:nowrap }
.xaxis.tilt{ height:2rem; align-items:flex-start }
.xaxis.tilt span{ transform:rotate(-50deg) }

.result{ margin-top:auto; padding-top:1.7rem; border-top:1px solid var(--ink-07) }
.total{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap }
.total b{ font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,4.6vw,3.2rem);
  line-height:1; font-variant-numeric:tabular-nums }
.total small{ font-size:.9rem; color:var(--ink-60) }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1.3rem }
.stat{ padding:.85rem 1rem; border-radius:14px; background:var(--sunken) }
.stat b{ display:block; font-family:var(--display); font-weight:500; font-size:1.02rem;
  font-variant-numeric:tabular-nums }
.stat i{ font-style:normal; font-size:.66rem; color:var(--ink-40) }
.callout{ display:flex; align-items:center; gap:.9rem; margin-top:.6rem;
  padding:.95rem 1.1rem; border-radius:14px; background:var(--accent-08) }
.callout b{ display:block; font-family:var(--display); font-weight:500;
  font-size:.82rem; margin-bottom:.15rem }
.callout p{ font-size:.7rem; color:var(--ink-60); line-height:1.6 }
.callout .go{ width:2rem; height:2rem; border-radius:var(--r-pill); flex:none;
  margin-inline-start:auto; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:.8rem }


/* ── Roadmap — أين نحن الآن ───────────────────────────────── */
.road-now{ padding:1.6rem 1.8rem; display:grid; grid-template-columns:1.35fr 1fr;
  gap:1.6rem 2.4rem; align-items:center; margin-bottom:3.2rem }
.now-tag{ display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-size:.72rem; font-weight:500; color:var(--accent);
  background:var(--accent-08); padding:.42rem .85rem; border-radius:var(--r-pill) }
.pulse{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--accent);
  position:relative; flex:none }
.pulse::after{ content:''; position:absolute; inset:-4px; border-radius:var(--r-pill);
  border:1px solid var(--accent); animation:pls 2.2s ease-out infinite }
@keyframes pls{ 0%{ transform:scale(.5); opacity:.7 } 100%{ transform:scale(1.6); opacity:0 } }
.now-lead b{ display:block; font-family:var(--display); font-weight:500;
  font-size:1.12rem; margin-top:.85rem }
.now-lead p{ font-size:.86rem; color:var(--ink-60); line-height:1.8; margin-top:.35rem;
  max-width:46ch }
.rd-meter{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.3rem .8rem }
.rd-meter span{ font-size:.78rem; color:var(--ink-60) }
.rd-meter b{ font-family:var(--display); font-weight:500; font-size:.86rem }
.rd-meter .track{ grid-column:1/-1; height:5px; margin-top:.3rem; border-radius:var(--r-pill);
  background:var(--ink-07); overflow:hidden }
.rd-meter .fill{ height:100%; background:var(--accent); border-radius:var(--r-pill) }
.now-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.15rem }
.now-stats div{ background:var(--sunken); border-radius:var(--r-card); padding:.85rem 1rem }
.now-stats b{ display:block; font-family:var(--display); font-weight:600; font-size:1.4rem;
  line-height:1.2; font-variant-numeric:tabular-nums }
.now-stats i{ font-style:normal; font-size:.72rem; color:var(--ink-60) }

/* the rail */
.road{ position:relative; list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; padding-top:46px }
.road::before{ content:''; position:absolute; top:11px; inset-inline:12.5%;
  height:2px; background:var(--ink-12); border-radius:var(--r-pill) }
.road::after{ content:''; position:absolute; top:11px; inset-inline-start:12.5%;
  width:var(--road-h,25%); height:2px; background:var(--accent); border-radius:var(--r-pill) }

.road-step{ position:relative; padding:1.7rem 1.5rem; border-radius:var(--r-card);
  background:var(--surface); box-shadow:var(--lift-1);
  display:flex; flex-direction:column; gap:.62rem }
.rd-top{ margin-bottom:.15rem }
.road-step::before{ content:''; position:absolute; top:-41px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:var(--r-pill);
  background:var(--paper); border:2px solid var(--ink-12);
  box-shadow:0 0 0 5px var(--paper) }
.road-step.is-done::before,
.road-step.is-live::before{ background:var(--accent); border-color:var(--accent) }
.road-step.is-live::before{ box-shadow:0 0 0 5px var(--paper), 0 0 0 8px var(--accent-16) }
.road-step.is-live{ box-shadow:0 0 0 1.5px var(--accent-16), var(--lift-2) }
.road-step.is-later{ background:transparent; box-shadow:none;
  border:1px dashed var(--ink-12); padding:calc(1.7rem - 1px) calc(1.5rem - 1px) }

.rd-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem }
.rd-idx{ font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--ink-40);
  font-variant-numeric:tabular-nums }
.rd-when{ font-family:var(--display); font-weight:500; font-size:.72rem;
  color:var(--ink-40); font-variant-numeric:tabular-nums; letter-spacing:.02em }
.is-live .rd-when{ color:var(--accent) }
.rd-pill{ align-self:flex-start; font-size:.66rem; font-weight:500; font-family:var(--display);
  padding:.32rem .7rem; border-radius:var(--r-pill);
  background:var(--sunken); color:var(--ink-60) }
.is-live .rd-pill{ background:var(--accent); color:var(--on-accent) }
.is-next .rd-pill{ background:var(--accent-08); color:var(--accent) }
.is-later .rd-pill{ background:transparent; color:var(--ink-40);
  box-shadow:inset 0 0 0 1px var(--ink-12) }
.rd-title{ font-family:var(--display); font-weight:500; font-size:1.05rem; line-height:1.45 }
.rd-title i{ display:block; font-style:normal; font-size:.75rem; color:var(--ink-40);
  font-family:var(--body); margin-top:.15rem }
.rd-list{ list-style:none; display:flex; flex-direction:column; gap:.42rem; margin-top:.2rem }
.rd-list li{ position:relative; padding-inline-start:1.05rem;
  font-size:.81rem; color:var(--ink-60); line-height:1.7 }
.rd-list li::before{ content:''; position:absolute; inset-inline-start:0; top:.62em;
  width:6px; height:6px; border-radius:var(--r-pill); background:var(--ink-12) }
.is-done .rd-list li::before, .is-live .rd-list li::before{ background:var(--accent) }
.road-note{ font-size:.75rem; color:var(--ink-40); margin-top:1.6rem; text-align:center }


/* ── Calculator, compressed to a teaser ───────────────────── */
#calc.sec{ padding-block:clamp(54px,6.4vw,94px) }
#calc .head{ margin-bottom:2.4rem }
.calc{ grid-template-columns:minmax(0,318px) minmax(0,1fr) }
.panel{ padding:1.5rem }
.calc-out{ padding:1.35rem }
.field{ margin-bottom:.9rem }
.field input, .field select{ padding:.7rem .9rem; font-size:.95rem; border-radius:12px }
.assume{ font-size:.71rem; color:var(--ink-40); line-height:1.65; margin:-.1rem 0 1rem }
.assume b{ font-weight:500; color:var(--ink-60) }
.locked-set{ background:var(--sunken); border-radius:var(--r-card); padding:.9rem 1rem }
.ls-h{ display:block; font-size:.67rem; color:var(--ink-40); margin-bottom:.55rem }
.locked-set .chips{ margin-top:0 }
.locked-set .chip-t{ background:var(--surface); color:var(--ink-60) }

/* the y-axis carried the monthly figures — the shape is the point */
.yaxis{ display:none }
.plot{ grid-template-columns:minmax(0,1fr); flex:1 1 auto; min-height:0 }
.plot > div:last-child{ display:flex; flex-direction:column; min-height:0 }
.plot-area{ height:auto; flex:1 1 auto; min-height:196px }

/* range by finishing level — the control itself lives in the service */
.lv{ margin-top:1.15rem; padding-top:1.1rem; border-top:1px solid var(--ink-07);
  display:flex; flex-direction:column; gap:.5rem }
.lv-h{ font-size:.71rem; color:var(--ink-40); margin-bottom:.15rem }
.lv-row{ display:grid; grid-template-columns:4.2rem minmax(0,1fr) auto;
  gap:.75rem; align-items:center }
.lv-row > span{ font-size:.78rem; color:var(--ink-60) }
.lv-tr{ height:6px; border-radius:var(--r-pill); background:var(--ink-07); overflow:hidden }
.lv-fl{ height:100%; border-radius:var(--r-pill); background:var(--accent-16);
  transition:width .7s cubic-bezier(.22,1,.36,1) }
.lv-row.cur .lv-fl{ background:var(--accent) }
.lv-row.cur > span{ color:var(--ink); font-weight:500 }
.lv-row b{ font-size:.78rem; font-family:var(--display); font-weight:500;
  font-variant-numeric:tabular-nums; white-space:nowrap }
.lv-note{ font-size:.68rem; color:var(--ink-40); margin-top:.2rem }
.legend{ margin-bottom:1.1rem }
.result{ padding-top:1.2rem }
.total b{ font-size:clamp(1.85rem,3.3vw,2.4rem) }
.stats{ grid-template-columns:repeat(2,1fr); margin-top:1rem }
.bd{ margin-top:1.2rem; padding-top:1.1rem; gap:.85rem }

/* ── Nudge — the handoff card itself pulses, three rings then stops.
      A permanent pulse stops being a signal. ─────────────────── */
@keyframes o-pulse{
  0%{   box-shadow:0 0 0 0    var(--accent-16); background:var(--accent-08) }
  45%{                                          background:var(--accent-16) }
  70%{  box-shadow:0 0 0 14px transparent }
  100%{ box-shadow:0 0 0 0    transparent;      background:var(--accent-08) }
}
#o-hand.cta-pulse{ animation:o-pulse 1.8s ease-out 3 }

/* the masked figures invite the click that triggers the nudge */
.bd-lock, b.masked, .lv-row:not(.cur){ cursor:pointer }

/* ── Teaser gate — البنود مقفولة حتى الدخول للخدمة ────────── */
.bd-tag{ font-size:.62rem; font-weight:500; font-family:var(--display);
  padding:.24rem .6rem; border-radius:var(--r-pill);
  background:var(--accent-08); color:var(--accent) }
b.masked{ color:var(--ink-40); letter-spacing:.06em; user-select:none }
.bd-lock{ display:flex; align-items:center; gap:.7rem; margin-top:.25rem;
  padding:.85rem .95rem; border-radius:var(--r-card);
  background:var(--accent-08) }
.bd-lock .lk{ width:1.9rem; height:1.9rem; border-radius:var(--r-pill); flex:none;
  display:grid; place-items:center; background:var(--surface); color:var(--accent) }
.bd-lock b{ display:block; font-family:var(--display); font-weight:500;
  font-size:.78rem; color:var(--ink) }
.bd-lock i{ font-style:normal; font-size:.68rem; color:var(--ink-60) }

.callout[hidden]{ display:none }
.callout.hand{ align-items:center }
.callout .btn{ margin-inline-start:auto; flex:none; font-size:.8rem;
  padding:.6rem .62rem .6rem 1.2rem }
.callout .btn .chip{ width:1.45rem; height:1.45rem }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1080px){
  .hnav{ gap:1.1rem; font-size:.8rem }
  .mark-sub{ display:none }
}

@media (max-width:960px){
  :root{ --gutter:16px }

  /* the bar is 62px here, not 74 — the hero was reserving for the desktop one */
  .hero{ padding-top:calc(62px + 2.6rem); padding-bottom:0 }
  .hero-cta{ margin-top:1.6rem }
  .cluster{ margin-top:2.2rem }
  .plot-area{ min-height:172px }
  .xaxis span{ font-size:.55rem }
  .cell{ padding:1.6rem }
  .svc{ padding:1.4rem }
  .cta{ padding:clamp(2.6rem,9vw,3.6rem) 1.2rem }
  .faq button{ padding:1rem 1.15rem; font-size:.88rem }
  .faq .ans p{ padding:0 1.15rem 1.15rem }
  .calc, .bento, .svcs, .subsvcs, .ft-grid, .steps, .scope{ grid-template-columns:1fr }
  .stats{ grid-template-columns:1fr }
  .yaxis{ font-size:.54rem }
  .callout{ align-items:flex-start }
  .guide{ display:none }

  /* nav moves into a drawer instead of disappearing */
  .hnav{ display:none }
  .burger{ display:flex }
  .drawer{ display:block }
  .hdr-cta .auth-login,
  .hdr-cta .auth-reports,
  .hdr-cta .auth-out{ display:none }
  .hdr-in{ height:62px; padding-inline:1rem .7rem; gap:.7rem; justify-content:space-between }
  .hdr.compact .hdr-in{ height:56px }

  /* hero: the satellites become a grid under the card, not deleted */
  .cluster{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    min-height:0; max-width:520px }
  .hero-card{ grid-column:1/-1; width:100%; justify-self:center; max-width:340px }
  .sat{ position:static; animation:inU .7s cubic-bezier(.22,1,.36,1) both;
    padding:.7rem .8rem }
  .sat-r1{ animation-delay:1.0s } .sat-l1{ animation-delay:1.1s }
  .sat-r2{ animation-delay:1.2s } .sat-l2{ animation-delay:1.3s }
  .tag-pill, .flags{ display:none }
  .under-card{ position:static; transform:none; width:100%; margin-top:1rem;
    animation:inU .8s cubic-bezier(.22,1,.36,1) .95s both }

  /* scene: the fan sat outside the viewport and was clipped away */
  .stage{ flex-direction:column; align-items:center; gap:1rem }
  .sc{ position:static; opacity:1 !important; transform:none !important }
  .scene .fan{ order:2; display:flex; gap:.6rem; overflow-x:auto;
    scroll-snap-type:x mandatory; padding:.3rem .3rem 1rem;
    width:100%; margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter); scrollbar-width:none }
  .scene .fan::-webkit-scrollbar{ display:none }
  .scene .fan .sc{ scroll-snap-align:center; flex:none }
  .phone{ order:1 }


  /* roadmap: the rail turns vertical */
  .road-now{ grid-template-columns:1fr; padding:1.4rem }
  .road{ grid-template-columns:1fr; gap:.85rem; padding-top:0; padding-inline-start:1.9rem }
  .road::before{ inset-inline:auto; inset-inline-start:6px; top:1.4rem; bottom:1.4rem;
    width:2px; height:auto }
  .road::after{ display:none }
  .road-step::before{ top:1.4rem; left:auto; inset-inline-start:-1.9rem;
    transform:translateY(-50%) }
  .road-step.is-later::before{ inset-inline-start:calc(-1.9rem + 1px) }
  /* the comparison table scrolls — say so */
  .cmp-scroll{ position:relative }
  .scroll-hint{ display:flex }

  /* FAQ heading returns above its questions */
  #faq .wrap{ grid-template-columns:1fr; gap:0 }
  #faq .head{ position:static; text-align:center; align-items:center; margin-bottom:2.4rem }
  #faq .head .lede{ max-width:46ch }

  /* footer: two link columns stay side by side — one column wastes the width */
  .ft-grid{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem }
  .ft-brand, .ft-dark{ grid-column:1/-1 }
}

@media (max-width:560px){

  /* the handoff stacks instead of squeezing */
  .callout.hand{ flex-direction:column; align-items:stretch; gap:.85rem }
  .callout .btn{ margin-inline-start:0; justify-content:center }
  .gets{ grid-template-columns:1fr }
  .marq{ mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }

  /* header — the bar has to hold a logo, a CTA and a burger in ~360px */
  .hdr{ padding-inline:12px }
  .hdr-in{ height:58px; padding-inline:.85rem .55rem; gap:.5rem; border-radius:20px }
  .hdr.compact .hdr-in{ height:52px }
  .mark{ gap:.5rem }
  .mark-badge{ width:2.1rem; height:2.1rem }
  .mark-txt{ font-size:1rem }
  .hdr-cta .btn{ font-size:.76rem; padding:.55rem .55rem .55rem .95rem; gap:.5rem }
  .hdr-cta .btn .chip{ width:1.4rem; height:1.4rem; font-size:.75rem }

  /* hero — headline, promise, buttons, then ONE card. Not five. */
  .hero{ padding-top:calc(58px + 2.2rem) }
  .d1{ font-size:2.15rem; line-height:1.3 }
  .hero .lede{ font-size:.94rem; line-height:1.75 }
  .hero-cta{ gap:.5rem; margin-top:1.4rem }
  .hero-cta .btn{ font-size:.84rem }

  .cluster{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
    max-width:none; margin-top:1.9rem }
  .hero-card{ grid-column:1/-1; order:-1; width:100%; max-width:none;
    padding:1.25rem 1.15rem 1.1rem }
  .hero-card .mini{ height:72px; margin-bottom:1rem }
  .hero-card .big{ font-size:1.85rem }
  .under-card{ width:100%; padding:.7rem .8rem }
  /* four floating stats read as clutter at this width — two carry the point */
  .sat-r2, .sat-l2{ display:none }
  .sat{ padding:.6rem .7rem; gap:.5rem }
  .sat b{ font-size:.86rem }
  .sat .ico{ width:1.6rem; height:1.6rem }

  /* calculator */
  .panel, .calc-out{ padding:1.15rem }
  .plot-area{ min-height:150px }
  .lv-row{ grid-template-columns:3.7rem minmax(0,1fr) auto; gap:.6rem }
  .total b{ font-size:1.9rem }
  .stat{ padding:.7rem .8rem }
  .bd-lock{ padding:.75rem .8rem }

  /* the scene — the fan of cards overflowed and clipped at this width.
     The phone already contains everything the cards were repeating. */
  .scene .fan{ display:none }
  .stage{ margin-top:2rem; padding-bottom:0 }
  .phone{ width:min(271px,82vw) }
  .drawer a{ padding:.75rem .95rem; font-size:.9rem }

  /* roadmap */
  .road-step{ padding:1.35rem 1.2rem }
  .road-step.is-later{ padding:calc(1.35rem - 1px) calc(1.2rem - 1px) }
  .now-stats{ grid-template-columns:1fr 1fr }

  .ft-word{ font-size:2rem }
  .ft-dark{ padding:1.3rem }
}

/* below this the bar cannot hold a logo, a CTA and a burger at once.
   The drawer carries the CTA instead. */
@media (max-width:382px){
  .hdr-cta .btn{ display:none }
  .hdr-in{ padding-inline:.85rem .7rem }
  .d1{ font-size:1.95rem }
  .hero-cta{ flex-direction:column; align-items:stretch }
  .hero-cta .btn{ justify-content:center }
}

/* ══ Welcome film ════════════════════════════════════════════ */
.sec.film{ padding-block:clamp(8px,1.8vw,20px) clamp(36px,4.5vw,64px) }
.film-card{
  width:min(640px,100%); margin-inline:auto;
  padding:.85rem; box-shadow:var(--lift-2)
}
.film-frame{
  position:relative; aspect-ratio:16/9; border-radius:18px;
  overflow:hidden; background:var(--ink)
}
.film-frame video{
  display:block; width:100%; height:100%; object-fit:cover;
  background:var(--ink)
}
.film-play{
  position:absolute; inset:0; z-index:2; border:0; cursor:pointer;
  background:rgba(16,16,24,.22); display:grid; place-items:center;
  color:var(--on-accent)
}
.film-play-btn{
  width:3.55rem; height:3.55rem; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center;
  box-shadow:0 14px 32px -14px rgba(0,89,186,.75);
  animation:film-pulse 2.4s ease-out infinite
}
.film-play-btn svg{ margin-inline-start:2px }
.film-play:hover .film-play-btn{ transform:scale(1.06) }
.film-frame.is-on .film-play{ opacity:0; pointer-events:none }
.film-cap{
  margin-top:.85rem; text-align:center;
  font-family:var(--display); font-weight:500;
  font-size:.88rem; line-height:1.7; color:var(--ink-60)
}
.film-cap b{ display:block; color:var(--ink); font-weight:600; margin-bottom:.15rem }
@keyframes film-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,89,186,.38) }
  70%{ box-shadow:0 0 0 16px rgba(0,89,186,0) }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto }
  [data-r]{ opacity:1; transform:none }
  .film-play-btn{ animation:none }
}