/* =============================================================================
   SMART LOGIC — DESIGN SYSTEM v3
   -----------------------------------------------------------------------------
   Arabic-first enterprise design language.

   Typography : IBM Plex Sans Arabic (designed for Arabic, pairs with Inter)
                Inter for Latin and technical terms; Cairo kept as fallback.
   Palette    : the logo is one deep navy (#00063D). Everything else is derived
                from it — electric blue carries interaction, cyan carries
                secondary emphasis. WhatsApp green is reserved exclusively for
                WhatsApp actions so it keeps exactly one meaning on the site.
   Scales     : type = perfect fourth (1.333); space = 8pt + 4pt half-step;
                radius = circular ladder x1.5; elevation = navy-tinted.
   ========================================================================= */

:root {
    /* ---- Brand navy (the logo) ---- */
    --sl-navy-950: #00031F;
    --sl-navy-900: #00063D;
    --sl-navy-800: #00104E;
    --sl-navy-700: #001A63;
    --sl-navy-600: #00246F;

    /* ---- Electric blue: the interactive accent ---- */
    --sl-blue-700: #0A3E9E;
    --sl-blue-600: #0E52D6;
    --sl-blue-500: #2563EB;   /* primary interactive */
    --sl-blue-400: #4D8BF7;
    --sl-blue-300: #86B3FB;
    --sl-blue-200: #BED8FD;
    --sl-blue-100: #E0ECFE;
    --sl-blue-50:  #F1F6FF;

    /* ---- Cyan: secondary highlight ---- */
    --sl-cyan-500: #06B6D4;
    --sl-cyan-400: #22D3EE;
    --sl-cyan-300: #67E8F9;
    --sl-cyan-100: #CFFAFE;

    /* ---- Graphite / charcoal surfaces ---- */
    --sl-graphite-900: #0C1220;
    --sl-graphite-800: #141C2E;
    --sl-graphite-700: #1E2739;

    /* ---- Neutral ramp ---- */
    --sl-white: #FFFFFF;
    --sl-ink: #0A1020;
    --sl-body: #2B3548;
    --sl-muted: #5B6779;
    /*
       --sl-subtle was #8A94A6, which is 3.1:1 on white and failed WCAG AA for
       body-sized text. It is now #5F6B7D (4.9:1). The step between muted and
       subtle is carried by opacity where a decorative distinction is enough.
    */
    --sl-subtle: #5F6B7D;
    --sl-line: #E3E9F4;
    --sl-line-strong: #CFD9EA;
    --sl-bg: #F7F9FC;
    --sl-bg-alt: #EEF3FB;

    /* ---- WhatsApp green: WhatsApp actions only ---- */
    --sl-wa: #25D366;
    --sl-wa-700: #128C4A;
    --sl-wa-ink: #06331A;

    /* ---- Semantic ---- */
    --sl-success: #128C4A;
    --sl-warning: #B45309;
    --sl-danger: #DC2626;

    /* ---- Legacy aliases so older rules keep resolving ---- */
    --sl-brand: var(--sl-blue-600);
    --sl-navy-950-ramp: var(--sl-navy-950);

    /* ---- Typography ---- */
    --sl-font-ar: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --sl-font-en: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sl-font: 'IBM Plex Sans Arabic', 'Inter', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --sl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* perfect fourth from 16px */
    --sl-t-xs:   11px;
    --sl-t-sm:   13px;
    --sl-t-base: 16px;
    --sl-t-md:   18px;
    --sl-t-lg:   21px;
    --sl-t-xl:   28px;
    --sl-t-2xl:  38px;
    --sl-t-3xl:  51px;
    --sl-t-4xl:  67px;

    /* 8pt base + 4pt half-step */
    --sl-s-4:4px;  --sl-s-8:8px;   --sl-s-12:12px; --sl-s-16:16px;
    --sl-s-24:24px; --sl-s-32:32px; --sl-s-40:40px; --sl-s-48:48px;
    --sl-s-64:64px; --sl-s-80:80px; --sl-s-96:96px; --sl-s-120:120px;

    /* radius: x1.5 circular ladder */
    --sl-r-xs:6px; --sl-r-sm:10px; --sl-r-md:16px; --sl-r-lg:24px;
    --sl-r-xl:36px; --sl-r-pill:999px;

    /* elevation: navy-tinted, never neutral grey */
    --sl-shadow-xs: 0 1px 2px rgba(0, 6, 61, .06);
    --sl-shadow-sm: 0 2px 8px rgba(0, 6, 61, .07);
    --sl-shadow:    0 8px 24px rgba(0, 6, 61, .09);
    --sl-shadow-lg: 0 20px 48px rgba(0, 6, 61, .14);
    --sl-shadow-xl: 0 32px 72px rgba(0, 6, 61, .18);
    --sl-ring: 0 0 0 4px rgba(37, 99, 235, .18);

    /* The header is position:fixed; its height is the offset the mega-menus
       hang from and the scroll-padding anchored sections need. */
    --sl-header-h: 79px;

    /* One vertical rhythm for every full-width band on the site. */
    --sl-section-pad: clamp(48px, 7vw, 104px);

    --sl-ease: cubic-bezier(.22, .61, .36, 1);
    --sl-dur: .22s;
    --sl-container: 1200px;
    --sl-gutter: 24px;
}

/* ---------------------------------------------------------------------------
   BASE — locale-aware typography and RTL-safe layout
   ------------------------------------------------------------------------ */
html[lang="ar"] body,
body:lang(ar) { font-family: var(--sl-font-ar); }

