@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap');

/* XpertLab Smart Strategies — frontend */
.xlss-section {
    --xlss-accent: #B51B5A;
    --xlss-heading: #191919;
    --xlss-card-title: #191919;
    --xlss-card-text: #6b7280;
    --xlss-bg: #ffffff;
    --xlss-section-bg: #ffffff;
    --xlss-border: #eef0f4;
    --xlss-radius: 35px;
    background: var(--xlss-section-bg);
    padding: 56px 20px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--xlss-heading);
}

.xlss-section.xlss-has-shadow .xlss-inner {
    box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.161);
}

.xlss-inner {
    max-width: 1600px;
    margin: 0 auto;
    background: var(--xlss-bg);
    border-radius: var(--xlss-radius);
    padding: 40px 36px;
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 32px;
    align-items: center;
    box-sizing: border-box;
}

.xlss-head { display: flex; flex-direction: column; gap: 10px; }

.xlss-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    background: rgba(181, 27, 90, 0.08);
    color: var(--xlss-accent);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.xlss-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    color: var(--xlss-heading);
    letter-spacing: 0;
}
.xlss-title-line { display: block; }
.xlss-title-accent {
    display: block;
    color: var(--xlss-accent);
}

.xlss-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.xlss-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 8px 6px;
    position: relative;
}

/* Vertical divider between cards — Figma: 1px #DDDDDD, 138px tall, centred
   between the two columns. Centring uses `inset + margin:auto` instead of
   translateY(-50%) so the reveal animation (and the reduced-motion
   `transform:none` reset) can own the transform property without knocking the
   line out of place. The min() keeps the line inside shorter cards. */
.xlss-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -14px;
    top: 0;
    bottom: 0;
    margin-block: auto;
    width: 1px;
    height: min(138px, calc(100% - 28px));
    background-color: #DDDDDD;
}

.xlss-icon {
    --xlss-icon-color: #5b8def;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--xlss-icon-color);
    margin-bottom: 6px;
}
.xlss-icon svg { width: 22px; height: 22px; }
.xlss-icon--custom { width: 60px; height: 60px; }
.xlss-custom-img { width: 60px; height: 60px; object-fit: contain; }

/* Every card title renders on two lines, so all four cards read as one row.
   Two things make that happen:
   - `max-width: 15ch` is narrower than any of the titles, so even a 2-word
     title ("Smarter Operations") wraps instead of sitting on one line, while
     still being wide enough for the longest single word ("Growth-Focused") to
     stay unbroken. `balance` then splits the two lines evenly.
   - `min-height: 2.6em` reserves both lines, so nothing shifts if a shorter
     title ever does fit on one line — every description starts on the same
     baseline either way. */
.xlss-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--xlss-card-title);
    line-height: 1.3;
    min-height: 2.6em; /* 2 lines × 1.3 */
    max-width: 15ch;
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: balance;
}

.xlss-card-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--xlss-card-text);
    max-width: 26ch;
    /* Avoid a single trailing word on the last line — the descriptions differ
       in length, so tidy wrapping is what keeps the row looking even. */
    text-wrap: pretty;
}

/* Row-perfect alignment: each card becomes a subgrid of the section grid, so
   icons share one row, titles share one row (sized to the tallest title) and
   descriptions all start on the same line — whatever the copy length. The flex
   rules above stay as the fallback for browsers without subgrid, where the
   2-line title reservation already does most of the job. */
@supports (grid-template-rows: subgrid) {
    .xlss-grid { grid-template-rows: auto auto auto; }

    .xlss-card {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 12px;
        justify-items: center;
        align-items: start;
    }
    /* Keep the 2-line reservation from above — the shared row equalises the
       height, but the reservation is what guarantees it is two lines tall. */
    .xlss-card-title { align-self: stretch; }
}

/* Lower desktop / small laptop */
@media (max-width: 1240px) {
    .xlss-inner {
        /* Stack the heading on top so the 2-col card grid gets full width
           (side-by-side head + grid was too cramped in this band) */
        grid-template-columns: 1fr;
        padding: 40px 28px;
        gap: 28px;
    }

    /* Stacked layout: the heading is a banner above the cards, so it centres
       and the first two heading parts ("Smart" + the accent "Strategies.")
       share one line instead of stacking. They become inline-block (not plain
       inline) so the reveal animation's transform/clip-path still applies, and
       `nowrap` on the title keeps the pair from breaking apart; the trailing
       line is forced back to its own block and wraps normally. */
    .xlss-head { align-items: center; text-align: center; }
    .xlss-eyebrow { align-self: center; }
    .xlss-title { text-align: center; white-space: nowrap; }
    .xlss-title-line,
    .xlss-title-accent { display: inline-block; }
    .xlss-title-accent + .xlss-title-line {
        display: block;
        white-space: normal;
    }

    .xlss-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .xlss-card { padding: 10px 10px; }
    .xlss-card:not(:last-child)::after {
        right: -12px;
        height: min(120px, calc(100% - 24px));
    }
    .xlss-card:nth-child(2n)::after { display: none; }
}

/* Tablet */
@media (max-width: 1024px) {
    .xlss-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 24px;
    }
    .xlss-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .xlss-title { text-align: center; }
    .xlss-card:not(:last-child)::after { right: -12px; height: min(110px, calc(100% - 24px)); }
    .xlss-card:nth-child(2n)::after { display: none; }
}

