* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
  html, body { margin:0; padding:0; }
  ::selection { background: rgba(139,92,255,0.35); color:#fff; }
  html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:rgba(139,92,255,0.45) transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:rgba(139,92,255,0.4); border-radius:100px; border:2px solid transparent; background-clip:padding-box; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(139,92,255,0.65); border:2px solid transparent; background-clip:padding-box; }
  ::-webkit-scrollbar-track{ background:transparent; }

  [data-theme="dark"]{ --grad:radial-gradient(150% 90% at 50% 0%,#0d0b1a 0%,#08070f 48%,#050507 100%); --text:#e9e9f3; --heading:#f5f4fb; --muted:rgba(232,232,245,0.66); --faint:rgba(232,232,245,0.5); --card:rgba(255,255,255,0.035); --cardBorder:rgba(255,255,255,0.08); --module:rgba(255,255,255,0.03); --moduleBorder:rgba(255,255,255,0.07); --tile:rgba(10,9,19,0.5); --tileBorder:rgba(255,255,255,0.08); --grid:rgba(255,255,255,0.06); --divider:rgba(255,255,255,0.06); --footerBg:rgba(8,7,15,0.6); --auroraOpacity:.9; --headerScrolled:rgba(8,7,15,0.72); --ctrlBg:rgba(255,255,255,0.05); --ctrlBorder:rgba(255,255,255,0.1); --ctaBg:rgba(10,9,19,0.6); --sectionsBg:linear-gradient(180deg,rgba(15,13,28,0.78),rgba(9,8,16,0.62)); --sectionsShadow:0 24px 70px rgba(0,0,0,0.35);
    /* product-mock dashboard surfaces (dark) */
    --dash-bg:linear-gradient(160deg,rgba(16,14,30,0.97),rgba(10,9,19,0.97)); --dash-heading:#f2f1f9; --dash-text:#fff; --dash-faint:rgba(232,232,245,0.5); --dash-faint2:rgba(232,232,245,0.4); --dash-panel:rgba(255,255,255,0.03); --dash-panelBorder:rgba(255,255,255,0.07); --dash-float:rgba(16,14,30,0.94); --dash-shadow:0 30px 80px rgba(0,0,0,0.45); --dash-floatShadow:0 16px 44px rgba(0,0,0,0.4); }
  [data-theme="light"]{ --grad:radial-gradient(150% 90% at 50% 0%,#e9eafc 0%,#f1f0fb 48%,#f7f6fc 100%); --text:#403a5c; --heading:#161227; --muted:rgba(48,40,82,0.74); --faint:rgba(48,40,82,0.55); --card:rgba(255,255,255,0.72); --cardBorder:rgba(24,18,48,0.09); --module:rgba(255,255,255,0.62); --moduleBorder:rgba(24,18,48,0.08); --tile:rgba(255,255,255,0.72); --tileBorder:rgba(24,18,48,0.09); --grid:rgba(48,30,110,0.10); --divider:rgba(24,18,48,0.09); --footerBg:rgba(255,255,255,0.55); --auroraOpacity:.5; --headerScrolled:rgba(247,246,252,0.78); --ctrlBg:rgba(24,18,48,0.05); --ctrlBorder:rgba(24,18,48,0.1); --ctaBg:rgba(255,255,255,0.5); --sectionsBg:linear-gradient(180deg,rgba(255,255,255,0.7),rgba(247,246,252,0.55)); --sectionsShadow:0 24px 70px rgba(48,30,110,0.12);
    /* product-mock dashboard surfaces (light) */
    --dash-bg:linear-gradient(160deg,#ffffff,#f6f5fc); --dash-heading:#161227; --dash-text:#1a1430; --dash-faint:rgba(48,40,82,0.6); --dash-faint2:rgba(48,40,82,0.45); --dash-panel:rgba(124,80,255,0.04); --dash-panelBorder:rgba(24,18,48,0.08); --dash-float:rgba(255,255,255,0.92); --dash-shadow:0 30px 80px rgba(48,30,110,0.18); --dash-floatShadow:0 16px 44px rgba(48,30,110,0.16); }
  [data-lang="en"]{ --headFont:'Sora',sans-serif; --bodyFont:'IBM Plex Sans',sans-serif; }
  [data-lang="ar"]{ --headFont:'Tajawal',sans-serif; --bodyFont:'Tajawal',sans-serif; }

  [data-theme="dark"] .heroH{ background:linear-gradient(180deg,#ffffff 0%,#c9c4f5 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  [data-theme="light"] .heroH{ background:linear-gradient(180deg,#1a1430 0%,#5b4bd6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .accentText{ background:linear-gradient(110deg,#8b5cff,#38bdf8,#ec4899); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

  @keyframes auroraA { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(10vw,7vh) scale(1.22)} 66%{transform:translate(-7vw,12vh) scale(.9)} 100%{transform:translate(0,0) scale(1)} }
  @keyframes auroraB { 0%{transform:translate(0,0) scale(1.1)} 50%{transform:translate(-12vw,-9vh) scale(.85)} 100%{transform:translate(0,0) scale(1.1)} }
  @keyframes auroraC { 0%{transform:translate(0,0) scale(.95)} 50%{transform:translate(9vw,-11vh) scale(1.28)} 100%{transform:translate(0,0) scale(.95)} }
  @keyframes orbSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
  @keyframes floatY { 0%{transform:translateY(0)} 50%{transform:translateY(-16px)} 100%{transform:translateY(0)} }
  @keyframes floatY2 { 0%{transform:translateY(0)} 50%{transform:translateY(12px)} 100%{transform:translateY(0)} }
  @keyframes borderFlow { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
  @keyframes growBar { from{transform:scaleY(0)} to{transform:scaleY(1)} }
  @keyframes pulseDot { 0%,100%{opacity:.4; transform:scale(.85)} 50%{opacity:1; transform:scale(1)} }

  /* Boxed menu bar: sits in-flow at the bottom of the first screen; once the
     page scrolls past it, it docks as a fixed rounded bar at the top. */
  .siteHeader{ position:relative; width:100%; border-radius:18px; border:1px solid var(--ctrlBorder); background:var(--headerScrolled); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 12px 38px rgba(0,0,0,0.22); }
  .siteHeader.docked{ position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(1160px, calc(100% - 24px)); z-index:50; animation:dockDown .45s cubic-bezier(.2,.7,.2,1); }
  @keyframes dockDown{ from{ transform:translate(-50%,-130%); } to{ transform:translate(-50%,0); } }

  /* Mobile bar controls — app.js builds both; they are inert above 860px. */
  .menuBtn{ display:none; width:40px; height:40px; flex:none; border-radius:12px; cursor:pointer;
            align-items:center; justify-content:center; color:var(--heading);
            background:var(--ctrlBg); border:1px solid var(--ctrlBorder);
            transition:background .25s ease, border-color .25s ease; }
  .menuBtn:hover{ background:var(--card); }
  .menuBtn .xIcon{ display:none; }
  .menuBtn.open .barsIcon{ display:none; }
  .menuBtn.open .xIcon{ display:block; }
  .menuSheet, .sheetBackdrop{ display:none; }

  /* ── First screen ─────────────────────────────────────────────────────────
     The hero owns exactly one viewport and the boxed menu bar is parked on its
     bottom edge, so on load — at any screen size — the menu is the last thing
     visible and the sections layer starts just under it.
       · svh, not vh: mobile browser chrome must not push the bar below the fold.
       · min-height, never height: a viewport too short for the hero grows
         rather than clipping it. The short-viewport block below compacts the
         vertical rhythm so that stays rare.
       · the slack lands in .heroGrid (which centres its own items), so the
         marquee keeps its full breathing room directly above the bar.
     Inline styles on #top / #nav-slot are why these need !important. */
  #top{
    display:flex; flex-direction:column;
    min-height:100vh;                 /* fallback where svh is unsupported */
    min-height:100svh;
    padding-bottom:10px !important;   /* inline: 90px */
  }
  #top > .heroGrid{ flex:1 1 auto; }
  .sectionsLayer{ margin-top:14px !important; }   /* inline: 24px */

  /* Short viewports. At full rhythm the hero measures 900–930px, so on a
     laptop-height screen the bar would land under the fold. Two tiers:
       ≤900px — tighten the vertical rhythm and the product mock.
       ≤840px — additionally drop the marquee. It is decorative, and removing
                it is the only cut large enough (~130px) to keep the bar on
                screen for the 1366×768 class without shrinking hero type.
     Keep padding-top ≥ 124px in every tier: .heroLogo is absolutely positioned
     at top:30px and runs ~92px tall, so less than that collides with .heroGrid. */
  @media (min-width:861px) and (max-height:1100px){
    #top{ padding-top:156px !important; }         /* inline: 200px */
    #top > div:has(.marquee){ margin-top:44px !important; }   /* inline: 74px */
    #nav-slot{ margin-top:44px !important; }                  /* inline: 64px */
    .heroVisual{ height:min(440px, 42vh) !important; }        /* inline: 480px */
  }
  @media (min-width:861px) and (max-height:900px){
    #top{ padding-top:128px !important; }         /* inline: 200px */
    #top > div:has(.marquee){ margin-top:24px !important; padding:14px 0 16px !important; }
    #nav-slot{ margin-top:24px !important; }      /* inline: 64px */
    .heroVisual{ height:min(360px, 42vh) !important; }
    .heroLogo img{ width:48px !important; height:48px !important; }
    /* the hero's text column, not the product mock, is what overruns here —
       English wraps ~90px taller than Arabic, so the headline and lede carry
       the cut and both languages keep the same layout */
    .heroH{ font-size:clamp(32px,3.4vw,48px) !important; margin-bottom:16px !important; }
    #top .heroGrid > div:first-child > p{ font-size:16.5px !important; margin-bottom:22px !important; }
    #top .heroGrid > div:first-child > div:not(:last-child){ margin-bottom:16px !important; }
  }
  @media (min-width:861px) and (max-height:840px){
    #top{ padding-top:130px !important; }
    #top > div:has(.marquee){ display:none !important; }
    #nav-slot{ margin-top:20px !important; }
  }

  /* hover behaviours (were style-hover in the design) */
  .navLink{ color:var(--muted); text-decoration:none; font-size:15.5px; font-weight:500; transition:color .2s; }
  .navLink:hover{ color:var(--heading); }
  /* scroll-spy active state (applies to the menu links only) — theme-aware:
     white is invisible on the light header, so light uses brand purple. */
  [data-theme="dark"] .navLinks .navLink.active{ color:#fff; }
  [data-theme="light"] .navLinks .navLink.active{ color:#6d3bff; font-weight:600; }
  .footLink{ color:var(--faint); text-decoration:none; font-size:13.5px; transition:color .2s; }
  .footLink:hover{ color:var(--heading); }
  /* footer links that leave the page (the sector pages) — an accent dot marks
     them as destinations rather than in-page anchors */
  .sectorLink{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); }
  .sectorLink::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#8b5cff,#38bdf8); }
  .btnPrimary{ transition:transform .18s ease; }
  .btnPrimary:hover{ transform:translateY(-2px); }
  .btnPrimaryLg{ transition:transform .18s ease; }
  .btnPrimaryLg:hover{ transform:translateY(-3px); }
  .btnGhost{ transition:border-color .2s, background .2s; }
  .btnGhost:hover{ border-color:rgba(139,92,255,0.4); }
  .cardHover{ transition:transform .25s ease, border-color .25s ease; }
  .cardHover:hover{ transform:translateY(-5px); }
  .cardHover.h-purple:hover{ border-color:rgba(139,92,255,0.4); }
  .cardHover.h-sky:hover{ border-color:rgba(56,189,248,0.4); }
  .cardHover.h-pink:hover{ border-color:rgba(236,72,153,0.4); }
  .cardHover.h-green:hover{ border-color:rgba(52,211,153,0.4); }
  .modHover{ transition:transform .2s, border-color .2s; }
  .modHover:hover{ transform:translateY(-4px); }
  .modHover.h-purple:hover{ border-color:rgba(139,92,255,0.3); }
  .modHover.h-sky:hover{ border-color:rgba(56,189,248,0.3); }
  .modHover.h-pink:hover{ border-color:rgba(236,72,153,0.3); }
  .modHover.h-green:hover{ border-color:rgba(52,211,153,0.3); }
  .modHover.h-plain:hover{ transform:translateY(-4px); }

  /* AI-sparkle cursor over info boxes (SVG data-URI; falls back to auto).
     Clickable elements (accordion strips, FAQ, buttons, links) keep their
     normal pointer so clickability stays obvious. */
  .tilt, .expandOnScroll{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 3l-2.2 6.8a2.3 2.3 0 0 1-1.5 1.5L3.5 13.5l6.8 2.2a2.3 2.3 0 0 1 1.5 1.5L14 24l2.2-6.8a2.3 2.3 0 0 1 1.5-1.5l6.8-2.2-6.8-2.2a2.3 2.3 0 0 1-1.5-1.5z' fill='%238b5cff' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, auto;
  }

  /* 3D tilt + cursor spotlight (JS sets --mx/--my and the transform; the CSS
     hover transforms above stay as a no-JS fallback) */
  .tilt{ position:relative; transform-style:preserve-3d; }
  .tilt::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(139,92,255,0.16), transparent 65%); }
  .tilt:hover::after{ opacity:1; }

  /* hover-reveal photo backgrounds (.hasBg cards across all sections) */
  .hasBg{ overflow:hidden; }
  .cardBg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.1); transition:opacity .5s ease, transform .9s ease; pointer-events:none; }
  .cardShade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,7,15,0.55),rgba(8,7,15,0.86)); opacity:0; transition:opacity .5s ease; pointer-events:none; }
  .hasBg:hover .cardBg{ opacity:1; transform:scale(1.02); }
  .hasBg:hover .cardShade{ opacity:1; }
  .hasBg > :not(.cardBg):not(.cardShade){ position:relative; z-index:1; }
  /* !important because every card's h3/p carries an inline color:var(--heading)
     / var(--muted). Without it the light theme keeps its near-black heading on
     the dark shade and the card reads as unreadable while hovered. */
  .hasBg:hover h3{ color:#fff !important; }
  .hasBg:hover p{ color:rgba(255,255,255,0.85) !important; }

  /* Touch devices cannot hover, so the photo that desktop reveals on hover is
     simply always on there — otherwise half of each card's design is
     unreachable on a phone. Matched on width OR no-hover, so a narrow desktop
     window gets it too; on those the :hover rules above still win on
     specificity, so the zoom-in on hover survives. */
  @media (max-width:860px), (hover: none){
    .cardBg{ opacity:1; transform:scale(1.02); }
    .cardShade{ opacity:1; }
    .hasBg h3{ color:#fff !important; }
    .hasBg p{ color:rgba(255,255,255,0.85) !important; }
  }

  /* icon pop inside cards */
  .cardHover svg, .modHover svg{ transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
  .cardHover:hover svg, .modHover:hover svg{ transform:scale(1.15) rotate(-5deg); }

  /* marquee chips lift toward the cursor */
  .mChip{ transition:transform .25s ease, border-color .25s ease, color .25s ease; }
  .mChip:hover{ transform:translateY(-3px); border-color:rgba(139,92,255,0.45); color:var(--heading); }

  /* FAQ rows react on hover */
  .faqQ{ transition:color .25s ease; }
  .faqQ:hover{ color:#8b5cff; }
  .faqQ .plus{ transition:transform .3s ease, background .3s ease, border-color .25s ease; }
  .faqQ:hover .plus{ border-color:rgba(139,92,255,0.55); }

  /* big photo blocks: slow zoom on hover */
  .expandOnScroll img{ transition:transform .9s ease; }
  .expandOnScroll:hover img{ transform:scale(1.035); }

  /* Section bands inside .sectionsLayer — each body section gets its own hue +
     pattern so visitors can tell where one section ends and the next begins. */
  .band{ position:relative; }
  .band + .band{ border-top:1px solid var(--divider); }
  .band-purple{ background:
      radial-gradient(90% 55% at 50% 0%, rgba(139,92,255,0.13), transparent 72%),
      radial-gradient(rgba(139,92,255,0.13) 1px, transparent 1.6px);
    background-size:auto, 26px 26px; }
  .band-sky{ background:
      radial-gradient(90% 55% at 50% 0%, rgba(56,189,248,0.11), transparent 72%),
      repeating-linear-gradient(45deg, rgba(56,189,248,0.07) 0 1.5px, transparent 1.5px 28px); }
  .band-pink{ background:
      radial-gradient(90% 55% at 50% 0%, rgba(236,72,153,0.10), transparent 72%),
      linear-gradient(rgba(236,72,153,0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(236,72,153,0.055) 1px, transparent 1px);
    background-size:auto, 36px 36px, 36px 36px; }
  .band-green{ background:
      radial-gradient(90% 60% at 50% 100%, rgba(52,211,153,0.12), transparent 72%),
      repeating-linear-gradient(-45deg, rgba(52,211,153,0.06) 0 1.5px, transparent 1.5px 30px); }

  /* Infinite marquee of "what you'll do in Sajool" chips (hero strip) */
  .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
  .marqueeTrack{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
  .marqueeTrack:hover{ animation-play-state:paused; }
  .marqueeGroup{ display:flex; gap:12px; padding-inline-end:12px; }
  @keyframes marquee{ to{ transform:translateX(-50%); } }
  .mChip{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:100px; background:var(--ctrlBg); border:1px solid var(--ctrlBorder); font-size:13.5px; color:var(--muted); white-space:nowrap; }
  .mDot{ width:7px; height:7px; border-radius:50%; flex:none; }
  @media (prefers-reduced-motion: reduce){ .marqueeTrack{ animation:none; } }

  /* Scroll-driven expand: big media blocks scale up as they enter the viewport.
     Progressive enhancement — browsers without animation-timeline just show them. */
  @supports (animation-timeline: view()) {
    .expandOnScroll{ animation:expandIn linear both; animation-timeline:view(); animation-range:entry 0% entry 85%; }
    @keyframes expandIn{ from{ transform:scale(.92); opacity:.55; } to{ transform:scale(1); opacity:1; } }
    @media (prefers-reduced-motion: reduce){ .expandOnScroll{ animation:none; } }
  }

  /* Expanding photo accordion — hover/tap a strip to grow it, others collapse
     into labelled slivers (the ANDROID/IOS/DESKTOP pattern from the reference) */
  .xAcc{ display:flex; gap:14px; height:400px; margin-top:18px; }
  .xPanel{ position:relative; overflow:hidden; border-radius:18px; flex:1; min-width:0; cursor:pointer; border:1px solid var(--moduleBorder); transition:flex .7s cubic-bezier(.25,.8,.25,1); }
  .xPanel.open{ flex:4; cursor:default; }
  .xPanel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
  .xPanel:not(.open):hover img{ transform:scale(1.06); }
  .xPanel .shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,7,15,0.04) 45%,rgba(8,7,15,0.66) 100%); transition:background .5s ease; }
  .xPanel:not(.open) .shade{ background:rgba(8,7,15,0.45); }
  .xLabelV{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:18px; opacity:1; transition:opacity .35s ease; }
  .xLabelV span{ writing-mode:vertical-rl; transform:rotate(180deg); color:#fff; font-family:var(--headFont); font-weight:600; font-size:14px; letter-spacing:.4px; white-space:nowrap; }
  .xPanel.open .xLabelV{ opacity:0; }
  .xCap{ position:absolute; bottom:16px; inset-inline-start:16px; max-width:calc(100% - 32px); display:inline-flex; align-items:center; padding:12px 20px; border-radius:14px; background:rgba(10,9,19,0.45); border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; opacity:0; transform:translateY(14px); transition:opacity .5s ease .25s, transform .5s ease .25s; }
  .xPanel.open .xCap{ opacity:1; transform:none; }
  .xCap .t{ font-family:var(--headFont); font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Steps connector (1——2——3), hidden when the grid stacks on mobile */
  .stepConnector{ position:relative; margin:0 auto 24px; }
  .stepConnector .line{ position:absolute; top:50%; left:16.7%; right:16.7%; height:2px; transform:translateY(-50%); background:linear-gradient(90deg,#8b5cff,#0ea5e9,#ec4899); opacity:.4; }
  .stepConnector .nums{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); justify-items:center; }
  .stepNum{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--headFont); font-weight:800; font-size:19px; box-shadow:0 8px 24px rgba(124,80,255,0.35); }

  /* Testimonials carousel */
  .tsBtn{ width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--ctrlBg); border:1px solid var(--ctrlBorder); color:var(--heading); transition:border-color .2s, transform .2s; }
  .tsBtn:hover{ border-color:rgba(139,92,255,0.5); transform:translateY(-2px); }
  .tsDot{ width:8px; height:8px; border-radius:100px; border:none; padding:0; cursor:pointer; background:var(--ctrlBorder); transition:all .3s ease; }
  .tsDot.on{ width:22px; background:linear-gradient(90deg,#8b5cff,#6d3bff); }

  /* FAQ accordion */
  .faqItem{ border-bottom:1px solid var(--divider); }
  .faqQ{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; background:none; border:none; cursor:pointer; text-align:start; font-family:var(--headFont); font-size:16.5px; font-weight:600; color:var(--heading); }
  .faqQ .plus{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ctrlBg); border:1px solid var(--ctrlBorder); color:var(--heading); transition:transform .3s ease, background .3s ease; }
  .faqItem.open .plus{ transform:rotate(45deg); background:linear-gradient(135deg,#8b5cff,#6d3bff); color:#fff; border-color:transparent; }
  .faqA{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .faqA p{ margin:0; padding:0 4px 22px; font-size:14.5px; line-height:1.75; color:var(--muted); font-weight:300; }
  .faqItem.open .faqA{ max-height:300px; }

  /* ── Sectors dropdown ──────────────────────────────────────────────────
     The panel is a child of .siteHeader, NOT of .navLinks: that row becomes an
     overflow-x:auto scroller below 1140px and would clip anything nested in it.
     Living on the header also means it tracks the bar when it docks. JS sets
     `left` from the trigger's offset within the header, so one rule serves both
     directions. */
  .sectorsBtn{ display:inline-flex; align-items:center; gap:6px; padding:0; border:none; background:none;
    cursor:pointer; font-family:var(--bodyFont); }
  .sectorsBtn .chev{ transition:transform .25s ease; }
  .sectorsBtn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  [data-theme="dark"] .sectorsBtn[aria-expanded="true"]{ color:#fff; }
  [data-theme="light"] .sectorsBtn[aria-expanded="true"]{ color:#6d3bff; }

  .sectorsMenu{ position:absolute; top:calc(100% + 10px); left:0; z-index:60; min-width:236px; padding:8px;
    border-radius:16px; background:var(--headerScrolled); border:1px solid var(--ctrlBorder);
    box-shadow:0 18px 48px rgba(0,0,0,0.3); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .22s ease, transform .22s ease; }
  .sectorsMenu.open{ opacity:1; transform:none; pointer-events:auto; }
  /* flipped above the trigger when the bar is too near the bottom of the
     viewport for the panel to fit under it — app.js sets .up on open */
  .sectorsMenu.up{ top:auto; bottom:calc(100% + 10px); transform:translateY(8px); }
  .sectorsMenu.up.open{ transform:none; }
  .sectorsItem{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px;
    text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; white-space:nowrap;
    transition:background .2s ease, color .2s ease; }
  .sectorsItem:hover{ background:var(--ctrlBg); color:var(--heading); }
  .sectorsItem .ic{ flex:none; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
  @media (prefers-reduced-motion: reduce){ .sectorsMenu{ transition:none; } }

  .logoIcon{ width:38px; height:38px; border-radius:11px; object-fit:cover; box-shadow:0 0 22px rgba(139,92,255,0.35); }
  .logoIconSm{ width:34px; height:34px; border-radius:10px; object-fit:cover; }

  /* Floating action buttons (back-to-top + WhatsApp), bottom-end corner. */
  /* align-items:flex-end pins the round button to the screen edge the stack is
     docked against — the stack sits right in LTR and left in RTL, and in both
     cases that edge is the flex end, so one value covers both languages. It
     lines the button up with the edge of the expanded chat pills instead of
     centring it under them. */
  .fab-stack{ position:fixed; bottom:22px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
  [data-lang="en"] .fab-stack{ right:22px; }
  [data-lang="ar"] .fab-stack{ left:22px; }
  .fab{ border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:transform .2s ease, box-shadow .2s ease, opacity .3s ease; }
  .fab:hover{ transform:translateY(-3px); }
  .fab-wa{ width:54px; height:54px; background:#25D366; box-shadow:0 10px 30px rgba(37,211,102,0.45); }
  .fab-wa:hover{ box-shadow:0 14px 36px rgba(37,211,102,0.6); }

  /* ── AI info dialog: sticky chat-style popup, opened by clicking any box ── */
  .aiDialog{ position:fixed; bottom:96px; z-index:70; width:min(380px, calc(100vw - 28px)); border-radius:20px; background:var(--dash-float); border:1px solid rgba(139,92,255,0.35); box-shadow:0 24px 70px rgba(0,0,0,0.45); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:0; transform:translateY(18px) scale(.97); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
  [data-lang="en"] .aiDialog{ right:22px; }
  [data-lang="ar"] .aiDialog{ left:22px; }
  .aiDialog.open{ opacity:1; transform:none; pointer-events:auto; }
  .aiHead{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--divider); }
  .aiHead .t{ flex:1; font-family:var(--headFont); font-weight:600; font-size:14.5px; color:var(--dash-heading); }
  .aiSpark{ width:30px; height:30px; flex:none; border-radius:9px; background:linear-gradient(135deg,#8b5cff,#6d3bff); display:flex; align-items:center; justify-content:center; color:#fff; }
  .aiClose{ width:28px; height:28px; flex:none; border-radius:8px; background:var(--ctrlBg); border:1px solid var(--ctrlBorder); color:var(--dash-heading); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; }
  .aiBody{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(139,92,255,0.45) transparent; }
  .aiBody::-webkit-scrollbar{ width:6px; }
  .aiBody::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8b5cff,#6d3bff); border-radius:100px; }
  .aiBody::-webkit-scrollbar-track{ background:transparent; }
  .aiMsg{ font-size:13.5px; line-height:1.75; padding:10px 14px; border-radius:14px; max-width:88%; min-width:0; overflow-wrap:anywhere; word-break:break-word; box-sizing:border-box; }
  .aiMsg strong{ font-weight:700; color:inherit; }
  .aiTopic{ align-self:flex-end; background:linear-gradient(135deg,#8b5cff,#6d3bff); color:#fff; font-weight:600; border-end-end-radius:4px; }
  .aiAns{ align-self:flex-start; background:var(--ctrlBg); border:1px solid var(--ctrlBorder); color:var(--dash-text); border-end-start-radius:4px; min-height:20px; }
  .aiFoot{ padding:12px 16px 14px; border-top:1px solid var(--divider); display:flex; flex-direction:column; gap:9px; }
  .aiForm{ display:flex; align-items:center; gap:8px; }
  .aiInput{ flex:1; min-width:0; padding:10px 15px; border-radius:100px; background:var(--ctrlBg); border:1px solid var(--ctrlBorder); color:var(--dash-text); font-family:var(--bodyFont); font-size:13.5px; outline:none; transition:border-color .25s ease; }
  .aiInput:focus{ border-color:rgba(139,92,255,0.6); }
  .aiInput::placeholder{ color:var(--dash-faint); }
  .aiSend{ width:38px; height:38px; flex:none; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#8b5cff,#6d3bff); box-shadow:0 6px 18px rgba(124,80,255,0.4); transition:transform .2s ease, opacity .2s ease; }
  .aiSend:hover{ transform:translateY(-2px); }
  .aiSend:disabled{ opacity:.5; cursor:default; transform:none; }
  .aiMsg.aiErr{ align-self:flex-start; background:rgba(236,72,153,0.12); border:1px solid rgba(236,72,153,0.3); color:var(--dash-text); }
  .aiTyping{ display:inline-flex; gap:4px; align-items:center; }
  .aiTyping i{ width:6px; height:6px; border-radius:50%; background:var(--dash-faint); animation:pulseDot 1.2s infinite; }
  .aiTyping i:nth-child(2){ animation-delay:.2s; } .aiTyping i:nth-child(3){ animation-delay:.4s; }
  .aiFull{ text-align:center; padding:10px 14px; border-radius:12px; text-decoration:none; font-size:13px; font-weight:600; color:#fff; background:linear-gradient(135deg,#8b5cff,#6d3bff); box-shadow:0 8px 22px rgba(124,80,255,0.35); }

  /* ── demo request modal: books a demo as a presales ticket on the desk ── */
  .demoOverlay{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(8,6,18,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .demoOverlay.open{ opacity:1; pointer-events:auto; }
  .demoModal{ width:min(460px,100%); max-height:calc(100vh - 40px); overflow-y:auto; border-radius:20px; background:var(--dash-float); border:1px solid rgba(139,92,255,0.35); box-shadow:0 24px 70px rgba(0,0,0,0.45); transform:translateY(18px) scale(.97); transition:transform .3s ease; scrollbar-width:thin; scrollbar-color:rgba(139,92,255,0.45) transparent; }
  .demoOverlay.open .demoModal{ transform:none; }
  .demoHead{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--divider); }
  .demoHead .t{ flex:1; font-family:var(--headFont); font-weight:600; font-size:15px; color:var(--dash-heading); }
  .demoBody{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; }
  .demoSub{ margin:0; font-size:13px; line-height:1.7; color:var(--dash-text); }
  .demoGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:520px){ .demoGrid{ grid-template-columns:1fr; } }
  .demoField{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--dash-heading); }
  .demoInput{ padding:10px 13px; border-radius:12px; background:var(--ctrlBg); border:1px solid var(--ctrlBorder); color:var(--dash-text); font-family:var(--bodyFont); font-size:13.5px; outline:none; transition:border-color .25s ease; width:100%; box-sizing:border-box; }
  .demoInput:focus{ border-color:rgba(139,92,255,0.6); }
  .demoTextarea{ resize:vertical; min-height:64px; }
  .demoErr{ font-size:12.5px; line-height:1.6; padding:9px 13px; border-radius:12px; background:rgba(236,72,153,0.12); border:1px solid rgba(236,72,153,0.3); color:var(--dash-text); }
  .demoSubmitBtn{ padding:12px 20px; border-radius:12px; border:none; cursor:pointer; font-family:var(--bodyFont); font-size:14px; font-weight:600; color:#fff; background:linear-gradient(135deg,#8b5cff,#6d3bff); box-shadow:0 8px 22px rgba(124,80,255,0.35); transition:transform .2s ease, opacity .2s ease; }
  .demoSubmitBtn:hover{ transform:translateY(-2px); }
  .demoSubmitBtn:disabled{ opacity:.55; cursor:default; transform:none; }
  .demoDone{ padding:28px 18px 24px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .demoDoneIcon{ width:52px; height:52px; border-radius:50%; background:rgba(52,211,153,0.15); border:1px solid rgba(52,211,153,0.4); display:flex; align-items:center; justify-content:center; }
  .demoDoneT{ font-family:var(--headFont); font-weight:700; font-size:17px; color:var(--dash-heading); }
  .demoDoneB{ margin:0 0 6px; font-size:13.5px; line-height:1.7; color:var(--dash-text); }

  /* ── combined WhatsApp + AI FAB: faces flip on an interval; click opens a
        chooser (WhatsApp chat or the AI assistant) ── */
  .fab-chat{ width:54px; height:54px; position:relative; background:transparent !important; box-shadow:none !important; perspective:600px; }
  .fab-chat .face{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .65s cubic-bezier(.4,.1,.2,1); }
  .fab-chat .face-wa{ background:#25D366; box-shadow:0 10px 30px rgba(37,211,102,0.45); transform:rotateY(0deg); }
  .fab-chat .face-ai{ background:linear-gradient(135deg,#8b5cff,#6d3bff); box-shadow:0 10px 30px rgba(124,80,255,0.5); transform:rotateY(-180deg); }
  .fab-chat.flip .face-wa{ transform:rotateY(180deg); }
  .fab-chat.flip .face-ai{ transform:rotateY(0deg); }
  .chatMenu{ display:flex; flex-direction:column; align-items:stretch; gap:8px; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
  .chatMenu.open{ opacity:1; transform:none; pointer-events:auto; }
  .chatOpt{ display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:100px; font-size:13.5px; font-weight:600; color:#fff; text-decoration:none; border:none; cursor:pointer; font-family:var(--bodyFont); white-space:nowrap; box-shadow:0 8px 22px rgba(0,0,0,0.25); }
  .chatOpt.wa{ background:#25D366; }
  .chatOpt.ai{ background:linear-gradient(135deg,#8b5cff,#6d3bff); }

  /* Language control: a single icon button carrying the OTHER language's
     letters — app.js hides whichever one is current — sized to match the theme
     toggle next to it. The !important overrides the inline segmented-control
     padding the markup still carries. */
  .langCtrl{ width:38px; height:38px; flex:none; justify-content:center; padding:0 !important; }
  .langCtrl button{
    width:100%; height:100%; padding:0 !important; border-radius:11px !important;
    display:flex; align-items:center; justify-content:center;
    background:transparent; color:var(--heading);
  }
  .langCtrl button:hover{ background:var(--card); }

  /* Chat FAB, riding on the outer edge of the desktop bar — last in the
     controls, so it lands far left in RTL and far right in LTR. .fab-stack
     becomes the positioning context so the chooser aligns to the button rather
     than to the header; it flies UP from the bar while that sits at the foot of
     the first screen, and DOWN once the bar has docked to the top. Declared
     after the [data-lang] .fab-stack offsets so `inset:auto` wins on order. */
  .headerCtrls .fab-stack{ position:relative; inset:auto; z-index:auto; gap:0; }
  .headerCtrls .fab-chat{ width:38px; height:38px; }
  .headerCtrls .fab-chat svg{ width:17px; height:17px; }
  /* 25px = the 13px the 38px button is inset from the 64px bar's edge, plus a
     12px gap, so the chooser clears the bar itself rather than just the button */
  .headerCtrls .chatMenu{ position:absolute; inset-inline-end:0; bottom:calc(100% + 25px); z-index:70; }
  .siteHeader.docked .headerCtrls .chatMenu{ bottom:auto; top:calc(100% + 25px); }

  /* Between the mobile breakpoint and ~1140px the menu can consume the whole
     header. The brand link is the only shrinkable item (min-width:0), so it
     collapses to nothing while the menu stays full width — badly so on the
     sector pages, which carry six items. Pin the brand and let the menu scroll
     horizontally instead; it only scrolls when it actually overflows.
     Two-class selectors on purpose: each sector page sets .navLinks{flex:none}
     in its own later style block, and a media query adds no specificity. */
  /* The brand is pinned at EVERY desktop width, not just in the band below.
     It is the only shrinkable item in the bar, so whatever the menu cannot fit
     comes out of it — and since the bar stops growing at 1160px, a wide viewport
     is no protection. Six items is still the practical maximum; this is the
     backstop that turns a seventh into a scrolling menu rather than a 70px
     brand. */
  @media (min-width:861px){
    .headerInner > a:first-child{ flex:none; }
  }
  @media (min-width:861px) and (max-width:1140px){
    .headerInner .navLinks{
      flex:1 1 auto; min-width:0;
      overflow-x:auto; overflow-y:hidden;
      scrollbar-width:none;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
              mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
    }
    .headerInner .navLinks::-webkit-scrollbar{ display:none; }
  }

  @media (max-width:860px){
    .siteHeader{ border-radius:16px; }
    .siteHeader.docked{ top:8px; width:calc(100% - 16px); }
    .sectionsLayer{ margin:16px 10px 44px !important; border-radius:24px !important; }
    .stepConnector{ display:none; }
    /* photo accordion stacks vertically on mobile: collapsed = labelled bars */
    .xAcc{ flex-direction:column; height:auto; }
    .xPanel{ flex:none; height:64px; transition:height .6s cubic-bezier(.25,.8,.25,1); }
    .xPanel.open{ flex:none; height:280px; }
    .xLabelV{ align-items:center; justify-content:flex-start; padding:0 18px; }
    .xLabelV span{ writing-mode:horizontal-tb; transform:none; }
    .heroGrid{ grid-template-columns:1fr !important; }
    /* one card per row: at phone widths a 2-up "why" card is ~160px wide, which
       wraps its heading to four lines and its body to a column of 2–3 words */
    .whyGrid{ grid-template-columns:1fr !important; }

    /* ── Card groups as accordions ────────────────────────────────────────
       A grid of 4–8 full-height photo cards is an enormous scroll on a phone.
       app.js tags every group of photo cards (see initCardAccordion); here each
       one collapses to its heading over its own photo, and tapping opens it —
       one card open per group, the same bargain .xAcc strikes just above.
       What folds away is the icon and the body copy; the HEADING never does, so
       a two-line title can't be clipped the way a fixed strip height would clip
       it. Everything is inside this media block, so desktop is untouched even
       though the classes are always present. */
    /* one duration/easing for every part of the open-close, so the padding, the
       heading, the icon, the copy and the photo all land together */
    .sjAccCard{ --sjAccT:.42s; --sjAccE:cubic-bezier(.2,.7,.2,1);
                position:relative; padding:15px 18px !important;
                transition:padding var(--sjAccT) var(--sjAccE), gap var(--sjAccT) var(--sjAccE); }
    .sjAccCard.open{ padding:22px 20px !important; }
    /* room at the end for the chevron, so a long heading never runs under it.
       gap:0 matters for the workflow cards, which are a flex row whose 16px gap
       would otherwise indent the heading past the collapsed icon's empty slot. */
    .sjAccCard:not(.open){ cursor:pointer; padding-inline-end:42px !important;
                           text-align:start !important; gap:0 !important; }

    /* Only the OPEN card carries its photo — a stack of closed strips all
       showing one is visual noise, and the strip reads better as a plain row.
       The white text and chevron of the photo treatment have to come back with
       it: on the light theme they would be invisible against a plain card.
       These out-specify both the always-on rules near the top of the file and
       the .hasBg:hover ones, so a pointer over a closed strip changes nothing.
       The fade itself is the .cardBg/.cardShade opacity transition they already
       carry. */
    .sjAccCard:not(.open) .cardBg, .sjAccCard:not(.open) .cardShade{ opacity:0; }

    /* Heading: the strip labels read as one set rather than four sizes of
       heading, and the bottom margin exists only to clear body copy that is
       folded away. Both are animatable, so the label grows into the open card's
       heading rather than snapping. */
    .sjAccCard h3{ transition:font-size var(--sjAccT) var(--sjAccE),
                              margin var(--sjAccT) var(--sjAccE), color .3s ease; }
    .sjAccCard:not(.open) h3{ font-size:16px !important; margin:0 !important; color:var(--heading) !important; }

    /* Body copy. app.js wraps it in .sjAccBody precisely so this can animate to
       the copy's OWN height (grid 0fr → 1fr) instead of to a guessed max-height,
       which would race through the real height and then stall — the artifact the
       FAQ's max-height accordion has to live with. */
    .sjAccBody{ display:grid; grid-template-rows:0fr; opacity:0;
                transition:grid-template-rows var(--sjAccT) var(--sjAccE), opacity .26s ease; }
    .sjAccCard.open .sjAccBody{ grid-template-rows:1fr; opacity:1; }
    .sjAccBody > *{ overflow:hidden; min-height:0; }

    /* Icon. Fixed sizes (48/42px boxes, a 22px bare svg), so unlike the body copy
       these animate cleanly on max-height/max-width with no overshoot to guess
       at. max-width is what stops the workflow row's icon leaving a gap. */
    .sjAccCard > svg, .sjAccCard > div:has(> svg){
      transition:max-height var(--sjAccT) var(--sjAccE), max-width var(--sjAccT) var(--sjAccE),
                 margin var(--sjAccT) var(--sjAccE), transform var(--sjAccT) var(--sjAccE),
                 opacity .26s ease;
    }
    .sjAccCard:not(.open) > svg, .sjAccCard:not(.open) > div:has(> svg){
      max-height:0; max-width:0; margin:0 !important;
      opacity:0; transform:scale(.5); overflow:hidden;
    }

    /* Chevron. ::before, not ::after — .tilt::after is the cursor spotlight, and
       its inset:0 / opacity:0 would fight this. z-index because the generated
       box is not matched by .hasBg's `> :not(.cardBg)` stacking rule and would
       otherwise paint underneath the photo. Declared on every card rather than
       only the closed ones so it can fade and swing rather than blink away. */
    .sjAccCard::before{
      content:""; position:absolute; z-index:2; pointer-events:none;
      top:50%; inset-inline-end:18px; margin-top:-6px; width:8px; height:8px;
      border-right:2px solid var(--faint);
      border-bottom:2px solid var(--faint);
      transform:rotate(45deg); opacity:1;
      transition:opacity .26s ease, transform var(--sjAccT) var(--sjAccE);
    }
    .sjAccCard.open::before{ opacity:0; transform:rotate(225deg); }

    @media (prefers-reduced-motion: reduce){
      .sjAccCard, .sjAccCard h3, .sjAccBody, .sjAccCard::before,
      .sjAccCard > svg, .sjAccCard > div:has(> svg){ transition:none !important; }
    }
    /* ── The product mock on phones ───────────────────────────────────────
       It used to be dropped here, which cost the page the one thing that shows
       what the product actually looks like. It is shown instead, directly under
       the headline. .heroGrid stacks to a single column at this width, which
       would put the mock below the entire text column; display:contents promotes
       that column's children to grid items so `order` can seat it between the
       headline and the lede. Safe because that wrapper <div> carries no styles
       and no data-reveal of its own — every one of its children does.
       The height is NOT decorative: the mock inside is absolutely positioned, so
       the container never sizes to it. It measures 380px at phone widths (the
       KPI labels wrap where they don't on desktop) and is offset 30px down, so
       anything under it lets the mock spill over the lede below. With the KPI
       pair stacked (see the rule under this one) the mock measures ~446px at
       phone widths and is offset 30px down, so the container needs ~480. */
    .heroVisual{ display:block !important; height:500px !important; order:3 !important; }
    /* The mock's KPI pair stacks instead of sitting side by side. Two-up leaves
       each figure ~100px of content width, and "﷼ 842,500" needs 105px at its
       designed 22px — so it wrapped onto a second line and read as a rendering
       fault. Shrinking the type only moves the problem to narrower phones (a
       360px screen leaves 86px, a 320px one 66px); stacking fixes it at every
       width and keeps the figures at full size. Matched on the inline style
       because that grid has no class to hang a rule on. */
    .heroVisual [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
    .heroGrid > div:first-child{ display:contents; }
    .heroGrid > div:first-child > *{ order:4; }                /* lede, CTAs, trust */
    .heroGrid > div:first-child > div:first-child{ order:1; }  /* status badge */
    .heroGrid > div:first-child > h1{ order:2; }
    /* same first-screen budget as the short-viewport tiers above. The bar is
       out of flow here (see below) and #nav-slot only reserves its ~58px, but
       phones run 640–930px tall, so the decorative marquee still has to go. */
    #top{ padding-top:130px !important; }
    #top > div:has(.marquee){ display:none !important; }
    #nav-slot{ margin-top:26px !important; }
    .heroLogo img{ width:48px !important; height:48px !important; }
    .heroH{ font-size:clamp(29px,8vw,36px) !important; margin-bottom:14px !important; }
    #top .heroGrid > div:first-child > p{ font-size:15.5px !important; margin-bottom:20px !important; }
    #top .heroGrid > div:first-child > div:not(:last-child){ margin-bottom:14px !important; }
    .twoCol{ grid-template-columns:1fr !important; }
    .stepGrid{ grid-template-columns:1fr !important; }
    /* ── The bar itself ───────────────────────────────────────────────────
       One row — logo at the start, brand name centred, menu button at the end
       — pinned to the bottom of the viewport for the whole page. It never
       docks to the top, so .docked is overridden rather than honoured, and
       app.js stops toggling it here. --sjBarH is the measured bar height,
       published by app.js; the fallback keeps the page usable if JS fails. */
    .siteHeader, .siteHeader.docked{
      position:fixed; top:auto; bottom:8px; left:8px; right:8px;
      width:auto; transform:none; z-index:60;
      border-radius:16px; animation:none;
    }
    .headerInner{ position:relative; flex-wrap:nowrap !important; padding:9px 10px !important; }
    /* Bar order, reading-direction aware: menu button first (right in RTL,
       left in LTR), brand centred, chat FAB last. The brand link keeps its
       place in the middle but collapses to nothing — its icon is hidden and
       its name is absolutely centred — so space-between puts the two buttons
       on the two edges. */
    .menuBtn{ order:1; }
    .headerInner > a:first-child{ flex:none; order:2; }
    .headerInner .logoIcon{ display:none; }   /* the chat FAB takes this slot */
    /* the brand name is centred on the bar, so it leaves the icon's flow */
    .headerInner > a:first-child [data-brand]{
      position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
      width:max-content; margin:0 auto; pointer-events:none;
      font-size:16px !important;
    }
    /* app.js MOVES these into the sheet; hiding them here is the no-JS fallback
       that keeps the bar to one row either way */
    .siteHeader .navLinks, .siteHeader .headerCtrls{ display:none !important; }
    .menuBtn{ display:flex; }
    /* app.js moves the chat FAB into the bar; these are the no-JS fallback,
       where it stays floating and has to clear the fixed bar */
    .fab-stack{ bottom:calc(var(--sjBarH, 58px) + 24px); }
    #root{ padding-bottom:calc(var(--sjBarH, 58px) + 22px); }

    /* ── Chat FAB, riding in the bar ──────────────────────────────────────
       Static in the row so it sits on the end edge, but its chooser still
       has to fly out upward — anchored to .headerInner, which is relative. */
    .headerInner .fab-stack{ order:3; position:static; gap:0; }
    .headerInner .fab-chat{ width:40px; height:40px; }
    .headerInner .fab-chat svg{ width:19px; height:19px; }
    /* 10px == .headerInner's inline padding, so the chooser's edge lines up
       with the button's rather than with the bar's inner border */
    .headerInner .chatMenu{
      position:absolute; bottom:calc(100% + 16px); inset-inline-end:10px; z-index:62;
    }

    /* ── The sheet ────────────────────────────────────────────────────────
       Everything the row gave up, stacked above the bar (not over it, so the
       button that opened it stays reachable to close it). */
    .sheetBackdrop{
      display:block; position:fixed; inset:0; z-index:64;
      background:rgba(4,3,10,0.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
      opacity:0; pointer-events:none; transition:opacity .25s ease;
    }
    .sheetBackdrop.open{ opacity:1; pointer-events:auto; }
    .menuSheet{
      display:flex; flex-direction:column; gap:12px;
      position:fixed; left:8px; right:8px; z-index:66;
      bottom:calc(var(--sjBarH, 58px) + 16px);
      max-height:calc(100svh - var(--sjBarH, 58px) - 34px); overflow-y:auto;
      padding:14px; border-radius:20px;
      border:1px solid var(--ctrlBorder); background:var(--headerScrolled);
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      box-shadow:0 -20px 60px rgba(0,0,0,0.45);
      opacity:0; transform:translateY(14px) scale(.98); transform-origin:bottom center;
      pointer-events:none;
      transition:opacity .24s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .menuSheet.open{ opacity:1; transform:none; pointer-events:auto; }
    /* nav links: a vertical list of full-width rows, not the old scrolled row */
    .menuSheet .navLinks{
      /* the header's inline align-items:center would centre-shrink each row */
      display:flex !important; flex-direction:column; align-items:stretch !important;
      width:100%; gap:6px !important; margin:0 !important; overflow:visible !important;
    }
    .menuSheet .navLink{
      display:flex; align-items:center; padding:12px 14px; border-radius:12px;
      font-size:15px; background:var(--ctrlBg); border:1px solid var(--ctrlBorder);
    }
    [data-theme] .menuSheet .navLink.active{
      color:#fff; background:linear-gradient(135deg,#8b5cff,#6d3bff); border-color:transparent;
    }
    /* The sectors panel is a collapsible group INSIDE the list rather than a
       flattened run of rows: app.js moves it in directly after its own trigger,
       which stays visible here and opens it. It still toggles on the .open
       class, so initSectorsMenu drives it unchanged — only the way it reveals
       differs (max-height, since a floating panel has nowhere to float to in a
       sheet). left is cleared with !important because app.js writes an inline
       one when it measures the desktop panel's position. */
    .menuSheet .sectorsBtn{ display:flex !important; width:100%; justify-content:space-between; }
    .menuSheet .sectorsMenu{
      position:static !important; left:auto !important; min-width:0;
      display:grid; gap:6px; width:100%; margin:0; padding:0;
      background:none; border:none; box-shadow:none;
      opacity:1 !important; transform:none !important; pointer-events:auto !important;
      max-height:0; overflow:hidden;
      transition:max-height .32s cubic-bezier(.2,.7,.2,1);
    }
    .menuSheet .sectorsMenu.open{ max-height:290px; }
    .menuSheet .sectorsItem{ background:var(--ctrlBg); border:1px solid var(--ctrlBorder); padding:12px 14px; }
    /* Controls: two rows of two half-width buttons — language + theme on the
       first, the "start free" CTA + log-in on the second. Every child takes the
       same full-button shape, which means undoing the 38px icon-square sizing
       three of them carry INLINE, hence the !importants. A shared min-height
       (rather than vertical padding) is what keeps all four the same height
       despite holding a 17px icon, a text label and a 14px CTA. `order` seats
       the CTA ahead of log-in without disturbing the DOM order the desktop bar
       depends on. */
    .menuSheet .headerCtrls{
      display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important;
      padding-top:12px; border-top:1px solid var(--divider);
    }
    .menuSheet .headerCtrls > *{
      display:flex !important; align-items:center; justify-content:center;
      width:auto !important; height:auto !important; min-height:46px; min-width:0;
      padding:0 16px !important; border-radius:12px !important;
    }
    .menuSheet .langCtrl{ order:1; }
    .menuSheet .themeToggle{ order:2; }
    .menuSheet .headerCta{ order:3; }
    .menuSheet .headerLogin{ order:4; }
    /* the language control wraps two buttons, only one of them shown; it has to
       fill the new box instead of the 38px square it was sized for, or its
       hover highlight is a thin strip across the middle */
    .menuSheet .langCtrl button{ align-self:stretch; }
  }
  /* Phones shorter than ~820px. Two reclaims, worth ~150px between them:
     the floating hero logo drops into flow as a compact row (its absolute
     position is what forces the 130px top padding), and the trust strip goes —
     it repeats in the sections below. The :not(:has(...)) guard means this can
     never hit the CTA row if a page's hero column is ever reordered. */
  @media (max-width:860px) and (max-height:820px){
    #top{ padding-top:22px !important; }
    .heroLogo{ position:static !important; transform:none !important; flex-direction:row !important;
               gap:10px !important; justify-content:center; margin-bottom:16px !important; }
    .heroLogo img{ width:40px !important; height:40px !important; }
    .heroLogo span{ font-size:20px !important; }
    #top .heroGrid > div:first-child > div:last-child:not(:has(a,button)){ display:none !important; }
    #top .heroGrid > div:first-child > p{ margin-bottom:16px !important; }
    #nav-slot{ margin-top:18px !important; }
  }

  /* ≤700px tall (iPhone SE class). Last reclaim, and a small one: a tighter
     lede and tighter gaps. Nothing else is dropped — one-row bar and the trust
     strip above buy back enough that the badge and lede both survive. */
  @media (max-width:860px) and (max-height:700px){
    #top .heroGrid > div:first-child > p{ font-size:14.5px !important; margin-bottom:8px !important; }
    .heroH{ margin-bottom:10px !important; }
    #nav-slot{ margin-top:10px !important; }
  }

  @media (max-width:380px){
    .langCtrl button{ font-size:12px !important; }
    .fab-stack{ bottom:calc(var(--sjBarH, 58px) + 18px); }
    [data-lang="en"] .fab-stack{ right:16px; }
    [data-lang="ar"] .fab-stack{ left:16px; }
  }