html[lang="en"] body,
body:lang(en) { font-family: var(--sl-font-en); }

body {
    font-family: var(--sl-font);
    color: var(--sl-body);
    font-size: var(--sl-t-base);
    line-height: 1.75;
    background: var(--sl-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    color: var(--sl-ink);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: var(--sl-t-3xl); }
h2 { font-size: var(--sl-t-2xl); }
h3 { font-size: var(--sl-t-xl); }
h4 { font-size: var(--sl-t-lg); }
h5 { font-size: var(--sl-t-md); }
h6 { font-size: var(--sl-t-base); }

.lead { font-size: var(--sl-t-lg); line-height: 1.65; color: var(--sl-muted); }
.small, small { font-size: var(--sl-t-sm); }

p { text-wrap: pretty; }

/* Arabic needs a touch more leading than Latin to stay readable. */
html[lang="ar"] body { line-height: 1.9; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { line-height: 1.35; letter-spacing: 0; }

/* Latin words and technical terms inside Arabic sentences must not flip. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

a { color: var(--sl-blue-600); text-decoration: none; transition: color var(--sl-dur) var(--sl-ease); }
a:hover { color: var(--sl-blue-500); }

.text-muted { color: var(--sl-muted) !important; }
.text-primary { color: var(--sl-blue-600) !important; }

/* ---------------------------------------------------------------------------
   GRID & CONTAINER
   ------------------------------------------------------------------------ */
.container { max-width: var(--sl-container); }
.row { --bs-gutter-x: var(--sl-gutter); --bs-gutter-y: var(--sl-gutter); }
.container, .container-fluid { --bs-gutter-x: var(--sl-gutter); }

/* ---------------------------------------------------------------------------
   SURFACES
   ------------------------------------------------------------------------ */
.card, .service-card, .portfolio-card, .blog-card, .solution-card,
.pricing-card, .industry-card, .product-card {
    background: var(--sl-white);
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-r-md);
    box-shadow: var(--sl-shadow-xs);
    transition: transform var(--sl-dur) var(--sl-ease),
                box-shadow var(--sl-dur) var(--sl-ease),
                border-color var(--sl-dur) var(--sl-ease);
}
.card:hover, .service-card:hover, .portfolio-card:hover, .solution-card:hover {
    border-color: var(--sl-blue-200);
    box-shadow: var(--sl-shadow);
    transform: translateY(-3px);
}

.bg-light { background-color: var(--sl-bg) !important; }
.bg-white { background-color: var(--sl-white) !important; }

/* ---------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------ */
.btn {
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--sl-r-sm);
    padding: .7rem 1.5rem;
    border-width: 1px;
    transition: transform var(--sl-dur) var(--sl-ease),
                box-shadow var(--sl-dur) var(--sl-ease),
                background-color var(--sl-dur) var(--sl-ease);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: var(--sl-blue-600);
    border-color: var(--sl-blue-600);
    color: var(--sl-white);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .22);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--sl-blue-700);
    border-color: var(--sl-blue-700);
    color: var(--sl-white);
}

.btn-outline-primary {
    border: 1.5px solid var(--sl-blue-600);
    color: var(--sl-blue-600);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--sl-blue-600);
    border-color: var(--sl-blue-600);
    color: var(--sl-white);
}

/* WhatsApp keeps its own colour so the action is unmistakable. */
.btn-whatsapp, .btn-wa {
    background: var(--sl-wa);
    border-color: var(--sl-wa);
    color: var(--sl-wa-ink);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .28);
}
.btn-whatsapp:hover, .btn-wa:hover {
    background: var(--sl-wa-700);
    border-color: var(--sl-wa-700);
    color: var(--sl-white);
}

.btn:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--sl-ring);
    border-radius: var(--sl-r-sm);
}

/* ---------------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------------ */
.form-control, .form-select, .input-group-text {
    border: 1px solid var(--sl-line-strong);
    border-radius: var(--sl-r-sm);
    padding: .75rem 1rem;
    font-family: inherit;
    color: var(--sl-ink);
    background: var(--sl-white);
    transition: border-color var(--sl-dur) var(--sl-ease), box-shadow var(--sl-dur) var(--sl-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--sl-blue-500);
    box-shadow: var(--sl-ring);
}
.form-control::placeholder { color: var(--sl-subtle); }
.form-label { font-weight: 600; color: var(--sl-ink); font-size: var(--sl-t-sm); margin-bottom: .35rem; }
.invalid-feedback { font-size: var(--sl-t-sm); }

/* ---------------------------------------------------------------------------
   HEADER & FOOTER
   ------------------------------------------------------------------------ */
.header {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--sl-line);
}
.header.is-scrolled, .header.scrolled { box-shadow: var(--sl-shadow-sm); }

.brand img, .header .brand img { width: 160px; height: 45px; object-fit: contain; }
[dir="rtl"] .brand img { object-position: right center; }

/*
   Header density.

   Measured on the live page at 1440px: brand 160 + nav 726 + controls 711 =
   1597px of content inside a 1200px container. The 397px overflow pushed the
   rightmost controls past the viewport edge, where the "Register" button was
   clipped into a featureless grey square. The fixes:

     - the brand no longer reserves 160px for a square image. logo.png is
       1024x1024, so object-fit:contain inside a 160x45 box rendered the real
       logo at only 45px wide. The box now matches the artwork's aspect.
     - the control cluster is allowed to shrink and its gaps tighten.
     - the nav can shrink and scroll internally rather than forcing the row wider.
*/
.header .brand { flex: 0 0 auto; }
/*
   logo.png is a 1024x1024 square whose actual mark occupies only about 30% of
   the canvas, so sizing it by height alone rendered a 30px mark inside a 79px
   header. It is therefore given a height large enough that the visible mark
   reads at the intended size; the transparent padding is part of the asset and
   is left alone rather than cropped.
*/
.header .brand img {
    width: auto;
    height: 58px;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}