/* Mobile */
@media (max-width: 560px) {
    .xlss-section { padding: 40px 14px; }
    .xlss-inner { padding: 24px 18px; }
    /* Scale with the viewport so the nowrap "Smart Strategies." line still
       fits on the narrowest phones instead of overflowing. */
    .xlss-title { font-size: clamp(24px, 7vw, 40px); }
    .xlss-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .xlss-card { padding: 8px 0; }
    .xlss-card-desc { max-width: 100%; }
    .xlss-card::after { display: none; }
}

/* ============================================================
   Scroll reveal — premium, slow, staggered
   Active only when JS adds `.xlss-reveal` (no-JS / reduced-motion
   keeps everything visible). Elements ease from hidden → in-view.
   ============================================================ */

/* Premium easing (expo-out) + slow timing tokens */
.xlss-reveal {
    --xlss-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --xlss-dur: 1.4s;
    perspective: 1600px;
}

.xlss-reveal .xlss-eyebrow,
.xlss-reveal .xlss-title-line,
.xlss-reveal .xlss-title-accent,
.xlss-reveal .xlss-card,
.xlss-reveal .xlss-card > * {
    will-change: transform, opacity, filter, clip-path;
}

/* --- Container lift: the whole panel floats up subtly --- */
.xlss-reveal .xlss-inner {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1.6s var(--xlss-ease),
        transform 1.6s var(--xlss-ease);
}
.xlss-reveal.is-inview .xlss-inner {
    opacity: 1;
    transform: none;
}

/* --- Eyebrow: soft focus-in --- */
.xlss-reveal .xlss-eyebrow {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    filter: blur(6px);
    transition:
        opacity var(--xlss-dur) var(--xlss-ease) 0.25s,
        transform var(--xlss-dur) var(--xlss-ease) 0.25s,
        filter var(--xlss-dur) var(--xlss-ease) 0.25s;
}
.xlss-reveal.is-inview .xlss-eyebrow {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* --- Title: masked wipe-up, line by line --- */
.xlss-reveal .xlss-title-line,
.xlss-reveal .xlss-title-accent {
    opacity: 0;
    transform: translateY(0.6em);
    clip-path: inset(0 0 105% 0);
    transition:
        opacity var(--xlss-dur) var(--xlss-ease),
        transform var(--xlss-dur) var(--xlss-ease),
        clip-path var(--xlss-dur) var(--xlss-ease);
}
.xlss-reveal.is-inview .xlss-title-line,
.xlss-reveal.is-inview .xlss-title-accent {
    opacity: 1;
    transform: none;
    /* negative insets so ascenders/descenders never clip */
    clip-path: inset(-15% 0 -15% 0);
}
/* Stagger the three heading lines */
.xlss-reveal .xlss-title > :nth-child(1) { transition-delay: 0.40s; }
.xlss-reveal .xlss-title > :nth-child(2) { transition-delay: 0.52s; }
.xlss-reveal .xlss-title > :nth-child(3) { transition-delay: 0.64s; }

/* --- Cards: depth rise, blur-to-focus, staggered --- */
.xlss-reveal .xlss-card {
    opacity: 0;
    transform: translateY(56px) scale(0.92) rotateX(8deg);
    transform-origin: 50% 100%;
    filter: blur(12px);
    transition:
        opacity var(--xlss-dur) var(--xlss-ease),
        transform var(--xlss-dur) var(--xlss-ease),
        filter var(--xlss-dur) var(--xlss-ease);
    /* base delay after the heading, plus per-card stagger */
    transition-delay: calc(0.55s + (var(--xlss-i, 0) * 0.14s));
}
.xlss-reveal.is-inview .xlss-card {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* --- Icon box: its own pop-in with a soft overshoot --- */
.xlss-reveal .xlss-icon {
    opacity: 0;
    transform: scale(0.35) rotate(-20deg);
    transition:
        opacity 0.9s var(--xlss-ease),
        transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* lands just after its parent card settles */
    transition-delay: calc(0.85s + (var(--xlss-i, 0) * 0.14s));
}
.xlss-reveal.is-inview .xlss-icon {
    opacity: 1;
    transform: none;
}

/* Dividers grow in vertically once the cards land. Pure scaleY — the line is
   centred by `margin-block:auto`, so the transform carries no offset and the
   reduced-motion `transform:none` reset below leaves it correctly placed. */
.xlss-reveal .xlss-card:not(:last-child)::after {
    transform: scaleY(0);
    transform-origin: 50% 50%;
    transition: transform 1s var(--xlss-ease);
    transition-delay: calc(0.9s + (var(--xlss-i, 0) * 0.14s));
}
.xlss-reveal.is-inview .xlss-card:not(:last-child)::after {
    transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
    .xlss-reveal .xlss-inner,
    .xlss-reveal .xlss-eyebrow,
    .xlss-reveal .xlss-title-line,
    .xlss-reveal .xlss-title-accent,
    .xlss-reveal .xlss-card,
    .xlss-reveal .xlss-icon,
    .xlss-reveal .xlss-card:not(:last-child)::after {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }
}