/*
  ALFASOFT shared page styles
  Shared by: index-ar7-bg.html, alfa-hrms.html, business-solutions-demo.html
  Contains the shared colors, layout rules, motion, responsive behavior, and page-specific selectors required by these final pages.
*/

/* ==========================================================================
   Source: index-ar7-bg.html
   ========================================================================== */
:root {
      /* Brand */
      --primary: #003b7a;
      --primary-700: #012a57;
      --primary-900: #021c3b;
      --secondary: #005bb5;
      --secondary-300: #3b86d6;
      --accent: #f7941d;
      --accent-600: #e07d09;
      --gold: #ffc107;
      --gold-200: #ffde59;

      /* Neutrals */
      --ink: #0f1e33;
      --text: #475569;
      --muted: #64748b;
      --light: #f4f7fb;
      --surface: #ffffff;
      --line: rgba(2, 31, 66, .09);
      --white: #ffffff;
      --card: #ffffff;
      --link: var(--primary);

      /* Gradients */
      --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      --grad-hero: linear-gradient(150deg, #021c3b 0%, #00306a 45%, #004a9a 100%);
      --grad-gold: linear-gradient(135deg, var(--gold-200) 0%, var(--accent) 60%, var(--accent-600) 100%);

      /* Shape & motion */
      --radius: 22px;
      --radius-sm: 14px;
      --radius-lg: 30px;
      --shadow-sm: 0 6px 18px rgba(2, 31, 66, .06);
      --shadow: 0 18px 45px rgba(2, 31, 66, .10);
      --shadow-lg: 0 30px 70px rgba(2, 31, 66, .16);
      --shadow-gold: 0 16px 36px rgba(247, 148, 29, .35);
      --t: .35s cubic-bezier(.16, 1, .3, 1);
      --container: 1200px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; scroll-padding-top: 110px; }

    body {
      margin: 0;
      font-family: 'Tajawal', system-ui, sans-serif;
      color: var(--text);
      background: var(--surface);
      line-height: 1.8;
      overflow-x: clip; /* clip (not hidden) so position:sticky header keeps working */
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 800; line-height: 1.35; }
    p { margin: 0 0 1rem; }
    a { text-decoration: none; transition: var(--t); }
    img { max-width: 100%; }
    section { position: relative; }
    .container { max-width: var(--container); }

    .ltr-number { direction: ltr; unicode-bidi: embed; display: inline-block; }

    .alfa-brand-word {
      color: var(--accent);
      font-weight: 800;
    }

    /* ---------- Section scaffolding ---------- */
    .sec { padding: clamp(64px, 8vw, 110px) 0; }
    .sec-tight { padding: clamp(48px, 6vw, 80px) 0; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .5px;
      color: var(--secondary);
      background: rgba(0, 91, 181, .09);
      border: 1px solid rgba(0, 91, 181, .16);
      padding: 7px 16px;
      border-radius: 999px;
      margin-bottom: 18px;
    }

    .section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
    .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 14px; }
    .section-head h2 .hl { color: var(--accent); }
    .section-head p { font-size: 1.06rem; color: var(--muted); margin: 0; }

    /* ---------- Buttons ---------- */
    .btn-alfa {
      --pad-y: 14px; --pad-x: 30px;
      display: inline-flex; align-items: center; gap: 10px;
      padding: var(--pad-y) var(--pad-x);
      font-weight: 800; font-size: 1rem; color: #3a2400;
      background: var(--grad-gold);
      border: none; border-radius: 999px;
      box-shadow: var(--shadow-gold);
      transition: var(--t);
    }
    .btn-alfa:hover { color: #3a2400; transform: translateY(-3px); box-shadow: 0 22px 46px rgba(247, 148, 29, .45); }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 28px; font-weight: 800; font-size: 1rem;
      color: #fff; background: rgba(255, 255, 255, .08);
      border: 1.5px solid rgba(255, 255, 255, .55);
      border-radius: 999px; backdrop-filter: blur(6px); transition: var(--t);
    }
    .btn-ghost:hover { color: var(--primary); background: #fff; border-color: #fff; transform: translateY(-3px); }

    .btn-solid {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 30px; font-weight: 800; color: #fff;
      background: var(--grad-brand); border: none; border-radius: 999px;
      box-shadow: var(--shadow); transition: var(--t);
    }
    .btn-solid:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lg); }

    /* ---------- Logo component ---------- */
    .alfa-logo { display: inline-flex; align-items: center; }
    .alfa-logo img { height: 48px; width: auto; display: block; }
    .alfa-logo svg { height: 46px; width: auto; display: block; }
    .footer-logo img { height: 66px; }

    /* =================================================================
       TOP BAR
    ================================================================= */
    .top-bar {
      background: var(--primary-900);
      color: rgba(255, 255, 255, .85);
      font-size: .86rem;
      padding: 8px 0;
    }
    .top-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
    .top-bar a { color: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; gap: 7px; }
    .top-bar a + a { margin-inline-start: 18px; }
    .top-bar a:hover { color: var(--gold-200); }
    .top-bar .meta { color: rgba(255, 255, 255, .65); }
    .top-bar .meta i { color: var(--gold); margin-inline-end: 6px; }

    /* =================================================================
       NAVBAR
    ================================================================= */
    .site-nav {
      position: sticky; top: 0; z-index: 1030;
      background: rgba(255, 255, 255, .85);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      transition: var(--t);
    }
    .site-nav.scrolled { box-shadow: 0 10px 30px rgba(2, 31, 66, .08); background: rgba(255, 255, 255, .96); }
    .site-nav .navbar { padding: 10px 0; }
    .navbar-nav { gap: 4px; }
    .site-nav .nav-link {
      position: relative; font-weight: 700; color: var(--ink); font-size: .98rem;
      padding: 8px 14px !important; border-radius: 10px; transition: var(--t);
    }
    .site-nav .nav-link::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
      background: var(--grad-gold); border-radius: 2px; transform: scaleX(0);
      transform-origin: center; transition: transform .3s ease;
    }
    .site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--primary); }
    .site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); }
    .navbar-toggler { border: 1px solid var(--line); padding: 6px 10px; }
    .navbar-toggler:focus { box-shadow: none; }
    .nav-cta { margin-inline-start: 10px; }

    /* =================================================================
       HERO
    ================================================================= */
    .hero {
      background:
        linear-gradient(150deg, rgba(2, 28, 59, .92) 0%, rgba(0, 49, 107, .86) 50%, rgba(0, 74, 154, .80) 100%),
        url('../img/backgrounds/alfa-bg-hero-02-large.png');
      background-size: cover; background-position: center; background-repeat: no-repeat;
      background-attachment: fixed;
      color: #fff;
      padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 130px);
      overflow: hidden;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
      background:
        radial-gradient(40% 55% at 82% 18%, rgba(247, 148, 29, .35), transparent 60%),
        radial-gradient(45% 55% at 12% 90%, rgba(0, 91, 181, .55), transparent 60%),
        radial-gradient(30% 40% at 50% 5%, rgba(255, 222, 89, .12), transparent 60%);
    }
    .hero::after {
      content: ""; position: absolute; inset: 0; z-index: 0; opacity: .35;
      background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 100%);
    }
    .hero .container { position: relative; z-index: 1; }
    .hero h1 {
      color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.32;
      margin: 0 0 22px; font-weight: 900; letter-spacing: -.5px;
    }
    .hero h1 .hl {
      background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: var(--gold);
    }
    .hero p.lead {
      color: rgba(255, 255, 255, .86); font-size: 1.14rem; max-width: 560px; margin: 0 0 32px;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 9px;
      background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
      color: #fff; font-weight: 700; font-size: .9rem;
      padding: 8px 18px; border-radius: 999px; margin-bottom: 24px;
      backdrop-filter: blur(8px);
    }
    .hero-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 193, 7, .25); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
    .hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
    .hero-stats .hs strong { display: block; font-size: 1.7rem; font-weight: 900; color: #fff; line-height: 1; }
    .hero-stats .hs span { font-size: .9rem; color: rgba(255, 255, 255, .72); }
    .hero-stats .hs strong .plus { color: var(--gold); }

    /* Hero visual — isolated animated logo (no panel, no chips) */
    .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
    .hero-logo {
      width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto;
      filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .45));
    }

    /* =================================================================
       MARQUEE / TRUST KEYWORDS
    ================================================================= */
    .trust-strip { background: var(--light); border-bottom: 1px solid var(--line); padding: 22px 0; }
    .trust-strip .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; }
    .trust-strip span { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-weight: 700; font-size: .96rem; }
    .trust-strip span i { color: var(--accent); }

    /* =================================================================
       FEATURE / WHY CARDS
    ================================================================= */
    .why-section { background: var(--surface); }
    .feature-card {
      height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
      padding: 34px 30px; box-shadow: var(--shadow-sm); transition: var(--t); position: relative; overflow: hidden;
    }
    .feature-card::before {
      content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 4px;
      background: var(--grad-gold); transform: scaleX(0); transform-origin: inline-start; transition: transform .4s ease;
    }
    .feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(0, 91, 181, .18); }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-ico {
      width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
      font-size: 1.5rem; color: #fff; background: var(--grad-brand); margin-bottom: 22px;
      box-shadow: 0 12px 26px rgba(0, 59, 122, .28);
    }
    .feature-card:nth-child(3n+2) .feature-ico { background: var(--grad-gold); color: #3a2400; box-shadow: var(--shadow-gold); }
    .feature-card h4 { font-size: 1.22rem; margin: 0 0 12px; }
    .feature-card p { color: var(--muted); margin: 0; font-size: .98rem; }

    /* =================================================================
       PROCESS / JOURNEY
    ================================================================= */
    .process-section { background: var(--light); }
    .process-track { position: relative; }
    .process-track::before {
      content: ""; position: absolute; top: 38px; inset-inline: 6%; height: 3px;
      background: linear-gradient(90deg, var(--secondary), var(--accent)); border-radius: 3px; opacity: .25;
    }
    .step { text-align: center; padding: 10px; }
    .step-bubble {
      width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%;
      display: grid; place-items: center; font-size: 1.6rem; color: var(--primary);
      background: #fff; border: 2px solid rgba(0, 91, 181, .15); box-shadow: var(--shadow); transition: var(--t);
      position: relative; z-index: 1;
    }
    .step:hover .step-bubble { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-6px); }
    .step .step-num {
      position: absolute; top: -6px; inset-inline-end: -6px; width: 26px; height: 26px; border-radius: 50%;
      background: var(--grad-gold); color: #3a2400; font-size: .8rem; font-weight: 900; display: grid; place-items: center;
    }
    .step h5 { font-size: 1.05rem; margin: 0; color: var(--ink); transition: var(--t); }

    /* Journey — sequential loop highlight (starts only once #journey enters the viewport
       via the .journey-start class added by JS; one step glows at a time, DOM order 1 -> 6) */
    .journey-loop .step-bubble { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease; }
    .journey-loop .step-bubble i,
    .journey-loop .step h5 { transition: color .35s ease, transform .35s ease; }
    .journey-loop .step { color: var(--ink); } /* so the label's rest "inherit" stays ink */

    .journey-loop.journey-start .step-bubble { animation: journeyStepLoop 6s infinite both; }
    .journey-loop.journey-start .step-bubble i,
    .journey-loop.journey-start .step h5 { animation: journeyIconLoop 6s infinite both; }

    /* one card active per second; nth-child(1) = التوظيف active first (visually right-most in RTL) */
    .journey-loop.journey-start > div:nth-child(1) .step-bubble,
    .journey-loop.journey-start > div:nth-child(1) .step-bubble i,
    .journey-loop.journey-start > div:nth-child(1) .step h5 { animation-delay: 0s; }
    .journey-loop.journey-start > div:nth-child(2) .step-bubble,
    .journey-loop.journey-start > div:nth-child(2) .step-bubble i,
    .journey-loop.journey-start > div:nth-child(2) .step h5 { animation-delay: -5s; }
    .journey-loop.journey-start > div:nth-child(3) .step-bubble,
    .journey-loop.journey-start > div:nth-child(3) .step-bubble i,
    .journey-loop.journey-start > div:nth-child(3) .step h5 { animation-delay: -4s; }
    .journey-loop.journey-start > div:nth-child(4) .step-bubble,
    .journey-loop.journey-start > div:nth-child(4) .step-bubble i,
    .journey-loop.journey-start > div:nth-child(4) .step h5 { animation-delay: -3s; }
    .journey-loop.journey-start > div:nth-child(5) .step-bubble,
    .journey-loop.journey-start > div:nth-child(5) .step-bubble i,
    .journey-loop.journey-start > div:nth-child(5) .step h5 { animation-delay: -2s; }
    .journey-loop.journey-start > div:nth-child(6) .step-bubble,
    .journey-loop.journey-start > div:nth-child(6) .step-bubble i,
    .journey-loop.journey-start > div:nth-child(6) .step h5 { animation-delay: -1s; }

    @keyframes journeyStepLoop {
      0%, 13% {
        transform: translateY(-8px);
        border-color: rgba(247, 148, 29, .75);
        box-shadow: 0 18px 40px rgba(247, 148, 29, .28);
        background: #fff;
      }
      16.66%, 100% {
        transform: translateY(0);
        border-color: rgba(0, 91, 181, .15);
        box-shadow: var(--shadow);
        background: #fff;
      }
    }
    @keyframes journeyIconLoop {
      0%, 13% { color: #f7941d; transform: scale(1.08); }
      16.66%, 100% { color: inherit; transform: scale(1); }
    }

    /* respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .journey-loop .step-bubble,
      .journey-loop .step-bubble i,
      .journey-loop .step h5 { animation: none !important; }
    }

    /* =================================================================
       ECOSYSTEM — central ALFA hub with connected solution cards
    ================================================================= */
    .ecosystem-section { background: var(--surface); position: relative; overflow: hidden; }
    .ecosystem-section::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(42% 48% at 50% 48%, rgba(0, 91, 181, .07), transparent 70%),
        radial-gradient(30% 30% at 85% 12%, rgba(247, 148, 29, .06), transparent 70%);
    }
    .ecosystem-section .container { position: relative; z-index: 1; }

    .eco-hub { position: relative; display: grid; grid-template-columns: 1fr; gap: 22px; align-items: stretch; }
    @media (min-width: 992px) { .eco-hub { grid-template-columns: 1fr minmax(280px, 350px) 1fr; gap: 34px; } }
    /* equal-height rows so all four cards align to the connector endpoints */
    .eco-col { display: grid; gap: 26px; grid-template-rows: 1fr 1fr; }

    /* --- Card --- */
    .eco-card2 {
      position: relative; display: flex; background: #fff; border: 1px solid var(--line);
      border-radius: 20px; box-shadow: var(--shadow-sm);
      transition: var(--t); min-height: 190px; z-index: 1;
    }
    .eco-card2:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: rgba(0, 91, 181, .16); }
    .eco-card2.flip { flex-direction: row-reverse; }
    /* round only the outer corners of the rail so cards need no overflow clip
       (lets the connector node dots sit on the card edge) */
    .eco-card2:not(.flip) .eco-rail { border-radius: 0 20px 20px 0; }
    .eco-card2.flip .eco-rail { border-radius: 20px 0 0 20px; }

    .eco-rail {
      flex: 0 0 134px; padding: 24px 16px; color: #fff; text-align: center;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
      position: relative; overflow: hidden;
    }
    .eco-rail::after {
      content: ""; position: absolute; inset: 0; opacity: .16;
      background: radial-gradient(circle at 70% 18%, #fff, transparent 55%);
    }
    .eco-rail > * { position: relative; z-index: 1; }
    .eco-rail .r-ico {
      font-size: 1.5rem; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
      background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); margin-bottom: 4px;
    }
    .eco-rail h3 { color: #fff; font-size: 1.04rem; line-height: 1.45; margin: 2px 0 0; }
    .eco-rail .r-tag { font-size: .74rem; font-weight: 700; opacity: .92; }
    .eco-rail .r-link {
      margin-top: 9px; font-size: .78rem; font-weight: 800; color: #fff;
      background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45);
      padding: 7px 15px; border-radius: 999px; transition: var(--t);
    }
    .eco-rail .r-link:hover { background: #fff; color: var(--primary); transform: translateY(-2px); }

    .eco-body { flex: 1; padding: 24px 24px; display: flex; align-items: center; }
    .eco-body p { color: var(--muted); font-size: .93rem; margin: 0; }

    /* rail color themes */
    .rail-hr { background: linear-gradient(160deg, #0a64c4, #003b7a); }
    .rail-saas { background: linear-gradient(160deg, #ffb13a, #f7941d); }
    .rail-custom { background: linear-gradient(160deg, #18a5a0, #0c6f73); }
    .rail-mobile { background: linear-gradient(160deg, #5b6cf0, #343cb0); }

    /* --- Central hub --- */
    .eco-center { position: relative; display: grid; place-items: center; min-height: 330px; }
    .eco-orb {
      position: relative; z-index: 3; width: clamp(230px, 25vw, 300px); aspect-ratio: 1; border-radius: 50%;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; color: #fff; padding: 30px;
      background: radial-gradient(circle at 36% 28%, #0a559f, #002a59 72%);
      box-shadow: 0 32px 72px rgba(0, 42, 89, .45), inset 0 2px 14px rgba(255, 255, 255, .14);
    }
    .eco-orb img {
      width: 70px; height: auto; margin: 0 0 12px;
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4));
    }
    .eco-orb h3 { color: #fff; font-size: 1.95rem; font-weight: 900; letter-spacing: 3px; line-height: 1; margin: 0; }
    .eco-orb p {
      color: rgba(255, 255, 255, .82); font-size: .85rem; line-height: 1.55;
      margin: 10px auto 0; max-width: 175px;
    }
    .eco-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(0, 91, 181, .22); aspect-ratio: 1; }
    .eco-ring.r1 { width: 72%; animation: ecoPulse 4s ease-in-out infinite; }
    .eco-ring.r2 { width: 90%; animation: ecoPulse 4s ease-in-out infinite .9s; }
    .eco-ring.r3 { width: 110%; border-style: dashed; border-color: rgba(247, 148, 29, .3); opacity: .6; animation: ecoSpin 26s linear infinite; }
    @keyframes ecoPulse { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.05); opacity: .9; } }
    @keyframes ecoSpin { to { transform: rotate(360deg); } }

    /* --- Connector spokes from the central hub to each card (desktop) ---
       Each spoke is one element anchored at the orb centre: the line and its
       node dot are the SAME element, so they can never be misaligned. The
       hub's centre column is a fixed width, so a fixed-length spoke always
       lands its dot on the card's inner edge. --- */
    .eco-spoke { display: none; }
    @media (min-width: 992px) {
      .eco-spoke {
        display: block; position: absolute; top: 50%; left: 50%;
        width: 255px; height: 3px; transform-origin: left center; z-index: 0;
        background: repeating-linear-gradient(90deg, rgba(0, 91, 181, .55) 0 6px, transparent 6px 13px);
        background-size: 13px 3px; animation: spokeFlow 1.1s linear infinite;
      }
      .eco-spoke::after {
        content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
        width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--secondary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .16); z-index: 2; animation: nodePulse 2.6s ease-out infinite;
      }
      .spoke-tr { transform: rotate(-35deg); }
      .spoke-br { transform: rotate(35deg); }
      .spoke-tl { transform: rotate(215deg); }
      .spoke-bl { transform: rotate(145deg); }
      @keyframes spokeFlow { to { background-position: -13px 0; } }
      @keyframes nodePulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(0, 91, 181, .35); }
        50% { box-shadow: 0 0 0 8px rgba(0, 91, 181, 0); }
      }
    }

    @media (max-width: 991px) {
      .eco-center { order: -1; margin-bottom: 4px; }
    }
    @media (max-width: 575px) {
      .eco-card2, .eco-card2.flip { flex-direction: column; }
      .eco-rail { flex-basis: auto; width: 100%; flex-direction: row; justify-content: flex-start; text-align: start; gap: 14px; }
      .eco-rail h3 { margin: 0; }
      .eco-rail .r-link { margin: 0; margin-inline-start: auto; }
    }

    .eco-cta { text-align: center; margin-top: 54px; }

    /* =================================================================
       SAAS BAND
    ================================================================= */
    .saas-section {
      background:
        linear-gradient(150deg, rgba(2, 28, 59, .92) 0%, rgba(0, 49, 107, .86) 55%, rgba(0, 74, 154, .80) 100%),
        url('../img/backgrounds/alfa-bg-saas-07-large.png');
      background-size: cover; background-position: center; background-repeat: no-repeat;
      background-attachment: fixed;
      color: #fff; overflow: hidden;
    }
    .saas-section::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(40% 60% at 85% 20%, rgba(247, 148, 29, .25), transparent 60%);
    }
    .saas-section .container { position: relative; z-index: 1; }
    .saas-section .eyebrow { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
    .saas-section h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 18px; }
    .saas-section .lead { color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
    .saas-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin: 26px 0 32px; }
    .saas-features div { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
    .saas-features i { color: var(--gold-200); }
    .saas-card {
      background: linear-gradient(160deg, rgba(255, 255, 255, .98), #fff); color: var(--primary);
      border-radius: var(--radius-lg); padding: 38px 34px; box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255, 255, 255, .6);
    }
    .saas-card .badge-top { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--accent-600); background: rgba(247, 148, 29, .12); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; }
    .saas-card h4 { font-size: 1.45rem; color: var(--primary); margin: 0 0 18px; }
    .saas-card ul { list-style: none; padding: 0; margin: 0; }
    .saas-card li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
    .saas-card li:last-child { border-bottom: none; }
    .saas-card li i { color: var(--accent); }

    /* SaaS decision grid — glass cards on the dark band */
    .saas-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
    .saas-decision-item {
      background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-sm); padding: 22px 20px; backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px); transition: var(--t);
    }
    .saas-decision-item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); }
    .saas-decision-item i { font-size: 1.5rem; color: var(--gold-200); margin-bottom: 12px; display: block; }
    .saas-decision-item h4 { font-size: 1.05rem; color: #fff; margin: 0 0 8px; }
    .saas-decision-item p { font-size: .9rem; color: rgba(255, 255, 255, .82); margin: 0; line-height: 1.7; }

    /* SaaS flow note — tinted callout above the CTA */
    .saas-flow-note {
      display: flex; align-items: center; gap: 10px; margin: 0 0 26px;
      font-weight: 700; color: var(--gold-200); line-height: 1.6;
      background: rgba(247, 148, 29, .12); border: 1px solid rgba(247, 148, 29, .3);
      border-radius: var(--radius-sm); padding: 14px 18px;
    }
    .saas-flow-note i { flex: 0 0 auto; }

    /* SaaS "when to choose" — white card on the dark band */
    .saas-box {
      background: linear-gradient(160deg, rgba(255, 255, 255, .98), #fff); color: var(--primary);
      border-radius: var(--radius-lg); padding: 38px 34px; box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255, 255, 255, .6);
    }
    .saas-box h4 { font-size: 1.45rem; color: var(--primary); margin: 0 0 18px; }
    .saas-choice-list { list-style: none; padding: 0; margin: 0; }
    .saas-choice-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; line-height: 1.7; }
    .saas-choice-list li:last-child { border-bottom: none; }
    .saas-choice-list li i { color: var(--accent); margin-top: 6px; flex: 0 0 auto; }
    .saas-box-note { margin: 18px 0 0; color: var(--primary-700); font-weight: 600; font-size: .95rem; line-height: 1.8; }

    /* =================================================================
       INDUSTRIES
    ================================================================= */
    .industries-section { background: var(--light); }
    .industry-card {
      height: 100%; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
      padding: 30px 18px; box-shadow: var(--shadow-sm); transition: var(--t);
    }
    .industry-card i { font-size: 2rem; color: var(--secondary); margin-bottom: 14px; transition: var(--t); }
    .industry-card h4 { font-size: 1.05rem; margin: 0; color: var(--ink); }
    .industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(0, 91, 181, .18); }
    .industry-card:hover i { color: var(--accent); transform: scale(1.12); }

    /* =================================================================
       STATS BAND
    ================================================================= */
    .stats-band { background: var(--surface); }
    .stat-box {
      text-align: center; background: linear-gradient(160deg, #fff, var(--light));
      border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 20px; box-shadow: var(--shadow-sm); height: 100%;
    }
    .stat-box i { font-size: 1.8rem; color: var(--accent); margin-bottom: 12px; }
    .stat-box .num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; color: var(--primary); line-height: 1; }
    .stat-box p { margin: 8px 0 0; color: var(--muted); font-weight: 600; }

    /* =================================================================
       CLIENTS
    ================================================================= */
    .clients-section { background: var(--light); }
    .clients-head { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; margin-bottom: 44px; }
    .clients-head .ct { max-width: 600px; }
    .clients-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; }
    .clients-head p { color: var(--muted); margin: 0; }
    .clients-summary { display: flex; gap: 26px; }
    .clients-summary div { text-align: center; }
    .clients-summary strong { display: block; font-size: 1.8rem; font-weight: 900; color: var(--accent); }
    .clients-summary span { font-size: .85rem; color: var(--muted); }
    .clients-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
    }
    @media (min-width: 576px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 992px) { .clients-grid { grid-template-columns: repeat(6, 1fr); } }
    .client-tile {
      background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
      display: grid; place-items: center; padding: 22px 16px; min-height: 96px; box-shadow: var(--shadow-sm); transition: var(--t);
    }
    .client-tile img { max-height: 54px; width: auto; filter: grayscale(1); opacity: .7; transition: var(--t); }
    .client-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
    .client-tile:hover img { filter: none; opacity: 1; }
    .clients-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 34px; color: var(--muted); font-weight: 600; }
    .clients-note i { color: var(--accent); }

    /* =================================================================
       FAQ
    ================================================================= */
    .faq-section { background: var(--surface); }
    .faq-section .accordion { max-width: 920px; margin: 0 auto; }
    .faq-section .accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
    .faq-section .accordion-button { font-weight: 800; color: var(--ink); padding: 20px 22px; font-size: 1.05rem; background: #fff; }
    .faq-section .accordion-button:not(.collapsed) { color: var(--primary); background: rgba(0, 91, 181, .05); box-shadow: none; }
    .faq-section .accordion-button:focus { box-shadow: none; }
    .faq-section .accordion-button::after { margin-inline-start: auto; margin-inline-end: 0; }
    .faq-section .accordion-body { color: var(--muted); padding: 4px 22px 22px; }

    /* =================================================================
       FINAL CTA
    ================================================================= */
    .cta-band { padding: clamp(56px, 7vw, 86px) 0; }
    .cta-inner {
      position: relative; overflow: hidden; text-align: center;
      background:
        linear-gradient(135deg, rgba(0, 59, 122, .90), rgba(0, 91, 181, .82)),
        url('../img/backgrounds/alfa-bg-journey-05-large.png');
      background-size: cover; background-position: center;
      color: #fff; border-radius: var(--radius-lg);
      padding: clamp(46px, 6vw, 70px) 26px; box-shadow: var(--shadow-lg);
    }
    .cta-inner::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(40% 70% at 85% 10%, rgba(247, 148, 29, .4), transparent 60%),
                  radial-gradient(40% 70% at 10% 100%, rgba(255, 222, 89, .18), transparent 60%);
    }
    .cta-inner > * { position: relative; z-index: 1; }
    .cta-inner h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 14px; }
    .cta-inner p { color: rgba(255, 255, 255, .88); max-width: 620px; margin: 0 auto 30px; font-size: 1.08rem; }
    .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* =================================================================
       DEMO FORM
    ================================================================= */
    .demo-section { background: var(--light); }
    .demo-card {
      max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
      border-radius: var(--radius-lg); padding: clamp(30px, 5vw, 50px); box-shadow: var(--shadow);
    }
    .demo-card .form-control {
      border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-family: inherit; font-size: .98rem; background: var(--light);
      text-align: right; direction: rtl;
    }
    .demo-card .form-control::placeholder { text-align: right; }
    .demo-card .req { position: relative; }
    .demo-card .req::after {
      content: "*"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: #e02b2b; font-weight: 700; font-size: 1.1rem; line-height: 1; pointer-events: none;
    }
    .demo-status {
      max-width: 860px; margin: 0 auto 18px; border-radius: var(--radius-sm);
      padding: 14px 18px; font-weight: 700; text-align: center; display: none;
    }
    .demo-status.show { display: block; }
    .demo-status.ok { background: rgba(22, 163, 74, .12); color: #15803d; border: 1px solid rgba(22, 163, 74, .35); }
    .demo-status.err { background: rgba(224, 43, 43, .1); color: #c81e1e; border: 1px solid rgba(224, 43, 43, .35); }
    .demo-card .form-control:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(0, 91, 181, .12); background: #fff; }

    /* =================================================================
       CONTACT
    ================================================================= */
    .contact-section { background: var(--surface); }
    .contact-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
    @media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
    .contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); transition: var(--t); }
    .contact-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
    .contact-card.wide { grid-column: 1 / -1; }
    @media (min-width: 768px) { .contact-card.wide { grid-column: 1 / -1; } }
    .contact-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: var(--grad-brand); margin-bottom: 18px; }
    .contact-card h3 { font-size: 1.2rem; margin: 0 0 8px; }
    .contact-card > p { color: var(--muted); font-size: .95rem; }
    .contact-line, .contact-card a.contact-line {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      background: var(--light); border: 1px solid var(--line); border-radius: 12px;
      padding: 11px 14px; margin-bottom: 10px; font-weight: 800; color: var(--ink);
    }
    .contact-line span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
    .contact-line i { color: var(--secondary); min-width: 18px; text-align: center; }
    .contact-line b { color: var(--primary); }
    a.contact-line:hover { border-color: var(--secondary); }
    a.contact-line[href*="wa.me"] i, a.contact-line[href*="wa.me"] b { color: #16a34a; }
    .contact-card small { color: var(--muted); }

    /* =================================================================
       FOOTER
    ================================================================= */
    .footer {
      background:
        linear-gradient(rgba(2, 28, 59, .95), rgba(2, 28, 59, .97)),
        url('../img/backgrounds/alfa-bg-journey-05-large.png');
      background-size: cover; background-position: center; background-attachment: fixed;
      color: rgba(255, 255, 255, .7); padding: 64px 0 26px;
    }
    .footer h5 { color: #fff; font-size: 1.05rem; margin: 0 0 18px; }
    .footer p { color: rgba(255, 255, 255, .7); font-size: .95rem; }
    .footer ul { list-style: none; padding: 0; margin: 0; }
    .footer ul li { padding: 6px 0; color: rgba(255, 255, 255, .7); }
    .footer .footer-logo { margin-bottom: 18px; }
    .footer a { color: rgba(255, 255, 255, .7); }
    .footer a:hover { color: var(--gold-200); }
    .footer-social { display: flex; gap: 10px; margin-top: 18px; }
    .footer-social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: var(--t); }
    .footer-social a:hover { background: var(--b, var(--grad-gold)); color: #fff; transform: translateY(-3px); }
    .footer-social a.fs-instagram:hover { background: linear-gradient(45deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 82%, #4f5bd5); }
    .footer hr { border-color: rgba(255, 255, 255, .12); margin: 38px 0 20px; }
    .footer-bottom { text-align: center; font-size: .9rem; color: rgba(255, 255, 255, .55); }

    /* =================================================================
       BACK TO TOP
    ================================================================= */
    #backToTop {
      position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 1040;
      width: 50px; height: 50px; border-radius: 50%; border: none; color: #fff;
      background: var(--grad-brand); box-shadow: var(--shadow-lg); cursor: pointer;
      display: none; place-items: center; font-size: 1.1rem; transition: var(--t);
    }
    #backToTop:hover { transform: translateY(-4px); }

    /* =================================================================
       REVEAL ANIMATION
    ================================================================= */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
    .reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

    /* =================================================================
       RESPONSIVE
    ================================================================= */
    @media (max-width: 1199px) {
      .site-nav .navbar-collapse { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-top: 12px; box-shadow: var(--shadow); }
      .navbar-nav { gap: 2px; }
      .nav-cta { margin: 12px 0 4px; display: inline-flex; }
      .site-nav .nav-link::after { display: none; }
    }
    @media (max-width: 991px) {
      .process-track::before { display: none; }
      .clients-head { justify-content: center; text-align: center; }
      .clients-summary { justify-content: center; }
    }
    @media (max-width: 767px) {
      .top-bar { font-size: .78rem; }
      .top-bar .container { justify-content: center; }
      .hero { text-align: center; }
      .hero p.lead { margin-inline: auto; }
      .hero-actions, .hero-stats { justify-content: center; }
      .hero-visual { margin-top: 50px; }
      .saas-features { grid-template-columns: 1fr; }
      .saas-decision-grid { grid-template-columns: 1fr; }
      .alfa-logo img { height: 40px; }
      .alfa-logo svg { height: 40px; }
      .contact-line, .contact-card a.contact-line { flex-direction: column; align-items: flex-start; }
      .btn-alfa, .btn-ghost, .btn-solid { width: 100%; justify-content: center; }
      .hero-actions { width: 100%; }
      /* fixed-attachment parallax is janky on mobile — switch to scroll */
      .hero, .saas-section, .footer { background-attachment: scroll; }
    }
    /* ===================== DARK MODE ===================== */
    html[data-theme="dark"] {
      --ink: #e9f0f8;            /* headings: near-white, easy on the eyes */
      --text: #aeb9c8;           /* body text */
      --muted: #7f8b9c;          /* secondary text */
      --surface: #0e1622;        /* base section background */
      --light: #0a111b;          /* alternate section background */
      --card: #18222f;           /* elevated card surface */
      --link: #5fa3e6;           /* readable blue for links/numbers on dark */
      --line: rgba(255, 255, 255, .10);
      --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35);
      --shadow: 0 18px 45px rgba(0, 0, 0, .45);
      --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
    }
    html[data-theme="dark"] body { background: var(--surface); }

    /* elevated cards -> dark card surface (orb ecosystem + shared cards) */
    html[data-theme="dark"] :is(.feature-card, .step-bubble,
      .industry-card, .demo-card, .contact-card, .eco-card2, .eco-body,
      .faq-section .accordion-item, .faq-section .accordion-button) {
      background: var(--card); border-color: var(--line);
    }
    html[data-theme="dark"] .stat-box { background: linear-gradient(160deg, var(--card), var(--surface)); }

    /* navbar — solid deep navy matching the top bar (no photo bleed-through) */
    html[data-theme="dark"] .site-nav { background: #021c3b; border-color: rgba(255, 255, 255, .08); backdrop-filter: none; }
    html[data-theme="dark"] .site-nav.scrolled { background: #021c3b; }
    html[data-theme="dark"] .site-nav .navbar-collapse { background: var(--card); border-color: var(--line); }

    /* SaaS plan card stays light on the dark band -> keep its inner text & dividers dark */
    html[data-theme="dark"] .saas-card { color: #1f2d3d; }
    html[data-theme="dark"] .saas-card li { color: #1f2d3d; border-color: rgba(2, 31, 66, .12); }
    html[data-theme="dark"] .saas-box { color: #1f2d3d; }
    html[data-theme="dark"] .saas-box h4 { color: #102742; }
    html[data-theme="dark"] .saas-choice-list li { color: #1f2d3d; border-color: rgba(2, 31, 66, .12); }
    html[data-theme="dark"] .saas-box-note { color: #34465c; }

    /* deep-blue foregrounds on cards -> lighten for contrast */
    html[data-theme="dark"] :is(.contact-line b, .stat-box .num, .trust-strip span,
      .step-bubble, .faq-section .accordion-button:not(.collapsed)) { color: var(--link); }
    html[data-theme="dark"] :is(.contact-line i, .industry-card i) { color: var(--link); }

    /* eyebrow + tag tints */
    html[data-theme="dark"] .eyebrow { color: #7fb6ef; background: rgba(95, 163, 230, .14); border-color: rgba(95, 163, 230, .28); }
    html[data-theme="dark"] .b-tag { color: #cdd8e6; background: rgba(255, 255, 255, .08); }

    /* FAQ open-state + form inputs */
    html[data-theme="dark"] .faq-section .accordion-button:not(.collapsed) { background: rgba(95, 163, 230, .08); }
    html[data-theme="dark"] .faq-section .accordion-body { color: var(--muted); }
    html[data-theme="dark"] .demo-card .form-control { background: #0c131c; color: var(--ink); border-color: var(--line); }
    html[data-theme="dark"] .demo-card .form-control:focus { background: #0e1622; }
    html[data-theme="dark"] .demo-card .form-control::placeholder { color: var(--muted); }

    /* client logos need a light backdrop to stay visible -> keep tiles light in dark mode */
    html[data-theme="dark"] .client-tile { background: #eef2f7; border-color: var(--line); }

    /* theme toggle button */
    .theme-toggle {
      width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
      background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem;
      display: grid; place-items: center; transition: var(--t); margin-inline-start: 8px; flex: 0 0 auto;
    }
    .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

    /* =================================================================
       HONEYPOT (anti-spam) — kept fully off-screen WITHOUT widening the
       document. A 1px fixed box can't add horizontal scroll the way the
       old left:-9999px absolute field did (that broke RTL mobile layout).
    ================================================================= */
    .hp-field {
      position: fixed; top: 0; left: 0; width: 1px; height: 1px;
      opacity: 0; overflow: hidden; pointer-events: none; z-index: -1;
    }
    .hp-field input { width: 1px; height: 1px; border: 0; padding: 0; }

    /* Safety net: never let anything add horizontal scroll on mobile.
       clip (not hidden) keeps the sticky navbar working. */
    html, body { width: 100%; max-width: 100%; overflow-x: clip; }

/* ==========================================================================
   Source: alfa-hrms.html
   ========================================================================== */
:root {
      /* Brand */
      --primary: #003b7a;
      --primary-700: #012a57;
      --primary-900: #021c3b;
      --secondary: #005bb5;
      --secondary-300: #3b86d6;
      --accent: #f7941d;
      --accent-600: #e07d09;
      --gold: #ffc107;
      --gold-200: #ffde59;

      /* Neutrals */
      --ink: #0f1e33;
      --text: #475569;
      --muted: #64748b;
      --light: #f4f7fb;
      --surface: #ffffff;
      --line: rgba(2, 31, 66, .09);
      --white: #ffffff;
      --card: #ffffff;
      --link: var(--primary);

      /* Gradients */
      --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      --grad-hero: linear-gradient(150deg, #021c3b 0%, #00306a 45%, #004a9a 100%);
      --grad-gold: linear-gradient(135deg, var(--gold-200) 0%, var(--accent) 60%, var(--accent-600) 100%);

      /* Shape & motion */
      --radius: 22px;
      --radius-sm: 14px;
      --radius-lg: 30px;
      --shadow-sm: 0 6px 18px rgba(2, 31, 66, .06);
      --shadow: 0 18px 45px rgba(2, 31, 66, .10);
      --shadow-lg: 0 30px 70px rgba(2, 31, 66, .16);
      --shadow-gold: 0 16px 36px rgba(247, 148, 29, .35);
      --t: .35s cubic-bezier(.16, 1, .3, 1);
      --container: 1200px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; scroll-padding-top: 110px; }

    body {
      margin: 0;
      font-family: 'Tajawal', system-ui, sans-serif;
      color: var(--text);
      background: var(--surface);
      line-height: 1.8;
      overflow-x: clip; /* clip (not hidden) so position:sticky header keeps working */
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 800; line-height: 1.35; }
    p { margin: 0 0 1rem; }
    a { text-decoration: none; transition: var(--t); }
    img { max-width: 100%; }
    section { position: relative; }
    .container { max-width: var(--container); }

    .ltr-number { direction: ltr; unicode-bidi: embed; display: inline-block; }

    /* ---------- Section scaffolding ---------- */
    .sec { padding: clamp(64px, 8vw, 110px) 0; }
    .sec-tight { padding: clamp(48px, 6vw, 80px) 0; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .5px;
      color: var(--secondary);
      background: rgba(0, 91, 181, .09);
      border: 1px solid rgba(0, 91, 181, .16);
      padding: 7px 16px;
      border-radius: 999px;
      margin-bottom: 18px;
    }

    .section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
    .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 14px; }
    .section-head h2 .hl { color: var(--accent); }
    .section-head p { font-size: 1.06rem; color: var(--muted); margin: 0; }

    /* ---------- Buttons ---------- */
    .btn-alfa {
      --pad-y: 14px; --pad-x: 30px;
      display: inline-flex; align-items: center; gap: 10px;
      padding: var(--pad-y) var(--pad-x);
      font-weight: 800; font-size: 1rem; color: #3a2400;
      background: var(--grad-gold);
      border: none; border-radius: 999px;
      box-shadow: var(--shadow-gold);
      transition: var(--t);
    }
    .btn-alfa:hover { color: #3a2400; transform: translateY(-3px); box-shadow: 0 22px 46px rgba(247, 148, 29, .45); }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 28px; font-weight: 800; font-size: 1rem;
      color: #fff; background: rgba(255, 255, 255, .08);
      border: 1.5px solid rgba(255, 255, 255, .55);
      border-radius: 999px; backdrop-filter: blur(6px); transition: var(--t);
    }
    .btn-ghost:hover { color: var(--primary); background: #fff; border-color: #fff; transform: translateY(-3px); }

    .btn-solid {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 30px; font-weight: 800; color: #fff;
      background: var(--grad-brand); border: none; border-radius: 999px;
      box-shadow: var(--shadow); transition: var(--t);
    }
    .btn-solid:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lg); }

    /* ---------- Logo component ---------- */
    .alfa-logo { display: inline-flex; align-items: center; }
    .alfa-logo img { height: 48px; width: auto; display: block; }
    .alfa-logo svg { height: 46px; width: auto; display: block; }
    .footer-logo img { height: 66px; }

    /* =================================================================
       TOP BAR
    ================================================================= */
    .top-bar {
      background: var(--primary-900);
      color: rgba(255, 255, 255, .85);
      font-size: .86rem;
      padding: 8px 0;
    }
    .top-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
    .top-bar a { color: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; gap: 7px; }
    .top-bar a + a { margin-inline-start: 18px; }
    .top-bar a:hover { color: var(--gold-200); }
    .top-bar .meta { color: rgba(255, 255, 255, .65); }
    .top-bar .meta i { color: var(--gold); margin-inline-end: 6px; }

    /* =================================================================
       NAVBAR
    ================================================================= */
    .site-nav {
      position: sticky; top: 0; z-index: 1030;
      background: rgba(255, 255, 255, .85);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      transition: var(--t);
    }
    .site-nav.scrolled { box-shadow: 0 10px 30px rgba(2, 31, 66, .08); background: rgba(255, 255, 255, .96); }
    .site-nav .navbar { padding: 10px 0; }
    .navbar-nav { gap: 4px; }
    .site-nav .nav-link {
      position: relative; font-weight: 700; color: var(--ink); font-size: .98rem;
      padding: 8px 14px !important; border-radius: 10px; transition: var(--t);
    }
    .site-nav .nav-link::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
      background: var(--grad-gold); border-radius: 2px; transform: scaleX(0);
      transform-origin: center; transition: transform .3s ease;
    }
    .site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--primary); }
    .site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); }
    .navbar-toggler { border: 1px solid var(--line); padding: 6px 10px; }
    .navbar-toggler:focus { box-shadow: none; }
    .nav-cta { margin-inline-start: 10px; }

    /* =================================================================
       HERO
    ================================================================= */
    .hero {
      background:
        linear-gradient(150deg, rgba(2, 28, 59, .92) 0%, rgba(0, 49, 107, .86) 50%, rgba(0, 74, 154, .80) 100%),
        url('../img/backgrounds/alfa-bg-hero-02-large.png');
      background-size: cover; background-position: center; background-repeat: no-repeat;
      background-attachment: fixed;
      color: #fff;
      padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 130px);
      overflow: hidden;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
      background:
        radial-gradient(40% 55% at 82% 18%, rgba(247, 148, 29, .35), transparent 60%),
        radial-gradient(45% 55% at 12% 90%, rgba(0, 91, 181, .55), transparent 60%),
        radial-gradient(30% 40% at 50% 5%, rgba(255, 222, 89, .12), transparent 60%);
    }
    .hero::after {
      content: ""; position: absolute; inset: 0; z-index: 0; opacity: .35;
      background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 100%);
    }
    .hero .container { position: relative; z-index: 1; }
    .hero h1 {
      color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.32;
      margin: 0 0 22px; font-weight: 900; letter-spacing: -.5px;
    }
    .hero h1 .hl {
      background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: var(--gold);
    }
    .hero p.lead {
      color: rgba(255, 255, 255, .86); font-size: 1.14rem; max-width: 560px; margin: 0 0 32px;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 9px;
      background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
      color: #fff; font-weight: 700; font-size: .9rem;
      padding: 8px 18px; border-radius: 999px; margin-bottom: 24px;
      backdrop-filter: blur(8px);
    }
    .hero-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 193, 7, .25); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
    .hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
    .hero-stats .hs strong { display: block; font-size: 1.7rem; font-weight: 900; color: #fff; line-height: 1; }
    .hero-stats .hs span { font-size: .9rem; color: rgba(255, 255, 255, .72); }
    .hero-stats .hs strong .plus { color: var(--gold); }

    /* Hero visual — isolated animated logo (no panel, no chips) */
    .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
    .hero-logo {
      width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto;
      filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .45));
    }

    /* Hero dashboard mockup (glass panel on the dark hero) */
    .hero-panel {
      width: 100%; max-width: 460px; margin: 0 auto;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius); padding: 22px;
      box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .hp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .hp-top strong { color: #fff; font-weight: 800; font-size: 1rem; }
    .hp-top span { color: var(--gold-200); font-weight: 700; font-size: .82rem; }
    .hp-emp { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; }
    .hp-avatar { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-gold); color: #3a2400; font-size: 1.2rem; flex: 0 0 auto; }
    .hp-emp h3 { color: #fff; font-size: 1rem; margin: 0 0 2px; }
    .hp-emp p { color: rgba(255, 255, 255, .7); font-size: .8rem; margin: 0; }
    .hp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
    .hp-stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; }
    .hp-stat small { display: block; color: rgba(255, 255, 255, .7); font-size: .72rem; margin-bottom: 4px; }
    .hp-stat strong { color: #fff; font-size: 1.3rem; font-weight: 900; }
    .hp-activity { display: flex; flex-direction: column; gap: 8px; }
    .hp-activity div { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 9px 12px; color: rgba(255, 255, 255, .85); font-size: .82rem; }
    .hp-activity i { color: var(--gold-200); width: 16px; text-align: center; flex: 0 0 auto; }

    /* =================================================================
       MARQUEE / TRUST KEYWORDS
    ================================================================= */
    .trust-strip { background: var(--light); border-bottom: 1px solid var(--line); padding: 22px 0; }
    .trust-strip .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; }
    .trust-strip span { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-weight: 700; font-size: .96rem; }
    .trust-strip span i { color: var(--accent); }

    /* =================================================================
       FEATURE / WHY CARDS
    ================================================================= */
    .why-section { background: var(--surface); }
    .feature-card {
      height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
      padding: 34px 30px; box-shadow: var(--shadow-sm); transition: var(--t); position: relative; overflow: hidden;
    }
    .feature-card::before {
      content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 4px;
      background: var(--grad-gold); transform: scaleX(0); transform-origin: inline-start; transition: transform .4s ease;
    }
    .feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(0, 91, 181, .18); }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-ico {
      width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
      font-size: 1.5rem; color: #fff; background: var(--grad-brand); margin-bottom: 22px;
      box-shadow: 0 12px 26px rgba(0, 59, 122, .28);
    }
    .feature-card:nth-child(3n+2) .feature-ico { background: var(--grad-gold); color: #3a2400; box-shadow: var(--shadow-gold); }
    .feature-card h4 { font-size: 1.22rem; margin: 0 0 12px; }
    .feature-card p { color: var(--muted); margin: 0; font-size: .98rem; }
    .feature-card .specs { margin: 12px 0 0; font-size: .88rem; color: var(--text); line-height: 1.7; }
    .feature-card .specs strong { color: var(--primary); }

    /* =================================================================
       PROCESS / JOURNEY
    ================================================================= */
    .process-section { background: var(--light); }
    .process-track { position: relative; }
    .process-track::before {
      content: ""; position: absolute; top: 38px; inset-inline: 6%; height: 3px;
      background: linear-gradient(90deg, var(--secondary), var(--accent)); border-radius: 3px; opacity: .25;
    }
    .step { text-align: center; padding: 10px; }
    .step-bubble {
      width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%;
      display: grid; place-items: center; font-size: 1.6rem; color: var(--primary);
      background: #fff; border: 2px solid rgba(0, 91, 181, .15); box-shadow: var(--shadow); transition: var(--t);
      position: relative; z-index: 1;
    }
    .step:hover .step-bubble { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-6px); }
    .step .step-num {
      position: absolute; top: -6px; inset-inline-end: -6px; width: 26px; height: 26px; border-radius: 50%;
      background: var(--grad-gold); color: #3a2400; font-size: .8rem; font-weight: 900; display: grid; place-items: center;
    }
    .step h5 { font-size: 1.05rem; margin: 0; color: var(--ink); transition: var(--t); }

    /* =================================================================
       SAAS / HIGHLIGHT BAND
    ================================================================= */
    .saas-section {
      background:
        linear-gradient(150deg, rgba(2, 28, 59, .92) 0%, rgba(0, 49, 107, .86) 55%, rgba(0, 74, 154, .80) 100%),
        url('../img/backgrounds/alfa-bg-saas-07-large.png');
      background-size: cover; background-position: center; background-repeat: no-repeat;
      background-attachment: fixed;
      color: #fff; overflow: hidden;
    }
    .saas-section::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(40% 60% at 85% 20%, rgba(247, 148, 29, .25), transparent 60%);
    }
    .saas-section .container { position: relative; z-index: 1; }
    .saas-section .eyebrow { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
    .saas-section h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 18px; }
    .saas-section .lead { color: rgba(255, 255, 255, .85); font-size: 1.08rem; }

    /* decision grid — glass cards on the dark band */
    .saas-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
    .saas-decision-item {
      background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-sm); padding: 22px 20px; backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px); transition: var(--t);
    }
    .saas-decision-item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); }
    .saas-decision-item i { font-size: 1.5rem; color: var(--gold-200); margin-bottom: 12px; display: block; }
    .saas-decision-item h4 { font-size: 1.05rem; color: #fff; margin: 0 0 8px; }
    .saas-decision-item p { font-size: .9rem; color: rgba(255, 255, 255, .82); margin: 0; line-height: 1.7; }

    /* =================================================================
       PAGE-SPECIFIC — screens gallery (HRMS)
    ================================================================= */
    .screens-section { background: var(--light); }
    .screens-feature {
      display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; margin-bottom: 44px;
      background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
    }
    @media (min-width: 768px) { .screens-feature { grid-template-columns: 1.1fr 1fr; } }
    .screens-feature img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
    .screens-feature .sf-copy span {
      display: inline-block; font-weight: 800; color: var(--secondary);
      background: rgba(0, 91, 181, .09); border: 1px solid rgba(0, 91, 181, .16);
      padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; font-size: .8rem;
    }
    .screens-feature .sf-copy h3 { font-size: 1.4rem; margin: 0 0 12px; }
    .screens-feature .sf-copy p { color: var(--muted); margin: 0; }
    .screens-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
    @media (min-width: 576px) { .screens-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 992px) { .screens-grid { grid-template-columns: repeat(3, 1fr); } }
    .screen-card {
      display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
      overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--t); height: 100%;
    }
    .screen-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(0, 91, 181, .18); }
    .screen-card img { width: 100%; height: 190px; object-fit: cover; background: var(--light); display: block; }
    .screen-card .sc-body { padding: 16px 18px; }
    .screen-card h4 { font-size: 1.05rem; margin: 0 0 4px; color: var(--ink); }
    .screen-card p { margin: 0; color: var(--muted); font-size: .9rem; }

    .screen-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 74px 22px 32px;
      background: rgba(1, 18, 38, .88);
      backdrop-filter: blur(8px);
    }

    .screen-lightbox.is-open {
      display: flex;
    }

    body.screen-lightbox-open {
      overflow: hidden;
    }

    .screen-lightbox-frame {
      max-width: min(1120px, 96vw);
      max-height: 86vh;
      margin: 0;
      display: grid;
      gap: 14px;
      justify-items: center;
    }

    .screen-lightbox-img {
      display: block;
      max-width: 100%;
      max-height: calc(86vh - 56px);
      object-fit: contain;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
    }

    .screen-lightbox-caption {
      max-width: 880px;
      color: #fff;
      font-size: .95rem;
      line-height: 1.8;
      text-align: center;
    }

    .screen-lightbox-close {
      position: fixed;
      top: 22px;
      inset-inline-end: 22px;
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #003b7a;
      background: #fff;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
      cursor: pointer;
      transition: transform var(--t), background var(--t), color var(--t);
    }

    .screen-lightbox-close:hover,
    .screen-lightbox-close:focus-visible {
      transform: translateY(-2px);
      background: var(--gold);
      color: var(--ink);
      outline: none;
    }

    .screen-lightbox-close i {
      font-size: 1.35rem;
      line-height: 1;
    }

    @media (max-width: 575.98px) {
      .screen-lightbox {
        padding: 78px 12px 24px;
      }

      .screen-lightbox-close {
        top: 16px;
        inset-inline-end: 16px;
        width: 44px;
        height: 44px;
      }

      .screen-lightbox-caption {
        font-size: .86rem;
      }
    }

    /* =================================================================
       FAQ
    ================================================================= */
    .faq-section { background: var(--surface); }
    .faq-section .accordion { max-width: 920px; margin: 0 auto; }
    .faq-section .accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
    .faq-section .accordion-button { font-weight: 800; color: var(--ink); padding: 20px 22px; font-size: 1.05rem; background: #fff; }
    .faq-section .accordion-button:not(.collapsed) { color: var(--primary); background: rgba(0, 91, 181, .05); box-shadow: none; }
    .faq-section .accordion-button:focus { box-shadow: none; }
    .faq-section .accordion-button::after { margin-inline-start: auto; margin-inline-end: 0; }
    .faq-section .accordion-body { color: var(--muted); padding: 4px 22px 22px; }

    /* =================================================================
       FINAL CTA
    ================================================================= */
    .cta-band { padding: clamp(56px, 7vw, 86px) 0; }
    .cta-inner {
      position: relative; overflow: hidden; text-align: center;
      background:
        linear-gradient(135deg, rgba(0, 59, 122, .90), rgba(0, 91, 181, .82)),
        url('../img/backgrounds/alfa-bg-journey-05-large.png');
      background-size: cover; background-position: center;
      color: #fff; border-radius: var(--radius-lg);
      padding: clamp(46px, 6vw, 70px) 26px; box-shadow: var(--shadow-lg);
    }
    .cta-inner::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(40% 70% at 85% 10%, rgba(247, 148, 29, .4), transparent 60%),
                  radial-gradient(40% 70% at 10% 100%, rgba(255, 222, 89, .18), transparent 60%);
    }
    .cta-inner > * { position: relative; z-index: 1; }
    .cta-inner h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 14px; }
    .cta-inner p { color: rgba(255, 255, 255, .88); max-width: 620px; margin: 0 auto 30px; font-size: 1.08rem; }
    .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* =================================================================
       FOOTER
    ================================================================= */
    .footer {
      background:
        linear-gradient(rgba(2, 28, 59, .95), rgba(2, 28, 59, .97)),
        url('../img/backgrounds/alfa-bg-journey-05-large.png');
      background-size: cover; background-position: center; background-attachment: fixed;
      color: rgba(255, 255, 255, .7); padding: 64px 0 26px;
    }
    .footer h5 { color: #fff; font-size: 1.05rem; margin: 0 0 18px; }
    .footer p { color: rgba(255, 255, 255, .7); font-size: .95rem; }
    .footer ul { list-style: none; padding: 0; margin: 0; }
    .footer ul li { padding: 6px 0; color: rgba(255, 255, 255, .7); }
    .footer .footer-logo { margin-bottom: 18px; }
    .footer a { color: rgba(255, 255, 255, .7); }
    .footer a:hover { color: var(--gold-200); }
    .footer-social { display: flex; gap: 10px; margin-top: 18px; }
    .footer-social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: var(--t); }
    .footer-social a:hover { background: var(--b, var(--grad-gold)); color: #fff; transform: translateY(-3px); }
    .footer-social a.fs-instagram:hover { background: linear-gradient(45deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 82%, #4f5bd5); }
    .footer hr { border-color: rgba(255, 255, 255, .12); margin: 38px 0 20px; }
    .footer-bottom { text-align: center; font-size: .9rem; color: rgba(255, 255, 255, .55); }

    /* =================================================================
       BACK TO TOP
    ================================================================= */
    #backToTop {
      position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 1040;
      width: 50px; height: 50px; border-radius: 50%; border: none; color: #fff;
      background: var(--grad-brand); box-shadow: var(--shadow-lg); cursor: pointer;
      display: none; place-items: center; font-size: 1.1rem; transition: var(--t);
    }
    #backToTop:hover { transform: translateY(-4px); }

    /* =================================================================
       REVEAL ANIMATION
    ================================================================= */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
    .reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

    /* =================================================================
       RESPONSIVE
    ================================================================= */
    @media (max-width: 1199px) {
      .site-nav .navbar-collapse { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-top: 12px; box-shadow: var(--shadow); }
      .navbar-nav { gap: 2px; }
      .nav-cta { margin: 12px 0 4px; display: inline-flex; }
      .site-nav .nav-link::after { display: none; }
    }
    @media (max-width: 991px) {
      .process-track::before { display: none; }
    }
    @media (max-width: 767px) {
      .top-bar { font-size: .78rem; }
      .top-bar .container { justify-content: center; }
      .hero { text-align: center; }
      .hero p.lead { margin-inline: auto; }
      .hero-actions, .hero-stats { justify-content: center; }
      .hero-visual { margin-top: 50px; }
      .saas-decision-grid { grid-template-columns: 1fr; }
      .alfa-logo img { height: 40px; }
      .alfa-logo svg { height: 40px; }
      .btn-alfa, .btn-ghost, .btn-solid { width: 100%; justify-content: center; }
      .hero-actions { width: 100%; }
      /* fixed-attachment parallax is janky on mobile — switch to scroll */
      .hero, .saas-section, .footer { background-attachment: scroll; }
    }

    /* ===================== DARK MODE ===================== */
    html[data-theme="dark"] {
      --ink: #e9f0f8;
      --text: #aeb9c8;
      --muted: #7f8b9c;
      --surface: #0e1622;
      --light: #0a111b;
      --card: #18222f;
      --link: #5fa3e6;
      --line: rgba(255, 255, 255, .10);
      --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35);
      --shadow: 0 18px 45px rgba(0, 0, 0, .45);
      --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
    }
    html[data-theme="dark"] body { background: var(--surface); }

    html[data-theme="dark"] :is(.feature-card, .step-bubble,
      .screens-feature, .screen-card,
      .faq-section .accordion-item, .faq-section .accordion-button) {
      background: var(--card); border-color: var(--line);
    }
    html[data-theme="dark"] :is(.screen-card img, .screens-feature img) { background: #0c131c; }

    /* navbar — solid deep navy matching the top bar */
    html[data-theme="dark"] .site-nav { background: #021c3b; border-color: rgba(255, 255, 255, .08); backdrop-filter: none; }
    html[data-theme="dark"] .site-nav.scrolled { background: #021c3b; }
    html[data-theme="dark"] .site-nav .navbar-collapse { background: var(--card); border-color: var(--line); }

    html[data-theme="dark"] :is(.step-bubble, .trust-strip span,
      .faq-section .accordion-button:not(.collapsed)) { color: var(--link); }
    html[data-theme="dark"] .feature-card .specs strong { color: var(--link); }

    html[data-theme="dark"] .eyebrow { color: #7fb6ef; background: rgba(95, 163, 230, .14); border-color: rgba(95, 163, 230, .28); }
    html[data-theme="dark"] .faq-section .accordion-button:not(.collapsed) { background: rgba(95, 163, 230, .08); }
    html[data-theme="dark"] .faq-section .accordion-body { color: var(--muted); }

    /* theme toggle button */
    .theme-toggle {
      width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
      background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem;
      display: grid; place-items: center; transition: var(--t); margin-inline-start: 8px; flex: 0 0 auto;
    }
    .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

    /* Safety net: never let anything add horizontal scroll on mobile. */
    html, body { width: 100%; max-width: 100%; overflow-x: clip; }

/* ==========================================================================
   Source: business-solutions-demo.html
   ========================================================================== */
:root {
      /* Brand */
      --primary: #003b7a;
      --primary-700: #012a57;
      --primary-900: #021c3b;
      --secondary: #005bb5;
      --secondary-300: #3b86d6;
      --accent: #f7941d;
      --accent-600: #e07d09;
      --gold: #ffc107;
      --gold-200: #ffde59;

      /* Neutrals */
      --ink: #0f1e33;
      --text: #475569;
      --muted: #64748b;
      --light: #f4f7fb;
      --surface: #ffffff;
      --line: rgba(2, 31, 66, .09);
      --white: #ffffff;
      --card: #ffffff;
      --link: var(--primary);

      /* Gradients */
      --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      --grad-hero: linear-gradient(150deg, #021c3b 0%, #00306a 45%, #004a9a 100%);
      --grad-gold: linear-gradient(135deg, var(--gold-200) 0%, var(--accent) 60%, var(--accent-600) 100%);

      /* Shape & motion */
      --radius: 22px;
      --radius-sm: 14px;
      --radius-lg: 30px;
      --shadow-sm: 0 6px 18px rgba(2, 31, 66, .06);
      --shadow: 0 18px 45px rgba(2, 31, 66, .10);
      --shadow-lg: 0 30px 70px rgba(2, 31, 66, .16);
      --shadow-gold: 0 16px 36px rgba(247, 148, 29, .35);
      --t: .35s cubic-bezier(.16, 1, .3, 1);
      --container: 1200px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; scroll-padding-top: 110px; }

    body {
      margin: 0;
      font-family: 'Tajawal', system-ui, sans-serif;
      color: var(--text);
      background: var(--surface);
      line-height: 1.8;
      overflow-x: clip; /* clip (not hidden) so position:sticky header keeps working */
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 800; line-height: 1.35; }
    p { margin: 0 0 1rem; }
    a { text-decoration: none; transition: var(--t); }
    img { max-width: 100%; }
    section { position: relative; }
    .container { max-width: var(--container); }

    .ltr-number { direction: ltr; unicode-bidi: embed; display: inline-block; }

    /* ---------- Section scaffolding ---------- */
    .sec { padding: clamp(64px, 8vw, 110px) 0; }
    .sec-tight { padding: clamp(48px, 6vw, 80px) 0; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .5px;
      color: var(--secondary);
      background: rgba(0, 91, 181, .09);
      border: 1px solid rgba(0, 91, 181, .16);
      padding: 7px 16px;
      border-radius: 999px;
      margin-bottom: 18px;
    }

    .section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
    .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 14px; }
    .section-head h2 .hl { color: var(--accent); }
    .section-head p { font-size: 1.06rem; color: var(--muted); margin: 0; }

    /* ---------- Buttons ---------- */
    .btn-alfa {
      --pad-y: 14px; --pad-x: 30px;
      display: inline-flex; align-items: center; gap: 10px;
      padding: var(--pad-y) var(--pad-x);
      font-weight: 800; font-size: 1rem; color: #3a2400;
      background: var(--grad-gold);
      border: none; border-radius: 999px;
      box-shadow: var(--shadow-gold);
      transition: var(--t);
    }
    .btn-alfa:hover { color: #3a2400; transform: translateY(-3px); box-shadow: 0 22px 46px rgba(247, 148, 29, .45); }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 28px; font-weight: 800; font-size: 1rem;
      color: #fff; background: rgba(255, 255, 255, .08);
      border: 1.5px solid rgba(255, 255, 255, .55);
      border-radius: 999px; backdrop-filter: blur(6px); transition: var(--t);
    }
    .btn-ghost:hover { color: var(--primary); background: #fff; border-color: #fff; transform: translateY(-3px); }

    .btn-solid {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 30px; font-weight: 800; color: #fff;
      background: var(--grad-brand); border: none; border-radius: 999px;
      box-shadow: var(--shadow); transition: var(--t);
    }
    .btn-solid:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lg); }

    /* ---------- Logo component ---------- */
    .alfa-logo { display: inline-flex; align-items: center; }
    .alfa-logo img { height: 48px; width: auto; display: block; }
    .alfa-logo svg { height: 46px; width: auto; display: block; }
    .footer-logo img { height: 66px; }

    /* =================================================================
       TOP BAR
    ================================================================= */
    .top-bar {
      background: var(--primary-900);
      color: rgba(255, 255, 255, .85);
      font-size: .86rem;
      padding: 8px 0;
    }
    .top-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
    .top-bar a { color: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; gap: 7px; }
    .top-bar a + a { margin-inline-start: 18px; }
    .top-bar a:hover { color: var(--gold-200); }
    .top-bar .meta { color: rgba(255, 255, 255, .65); }
    .top-bar .meta i { color: var(--gold); margin-inline-end: 6px; }

    /* =================================================================
       NAVBAR
    ================================================================= */
    .site-nav {
      position: sticky; top: 0; z-index: 1030;
      background: rgba(255, 255, 255, .85);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      transition: var(--t);
    }
    .site-nav.scrolled { box-shadow: 0 10px 30px rgba(2, 31, 66, .08); background: rgba(255, 255, 255, .96); }
    .site-nav .navbar { padding: 10px 0; }
    .navbar-nav { gap: 4px; }
    .site-nav .nav-link {
      position: relative; font-weight: 700; color: var(--ink); font-size: .98rem;
      padding: 8px 14px !important; border-radius: 10px; transition: var(--t);
    }
    .site-nav .nav-link::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
      background: var(--grad-gold); border-radius: 2px; transform: scaleX(0);
      transform-origin: center; transition: transform .3s ease;
    }
    .site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--primary); }
    .site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); }
    .navbar-toggler { border: 1px solid var(--line); padding: 6px 10px; }
    .navbar-toggler:focus { box-shadow: none; }
    .nav-cta { margin-inline-start: 10px; }

    /* =================================================================
       HERO
    ================================================================= */
    .hero {
      background:
        linear-gradient(150deg, rgba(2, 28, 59, .92) 0%, rgba(0, 49, 107, .86) 50%, rgba(0, 74, 154, .80) 100%),
        url('../img/backgrounds/alfa-bg-hero-02-large.png');
      background-size: cover; background-position: center; background-repeat: no-repeat;
      background-attachment: fixed;
      color: #fff;
      padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 130px);
      overflow: hidden;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
      background:
        radial-gradient(40% 55% at 82% 18%, rgba(247, 148, 29, .35), transparent 60%),
        radial-gradient(45% 55% at 12% 90%, rgba(0, 91, 181, .55), transparent 60%),
        radial-gradient(30% 40% at 50% 5%, rgba(255, 222, 89, .12), transparent 60%);
    }
    .hero::after {
      content: ""; position: absolute; inset: 0; z-index: 0; opacity: .35;
      background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 100%);
    }
    .hero .container { position: relative; z-index: 1; }
    .hero h1 {
      color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.32;
      margin: 0 0 22px; font-weight: 900; letter-spacing: -.5px;
    }
    .hero h1 .hl {
      background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: var(--gold);
    }
    .hero p.lead {
      color: rgba(255, 255, 255, .86); font-size: 1.14rem; max-width: 560px; margin: 0 0 32px;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 9px;
      background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
      color: #fff; font-weight: 700; font-size: .9rem;
      padding: 8px 18px; border-radius: 999px; margin-bottom: 24px;
      backdrop-filter: blur(8px);
    }
    .hero-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 193, 7, .25); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
    .hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
    .hero-stats .hs strong { display: block; font-size: 1.7rem; font-weight: 900; color: #fff; line-height: 1; }
    .hero-stats .hs span { font-size: .9rem; color: rgba(255, 255, 255, .72); }
    .hero-stats .hs strong .plus { color: var(--gold); }

    /* Hero visual — isolated animated logo (no panel, no chips) */
    .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
    .hero-logo {
      width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto;
      filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .45));
    }

    /* Hero dashboard mockup (glass panel on the dark hero) */
    .hero-panel {
      width: 100%; max-width: 460px; margin: 0 auto;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius); padding: 22px;
      box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .hp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .hp-top strong { color: #fff; font-weight: 800; font-size: 1rem; }
    .hp-top .hp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 193, 7, .25); }
    .hp-top i { color: var(--gold-200); }
    .hp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
    .hp-metric { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); padding: 14px 10px; text-align: center; }
    .hp-metric small { display: block; color: rgba(255, 255, 255, .7); font-size: .72rem; margin-bottom: 6px; }
    .hp-metric strong { display: block; color: #fff; font-size: 1.35rem; font-weight: 900; line-height: 1; }
    .hp-metric span { font-size: .66rem; color: var(--gold-200); }
    .hp-metric.accent { background: var(--grad-gold); border-color: transparent; }
    .hp-metric.accent small, .hp-metric.accent strong, .hp-metric.accent span { color: #3a2400; }
    .hp-pipe { display: flex; flex-direction: column; gap: 13px; }
    .hp-row { display: grid; grid-template-columns: 62px 1fr 42px; align-items: center; gap: 10px; }
    .hp-row .hp-label { color: rgba(255, 255, 255, .82); font-size: .8rem; font-weight: 700; }
    .hp-row .hp-bar { height: 8px; background: rgba(255, 255, 255, .12); border-radius: 999px; overflow: hidden; }
    .hp-row .hp-bar b { display: block; height: 100%; background: var(--grad-gold); border-radius: 999px; }
    .hp-row .hp-pct { color: #fff; font-size: .8rem; font-weight: 800; text-align: left; }

    /* =================================================================
       MARQUEE / TRUST KEYWORDS
    ================================================================= */
    .trust-strip { background: var(--light); border-bottom: 1px solid var(--line); padding: 22px 0; }
    .trust-strip .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; }
    .trust-strip span { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-weight: 700; font-size: .96rem; }
    .trust-strip span i { color: var(--accent); }

    /* =================================================================
       FEATURE / WHY CARDS
    ================================================================= */
    .why-section { background: var(--surface); }
    .feature-card {
      height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
      padding: 34px 30px; box-shadow: var(--shadow-sm); transition: var(--t); position: relative; overflow: hidden;
    }
    .feature-card::before {
      content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 4px;
      background: var(--grad-gold); transform: scaleX(0); transform-origin: inline-start; transition: transform .4s ease;
    }
    .feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(0, 91, 181, .18); }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-ico {
      width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
      font-size: 1.5rem; color: #fff; background: var(--grad-brand); margin-bottom: 22px;
      box-shadow: 0 12px 26px rgba(0, 59, 122, .28);
    }
    .feature-card:nth-child(3n+2) .feature-ico { background: var(--grad-gold); color: #3a2400; box-shadow: var(--shadow-gold); }
    .feature-card h4 { font-size: 1.22rem; margin: 0 0 12px; }
    .feature-card p { color: var(--muted); margin: 0; font-size: .98rem; }

    /* =================================================================
       PROCESS / JOURNEY
    ================================================================= */
    .process-section { background: var(--light); }
    .process-track { position: relative; }
    .process-track::before {
      content: ""; position: absolute; top: 38px; inset-inline: 6%; height: 3px;
      background: linear-gradient(90deg, var(--secondary), var(--accent)); border-radius: 3px; opacity: .25;
    }
    .step { text-align: center; padding: 10px; }
    .step-bubble {
      width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%;
      display: grid; place-items: center; font-size: 1.6rem; color: var(--primary);
      background: #fff; border: 2px solid rgba(0, 91, 181, .15); box-shadow: var(--shadow); transition: var(--t);
      position: relative; z-index: 1;
    }
    .step:hover .step-bubble { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-6px); }
    .step .step-num {
      position: absolute; top: -6px; inset-inline-end: -6px; width: 26px; height: 26px; border-radius: 50%;
      background: var(--grad-gold); color: #3a2400; font-size: .8rem; font-weight: 900; display: grid; place-items: center;
    }
    .step h5 { font-size: 1.05rem; margin: 0; color: var(--ink); transition: var(--t); }

    /* =================================================================
       SAAS BAND
    ================================================================= */
    .saas-section {
      background:
        linear-gradient(150deg, rgba(2, 28, 59, .92) 0%, rgba(0, 49, 107, .86) 55%, rgba(0, 74, 154, .80) 100%),
        url('../img/backgrounds/alfa-bg-saas-07-large.png');
      background-size: cover; background-position: center; background-repeat: no-repeat;
      background-attachment: fixed;
      color: #fff; overflow: hidden;
    }
    .saas-section::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(40% 60% at 85% 20%, rgba(247, 148, 29, .25), transparent 60%);
    }
    .saas-section .container { position: relative; z-index: 1; }
    .saas-section .eyebrow { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
    .saas-section h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 18px; }
    .saas-section .lead { color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
    .saas-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin: 26px 0 32px; }
    .saas-features div { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
    .saas-features i { color: var(--gold-200); }

    /* SaaS decision grid — glass cards on the dark band */
    .saas-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
    .saas-decision-item {
      background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-sm); padding: 22px 20px; backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px); transition: var(--t);
    }
    .saas-decision-item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); }
    .saas-decision-item i { font-size: 1.5rem; color: var(--gold-200); margin-bottom: 12px; display: block; }
    .saas-decision-item h4 { font-size: 1.05rem; color: #fff; margin: 0 0 8px; }
    .saas-decision-item p { font-size: .9rem; color: rgba(255, 255, 255, .82); margin: 0; line-height: 1.7; }

    /* SaaS flow note — tinted callout above the CTA */
    .saas-flow-note {
      display: flex; align-items: center; gap: 10px; margin: 0 0 26px;
      font-weight: 700; color: var(--gold-200); line-height: 1.6;
      background: rgba(247, 148, 29, .12); border: 1px solid rgba(247, 148, 29, .3);
      border-radius: var(--radius-sm); padding: 14px 18px;
    }
    .saas-flow-note i { flex: 0 0 auto; }

    /* SaaS "when to choose" — white card on the dark band */
    .saas-box {
      background: linear-gradient(160deg, rgba(255, 255, 255, .98), #fff); color: var(--primary);
      border-radius: var(--radius-lg); padding: 38px 34px; box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255, 255, 255, .6);
    }
    .saas-box h4 { font-size: 1.45rem; color: var(--primary); margin: 0 0 18px; }
    .saas-choice-list { list-style: none; padding: 0; margin: 0; }
    .saas-choice-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; line-height: 1.7; }
    .saas-choice-list li:last-child { border-bottom: none; }
    .saas-choice-list li i { color: var(--accent); margin-top: 6px; flex: 0 0 auto; }
    .saas-box-note { margin: 18px 0 0; color: var(--primary-700); font-weight: 600; font-size: .95rem; line-height: 1.8; }

    /* =================================================================
       FAQ
    ================================================================= */
    .faq-section { background: var(--surface); }
    .faq-section .accordion { max-width: 920px; margin: 0 auto; }
    .faq-section .accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
    .faq-section .accordion-button { font-weight: 800; color: var(--ink); padding: 20px 22px; font-size: 1.05rem; background: #fff; }
    .faq-section .accordion-button:not(.collapsed) { color: var(--primary); background: rgba(0, 91, 181, .05); box-shadow: none; }
    .faq-section .accordion-button:focus { box-shadow: none; }
    .faq-section .accordion-button::after { margin-inline-start: auto; margin-inline-end: 0; }
    .faq-section .accordion-body { color: var(--muted); padding: 4px 22px 22px; }

    /* =================================================================
       FINAL CTA
    ================================================================= */
    .cta-band { padding: clamp(56px, 7vw, 86px) 0; }
    .cta-inner {
      position: relative; overflow: hidden; text-align: center;
      background:
        linear-gradient(135deg, rgba(0, 59, 122, .90), rgba(0, 91, 181, .82)),
        url('../img/backgrounds/alfa-bg-journey-05-large.png');
      background-size: cover; background-position: center;
      color: #fff; border-radius: var(--radius-lg);
      padding: clamp(46px, 6vw, 70px) 26px; box-shadow: var(--shadow-lg);
    }
    .cta-inner::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(40% 70% at 85% 10%, rgba(247, 148, 29, .4), transparent 60%),
                  radial-gradient(40% 70% at 10% 100%, rgba(255, 222, 89, .18), transparent 60%);
    }
    .cta-inner > * { position: relative; z-index: 1; }
    .cta-inner h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 14px; }
    .cta-inner p { color: rgba(255, 255, 255, .88); max-width: 620px; margin: 0 auto 30px; font-size: 1.08rem; }
    .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* =================================================================
       FOOTER
    ================================================================= */
    .footer {
      background:
        linear-gradient(rgba(2, 28, 59, .95), rgba(2, 28, 59, .97)),
        url('../img/backgrounds/alfa-bg-journey-05-large.png');
      background-size: cover; background-position: center; background-attachment: fixed;
      color: rgba(255, 255, 255, .7); padding: 64px 0 26px;
    }
    .footer h5 { color: #fff; font-size: 1.05rem; margin: 0 0 18px; }
    .footer p { color: rgba(255, 255, 255, .7); font-size: .95rem; }
    .footer ul { list-style: none; padding: 0; margin: 0; }
    .footer ul li { padding: 6px 0; color: rgba(255, 255, 255, .7); }
    .footer .footer-logo { margin-bottom: 18px; }
    .footer a { color: rgba(255, 255, 255, .7); }
    .footer a:hover { color: var(--gold-200); }
    .footer-social { display: flex; gap: 10px; margin-top: 18px; }
    .footer-social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: var(--t); }
    .footer-social a:hover { background: var(--b, var(--grad-gold)); color: #fff; transform: translateY(-3px); }
    .footer-social a.fs-instagram:hover { background: linear-gradient(45deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 82%, #4f5bd5); }
    .footer hr { border-color: rgba(255, 255, 255, .12); margin: 38px 0 20px; }
    .footer-bottom { text-align: center; font-size: .9rem; color: rgba(255, 255, 255, .55); }

    /* =================================================================
       BACK TO TOP
    ================================================================= */
    #backToTop {
      position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 1040;
      width: 50px; height: 50px; border-radius: 50%; border: none; color: #fff;
      background: var(--grad-brand); box-shadow: var(--shadow-lg); cursor: pointer;
      display: none; place-items: center; font-size: 1.1rem; transition: var(--t);
    }
    #backToTop:hover { transform: translateY(-4px); }

    /* =================================================================
       REVEAL ANIMATION
    ================================================================= */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
    .reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

    /* =================================================================
       PAGE-SPECIFIC — comparison table (business solutions)
    ================================================================= */
    .compare-section { background: var(--light); }
    .compare-table { max-width: 980px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
    .compare-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; }
    .compare-row + .compare-row { border-top: 1px solid var(--line); }
    .compare-row > div { padding: 16px 18px; display: flex; align-items: center; gap: 8px; }
    .compare-row .c-field { font-weight: 800; color: var(--ink); background: var(--light); }
    .compare-row .c-before { color: var(--muted); }
    .compare-row .c-after { color: var(--ink); font-weight: 600; }
    .compare-row .c-after i { color: #16a34a; flex: 0 0 auto; }
    .compare-head > div { background: var(--grad-brand); color: #fff; font-weight: 800; justify-content: center; text-align: center; }
    .compare-head .c-field { background: var(--primary-900); }
    @media (max-width: 575px) {
      .compare-row { grid-template-columns: 1fr; }
      .compare-head { display: none; }
      .compare-row .c-field { background: var(--primary); color: #fff; }
      .compare-row .c-before::before { content: "قبل: "; font-weight: 800; color: var(--accent-600); }
      .compare-row .c-after::before { content: "بعد: "; font-weight: 800; color: #16a34a; }
    }

    /* =================================================================
       RESPONSIVE
    ================================================================= */
    @media (max-width: 1199px) {
      .site-nav .navbar-collapse { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-top: 12px; box-shadow: var(--shadow); }
      .navbar-nav { gap: 2px; }
      .nav-cta { margin: 12px 0 4px; display: inline-flex; }
      .site-nav .nav-link::after { display: none; }
    }
    @media (max-width: 991px) {
      .process-track::before { display: none; }
    }
    @media (max-width: 767px) {
      .top-bar { font-size: .78rem; }
      .top-bar .container { justify-content: center; }
      .hero { text-align: center; }
      .hero p.lead { margin-inline: auto; }
      .hero-actions, .hero-stats { justify-content: center; }
      .hero-visual { margin-top: 50px; }
      .saas-features { grid-template-columns: 1fr; }
      .saas-decision-grid { grid-template-columns: 1fr; }
      .alfa-logo img { height: 40px; }
      .alfa-logo svg { height: 40px; }
      .btn-alfa, .btn-ghost, .btn-solid { width: 100%; justify-content: center; }
      .hero-actions { width: 100%; }
      /* fixed-attachment parallax is janky on mobile — switch to scroll */
      .hero, .saas-section, .footer { background-attachment: scroll; }
    }

    /* ===================== DARK MODE ===================== */
    html[data-theme="dark"] {
      --ink: #e9f0f8;
      --text: #aeb9c8;
      --muted: #7f8b9c;
      --surface: #0e1622;
      --light: #0a111b;
      --card: #18222f;
      --link: #5fa3e6;
      --line: rgba(255, 255, 255, .10);
      --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35);
      --shadow: 0 18px 45px rgba(0, 0, 0, .45);
      --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
    }
    html[data-theme="dark"] body { background: var(--surface); }

    html[data-theme="dark"] :is(.feature-card, .step-bubble,
      .faq-section .accordion-item, .faq-section .accordion-button) {
      background: var(--card); border-color: var(--line);
    }

    /* navbar — solid deep navy matching the top bar */
    html[data-theme="dark"] .site-nav { background: #021c3b; border-color: rgba(255, 255, 255, .08); backdrop-filter: none; }
    html[data-theme="dark"] .site-nav.scrolled { background: #021c3b; }
    html[data-theme="dark"] .site-nav .navbar-collapse { background: var(--card); border-color: var(--line); }

    /* SaaS white cards stay light on the dark band -> keep inner text dark */
    html[data-theme="dark"] .saas-box { color: #1f2d3d; }
    html[data-theme="dark"] .saas-box h4 { color: #102742; }
    html[data-theme="dark"] .saas-choice-list li { color: #1f2d3d; border-color: rgba(2, 31, 66, .12); }
    html[data-theme="dark"] .saas-box-note { color: #34465c; }

    html[data-theme="dark"] :is(.step-bubble, .trust-strip span,
      .faq-section .accordion-button:not(.collapsed)) { color: var(--link); }

    html[data-theme="dark"] .eyebrow { color: #7fb6ef; background: rgba(95, 163, 230, .14); border-color: rgba(95, 163, 230, .28); }
    html[data-theme="dark"] .faq-section .accordion-button:not(.collapsed) { background: rgba(95, 163, 230, .08); }
    html[data-theme="dark"] .faq-section .accordion-body { color: var(--muted); }

    /* page-specific dark mode — comparison table */
    html[data-theme="dark"] .compare-table { background: var(--card); }
    html[data-theme="dark"] .compare-row .c-field { background: rgba(255, 255, 255, .04); color: var(--ink); }

    /* theme toggle button */
    .theme-toggle {
      width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
      background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem;
      display: grid; place-items: center; transition: var(--t); margin-inline-start: 8px; flex: 0 0 auto;
    }
    .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

    /* Safety net: never let anything add horizontal scroll on mobile. */
    html, body { width: 100%; max-width: 100%; overflow-x: clip; }

    /* =================================================================
       HRMS FINAL PAGE STYLES
    ================================================================= */
    .page-hrms #hero.hero {
      background:
        linear-gradient(150deg, rgba(2, 28, 59, .9) 0%, rgba(0, 49, 107, .78) 50%, rgba(0, 74, 154, .64) 100%),
        url('../img/backgrounds/alfa-hrms-hero-branches.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    /* ALFA HRMS detailed suite sections */
    .time-deep-section {
      padding: clamp(70px, 8vw, 110px) 0;
      background:
        linear-gradient(180deg, rgba(0, 91, 181, .06), rgba(255, 255, 255, 0) 42%),
        var(--surface);
    }

    .time-deep-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      align-items: stretch;
    }

    @media (min-width: 992px) {
      .time-deep-layout {
        grid-template-columns: .9fr 1.1fr;
      }
    }

    .time-deep-panel {
      position: relative;
      min-height: 100%;
      padding: clamp(26px, 4vw, 38px);
      border-radius: var(--radius);
      color: #fff;
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 222, 89, .22), transparent 32%),
        linear-gradient(145deg, var(--primary-900), var(--primary), var(--secondary));
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    .time-deep-panel h3 {
      color: #fff;
      font-size: clamp(1.55rem, 3vw, 2.2rem);
      margin-bottom: 12px;
    }

    .time-deep-panel p {
      color: rgba(255, 255, 255, .82);
      margin-bottom: 22px;
    }

    .time-deep-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 22px;
    }

    .time-deep-metric {
      padding: 14px 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .14);
    }

    .time-deep-metric strong {
      display: block;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .time-deep-metric span {
      color: rgba(255, 255, 255, .72);
      font-size: .8rem;
    }

    .time-deep-list {
      display: grid;
      gap: 11px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .time-deep-list li {
      display: flex;
      gap: 10px;
      color: rgba(255, 255, 255, .86);
      line-height: 1.7;
    }

    .time-deep-list i {
      color: var(--gold-200);
      margin-top: 7px;
      flex: 0 0 auto;
    }

    .time-deep-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    @media (min-width: 768px) {
      .time-deep-cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .time-deep-card {
      min-height: 100%;
      padding: 24px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow-sm);
      transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    }

    .time-deep-card:hover {
      transform: translateY(-7px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(0, 91, 181, .22);
    }

    .time-deep-icon {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--grad-brand);
      box-shadow: 0 15px 30px rgba(0, 91, 181, .18);
      margin-bottom: 16px;
    }

    .time-deep-card:nth-child(2n) .time-deep-icon {
      color: #3a2400;
      background: var(--grad-gold);
      box-shadow: var(--shadow-gold);
    }

    .time-deep-card h4 {
      font-size: 1.16rem;
      margin-bottom: 10px;
    }

    .time-deep-card p {
      color: var(--muted);
      margin: 0;
    }

    .time-payroll-strip {
      margin-top: 28px;
      padding: 24px;
      border-radius: var(--radius-sm);
      background: rgba(0, 91, 181, .06);
      border: 1px solid rgba(0, 91, 181, .12);
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: center;
    }

    @media (min-width: 768px) {
      .time-payroll-strip {
        grid-template-columns: auto 1fr auto;
      }
    }

    .time-payroll-strip .strip-icon {
      width: 66px;
      height: 66px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      color: #3a2400;
      background: var(--grad-gold);
      box-shadow: var(--shadow-gold);
      font-size: 1.4rem;
    }

    .time-payroll-strip h3 {
      font-size: 1.28rem;
      margin: 0 0 6px;
    }

    .time-payroll-strip p {
      color: var(--muted);
      margin: 0;
    }

    .time-edition-mini {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .time-edition-mini span {
      display: inline-flex;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--line);
      color: var(--primary);
      font-weight: 900;
      font-size: .86rem;
    }

    html[data-theme="dark"] .time-deep-section {
      background: linear-gradient(180deg, rgba(95, 163, 230, .08), rgba(0, 0, 0, 0) 42%), var(--surface);
    }

    .suite-map-section {
      padding: clamp(58px, 7vw, 92px) 0;
      background:
        radial-gradient(circle at 86% 14%, rgba(255, 193, 7, .11), transparent 27%),
        linear-gradient(180deg, rgba(0, 91, 181, .045), rgba(255, 255, 255, 0) 58%),
        var(--surface);
    }

    .suite-map-section .container {
      max-width: min(1500px, calc(100% - 64px));
    }

    .suite-map {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      align-items: stretch;
      padding-top: 10px;
    }

    @media (min-width: 1100px) {
      .suite-map {
        grid-template-columns: minmax(390px, .33fr) minmax(0, .67fr);
        gap: 24px;
      }
    }

    @media (min-width: 1400px) {
      .suite-map {
        grid-template-columns: minmax(430px, .31fr) minmax(0, .69fr);
        gap: 28px;
      }
    }

    .suite-map-core {
      position: relative;
      overflow: hidden;
      padding: clamp(38px, 3.8vw, 50px) clamp(30px, 3.1vw, 42px);
      border-radius: 26px;
      color: #fff;
      background:
        radial-gradient(circle at 50% 7%, rgba(255, 222, 89, .19), transparent 25%),
        radial-gradient(ellipse at 22% 108%, rgba(58, 166, 255, .18), transparent 38%),
        linear-gradient(155deg, #09224a 0%, var(--primary-900) 42%, var(--secondary) 100%);
      box-shadow: 0 28px 70px -34px rgba(12, 33, 80, .7);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
      text-align: center;
    }

    .suite-map-core::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      bottom: -80px;
      height: 230px;
      pointer-events: none;
      opacity: .18;
      background:
        repeating-radial-gradient(ellipse at 50% 100%, transparent 0 18px, rgba(255, 255, 255, .35) 19px 20px);
    }

    .suite-map-core > * {
      position: relative;
      z-index: 1;
    }

    .suite-map-core img {
      width: clamp(124px, 10vw, 150px);
      display: block;
      margin: 0 auto 6px;
      filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .28));
    }

    .suite-map-product {
      color: rgba(255, 255, 255, .88);
      font-family: Montserrat, sans-serif;
      font-weight: 900;
      font-size: .86rem;
      letter-spacing: .02em;
      margin-bottom: 30px;
    }

    .suite-map-core h3 {
      color: #fff;
      font-size: clamp(2rem, 2.72vw, 2.75rem);
      line-height: 1.28;
      max-width: 12em;
      margin: 0 auto 18px;
      text-shadow: 0 12px 24px rgba(0, 0, 0, .16);
    }

    .suite-map-core h3::after {
      content: "";
      display: block;
      width: 46px;
      height: 4px;
      border-radius: 999px;
      background: var(--grad-gold);
      margin: 22px auto 0;
    }

    .suite-map-core p {
      color: rgba(255, 255, 255, .86);
      max-width: 31rem;
      margin: 0 auto 30px;
      line-height: 1.86;
      font-size: 1.04rem;
    }

    .suite-map-flow {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .suite-map-flow li {
      direction: rtl;
      display: flex;
      gap: 18px;
      align-items: center;
      min-height: 74px;
      padding: 15px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .14);
      color: rgba(255, 255, 255, .95);
      line-height: 1.55;
      text-align: right;
      font-size: 1.02rem;
      font-weight: 900;
    }

    .suite-map-flow li:last-child {
      border-bottom: 0;
    }

    .suite-map-flow i {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #3a2400;
      background: var(--grad-gold);
      flex: 0 0 auto;
      font-size: 1.22rem;
      box-shadow: 0 16px 30px rgba(247, 148, 29, .28);
    }

    .suite-map-flow span {
      flex: 1 1 auto;
      min-width: 0;
    }

    .suite-map-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-content: stretch;
    }

    @media (min-width: 768px) {
      .suite-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .suite-map-card {
      position: relative;
      min-height: 220px;
      padding: 28px;
      border-radius: 22px;
      background: var(--card);
      border: 1px solid rgba(0, 91, 181, .12);
      box-shadow: 0 18px 42px -30px rgba(12, 33, 80, .46);
      display: grid;
      direction: ltr;
      grid-template-columns: 92px minmax(0, 1fr);
      align-items: start;
      gap: 22px;
      color: inherit;
      transition: transform var(--t), box-shadow var(--t), border-color var(--t);
      overflow: hidden;
    }

    .suite-map-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 28px 58px -30px rgba(12, 33, 80, .52);
      border-color: rgba(0, 91, 181, .22);
      color: inherit;
    }

    @media (min-width: 768px) {
      .suite-map-card:nth-child(1) { order: 1; }
      .suite-map-card:nth-child(2) { order: 2; }
      .suite-map-card:nth-child(3) { order: 3; }
      .suite-map-card:nth-child(4) { order: 4; }
      .suite-map-card:nth-child(5) { order: 5; }

      .suite-map-card-ess {
        grid-column: 1 / -1;
        min-height: 238px;
      }
    }

    .suite-map-card::before {
      content: none;
    }

    .suite-map-icon {
      width: 86px;
      height: 86px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: #fff;
      background: var(--grad-brand);
      box-shadow: 0 14px 28px rgba(0, 91, 181, .16);
      margin-top: 0;
    }

    .suite-map-icon.suite-map-logo {
      padding: 6px;
      background: #fff;
      border: 1px solid rgba(0, 91, 181, .14);
      box-shadow: 0 14px 28px rgba(0, 91, 181, .12);
    }

    .suite-map-icon.suite-map-logo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      border-radius: 12px;
    }

    .suite-map-card > div:last-child {
      align-self: stretch;
      direction: rtl;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: right;
      gap: 0;
      min-width: 0;
    }

    .suite-map-card h4 {
      color: var(--primary-900);
      font-size: clamp(1.28rem, 1.45vw, 1.58rem);
      min-height: 58px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.2;
      margin: 0 0 14px;
      letter-spacing: 0;
    }

    .suite-map-card h4 span {
      display: block;
      color: var(--primary-900);
      font-family: Montserrat, sans-serif;
      font-size: clamp(.98rem, 1.04vw, 1.13rem);
      font-weight: 900;
      margin-top: 5px;
      direction: ltr;
    }

    .suite-map-card p {
      color: var(--muted);
      margin: 0;
      font-size: clamp(.95rem, 1vw, 1.04rem);
      line-height: 1.82;
      min-height: 88px;
    }

    .suite-map-points {
      display: grid;
      gap: 9px;
      margin: 18px 0 22px;
      padding: 0;
      list-style: none;
    }

    .suite-map-points li {
      display: flex;
      gap: 10px;
      color: var(--text);
      font-size: .98rem;
      line-height: 1.45;
    }

    .suite-map-points i {
      color: var(--accent);
      margin-top: 5px;
      flex: 0 0 auto;
    }

    .suite-map-jump {
      display: inline-flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 48px;
      padding: 9px 28px 9px 11px;
      border-radius: 999px;
      color: var(--primary);
      background: #fff;
      border: 1.5px solid rgba(0, 91, 181, .26);
      font-weight: 900;
      font-size: 1.05rem;
      margin-top: auto;
      min-width: 230px;
      align-self: center;
      transition: color var(--t), background var(--t), border-color var(--t), transform var(--t);
    }

    .suite-map-jump i {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #3a2400;
      background: var(--grad-gold);
      font-size: .9rem;
      transition: transform var(--t);
    }

    .suite-map-card:hover .suite-map-jump {
      color: #fff;
      background: var(--grad-brand);
      border-color: transparent;
      transform: translateY(-1px);
    }

    .suite-map-card:hover .suite-map-jump i {
      transform: translateX(-4px);
    }

    .suite-map-ess-points {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      margin-top: 14px;
      width: 100%;
    }

    .suite-map-ess-points > div {
      min-width: 0;
    }

    .suite-map-ess-points > div + div {
      border-inline-start: 1px solid rgba(0, 91, 181, .13);
      padding-inline-start: 26px;
    }

    .suite-map-ess-points strong {
      display: inline-flex;
      color: var(--primary);
      font-weight: 900;
      background: rgba(0, 91, 181, .08);
      border-radius: 999px;
      padding: 4px 14px;
      margin-bottom: 9px;
    }

    .suite-map-card-ess {
      padding: 30px 32px;
      grid-template-columns: minmax(0, 1fr) 96px;
      align-items: start;
    }

    .suite-map-card-ess .suite-map-icon {
      grid-column: 2;
      grid-row: 1;
    }

    .suite-map-card-ess > div:last-child {
      grid-column: 1;
      grid-row: 1;
      align-items: stretch;
      max-width: 760px;
      margin-inline-end: auto;
    }

    .suite-map-card-ess .suite-map-icon {
      width: 92px;
      height: 92px;
      align-self: start;
      margin-top: 0;
    }

    .suite-map-card-ess h4 {
      min-height: 0;
      margin-bottom: 8px;
      align-self: flex-end;
      text-align: right;
      width: 100%;
      max-width: 560px;
    }

    .suite-map-card-ess p {
      min-height: 0;
      font-size: .98rem;
      line-height: 1.7;
      max-width: 700px;
      align-self: flex-end;
      text-align: right;
    }

    .suite-map-card-ess .suite-map-points {
      gap: 8px;
      margin: 0;
    }

    .suite-map-card-ess .suite-map-points li {
      font-size: .94rem;
      line-height: 1.45;
    }

    .suite-map-card-ess .suite-map-jump {
      margin-top: 24px;
      align-self: center;
      justify-self: center;
    }

    @media (min-width: 1200px) {
      .suite-map-card-ess {
        grid-template-columns: minmax(0, 1fr) 112px;
      }

      .suite-map-card-ess > div:last-child {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-width: 780px;
      }

      .suite-map-card-ess .suite-map-ess-points {
        max-width: 620px;
        align-self: center;
        margin-top: 24px;
      }

      .suite-map-card-ess .suite-map-jump {
        margin-top: 22px;
      }
    }

    @media (max-width: 767px) {
      .suite-map-section .container {
        max-width: min(100% - 28px, 720px);
      }

      .suite-map-card,
      .suite-map-card-ess {
        grid-template-columns: 72px minmax(0, 1fr);
        min-height: auto;
        padding: 20px;
        border-radius: 18px;
      }

      .suite-map-icon,
      .suite-map-card-ess .suite-map-icon {
        width: 70px;
        height: 70px;
      }

      .suite-map-card h4 {
        font-size: 1.12rem;
        min-height: 0;
      }

      .suite-map-card h4 span {
        font-size: .9rem;
      }

      .suite-map-card p {
        min-height: 0;
      }

      .suite-map-ess-points {
        grid-template-columns: 1fr;
      }

      .suite-map-ess-points > div + div {
        border-inline-start: 0;
        border-top: 1px solid rgba(0, 91, 181, .12);
        padding-inline-start: 0;
        padding-top: 14px;
      }

      .suite-map-jump {
        min-width: 0;
        width: 100%;
      }

      .suite-map-card-ess {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .suite-map-card-ess .suite-map-icon {
        grid-column: auto;
        grid-row: auto;
        margin: 0 auto 14px;
      }

      .suite-map-card-ess > div:last-child {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        max-width: none;
        margin: 0;
        align-items: center;
        text-align: center;
      }

      .suite-map-card-ess h4,
      .suite-map-card-ess p {
        align-self: center;
        max-width: none;
        text-align: center;
      }

      .suite-map-card-ess .suite-map-ess-points {
        width: 100%;
        margin-top: 18px;
      }

      .suite-map-card-ess .suite-map-points li {
        justify-content: center;
        text-align: center;
      }
    }

    html[data-theme="dark"] .suite-map-section {
      background:
        radial-gradient(circle at 86% 14%, rgba(255, 193, 7, .1), transparent 26%),
        linear-gradient(180deg, rgba(95, 163, 230, .08), rgba(0, 0, 0, 0) 55%),
        var(--surface);
    }

    .page-hrms :is(.suite-map-card, .time-deep-card, .screen-card, .screens-feature, .time-payroll-strip) {
      position: relative;
      overflow: hidden;
      transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
      will-change: transform;
    }

    .page-hrms .suite-map-card::before {
      transform: scaleX(0);
      transform-origin: inline-start;
      transition: transform .4s ease;
    }

    .page-hrms :is(.time-deep-card, .screen-card, .screens-feature, .time-payroll-strip)::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: 0;
      width: 100%;
      height: 4px;
      background: var(--grad-gold);
      transform: scaleX(0);
      transform-origin: inline-start;
      transition: transform .4s ease;
      z-index: 1;
    }

    .page-hrms :is(.suite-map-card, .time-deep-card, .screen-card, .screens-feature, .time-payroll-strip):hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(0, 91, 181, .18);
    }

    .page-hrms :is(.suite-map-card, .time-deep-card, .screen-card, .screens-feature, .time-payroll-strip):hover::before {
      transform: scaleX(1);
    }

    @media (prefers-reduced-motion: reduce) {
      .page-hrms :is(.suite-map-card, .time-deep-card, .screen-card, .screens-feature, .time-payroll-strip) {
        transition: none;
      }

      .page-hrms :is(.suite-map-card, .time-deep-card, .screen-card, .screens-feature, .time-payroll-strip)::before {
        transition: none;
      }
    }

    .footer-social a.social-facebook { --b: #1877f2; }
    .footer-social a.social-instagram { --b: #e1306c; }
    .footer-social a.social-linkedin { --b: #0a66c2; }
    .footer-social a.social-whatsapp { --b: #25d366; }
    .footer-social a.social-email { --b: var(--accent); }

/* HRMS 5 start guide strip experiment */
.page-hrms-start-demo .start-guide-strip {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  padding: 0 0 26px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0) 0%, rgba(248, 251, 255, .92) 42%, var(--surface) 100%);
}

.page-hrms-start-demo .start-guide-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(247, 251, 255, .88)),
    radial-gradient(circle at 8% 20%, rgba(255, 179, 26, .13), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(0, 91, 181, .12), transparent 32%);
  border: 1px solid rgba(0, 91, 181, .12);
  box-shadow: 0 18px 45px rgba(6, 38, 79, .10);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.page-hrms-start-demo .start-guide-title {
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-900), var(--primary));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.page-hrms-start-demo .start-guide-title i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #082a57;
  background: linear-gradient(145deg, #ffcf55, #ff9f1a);
  box-shadow: 0 8px 18px rgba(255, 159, 26, .25);
}

.page-hrms-start-demo .start-guide-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.page-hrms-start-demo .start-guide-link {
  min-height: 50px;
  padding: 8px 12px;
  border-radius: 15px;
  color: var(--primary);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(0, 91, 181, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(6, 38, 79, .06);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t), color var(--t);
}

.page-hrms-start-demo .start-guide-link i {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  color: var(--primary);
  background: rgba(255, 179, 26, .18);
  flex: 0 0 auto;
  transition: background var(--t), color var(--t);
}

.page-hrms-start-demo .start-guide-link:hover,
.page-hrms-start-demo .start-guide-link:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-color: rgba(0, 91, 181, .18);
  box-shadow: 0 16px 34px rgba(0, 91, 181, .18);
  transform: translateY(-3px);
}

.page-hrms-start-demo .start-guide-link:hover i,
.page-hrms-start-demo .start-guide-link:focus-visible i {
  color: #082a57;
  background: linear-gradient(145deg, #ffcf55, #ff9f1a);
}

@media (max-width: 991px) {
  .page-hrms-start-demo .start-guide-strip {
    margin-top: -12px;
    padding-bottom: 20px;
  }

  .page-hrms-start-demo .start-guide-wrap {
    grid-template-columns: 1fr;
  }

  .page-hrms-start-demo .start-guide-title {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .page-hrms-start-demo .start-guide-wrap {
    padding: 10px;
    border-radius: 18px;
  }

  .page-hrms-start-demo .start-guide-nav {
    grid-template-columns: 1fr 1fr;
  }

  .page-hrms-start-demo .start-guide-link {
    min-height: 46px;
    padding: 8px 10px;
    font-size: .92rem;
  }
}
/* End HRMS 5 start guide strip experiment */
/* HRMS accepted page local styles */
.scroll-progress {
      position: fixed;
      top: 0;
      inset-inline: 0;
      z-index: 10050;
      height: 4px;
      background: linear-gradient(90deg, #ffb31a, #005bb5);
      transform: scaleX(var(--scroll-progress, 0));
      transform-origin: right center;
      pointer-events: none;
    }

    .section-single-line {
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      font-size: clamp(1.45rem, 4vw, 2.45rem);
    }

    .temporarily-hidden-section {
      display: none !important;
    }



    /* Benefits section: How ALFA helps customers */
    .alfa-help-section {
      position: relative;
      overflow: hidden;
      padding: 90px 0;
      isolation: isolate;
      background:
        radial-gradient(circle at 8% 12%, rgba(255, 179, 26, .13), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(0, 91, 181, .10), transparent 30%),
        linear-gradient(180deg, rgba(0, 91, 181, .045), rgba(255, 255, 255, 0) 58%),
        var(--surface);
    }

    .alfa-help-section::before {
      content: "";
      position: absolute;
      inset: 24px;
      border: 1px solid rgba(0, 91, 181, .08);
      border-radius: 34px;
      pointer-events: none;
      z-index: -1;
    }

    .alfa-help-section::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .08;
      z-index: -1;
      background-image:
        linear-gradient(rgba(0, 91, 181, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 91, 181, .16) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    }

    .alfa-help-header {
      text-align: center;
      max-width: 920px;
      margin: 0 auto 42px;
      position: relative;
      z-index: 1;
    }

    .alfa-help-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border-radius: 999px;
      color: var(--primary);
      background: rgba(0, 91, 181, .07);
      border: 1px solid rgba(0, 91, 181, .14);
      font-weight: 800;
      margin-bottom: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    }

    .alfa-help-header .eyebrow i {
      color: #ffb31a;
    }

    .alfa-help-header h2 {
      color: var(--primary-900);
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 14px;
      letter-spacing: -.5px;
    }

    .alfa-help-header h2::after {
      content: "";
      display: block;
      width: 56px;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, #ffcf55, #ff951a);
      margin: 18px auto 0;
    }

    .alfa-help-header p {
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.9;
      margin: 0;
    }

    .alfa-help-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      position: relative;
      z-index: 1;
    }

    .alfa-help-card {
      position: relative;
      min-height: 245px;
      height: 100%;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 30px 28px;
      box-shadow: var(--shadow-sm);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
      overflow: hidden;
    }

    .alfa-help-card::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      top: 0;
      height: 4px;
      background: var(--grad-gold);
      transform: scaleX(0);
      transform-origin: inline-start;
      transition: transform .4s ease;
    }

    .alfa-help-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(0, 91, 181, .18);
    }

    .alfa-help-card:hover::before {
      transform: scaleX(1);
    }

    .alfa-help-icon {
      width: 62px;
      height: 62px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: var(--grad-brand);
      font-size: 1.5rem;
      margin-bottom: 22px;
      box-shadow: 0 12px 26px rgba(0, 59, 122, .28);
    }

    .alfa-help-card:nth-child(3n+2) .alfa-help-icon {
      color: #3a2400;
      background: var(--grad-gold);
      box-shadow: var(--shadow-gold);
    }

    .alfa-help-card h3 {
      color: #003b7a;
      font-size: 1.22rem;
      font-weight: 900;
      margin: 0 0 12px;
    }

    .alfa-help-card p {
      color: #627083;
      line-height: 1.85;
      margin: 0 0 18px;
      font-size: .98rem;
    }

    .alfa-help-note {
      position: relative;
      z-index: 1;
      margin-top: 28px;
      padding: clamp(22px, 2.6vw, 30px);
      border-radius: 24px;
      background:
        radial-gradient(circle at 14% 26%, rgba(255, 179, 26, .18), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(255, 255, 255, .09), transparent 34%),
        linear-gradient(135deg, #05253e, #003b78 58%, #0869bf);
      border: 1px solid rgba(255, 255, 255, .18);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .alfa-help-note::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, .12) 42%, transparent 52%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 54px);
      opacity: .55;
      pointer-events: none;
    }

    .alfa-help-idea {
      position: relative;
      z-index: 1;
      margin: 0;
      font-weight: 900;
      font-size: clamp(1.35rem, 2.55vw, 2rem);
      line-height: 1.55;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 4px 9px;
      white-space: normal;
    }

    .idea-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      animation: ideaBlink 2.2s ease-in-out infinite;
    }

    .idea-kicker i {
      width: 31px;
      height: 31px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 31px;
      font-size: .92rem;
      color: #ffb31a;
      background: rgba(0, 45, 92, .88);
      border: 1px solid rgba(255, 179, 26, .45);
      box-shadow:
        0 0 0 4px rgba(255, 179, 26, .08),
        0 0 14px rgba(255, 179, 26, .36);
      text-shadow: none;
      filter: none;
    }

    .idea-divider {
      color: rgba(255, 255, 255, .78);
      margin-inline-start: -2px;
    }

    .idea-part {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 0 3px 4px;
      border-radius: 0;
      color: #fff;
      background: transparent;
      border: 0;
      box-shadow: none;
      opacity: 0;
      transform: translateY(14px);
      animation: ideaPartIn .78s cubic-bezier(.2, .8, .2, 1) forwards;
    }

    .idea-part::after {
      content: "";
      position: absolute;
      right: 3px;
      left: 3px;
      bottom: 1px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255, 179, 26, .46), transparent);
      opacity: 0;
      transform: scaleX(.15);
      transform-origin: right center;
      animation: ideaUnderline .75s ease forwards;
    }

    .idea-part-1 { animation-delay: .65s; }
    .idea-part-2 { animation-delay: 1.18s; }
    .idea-part-1::after { animation-delay: .96s; }
    .idea-part-2::after { animation-delay: 1.49s; }
    .idea-part-3 {
      animation-delay: 1.72s;
      color: #ffd36b;
      text-shadow: 0 0 18px rgba(255, 179, 26, .34);
    }

    .idea-part-3::after {
      height: 4px;
      background: linear-gradient(90deg, transparent, #ffb31a, #ffd36b, transparent);
      opacity: 0;
      animation-delay: 2.03s;
    }

    @keyframes ideaBlink {
      0%, 100% {
        opacity: 1;
        text-shadow: 0 0 0 rgba(255, 179, 26, 0);
        transform: translateY(0);
      }
      38% {
        opacity: 1;
        text-shadow: 0 0 22px rgba(255, 179, 26, .85);
        transform: translateY(-1px);
      }
      52% { opacity: .72; }
      66% { opacity: 1; }
    }

    @keyframes ideaPartIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes ideaUnderline {
      45% {
        opacity: .9;
        transform: scaleX(1);
      }
      100% {
        opacity: .55;
        transform: scaleX(1);
      }
    }

    @media (max-width: 991px) {
      .alfa-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 575px) {
      .alfa-help-section { padding: 60px 0; }
      .alfa-help-section::before { inset: 12px; border-radius: 24px; }
      .alfa-help-grid { grid-template-columns: 1fr; }
      .alfa-help-card { min-height: auto; padding: 20px; }
      .alfa-help-note { padding: 22px 18px; }
      .alfa-help-idea { font-size: 1.22rem; gap: 8px; }
    }
/* End HRMS accepted page local styles */