[dir="rtl"] .header .brand img { object-position: right center; }

.header .controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}
.header .controls .btn { padding-inline: 12px; }
.header .nav-desktop {
    display: flex;
    align-items: center;
    gap: 8px;   /* tuned so the 7 remaining items fit with real headroom */
    flex: 1 1 auto;
    min-width: 0;
    /* Must stay visible. Setting overflow-x here would compute overflow-y to
       auto, which clips the 720x713 mega-menus into the 41px nav strip and
       breaks every dropdown. Density is handled by type size instead. */
    overflow: visible;
}
.header .nav-desktop .nav-item { flex: 0 0 auto; }

/*
   Mega-menu placement.

   The panel was positioned against its own trigger with left:-5% and
   translateX(-50%), so a 900px panel opened from a trigger near either edge ran
   off the viewport. Measured: opening "Solutions" at x=305 put the panel's left
   edge at -145px, cutting off the entire first column.

   The panel is now fixed to the viewport and centred under the header, so every
   trigger opens it identically and it cannot be clipped. It stays a DOM child of
   the trigger, so the CSS :hover that reveals it still holds while the pointer
   travels down into the panel. Both the resting and hovered transforms are
   redefined because the originals set translateX(-50%), which fights centring.
*/
.header .mega-menu {
    position: fixed;
    top: var(--sl-header-h);
    left: 50%;
    transform: translate(-50%, 8px);
    width: min(1180px, calc(100vw - 32px));
    min-width: 0;
    /* Never taller than the space under the header; scrolls if it has to be. */
    max-height: calc(100vh - var(--sl-header-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 60;
}
.header .nav-item:hover .mega-menu,
.header .nav-item:focus-within .mega-menu {
    transform: translate(-50%, 0);
}
.header .mega-menu::before {
    /* Hover bridge, so the pointer can cross from the trigger into the panel. */
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -8px;
    height: 8px;
}

@media (max-width: 1199.98px) {
    /*
       The full desktop header needs 1200px. Below that the seven top-level
       items no longer fit beside the control cluster, and the last one used to
       render outside the nav box. Everything narrower gets the off-canvas menu,
       which carries the same links.
    */
    .header .nav-desktop { display: none; }
    /*
       The burger is a child of .controls, so hiding the whole cluster would
       hide the only way to open the menu and collapsed the button to 0x0.
       Only the control items go; the cluster stays as the flex row that holds
       the burger.
    */
    .header .controls > *:not(.mobile-toggle) { display: none; }
    /*
       Explicit size, because `display:grid` collapsed the button to 0x0 (a grid
       item with no intrinsic size) and made it unclickable. 46x46 is also a
       comfortable touch target.
    */
    .header .mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        font-size: 1.3rem;
        color: var(--sl-ink);
        background: var(--sl-white);
        border: 1px solid var(--sl-line);
        border-radius: var(--sl-r-sm);
        box-shadow: none;
    }
    .header .mobile-toggle:hover {
        background: var(--sl-blue-50);
        border-color: var(--sl-blue-200);
        box-shadow: none;
        transform: none;
    }
    .header .brand img { height: 46px; }
}


/*
   The off-canvas drawer is fixed off-screen until Bootstrap opens it, but a
   fixed element outside the viewport still widens the document. That produced a
   48px horizontal scroll at 320px. Clipping the x-axis on the root stops it
   without `hidden`, which would break the sticky header's scroll container.
*/
html { overflow-x: clip; scroll-padding-top: calc(var(--sl-header-h) + 16px); }
body { overflow-x: clip; }

.nav-desktop a {
    color: var(--sl-ink);
    font-weight: 600;
    /* .95rem overflowed the header row and truncated the last item. */
    font-size: .90rem;
    position: relative;
    padding-block: .5rem;
}
.nav-desktop a::after {
    content: "";
    position: absolute;
    inset-inline: .25rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--sl-blue-600);
    transform: scaleX(0);
    transition: transform var(--sl-dur) var(--sl-ease);
}
.nav-desktop a:hover, .nav-desktop a.is-active { color: var(--sl-blue-600); }
.nav-desktop a:hover::after, .nav-desktop a.is-active::after { transform: scaleX(1); }

.footer { background: var(--sl-graphite-900); color: rgba(255, 255, 255, .78); }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: var(--sl-white); }
.footer a { color: rgba(255, 255, 255, .78); }
.footer a:hover { color: var(--sl-white); }
.footer-cta-section {
    background: linear-gradient(120deg, var(--sl-navy-950) 0%, var(--sl-navy-800) 55%, var(--sl-blue-700) 100%);
    color: rgba(255, 255, 255, .88);
}

/*
   The footer CTA sat on a navy->blue gradient while its heading and body
   inherited the global near-black text colour, so "جاهز لتحقيق نقلة رقمية"
   rendered at roughly 1.2:1 and was effectively invisible. Anything drawn on
   this surface now declares its own light colour and its own contrast-safe
   button styles rather than inheriting page defaults.
*/
.footer-cta-section h1,
.footer-cta-section h2,
.footer-cta-section h3,
.footer-cta-section h4 { color: var(--sl-white); }
.footer-cta-section p { color: rgba(255, 255, 255, .82); }

.footer-directory-bar { background: transparent; }
.footer-directory-bar a,
.footer-directory-bar__primary,
.footer-bottom a,
.footer-bottom__top { color: rgba(255, 255, 255, .82); }
.footer-directory-bar__primary {
    background: var(--sl-white);
    color: var(--sl-navy-900) !important;
    font-weight: 700;
}
.footer-directory-bar__primary:hover { background: var(--sl-blue-50); color: var(--sl-navy-900) !important; }
.footer-contact__value { color: var(--sl-white); }
.footer-bottom__text { color: rgba(255, 255, 255, .78); }
.footer-bottom__sep { color: rgba(255, 255, 255, .45); }

/*
   Bootstrap's .btn-info carried white text but a transparent background after
   the palette was unified, which is why the header "Call" button read as an
   empty outline. It is restyled as a real outline button using system tokens.
*/
.btn-info {
    background: transparent;
    border: 1px solid var(--sl-line-strong);
    color: var(--sl-ink);
    font-weight: 600;
}
.btn-info:hover, .btn-info:focus {
    background: var(--sl-blue-50);
    border-color: var(--sl-blue-300);
    color: var(--sl-blue-700);
}
.btn-secondary { background: var(--sl-blue-600); border-color: var(--sl-blue-600); color: var(--sl-white); }
.btn-secondary:hover { background: var(--sl-blue-700); border-color: var(--sl-blue-700); color: var(--sl-white); }
.btn-outline-secondary { border: 1px solid var(--sl-line-strong); color: var(--sl-ink); background: transparent; }
.btn-outline-secondary:hover { border-color: var(--sl-blue-300); color: var(--sl-blue-700); background: var(--sl-blue-50); }

/* ---------------------------------------------------------------------------
   HERO — four-slide carousel.

   Every slide is built from the same parts in the same order inside the same
   container, and the section has one fixed height, so advancing a slide cannot
   change the layout. The track is a native scroll-snap container: it gives
   smooth transitions plus touch and keyboard support with no library, and the
   browser's own scroll origin makes RTL work without mirrored transform maths.

   The artwork behind the copy is decorative abstract imagery, not a product
   screenshot, so it carries a heavy scrim and the text sits on top of it at a
   guaranteed contrast ratio rather than relying on the image being dark.
   ------------------------------------------------------------------------ */
.sl-hs {
    position: relative;
    background: linear-gradient(155deg, var(--sl-navy-950) 0%, var(--sl-navy-800) 100%);
    /* One height for all four slides. min-height, not height, so a long Arabic
       headline can never clip; the value itself is what stays stable. */
    min-height: clamp(520px, 72vh, 680px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sl-hs__track {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sl-hs__track::-webkit-scrollbar { display: none; }
.sl-hs__track:focus-visible { outline: 3px solid var(--sl-blue-400); outline-offset: -3px; }

.sl-hs__slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sl-hs__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 900ms var(--sl-ease), transform 7s linear;
}
.sl-hs__slide.is-active .sl-hs__bg { transform: scale(1); }

.sl-hs__scrim {
    position: absolute;
    inset: 0;
    /*
       Scrim weight is a compromise: heavy enough that white text clears AA over
       any of the four artworks, light enough that the artwork still reads. An
       earlier version sat at .94/.90/.74, which flattened all four slides into
       the same navy panel and discarded the imagery entirely.
    */
    background:
        radial-gradient(900px 520px at 78% 6%, rgba(37, 99, 235, .40), transparent 62%),
        radial-gradient(760px 460px at 8% 104%, rgba(6, 182, 212, .26), transparent 62%),
        linear-gradient(105deg,
            rgba(0, 3, 31, .90) 0%,
            rgba(0, 6, 61, .82) 46%,
            rgba(0, 10, 78, .56) 100%);
}
[dir="rtl"] .sl-hs__scrim {
    background:
        radial-gradient(900px 520px at 22% 6%, rgba(37, 99, 235, .40), transparent 62%),
        radial-gradient(760px 460px at 92% 104%, rgba(6, 182, 212, .26), transparent 62%),
        linear-gradient(255deg,
            rgba(0, 3, 31, .90) 0%,
            rgba(0, 6, 61, .82) 46%,
            rgba(0, 10, 78, .56) 100%);
}
/* The artwork itself needs to be present enough to differentiate the slides. */
.sl-hs__slide.is-active .sl-hs__bg { opacity: .72; }

/* A quiet blueprint grid, the one decorative layer that survives: it reads as
   infrastructure rather than as motion. */
.sl-hs__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 35%, transparent 100%);
    pointer-events: none;
}

.sl-hs__container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(56px, 7vw, 92px) clamp(96px, 9vw, 120px);
}
.sl-hs__inner { max-width: 660px; }
[dir="rtl"] .sl-hs__inner { margin-inline-end: auto; }

.sl-hs__tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    padding: .35rem .95rem;
    border-radius: var(--sl-r-pill);
    font-size: var(--sl-t-sm);
    font-weight: 600;
    color: var(--sl-white);
    margin-bottom: var(--sl-s-24);
}

.sl-hs__title {
    color: var(--sl-white);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.6vw, 3.2rem);
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0 0 var(--sl-s-24);
}
html[lang="ar"] .sl-hs__title { line-height: 1.38; letter-spacing: 0; }
.sl-hs__word { color: var(--sl-blue-300); }

.sl-hs__sub {
    color: rgba(255, 255, 255, .86);
    font-size: var(--sl-t-lg);
    line-height: 1.7;
    max-width: 56ch;
    margin: 0 0 var(--sl-s-32);
}
html[lang="ar"] .sl-hs__sub { line-height: 1.85; }

.sl-hs__pillars {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sl-s-32);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-s-12);
}
.sl-hs__pillars li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .95rem;
    border-radius: var(--sl-r-pill);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: var(--sl-t-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}
.sl-hs__pillars i { color: var(--sl-cyan-300); }

.sl-hs__ctas { display: flex; flex-wrap: wrap; gap: var(--sl-s-12); }
.sl-hs__ctas .btn { min-width: 210px; justify-content: center; }
.sl-hs__cta-ico { transition: transform var(--sl-dur) var(--sl-ease); }
.sl-hs__ctas .btn:hover .sl-hs__cta-ico { transform: translateX(3px); }
[dir="rtl"] .sl-hs__ctas .btn:hover .sl-hs__cta-ico { transform: translateX(-3px); }
[dir="rtl"] .sl-hs__cta-ico { transform: none; }

.sl-hs .btn-primary {
    background: var(--sl-white);
    border-color: var(--sl-white);
    color: var(--sl-navy-900);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .24);
}
.sl-hs .btn-primary:hover,
.sl-hs .btn-primary:focus {
    background: var(--sl-blue-50);
    border-color: var(--sl-blue-50);
    color: var(--sl-navy-900);
}
.sl-hs .btn-outline-primary {
    border: 1.5px solid rgba(255, 255, 255, .46);
    color: var(--sl-white);
    background: rgba(255, 255, 255, .06);
}
.sl-hs .btn-outline-primary:hover,
.sl-hs .btn-outline-primary:focus {
    background: rgba(255, 255, 255, .16);
    border-color: var(--sl-white);
    color: var(--sl-white);
}

/* --- controls ------------------------------------------------------------ */
.sl-hs__nav {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(28px, 4vw, 44px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sl-s-16);
}
.sl-hs__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: var(--sl-white);
    display: grid;
    place-items: center;
    font-size: .85rem;
    backdrop-filter: blur(6px);
    transition: background var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease);
}
.sl-hs__arrow:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.sl-hs__dots { display: flex; align-items: center; gap: var(--sl-s-8); }
.sl-hs__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: var(--sl-r-pill);
    border: 0;
    background: rgba(255, 255, 255, .38);
    transition: width var(--sl-dur) var(--sl-ease), background var(--sl-dur) var(--sl-ease);
}
.sl-hs__dot.is-active { width: 30px; background: var(--sl-white); }
.sl-hs__arrow:focus-visible,
.sl-hs__dot:focus-visible { outline: 3px solid var(--sl-blue-300); outline-offset: 2px; }

@media (max-width: 767.98px) {
    .sl-hs { min-height: 0; }
    .sl-hs__inner { max-width: none; }
    .sl-hs__ctas .btn { min-width: 0; flex: 1 1 100%; }
    .sl-hs__pillars li { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   PROJECT CARDS
   Fixed internal rhythm so a row of cards lines up: the media box is always
   reserved at one ratio, the title always gets two lines, and the meta row
   always exists even when a record has no type. Without this, titles sat at
   three different heights and badges appeared on some cards only.
   ------------------------------------------------------------------------ */
.sl-work-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sl-work-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--sl-bg-alt);
    overflow: hidden;
    flex: 0 0 auto;
}
.sl-work-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--sl-dur) var(--sl-ease);
}
.sl-work-card:hover .sl-work-card__media img { transform: scale(1.03); }

/* A thumbnail in the database points at a file that no longer exists. Rather
   than let the browser paint a broken-image icon and spill alt text over the
   card, the failed load leaves this neutral placeholder behind. */
.sl-work-card__media.is-missing {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--sl-blue-50), var(--sl-bg-alt));
}
.sl-work-card__media.is-missing::after {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px dashed var(--sl-blue-200);
}
.sl-work-card__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--sl-blue-300);
    background: linear-gradient(135deg, var(--sl-blue-50), var(--sl-bg-alt));
}

.sl-work-card__title {
    /* two lines' worth, so one- and two-line titles occupy the same space */
    min-height: calc(2 * 1.35em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: var(--sl-s-24) var(--sl-s-24) 0;
}
.sl-work-card__meta {
    height: 26px;
    display: flex;
    align-items: center;
    padding-inline: var(--sl-s-24);
    margin-top: var(--sl-s-8);
}
.sl-work-card__badge {
    display: inline-flex;
    align-items: center;
    background: var(--sl-blue-50);
    color: var(--sl-blue-700);
    font-size: var(--sl-t-sm);
    font-weight: 600;
    padding: .18rem .6rem;
    border-radius: var(--sl-r-pill);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-work-card__badge--empty { background: transparent; }
.sl-work-card .sl-tile__desc {
    padding-inline: var(--sl-s-24);
    margin-top: var(--sl-s-12);
    font-size: var(--sl-t-sm);
}
.sl-work-card .sl-tile__cta { padding-inline: var(--sl-s-24); padding-bottom: var(--sl-s-24); }

/* ---------------------------------------------------------------------------
   BENTO GRID
   ------------------------------------------------------------------------ */
.sl-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sl-gutter);
    align-items: stretch;
}
/*
   Six tiles in a six-column grid. Mixing span 2 and span 3 needs 7 units for the
   first row, which silently wrapped and left a single orphan card stranded
   beside four columns of empty space. Two rows of three tiles each fills the
   grid exactly at every breakpoint, so no row can ever be ragged.
*/
.sl-bento > * { grid-column: span 2; }
.sl-bento > .sl-bento--wide { grid-column: span 3; }
.sl-bento > .sl-bento--tall { grid-column: span 2; grid-row: span 2; }

@media (max-width: 1199.98px) {
    /* 3 columns -> two tiles per row, still an exact fit. */
    .sl-bento { grid-template-columns: repeat(6, 1fr); }
    .sl-bento > *,
    .sl-bento > .sl-bento--wide { grid-column: span 3; }
}
@media (max-width: 991.98px) {
    .sl-bento > *,
    .sl-bento > .sl-bento--wide,
    .sl-bento > .sl-bento--tall { grid-column: span 3; grid-row: auto; }
}
@media (max-width: 767.98px) {
    .sl-bento { grid-template-columns: 1fr; }
    .sl-bento > *, .sl-bento > .sl-bento--wide, .sl-bento > .sl-bento--tall {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

.sl-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sl-white);
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-r-lg);
    padding: var(--sl-s-32);
    height: 100%;
    overflow: hidden;
    transition: transform var(--sl-dur) cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow var(--sl-dur) cubic-bezier(0.16, 1, 0.3, 1),
                border-color var(--sl-dur) ease;
}
.sl-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sl-blue-500), var(--sl-cyan-500));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 3;
}
.sl-tile:hover::before {
    opacity: 1;
    transform: scaleX(1);
}
.sl-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(67, 97, 238, 0.32);
    box-shadow: 0 20px 40px -12px rgba(0, 6, 61, 0.12);
}

/* Watermark decorative icon in card background */
.sl-tile__watermark {
    position: absolute;
    inset-inline-end: -14px;
    bottom: -18px;
    font-size: 7.5rem;
    line-height: 1;
    color: var(--sl-blue-700);
    opacity: 0.038;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transform-origin: center center;
    /* Identity transform per modern-web-guidance */
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                rotate 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sl-tile:hover .sl-tile__watermark {
    scale: 1.25;
    rotate: -8deg;
    opacity: 0.09;
    translate: -6px -6px;
}
[dir="rtl"] .sl-tile:hover .sl-tile__watermark {
    rotate: 8deg;
    translate: 6px -6px;
}

.sl-tile > *:not(.sl-tile__watermark):not(.sl-work-card__media) {
    position: relative;
    z-index: 1;
}

.sl-tile__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--sl-r-md);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    margin-bottom: var(--sl-s-24);
    background: var(--sl-blue-50);
    color: var(--sl-blue-600);
    border: 1px solid rgba(67, 97, 238, 0.12);
    scale: 1;
    translate: 0 0;
    transition: background var(--sl-dur) var(--sl-ease),
                color var(--sl-dur) var(--sl-ease),
                scale var(--sl-dur) cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow var(--sl-dur) var(--sl-ease),
                border-color var(--sl-dur) var(--sl-ease);
}
.sl-tile:hover .sl-tile__icon {
    background: var(--sl-blue-600);
    color: var(--sl-white);
    scale: 1.08;
    box-shadow: 0 10px 20px -4px rgba(67, 97, 238, 0.38);
    border-color: transparent;
}

/* Blog & Article Cards */
.hover-card {
    position: relative;
    border-radius: 1.25rem !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--sl-line) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease;
}
.hover-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--sl-blue-500), var(--sl-cyan-500));
    opacity: 0; transform: scaleX(0); transform-origin: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 3;
}
.hover-card:hover::before {
    opacity: 1; transform: scaleX(1);
}
.hover-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(0, 6, 61, 0.14) !important;
    border-color: rgba(67, 97, 238, 0.3) !important;
}
.hover-card .card-img-top {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-card:hover .card-img-top {
    transform: scale(1.06);
}
.hover-card__watermark {
    position: absolute;
    inset-inline-end: -15px;
    bottom: -15px;
    font-size: 6.5rem;
    line-height: 1;
    color: var(--sl-blue-700);
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transform-origin: center center;
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                rotate 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-card:hover .hover-card__watermark {
    scale: 1.25;
    rotate: -8deg;
    opacity: 0.09;
}
[dir="rtl"] .hover-card:hover .hover-card__watermark {
    rotate: 8deg;
}
.hover-card .card-body, .hover-card .card-footer {
    position: relative;
    z-index: 1;
}

.sl-tile__title {
    font-size: var(--sl-t-lg);
    font-weight: 700;
    color: var(--sl-ink);
    margin-bottom: var(--sl-s-8);
}
.sl-tile__desc { color: var(--sl-muted); font-size: var(--sl-t-base); margin-bottom: var(--sl-s-24); flex: 1; }

.sl-tile__list { list-style: none; padding: 0; margin: 0 0 var(--sl-s-24); }
.sl-tile__list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: var(--sl-t-sm);
    color: var(--sl-body);
    margin-bottom: .5rem;
}
.sl-tile__list li::before {
    content: "";
    flex: 0 0 auto;
    width: 5px; height: 5px;
    margin-top: .7em;
    border-radius: 50%;
    background: var(--sl-cyan-500);
}

.sl-tile__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    /* blue-400 measured 3.31:1 on white and failed AA at body size. */
    color: var(--sl-blue-700);
    font-size: var(--sl-t-sm);
}
.sl-tile__cta i { transition: transform var(--sl-dur) var(--sl-ease); }
[dir="rtl"] .sl-tile__cta i.fa-arrow-right,
[dir="ltr"] .sl-tile__cta i.fa-arrow-left { transform: scaleX(-1); }
.sl-tile:hover .sl-tile__cta i { transform: translateX(3px); }
[dir="rtl"] .sl-tile:hover .sl-tile__cta i { transform: translateX(-3px); }

/* ---------------------------------------------------------------------------
   SECTION RHYTHM
   ------------------------------------------------------------------------ */
/*
   Vertical rhythm.
   One token drives every full-width band. The page previously mixed
   .sl-section (101px) with legacy Bootstrap .py-5 bands (48px) and a 32px
   expertise strip, so the gaps alternated 101/48/101/32 while scrolling.
   --sl-section-pad is now the only place that value is written.
*/
.sl-section { padding-block: var(--sl-section-pad); }
.sl-band { padding-block: var(--sl-section-pad); }
.sl-band--tint { background: var(--sl-bg); }
/* A band that supplies its own inner container keeps none of its own. */
.sl-band--flush { padding-block: 0; }

.sl-section--tint { background: var(--sl-bg); }
.sl-section--dark { background: var(--sl-graphite-900); color: rgba(255,255,255,.78); }
.sl-section--dark h2, .sl-section--dark h3 { color: var(--sl-white); }

.sl-eyebrow {
    display: inline-block;
    font-size: var(--sl-t-sm);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sl-blue-600);
    margin-bottom: var(--sl-s-12);
}
html[lang="ar"] .sl-eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--sl-t-base); }

.sl-section__title { margin-bottom: var(--sl-s-12); }
.sl-section__lead { color: var(--sl-muted); max-width: 64ch; font-size: var(--sl-t-lg); }

/* ---------------------------------------------------------------------------
   TRUST / PROOF STRIP
   ------------------------------------------------------------------------ */
.sl-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sl-gutter); }
.sl-proof__item { text-align: center; padding: var(--sl-s-24) var(--sl-s-12); }
.sl-proof__n {
    display: block;
    font-size: var(--sl-t-2xl);
    font-weight: 700;
    color: var(--sl-blue-600);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sl-proof__l { font-size: var(--sl-t-sm); color: var(--sl-muted); }

/*
   Client logo marquee.

   Two defects this replaces:

   1. The chip was `display:grid; place-items:center` with `min-width` only, so
      a chip's width came from its logo's intrinsic size. Measured on the live
      page: chips ranged 132px to 1710px wide — the logos looked wildly
      mismatched and the track stretched to 20,034px.
   2. The image used `max-height:100%`. On a grid item with `align-self:center`
      the containing block has no definite height, so the percentage resolved to
      `none` and logos rendered at their natural size — measured 771x514 inside
      a 74px-tall chip, clipped.

   Both are fixed by giving the chip a fixed box and the image a fixed px
   ceiling, which always resolves. Logos keep their own aspect ratio via
   object-fit:contain and are never stretched or cropped.

   Brand colours are preserved: a uniform grayscale filter made several logos
   unrecognisable. They are shown at full colour and dim only slightly.
*/
.client-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 168px;
    height: 68px;
    padding: 0 14px;
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-r-sm);
    background: var(--sl-white);
    box-shadow: var(--sl-shadow-xs);
    overflow: hidden;
    transition: border-color var(--sl-dur) var(--sl-ease),
                box-shadow var(--sl-dur) var(--sl-ease),
                transform var(--sl-dur) var(--sl-ease);
}
.client-chip:hover {
    border-color: var(--sl-blue-200);
    box-shadow: var(--sl-shadow-sm);
    transform: translateY(-2px);
}
.client-chip img {
    display: block;
    width: auto;
    height: auto;
    /* px ceiling, not a percentage: this always resolves regardless of how the
       parent sizes itself, so no logo can escape its chip. */
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
    /* Explicitly cancels the grayscale in style.css. Brand colours are
       preserved: a uniform filter made several logos unrecognisable, and the
       requirement is to keep the original artwork colours. */
    filter: none;
    opacity: .85;
    transition: opacity var(--sl-dur) var(--sl-ease);
}
.client-chip:hover img { opacity: 1; }

/* The animation clone. display:contents makes the ghost's chips real flex items
   of the track so the loop geometry stays exact; aria-hidden on the ghost keeps
   screen readers from announcing every client twice. */
.clients-marquee-ghost {
    display: contents;
    pointer-events: none;
    user-select: none;
}

/* Reduced motion must mean *stopped*, not "slower" — the previous rule kept the
   animation running at 180s, which is still continuous movement. The track is
   laid out as a static, scrollable row instead so every logo stays reachable. */
@media (prefers-reduced-motion: reduce) {
    .clients-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .clients-marquee-track {
        animation: none !important;
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Marquee geometry + motion
   The track holds the real logos followed by one presentation-only clone, so
   translating exactly half the track width lands on a true repeat boundary.
   --sl-marquee-dur is set from script as a function of track width so the speed
   stays constant regardless of how many logos there are; the CSS default covers
   the case where script never runs.
   ------------------------------------------------------------------------ */
.clients-marquee-track {
    animation-duration: var(--sl-marquee-dur, 120s);
}
/*
   Constant perceived speed. The track is 20,000px+ wide because each client
   gets its own fixed chip; a fixed 48s duration therefore made the logos race
   past. Script sets --sl-marquee-dur from the measured track width at roughly
   30px per second, which reads as a calm drift at any logo count.
*/
@media (prefers-reduced-motion: no-preference) {
    .clients-marquee-track { animation-duration: var(--sl-marquee-dur, 120s); }
}
.clients-marquee:hover .clients-marquee-track,
.clients-marquee:focus-within .clients-marquee-track {
    animation-play-state: paused;
}
/* Set by partials/client-marquee-pace.blade.php when the section scrolls out
   of view, so the loop does not keep compositing for the rest of the session. */
.clients-marquee-track { animation-play-state: var(--sl-marquee-play, running); }
/* The decorative gradient behind the section was still the old off-brand
   purple (#222c95 / #7209b7) that this system removed everywhere else. */
.clients-section::before {
    background:
        radial-gradient(640px 220px at 12% 0%, rgba(14, 82, 214, .05), transparent 65%),
        radial-gradient(640px 220px at 88% 100%, rgba(6, 182, 212, .05), transparent 65%);
}
.clients-title { color: var(--sl-ink); }
.clients-subtitle { color: var(--sl-muted); }

/* ---------------------------------------------------------------------------
   SERVICE CARD TITLE SIZE
   The seven legacy service templates (branding, erp, ecommerce, marketing,
   mobile, website, software) marked their card titles up as <h5>, which left
   the outline jumping a level under every section. They are <h3> now, but
   Bootstrap's .card-title sets margins only, so without this rule promoting
   the tag would enlarge every card title on the site. The size below is what
   the h5 rendered at.
   ------------------------------------------------------------------------ */
.card-items .card .card-body .card-title {
    font-size: 1.25rem;
}

/* ---------------------------------------------------------------------------
   NOTICE
   A short, honest advisory block. Used where a page must state that
   something is pending rather than imply it is finished - for example the
   privacy and terms pages, which carry a working summary plus a clear note
   that the binding wording is still being approved.
   ------------------------------------------------------------------------ */
.sl-notice {
    display: flex;
    gap: var(--sl-s-12);
    align-items: flex-start;
    background: var(--sl-blue-50);
    border: 1px solid var(--sl-blue-200);
    border-radius: var(--sl-r-md);
    padding: var(--sl-s-16) var(--sl-s-20);
}
.sl-notice i { color: var(--sl-blue-600); font-size: 1.05rem; margin-top: .2rem; flex: 0 0 auto; }
.sl-notice strong { color: var(--sl-ink); display: block; margin-bottom: 4px; }
.sl-notice p { color: var(--sl-body); margin: 0; font-size: var(--sl-t-sm); }

/* ---------------------------------------------------------------------------
   TIMELINE
   ------------------------------------------------------------------------ */
/*
   The timeline was a full-width grid, so on desktop the six steps collapsed
   into a narrow column on the right (RTL) with roughly half the section left
   empty. Capping the measure keeps the rail beside its text and fills the
   section properly.
*/
.sl-timeline {
    display: grid;
    gap: var(--sl-s-32);
    position: relative;
    max-width: 760px;
    margin-inline: auto;
}
.sl-timeline__body h3 { max-width: 52ch; }
.sl-timeline__body p { max-width: 60ch; }
.sl-timeline::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 19px;
    width: 2px;
    background: linear-gradient(var(--sl-blue-300), var(--sl-cyan-300), transparent);
}
.sl-timeline__item { display: flex; gap: var(--sl-s-24); position: relative; }
.sl-timeline__n {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--sl-white);
    border: 2px solid var(--sl-blue-300);
    color: var(--sl-blue-600);
    font-weight: 700;
    font-size: var(--sl-t-sm);
    z-index: 1;
}
.sl-timeline__body h3 { font-size: var(--sl-t-md); font-weight: 700; margin-bottom: .35rem; }
.sl-timeline__body p { color: var(--sl-muted); font-size: var(--sl-t-sm); margin: 0; }

/* ---------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------ */
.sl-faq { max-width: 780px; margin-inline: auto; }
.sl-faq details {
    background: var(--sl-white);
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-r-md);
    padding: var(--sl-s-16) var(--sl-s-24);
    margin-bottom: var(--sl-s-12);
}
.sl-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--sl-ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sl-s-16);
}
.sl-faq summary::-webkit-details-marker { display: none; }
.sl-faq summary::after { content: "+"; color: var(--sl-blue-600); font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.sl-faq details[open] summary::after { content: "\2212"; }
.sl-faq p { color: var(--sl-muted); margin: var(--sl-s-12) 0 0; font-size: var(--sl-t-base); }

/* ---------------------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------------------ */
.sl-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sl-skip-link {
    position: absolute;
    inset-inline-start: 12px;
    top: -60px;
    z-index: 2000;
    background: var(--sl-blue-600);
    color: var(--sl-white);
    padding: 10px 18px;
    border-radius: 0 0 var(--sl-r-sm) var(--sl-r-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--sl-dur) var(--sl-ease);
}
.sl-skip-link:focus { top: 0; color: var(--sl-white); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .sl-tile:hover, .card:hover, .btn:hover, .project-card:hover, .featured-card:hover, .industry-card:hover, .solution-card:hover { transform: none !important; }
    .sl-tile:hover .sl-tile__watermark, .solution-card:hover .solution-card__watermark, .industry-card:hover .industry-card__watermark, .hover-card:hover .hover-card__watermark, .case-card:hover .case-card__watermark, .project-card:hover .project-card__watermark { scale: 1 !important; rotate: 0deg !important; }
}