/* ── Hero Section (Home) ─────────────────────────────────────────── */
.hero {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-3xl);
    text-align: center;
    overflow: hidden;
}

.hero-badge {
    display: inline-flex;
    margin-bottom: var(--space-xl);
    animation: fadeInUp 0.6s ease both;
}

.hero-title {
    margin-bottom: var(--space-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.6s ease 0.2s both;
    font-size: 72px;
    font-weight: var(--text-title-weight);
    letter-spacing: var(--text-title-spacing);
    color: var(--text-title-color);
    line-height: 1.25;
}

.hero-subtitle {
    font-size: 18px;
    color: var(--text-desc-color);
    margin-bottom: var(--space-2xl);
    max-width: 600px;
    /* margin-left: auto; */
    margin-right: auto;
    animation: fadeInUp 0.6s ease 0.3s both;
    font-weight: var(--text-desc-weight);
    letter-spacing: var(--text-desc-spacing);
    line-height: var(--text-desc-line-height);
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    animation: fadeInUp 0.6s ease 0.4s both;
}

.hero-visual {
    max-width: 900px;
    margin: var(--space-3xl) auto 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
    animation: fadeInUp 0.8s ease 0.5s both;
}

.hero-visual img {
    width: 100%;
    height: auto;
}

.hero-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-xl);
    align-items: center;
    text-align: left;
    position: relative;
}

.hero-content-left {
    position: relative;
    z-index: 2;
}

.hero-visual-right {
    position: relative;
    animation: fadeInUp 0.8s ease 0.4s both;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.hero-visual-right img {
    width: 140%;
    max-width: none;
    margin-left: -40%;
    margin-right: 0;
    margin-top: -80px;
    object-fit: cover;
    object-position: center 10%;
    border-radius: var(--radius-2xl);
    z-index: 1;
    position: relative;
}

.avatars img:first-child {
    margin-left: 0 !important;
}

/* ── Responsive Overrides for Hero Section ──────────────── */
@media (max-width: 991px) {
    .hero {
        padding-top: 120px !important;
    }

    .hero-split {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hero-badge {
        display: flex;
        justify-content: center;
    }

    .hero-content-left {
        margin-top: 0 !important;
        position: relative;
        z-index: 2;
        margin-bottom: 10px !important;
    }

    .hero-title {
        font-size: clamp(48px, 12vw, 72px) !important;
        text-align: center !important;
        line-height: 1.1 !important;
        letter-spacing: var(--text-title-spacing) !important;
        font-weight: var(--text-title-weight) !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 24px !important;
        max-width: 90% !important;
        font-weight: var(--text-desc-weight) !important;
        letter-spacing: var(--text-desc-spacing) !important;
    }

    .hero-actions {
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }

    #hero-cta-primary {
        padding: 6px 16px 6px 6px !important;
        font-size: 14px !important;
        border-radius: 16px !important;
    }

    #hero-cta-primary span {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        margin-right: 10px !important;
    }

    #hero-cta-primary svg {
        width: 14px !important;
        height: 14px !important;
    }

    .hero-trusted .avatars img {
        width: 28px !important;
        height: 28px !important;
    }

    .hero-trusted span {
        font-size: 11px !important;
    }

    .hero-visual-right {
        justify-content: center;
        width: 100%;
        margin-top: -100px;
        position: relative;
        z-index: 1;
    }

    .hero-visual-right img {
        width: 100%;
        max-width: 600px;
        margin-left: 0;
        margin-top: 0;
    }
}

/* ── Interactive Showcase Section ───────────────────────────── */
@keyframes float-up-down {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 991px) {
    .interactive-showcase {
        padding: 80px 0 !important;
    }

    .showcase-header h2 {
        font-size: 40px !important;
    }

    .showcase-interactive-wrapper {
        flex-direction: column;
        min-height: auto !important;
    }

    .showcase-main-img {
        margin-bottom: 40px;
    }

    .showcase-floating-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 20px auto;
        width: 90% !important;
        display: flex;
        justify-content: center;
        animation: none !important;
    }

    .showcase-floating-card img {
        max-width: 100% !important;
    }
}

/* ── Interactive Dashboard Section ─────────────────────────────── */
.interactive-dashboard {
    overflow-x: clip;
    overflow-y: visible;
}

/* =========================================================
   Dashboard Floating Card Entrance Animation
   ---------------------------------------------------------
   IMPORTANT:
   - Do not modify card dimensions.
   - Do not modify existing positioning.
   - Do not modify existing percentage-based layout.
   - Animation uses transform only.
   ========================================================= */

#card-liquidity,
#card-reduction,
#card-income {
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}


#card-liquidity {
    --card-start-x: -12vw;
    --card-start-y: -35vw;
    --hero-offset-x: 20px;
    --hero-offset-y: 0px;
    --hero-rotation: -17deg;
}

#card-reduction {
    --card-start-x: 3vw;
    --card-start-y: -40vw;
    --hero-offset-x: -20px;
    --hero-offset-y: 0px;
    --hero-rotation: 20deg;
}

#card-income {
    --card-start-x: 10vw;
    --card-start-y: 0vw;
    --hero-offset-x: 0px;
    --hero-offset-y: 0px;
    --hero-rotation: 0deg;
}


#card-liquidity.is-settled,
#card-reduction.is-settled,
#card-income.is-settled {
    transform: translate3d(0, 0, 0);
}


@media (max-width: 991px) {

    #card-liquidity,
    #card-reduction,
    #card-income {
        will-change: auto;
        transform: none;
    }
}

.dashboard-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
    transform-origin: top center;
    transform-style: preserve-3d;
    border-radius: 24px;
}

.dashboard-main-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

@media (max-width: 991px) {

    .dashboard-wrapper,
    .dashboard-main-img {
        border-radius: 12px;
    }

    .db-card--1,
    .db-card--2,
    .db-card--3 {
        border-radius: 14px !important;
    }

    #card-liquidity {
        --card-start-x: -40vw;
        --card-start-y: -47vw;
        --hero-offset-x: 20px;
        --hero-offset-y: 0px;
        --hero-rotation: -17deg;
    }

    #card-reduction {
        --card-start-x: -15vw;
        --card-start-y: -52vw;
        --hero-offset-x: -20px;
        --hero-offset-y: 0px;
        --hero-rotation: 20deg;
    }
}

@media (max-width: 767px) {

    .dashboard-wrapper,
    .dashboard-main-img {
        border-radius: 5px;
    }

    .db-card--1,
    .db-card--2,
    .db-card--3 {
        border-radius: 4px !important;
    }

    #card-liquidity {
        --card-start-x: -40vw;
        --card-start-y: -55vw;
        --hero-offset-x: 20px;
        --hero-offset-y: 0px;
        --hero-rotation: -17deg;
    }

    #card-reduction {
        --card-start-x: -10vw;
        --card-start-y: -62vw;
        --hero-offset-x: -20px;
        --hero-offset-y: 0px;
        --hero-rotation: 20deg;
    }
}

/* ── DB Card base ─────────────────────────────────────────────── */
.db-card {
    position: absolute;
    z-index: 10;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;
}

/* Coordinates from pixel-accurate measurement of 1350×856px source image */
.db-card--1 {
    top: 24.8%;
    left: 61.6%;
    width: 16.9%;
    height: 29.7%;
    padding: 2% 2%;
}

.db-card--2 {
    top: 24.8%;
    left: 79.2%;
    width: 16.9%;
    height: 29.7%;
    padding: 2% 2%;
}

.db-card--3 {
    top: 55.8%;
    left: 61.6%;
    width: 34.8%;
    height: 35.4%;
    padding: 2% 2%;
}

/* ── Card header ──────────────────────────────────────────────── */
.db-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
}

.db-card__title {
    font-size: clamp(4px, 1.2vw, 15px);
    font-weight: 600;
    color: #111;
    line-height: 1.25;
}

.db-card__title--lg {
    font-size: clamp(5px, 1.35vw, 17px);
    font-weight: 700;
}

.db-card__sub {
    font-size: clamp(3px, 0.68vw, 9px);
    color: #9ca3af;
    margin-top: 2px;
}

/* ── Badges ───────────────────────────────────────────────────── */
.db-badge {
    font-size: clamp(3px, 0.7vw, 9px);
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

.db-badge--green {
    background: #f0f4e8;
    color: #5a7a2a;
}

.db-badge--dark {
    background: #111;
    color: #fff;
}

/* ── Avatars (Card 1) ─────────────────────────────────────────── */
.db-avatars {
    display: flex;
    align-items: center;
}

.db-avatar {
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-avatar svg {
    width: 55%;
    height: 55%;
    display: block;
}

.db-avatar--sm {
    width: clamp(8px, 2.3vw, 28px);
    height: clamp(8px, 2.3vw, 28px);
    margin-right: -5px;
}

.db-avatar--md {
    width: clamp(10px, 2.9vw, 34px);
    height: clamp(10px, 2.9vw, 34px);
    margin-right: -5px;
    z-index: 1;
}

.db-avatar--gray {
    background: #e5e7eb;
}

.db-avatar--orange {
    background: #fde8e0;
}

/* ── Metric row (shared) ──────────────────────────────────────── */
.db-metric {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.db-metric__value {
    font-size: clamp(7px, 2.4vw, 32px);
    font-weight: 700;
    color: #111;
    line-height: 1;
}

.db-metric__unit {
    font-size: 0.58em;
    color: #9ca3af;
    font-weight: 400;
}

.db-arrow {
    width: clamp(4px, 0.9vw, 12px);
    height: auto;
    flex-shrink: 0;
}

/* ── Calendar (Card 2) ────────────────────────────────────────── */
.db-calendar {
    display: flex;
    gap: 3%;
    align-items: stretch;
}

.db-cal-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-radius: 6px;
    padding: 4% 2%;
    font-size: clamp(3px, 0.88vw, 12px);
}

.db-cal-day--active {
    background: #eef0f8;
}

.db-cal-day__num {
    font-weight: 700;
    color: #111;
    font-size: 1.15em;
    line-height: 1;
}

.db-cal-day__name {
    color: #9ca3af;
    line-height: 1;
}

.db-cal-day:not(.db-cal-day--active) .db-cal-day__num,
.db-cal-day:not(.db-cal-day--active) .db-cal-day__name {
    color: #d1d5db;
}

/* ── Segmented bar (Card 3) ───────────────────────────────────── */
.db-seg-bar {
    display: flex;
    gap: 2px;
    border-radius: 6px;
    overflow: hidden;
    height: clamp(2px, 0.85vw, 10px);
    background: #f3f4f6;
}

.db-seg-bar>div {
    border-radius: 4px;
}

/* ── Stage list (Card 3) ──────────────────────────────────────── */
.db-stage-list {
    display: flex;
    flex-direction: column;
    gap: 2%;
    flex: 1;
    justify-content: space-evenly;
}

.db-stage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(3px, 0.88vw, 11px);
}

.db-stage-row__label {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.db-stage-dot {
    width: clamp(3px, 0.72vw, 9px);
    height: clamp(3px, 0.72vw, 9px);
    border-radius: 50%;
    flex-shrink: 0;
}

.db-stage-name {
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-stage-pct {
    color: #9ca3af;
    margin: 0 4px;
    flex-shrink: 0;
}

.db-stage-count {
    font-weight: 600;
    color: #111;
    flex-shrink: 0;
}

/* ============================================================
   STENZO STORY SECTION
   All rules scoped under .stenzo-story-section or .smock
   to avoid any collision with existing homepage styles.
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────────── */
.stenzo-story-section {
    background-color: #ffffff;
    padding-bottom: 0;
    transition: background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .stenzo-story-section {
    background-color: #35363b;
}

/* ── A: Logo Showcase (Stenzo-style) ─────────────────────────── */
.stenzo-logo-showcase {
    padding: 0px 0 56px;
    background: #ffffff;
}

.stenzo-logo-showcase .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.stenzo-logo-showcase__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.stenzo-logo-showcase__meta-label {
    font-size: 16px;
    font-weight: var(--text-title-weight);
    letter-spacing: var(--text-title-spacing);
    color: #6b7280;
}

.stenzo-logo-showcase__meta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: var(--text-title-weight);
    letter-spacing: var(--text-title-spacing);
    color: #111827;
    text-decoration: none;
}

.stenzo-logo-showcase__meta-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgb(219, 74, 43);
    /* orange */
    color: #ffffff;
    /* white */
}

.stenzo-logo-showcase__container {
    background: #eff3f7;
    /* slightly darker, blue-ish grey */
    border-radius: 24px;
    padding: 64px;
    border: none;
}

.stenzo-logo-showcase__logos {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.stenzo-logo-showcase__track {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 60px;
    width: max-content;
}

.stenzo-logo-showcase__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stenzo-logo-showcase__logo img {
    max-width: 130px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(40%);
    transition: filter 0.35s ease, transform 0.35s ease;
    cursor: pointer;
}

/* Highlight classes added by JS */
.stenzo-logo-showcase__logo.is-highlighted img {
    filter: grayscale(0%) opacity(100%);
}

@media (max-width: 768px) {
    .stenzo-logo-showcase__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .stenzo-logo-showcase__container {
        padding: 40px 0;
        /* removed side padding so marquee goes edge to edge */
        border-radius: 20px;
        overflow: hidden;
    }

    .stenzo-logo-showcase__logos {
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    .stenzo-logo-showcase__track {
        gap: 60px;
    }
}

/* ── B: Editorial ───────────────────────────────────────────── */
.stenzo-story__editorial {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    padding: 0 24px;
    pointer-events: none;
}

.stenzo-story__editorial-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stenzo-story__editorial-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto;
}

.stenzo-story__editorial-quote {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: var(--text-title-weight);
    color: #111827;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 24px;
    text-wrap: balance;
}

.stenzo-story__editorial-body {
    font-size: clamp(16px, 1.5vw, 18px);
    color: #4b5563;
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
}

.stenzo-story__editorial-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    margin: 40px 0 20px;
}

.stenzo-story__editorial-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    width: 100%;
}

.intro-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.intro-feature__icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background-color: rgb(219, 74, 43);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.intro-feature__icon svg {
    width: 28px;
    height: 28px;
}

.intro-feature__content h3 {
    font-size: 21px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px;
    line-height: 1.3;
}

.intro-feature__content p {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* Scroll Animations */
.stenzo-story__editorial .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--anim-delay, 0ms);
}

.stenzo-story__editorial .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.stenzo-story__editorial-quote.animate-on-scroll {
    transform: translateY(30px);
}

.stenzo-story__editorial-quote.visible {
    transform: translateY(0);
}

.stenzo-story__editorial-body.animate-on-scroll {
    transition-delay: 100ms;
}

.stenzo-story__editorial-divider.animate-on-scroll {
    transform: translateY(0);
    /* Divider only fades */
    transition-delay: 200ms;
}

/* Mobile adjustments */
@media (max-width: 992px) {
    .stenzo-story__editorial-features {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .stenzo-story__editorial-features {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .intro-feature {
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
    }

    .intro-feature__icon {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .intro-feature__icon svg {
        width: 22px;
        height: 22px;
    }

    .stenzo-story__editorial-divider {
        margin: 48px 0;
    }
}

/* ── C: Scrolling Card Track ────────────────────────────────── */
.stenzo-story__track {
    position: relative;
    /* Total height = sticky shell + scroll spacer */
}

/* The sticky shell: contains the visible card composition */
.stenzo-story__sticky-shell {
    position: sticky;
    top: 62px;
    /* exactly navbar height */
    height: calc(100vh - 62px);
    max-height: 820px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Cards stage: all 4 cards stacked, JS toggles active */
.stenzo-story__cards-stage {
    width: 100%;
    max-width: 1280px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 5;
}


/* Scroll spacer: provides scroll distance for 4 cards */
.stenzo-story__scroll-spacer {
    display: flex;
    flex-direction: column;
}

.stenzo-story__trigger {
    height: 130vh;
}

/* ── Feature Card ───────────────────────────────────────────── */
.stenzo-story__card {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    will-change: transform, opacity;
}

.stenzo-story__card.is-future {
    transform: translateY(100vh);
    opacity: 1;
    z-index: 2;
}

.stenzo-story__card.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
    transform: translateY(0);
}

.stenzo-story__card.is-past {
    opacity: 0;
    z-index: 1;
    transform: translateY(0) scale(0.95);
}

/* Card inner split layout */
.stenzo-story__card-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 24px;
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); */
    box-sizing: border-box;
    min-height: 520px;
    overflow: hidden;
}

.stenzo-story__card-content.layout-text-left,
.stenzo-story__card-content.layout-text-right {
    padding: 15px;
}

/* Copy side */
.stenzo-story__card-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    background: #ffffff;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    z-index: 1;
}

.stenzo-story__card.animate-initial:not(.is-centered) .stenzo-story__card-copy {
    opacity: 0;
    transform: translateY(20px);
}

.stenzo-story__card.animate-initial .stenzo-story__card-copy {
    transition: opacity 600ms cubic-bezier(0.25, 1, 0.5, 1), transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.stenzo-story__card.animate-initial.is-centered .stenzo-story__card-copy {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 100ms;
}

.stenzo-story__card-num {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stenzo-story__card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stenzo-story__card-heading {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: var(--text-title-weight);
    color: var(--text-title-color);
    letter-spacing: var(--text-title-spacing);
    line-height: 1.15;
    margin: 0;
    margin-bottom: 10%;
}

.stenzo-story__card-desc {
    font-size: clamp(16px, 1.3vw, 18px);
    color: var(--text-desc-color);
    font-weight: var(--text-desc-weight);
    letter-spacing: var(--text-desc-spacing);
    line-height: var(--text-desc-line-height);
    margin: 0;
    max-width: 400px;
}

.stenzo-story__card-footer {
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid #e5e9f0;
    line-height: 1.5;
}

/* Visual side */
.stenzo-story__card-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

/* ============================================================
   VISUAL SCENE (Replaces simple visual)
   ============================================================ */
.story-visual-scene {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.story-visual-layer {
    position: absolute;
    will-change: transform, opacity, filter;
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-visual-layer--main {
    z-index: 3;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.story-visual-layer--back-1 {
    z-index: 2;
    opacity: 0.55;
    filter: blur(3px);
}

.story-visual-layer--back-2 {
    z-index: 1;
    opacity: 0.40;
    filter: blur(5px);
}

/* Entering / Inactive State ONLY for animate-initial */
.stenzo-story__card.animate-initial:not(.is-centered) .story-visual-layer--main {
    transform: translateY(30px) scale(0.96);
    opacity: 0;
}

.stenzo-story__card.animate-initial:not(.is-centered) .story-visual-layer--back-1 {
    transform: translateY(40px) scale(0.92);
    opacity: 0;
    filter: blur(5px);
}

.stenzo-story__card.animate-initial:not(.is-centered) .story-visual-layer--back-2 {
    transform: translateY(50px) scale(0.88);
    opacity: 0;
    filter: blur(8px);
}

/* Active State delays for animate-initial */
.stenzo-story__card.animate-initial.is-centered .story-visual-layer--main {
    transition-delay: 50ms;
}

.stenzo-story__card.animate-initial.is-centered .story-visual-layer--back-1 {
    transition-delay: 100ms;
}

.stenzo-story__card.animate-initial.is-centered .story-visual-layer--back-2 {
    transition-delay: 150ms;
}

/* Card-specific background positions */
/* Card 1 */
.stenzo-story__card[data-card="1"] .story-visual-layer--back-1 {
    transform: translate(-30px, -30px) scale(0.92);
}

.stenzo-story__card[data-card="1"] .story-visual-layer--back-2 {
    transform: translate(40px, 40px) scale(0.88);
}

.story-visual-layer--c1-b1 {
    top: -10%;
    left: -5%;
}

.story-visual-layer--c1-b2 {
    bottom: -10%;
    right: -5%;
}

/* Card 2 */
.stenzo-story__card[data-card="2"] .story-visual-layer--back-1 {
    transform: translate(30px, -20px) scale(0.92);
}

.stenzo-story__card[data-card="2"] .story-visual-layer--back-2 {
    transform: translate(-30px, 30px) scale(0.88);
}

.story-visual-layer--c2-b1 {
    top: -10%;
    right: -5%;
}

.story-visual-layer--c2-b2 {
    bottom: -10%;
    left: -5%;
}

/* Card 3 */
.stenzo-story__card[data-card="3"] .story-visual-layer--back-1 {
    transform: translate(-20px, 30px) scale(0.92);
}

.stenzo-story__card[data-card="3"] .story-visual-layer--back-2 {
    transform: translate(30px, -30px) scale(0.88);
}

.story-visual-layer--c3-b1 {
    bottom: -10%;
    left: -5%;
}

.story-visual-layer--c3-b2 {
    top: -10%;
    right: -5%;
}

/* Card 4 */
.stenzo-story__card[data-card="4"] .story-visual-layer--back-1 {
    transform: translate(-35px, -15px) scale(0.92);
}

.stenzo-story__card[data-card="4"] .story-visual-layer--back-2 {
    transform: translate(25px, 40px) scale(0.88);
}

.story-visual-layer--c4-b1 {
    top: -10%;
    left: -10%;
}

.story-visual-layer--c4-b2 {
    bottom: -10%;
    right: -10%;
}

/* Deep Shadows for layers */
.story-visual-layer--main .smock {
    box-shadow: 0 20px 50px rgba(20, 30, 50, 0.10), 0 4px 12px rgba(20, 30, 50, 0.05);
}

.story-visual-layer--back-1 .smock,
.story-visual-layer--back-2 .smock {
    box-shadow: 0 4px 20px rgba(20, 30, 50, 0.05);
}

/* ============================================================
   VISUAL SCENE (Replaces simple visual)
   ============================================================ */
.story-visual-scene {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.story-visual-layer {
    position: absolute;
    will-change: transform, opacity, filter;
}

.story-visual-layer--main {
    z-index: 3;
}

.story-visual-layer--back-1 {
    z-index: 2;
}

.story-visual-layer--back-2 {
    z-index: 1;
}

/* Base States for Visual Layers */
.stenzo-story__card .story-visual-layer--main {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.stenzo-story__card .story-visual-layer--back-1 {
    opacity: 0.55;
    filter: blur(3px);
}

.stenzo-story__card .story-visual-layer--back-2 {
    opacity: 0.40;
    filter: blur(5px);
}

/* Card-specific background positions */
/* Card 1 */
.stenzo-story__card[data-card="1"] .story-visual-layer--back-1 {
    transform: translate(-30px, -30px) scale(0.92);
}

.stenzo-story__card[data-card="1"] .story-visual-layer--back-2 {
    transform: translate(40px, 40px) scale(0.88);
}

.story-visual-layer--c1-b1 {
    top: -10%;
    left: -5%;
}

.story-visual-layer--c1-b2 {
    bottom: -10%;
    right: -5%;
}

/* Card 2 */
.stenzo-story__card[data-card="2"] .story-visual-layer--back-1 {
    transform: translate(30px, -20px) scale(0.92);
}

.stenzo-story__card[data-card="2"] .story-visual-layer--back-2 {
    transform: translate(-30px, 30px) scale(0.88);
}

.story-visual-layer--c2-b1 {
    top: -10%;
    right: -5%;
}

.story-visual-layer--c2-b2 {
    bottom: -10%;
    left: -5%;
}

/* Card 3 */
.stenzo-story__card[data-card="3"] .story-visual-layer--back-1 {
    transform: translate(-20px, 30px) scale(0.92);
}

.stenzo-story__card[data-card="3"] .story-visual-layer--back-2 {
    transform: translate(30px, -30px) scale(0.88);
}

.story-visual-layer--c3-b1 {
    bottom: -10%;
    left: -5%;
}

.story-visual-layer--c3-b2 {
    top: -10%;
    right: -5%;
}

/* Card 4 */
.stenzo-story__card[data-card="4"] .story-visual-layer--back-1 {
    transform: translate(-35px, -15px) scale(0.92);
}

.stenzo-story__card[data-card="4"] .story-visual-layer--back-2 {
    transform: translate(25px, 40px) scale(0.88);
}

.story-visual-layer--c4-b1 {
    top: -10%;
    left: -10%;
}

.story-visual-layer--c4-b2 {
    bottom: -10%;
    right: -10%;
}

/* Deep Shadows for layers */
.story-visual-layer--main .smock {
    box-shadow: 0 20px 50px rgba(20, 30, 50, 0.10), 0 4px 12px rgba(20, 30, 50, 0.05);
}

.story-visual-layer--back-1 .smock,
.story-visual-layer--back-2 .smock {
    box-shadow: 0 4px 20px rgba(20, 30, 50, 0.05);
}

/* ============================================================
   SMOCK — Mini UI Mockup Components
   Namespaced under .smock to avoid all collisions
   ============================================================ */

.smock {
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    width: 100%;
    width: 250px;
    max-width: 320px;
    box-sizing: border-box;
    font-family: inherit;
}

/* Floating accent card */
.smock--float {
    position: absolute;
    width: auto;
    min-width: 100px;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    background: #ffffff;
    border: 1px solid #f0f0f4;
    z-index: 10;
}

.smock--float-tr {
    top: -12px;
    right: -16px;
}

.smock--float-bl {
    bottom: -12px;
    left: -16px;
}

.smock--float-br {
    bottom: -12px;
    right: -16px;
}

.smock__float-label {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.smock__float-val {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}

.smock__float-val--green {
    color: #5a7a2a;
}

/* Header row */
.smock__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.smock__label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    letter-spacing: -0.01em;
}

/* Badges */
.smock__badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0;
    text-transform: none;
}

.smock__badge--green {
    background: #d1fae5;
    color: #065f46;
}

.smock__badge--blue {
    background: #dbeafe;
    color: #1e40af;
}

/* Profile row */
.smock__profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.smock__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
    letter-spacing: 0;
}

.smock__avatar--orange {
    background: #e8622a;
}

.smock__avatar--purple {
    background: #6366f1;
}

.smock__name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.01em;
}

.smock__sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}

/* Skills / Tags */
.smock__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

.smock__tag {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 100px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

/* Score bar */
.smock__score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.smock__score-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.smock__score-value {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.smock__score-bar {
    height: 6px;
    border-radius: 3px;
    background: #f3f4f6;
    overflow: hidden;
    margin-bottom: 14px;
}

.smock__score-fill {
    height: 100%;
    border-radius: 3px;
    background: #e8622a;
    transition: width 600ms ease;
}

/* Opportunity block */
.smock__opportunity {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid #ebeff5;
}

.smock__opp-role {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 3px;
}

.smock__opp-loc {
    font-size: 11px;
    color: #9ca3af;
}

/* Readiness rows */
.smock__readiness-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.smock__r-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smock__r-label {
    font-size: 11px;
    color: #6b7280;
    width: 120px;
    flex-shrink: 0;
}

.smock__r-bar-track {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: #f3f4f6;
    overflow: hidden;
}

.smock__r-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.smock__r-pct {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* Status row */
.smock__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    background: #f8f9fb;
    border-radius: 8px;
    padding: 8px 10px;
}

.smock__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #d1d5db;
}

.smock__status-dot--green {
    background: #22c55e;
}

/* Strength row (Profile card) */
.smock__strength-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.smock__strength-label {
    font-size: 11px;
    color: #6b7280;
}

.smock__strength-pct {
    font-size: 14px;
    font-weight: 700;
    color: #5a7a2a;
}

/* Visibility row */
.smock__visibility {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    background: #f8f9fb;
    border-radius: 8px;
    padding: 8px 10px;
}

.smock__vis-label {
    font-size: 11px;
    color: #9ca3af;
}

.smock__vis-val {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Journey steps */
.smock__journey-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.smock__step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.smock__step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
}

.smock__step-dot--done {
    background: #22c55e;
}

.smock__step-dot--active {
    background: #e8622a;
    box-shadow: 0 0 0 3px rgba(232, 98, 42, 0.2);
}

.smock__step-line {
    position: absolute;
    left: 5px;
    top: 15px;
    width: 2px;
    height: 24px;
    background: #22c55e;
}

.smock__step-line--muted {
    background: #e5e7eb;
}

.smock__step-label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    padding-bottom: 20px;
}

.smock__step-label--active {
    color: #e8622a;
    font-weight: 600;
}

.smock__step-label--muted {
    color: #d1d5db;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .stenzo-story__card-copy {
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .stenzo-story__sticky-shell {
        position: relative;
        top: auto;
        height: auto;
        max-height: none;
        padding: 24px 16px;
    }

    .stenzo-story__cards-stage {
        height: auto;
        position: static;
        flex-direction: column;
        gap: 24px;
    }

    .stenzo-story__card {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
    }

    .stenzo-story__card.is-leaving {
        display: none;
    }

    .stenzo-story__card-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px !important;
        min-height: unset;
        background-position: top center;
    }

    .stenzo-story__card-copy {
        order: 1;
        padding: 32px;
    }

    .stenzo-story__card-visual {
        order: 2;
    }

    .stenzo-story__scroll-spacer {
        display: none;
    }

    .stenzo-story__progress {
        position: static;
        transform: none;
        margin-top: 20px;
        justify-content: center;
    }

    .stenzo-story__card-heading {
        font-size: 22px;
    }

    .stenzo-story__editorial-quote {
        font-size: 24px;
    }

    .stenzo-story__logos-label {
        font-size: 20px;
    }

    .story-visual-scene {
        min-height: 280px;
    }

    .stenzo-story__card.is-active .story-visual-layer--back-1 {
        transform: translate(-10px, -10px) scale(0.85);
        opacity: 0.45;
        filter: blur(2px);
    }

    .stenzo-story__card.is-active .story-visual-layer--back-2 {
        transform: translate(10px, 10px) scale(0.8);
        opacity: 0.35;
        filter: blur(4px);
    }
}

@media (max-width: 480px) {
    .stenzo-story__logos-wrapper {
        padding: 48px 0 40px;
    }

    .stenzo-story__editorial {
        padding: 64px 0 56px;
    }
}

@media (max-width: 791px) {

    /* Dismantle sticky scroll for mobile */
    .stenzo-story__sticky-shell {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 40px 16px !important;
    }

    .stenzo-story__editorial {
        position: relative !important;
        inset: auto !important;
        padding: 0 !important;
        margin-bottom: 40px;
        pointer-events: auto;
    }

    .stenzo-story__editorial-quote {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .stenzo-story__editorial-body {
        font-size: 16px !important;
    }

    .stenzo-story__cards-stage {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 1fr !important;
        gap: 32px !important;
        height: auto !important;
        position: relative !important;
    }

    .stenzo-story__scroll-spacer {
        display: none !important;
    }

    /* Cards become static relative blocks */
    .stenzo-story__card {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Change to single column layout with visual on top */
    .stenzo-story__card-content {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        height: 100% !important;
        border-radius: 24px !important;
    }

    .stenzo-story__card-visual {
        order: -1;
        min-height: 260px;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        overflow: hidden;
    }

    .story-visual-scene {
        transform: scale(0.65) !important;
        transform-origin: center center;
    }

    /* Force layers visible bypassing animate-initial */
    .story-visual-layer--main,
    .story-visual-layer--back-1,
    .story-visual-layer--back-2 {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        filter: none !important;
    }

    .story-visual-layer--back-1 {
        opacity: 0.55 !important;
        filter: blur(3px) !important;
    }

    .story-visual-layer--back-2 {
        opacity: 0.40 !important;
        filter: blur(5px) !important;
    }

    /* Style the text box to float at the bottom */
    .stenzo-story__card-copy {
        background-color: #ffffff;
        margin: 0 12px 12px 12px !important;
        padding: 32px 24px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        opacity: 1 !important;
        transform: none !important;
    }

    .stenzo-story__card-heading {
        font-size: 26px !important;
        margin-bottom: 12px !important;
    }

    .stenzo-story__card-desc {
        font-size: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .stenzo-story__card,
    .stenzo-story__card.is-active,
    .stenzo-story__card.is-leaving {
        transition: none;
    }

    .stenzo-story__card {
        opacity: 1;
        transform: none;
        position: static;
        pointer-events: auto;
    }

    .stenzo-story__cards-stage {
        position: static;
        flex-direction: column;
        gap: 24px;
        height: auto;
    }

    .stenzo-story__sticky-shell {
        position: relative;
        height: auto;
        max-height: none;
    }

    .stenzo-story__scroll-spacer {
        display: none;
    }
}

/* ======================================================== */
/* INTEGRATED Stenzo FEATURES CSS */
/* ======================================================== */

/* Stenzo-features.css */

.stenzo-features-section {
    padding: 100px 0;
    color: #ffffff;
}

.stenzo-features-header {
    text-align: center;
    margin-bottom: 64px;
}

.stenzo-features-header h2 {
    font-size: clamp(32px, 4vw, 48px);
    color: #ffffff;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    font-weight: var(--text-title-weight);
}

.stenzo-features-header p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

.stenzo-features-grid {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.m-grid-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 24px;
}

@media (max-width: 992px) {
    .stenzo-features-grid {
        flex-wrap: wrap;
    }

    .m-grid-col {
        min-width: 45%;
    }
}

@media (max-width: 768px) {
    .m-grid-col {
        min-width: 100%;
    }
}

/* Base Card Styles */
.m-card {
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.m-card--tall {
    height: 560px;
}

.m-card--short {
    height: 420px;
}

/* Card Themes */
.m-card--dark {
    color: #ffffff;
}

.m-card--light {
    background: #eff3f7;
    /* Hero section background color */
    color: #242426;
}

/* Card Header */
.m-card-header {
    padding: 32px 32px 16px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.m-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
}

.m-card--dark .m-card-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.m-card--light .m-card-pill {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #4d4f57;
}

.m-card-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.m-card--dark .m-card-header h3 {
    color: #ffffff;
}

.m-card--light .m-card-header h3 {
    color: #242426;
}

.m-card-header p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.m-card--dark .m-card-header p {
    color: rgba(255, 255, 255, 0.7);
}

.m-card--light .m-card-header p {
    color: #6b7280;
}

/* ──────────────────────────────────────────────────────────
   CARD 1: Smart Expenses (Physics)
────────────────────────────────────────────────────────── */
#card-smart-expenses .m-card-header h3 {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

#card-smart-expenses .m-card-header p {
    font-size: clamp(12px, 1.5vw, 15px);
    max-width: 320px;
    margin: 0 auto;
    opacity: 0.9;
}

/* ──────────────────────────────────────────────────────────
   CARD 5: Upcoming Bills
────────────────────────────────────────────────────────── */
#card-upcoming-bills .m-card-header h3 {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

#card-upcoming-bills .m-card-header p {
    font-size: clamp(12px, 1.5vw, 15px);
    max-width: 320px;
    margin: 0 auto;
    opacity: 0.9;
}

.physics-tag {
    position: absolute;
    padding: 6px 14px;
    border-radius: 30px;
    background: #24242680;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    cursor: grab;
    user-select: none;
    touch-action: none;
    white-space: nowrap;
    will-change: transform;
    display: flex;
    align-items: center;
    gap: 8px;
}

.physics-tag svg {
    color: rgba(255, 255, 255, 0.7);
}

.physics-tag:active {
    cursor: grabbing;
}

/* ──────────────────────────────────────────────────────────
   Career Readiness Interaction
────────────────────────────────────────────────────────── */
.cr-chip {
    width: 180px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 14px;
    padding-right: 12px;
    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
    background: rgba(36, 36, 38, 0.8);
}

.cr-chip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.cr-chip:hover {
    background: rgba(49, 49, 52, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.cr-chip.is-dragging {
    z-index: 100 !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5) !important;
    border-color: #f97316 !important;
    background: rgba(49, 49, 52, 1) !important;
}

.cr-guide-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.cr-score-wrapper {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    background: transparent;
    padding: 0;
    border: none;
    pointer-events: none;
}

.cr-score-val {
    font-size: 24px;
    font-weight: 600;
    color: #242426;
    font-variant-numeric: tabular-nums;
}

.cr-score-lbl {
    font-size: 12px;
    color: #242426;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cr-game-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(36, 36, 38, 0.95);
    backdrop-filter: blur(8px);
    padding: 10px 18px;
    border-radius: 30px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 200;
    max-width: 260px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: translateY(8px);
}

.cr-game-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cr-game-tooltip.is-centered {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -40%) !important;
}

.cr-game-tooltip.is-centered.is-visible {
    transform: translate(-50%, -50%) !important;
}

.cr-tooltip-title {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.cr-tooltip-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.7);
}

.cr-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 400px) {
    .cr-chip {
        width: 150px;
        padding-left: 10px;
        font-size: 14px;
    }
}

/* ──────────────────────────────────────────────────────────
   CARD 2: Bank Sync
────────────────────────────────────────────────────────── */
#card-bank-sync .m-card-header h3 {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

#card-bank-sync .m-card-header p {
    font-size: clamp(12px, 1.5vw, 15px);
    max-width: 320px;
    margin: 0 auto;
    color: #6b7280;
}

.bank-sync-stack,
.bank-sync-stack * {
    box-sizing: border-box;
}

.bank-sync-stack {
    position: relative;
    width: min(90%, 280px);
    max-width: 100%;
    transform: translateY(-10px);
}

.stack-bg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.stack-bg-1 {
    top: -12px;
    width: 85%;
    height: 40px;
}

.stack-bg-2 {
    top: -6px;
    width: 92%;
    height: 40px;
    background: rgba(0, 0, 0, 0.06);
}

.bank-sync-ui {
    position: relative;
    border-radius: 16px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    border: 3px solid #35363b;
    background: #35363b;
    width: 100%;
    z-index: 2;
    overflow: hidden;
}

.bank-sync-ui .bs-header {
    background: #35363b;
    padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 16px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bs-title-wrap {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.5vw, 10px);
}

.bs-dot {
    width: clamp(6px, 1.5vw, 8px);
    height: clamp(6px, 1.5vw, 8px);
    background: rgb(219, 74, 43);
    /* Bright lime green */
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(195, 245, 60, 0.5);
    flex-shrink: 0;
}

.bank-sync-ui .bs-title {
    font-size: clamp(10px, 2.5vw, 13px);
    font-weight: 600;
    color: #ffffff;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}

.bank-sync-ui .bs-time {
    font-size: clamp(9px, 2vw, 12px);
    color: rgba(255, 255, 255, 0.5);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}

.bs-body {
    padding: 10px 20px 0px;
    text-align: center;
    background: #ffffff;
    border-radius: 0 0 12px 12px;
}

.bs-amount {
    font-size: clamp(24px, 8vw, 42px);
    font-weight: 500;
    color: #242426;
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-family: var(--font-primary);
    font-style: italic;
    letter-spacing: -0.04em;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}

.bs-amount-sign {
    color: #a0a0a5;
    font-size: clamp(18px, 5vw, 28px);
    font-weight: 400;
    margin-right: 2px;
}

.bs-amount-cents {
    color: #a0a0a5;
    font-size: clamp(24px, 8vw, 42px);
    font-weight: 400;
}

.bs-line {
    width: 80%;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 20px auto 0;
}

/* ──────────────────────────────────────────────────────────
   CARD 3: Daily AI Insights
────────────────────────────────────────────────────────── */
#card-ai-insights .m-card-header h3 {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

#card-ai-insights .m-card-header p {
    font-size: clamp(12px, 1.5vw, 15px);
    max-width: 320px;
    margin: 0 auto;
    opacity: 0.9;
}

.ai-orbit-container {
    position: absolute;
    bottom: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
}

.ai-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.2);
}

.ai-orbit-icons {
    position: absolute;
    inset: 0;
    animation: orbit-spin 60s linear infinite;
}

@keyframes orbit-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.ai-icon-wrapper {
    position: absolute;
}

.ai-icon-inner {
    width: 56px;
    height: 56px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a0a5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%);
    animation: orbit-counter-spin 60s linear infinite;
}

@keyframes orbit-counter-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.ai-insight-text {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ai-insight-text.fade-out {
    opacity: 0;
    transform: translate(-50%, 10px);
}

.ai-insight-amount {
    font-size: 56px;
    font-weight: 500;
    color: #35363b;
    font-family: var(--font-primary);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 8px;
}

.ai-insight-label {
    font-size: 15px;
    font-weight: 500;
    color: #35363b;
    opacity: 0.8;
}

/* ──────────────────────────────────────────────────────────
   CARD 4: Invoice Status (Vertical Feed)
────────────────────────────────────────────────────────── */
#card-invoice-status .m-card-header h3 {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

#card-invoice-status .m-card-header p {
    font-size: clamp(12px, 1.5vw, 15px);
    max-width: 320px;
    margin: 0 auto;
    color: #6b7280;
}

.invoice-feed-wrapper {
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.invoice-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    will-change: transform;
}

.invoice-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.inv-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 12px;
}

.inv-id {
    color: #9ca3af;
}

.inv-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.inv-status.paid {
    background-color: rgb(219, 74, 43);
    /* Bright lime green */
    color: #111827;
    /* Dark text */
}

.inv-status.overdue {
    background-color: #fee2e2;
    color: #ef4444;
    /* Red text */
}

.inv-status.pending {
    background-color: #fef3c7;
    color: #f59e0b;
    /* Yellow text */
}

.inv-client {
    font-size: 22px;
    font-weight: 400;
    color: #111827;
    letter-spacing: -0.02em;
}

.inv-divider {
    height: 1px;
    background-color: #f3f4f6;
    margin: 16px 0;
    width: 100%;
}

.inv-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inv-desc {
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-amount {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
}

/* ──────────────────────────────────────────────────────────
   CARD 5: Upcoming Bills (Horizontal Carousel)
────────────────────────────────────────────────────────── */
.bills-carousel-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    padding-inline: 20px;
    mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.bills-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    will-change: transform;
    position: relative;
}

.bill-item {
    width: clamp(150px, 42vw, 190px);
    height: 116px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 3px solid #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    will-change: transform, opacity;
}

.bill-icon {
    width: clamp(24px, 6vw, 32px);
    height: clamp(24px, 6vw, 32px);
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    margin: 0 auto;
}

.bill-amount {
    font-size: clamp(14px, 3.5vw, 18px);
    font-weight: 600;
    color: #111827;
    margin: 4px auto 2px;
    text-align: center;
    width: 100%;
}

.bill-name {
    font-size: clamp(10px, 2.5vw, 12px);
    color: #9ca3af;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

/* ──────────────────────────────────────────────────────────
   CARD 6: Anomaly Detection
────────────────────────────────────────────────────────── */
#card-anomaly-detection .m-card-header h3 {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

#card-anomaly-detection .m-card-header p {
    font-size: clamp(12px, 1.5vw, 15px);
    max-width: 320px;
    margin: 0 auto;
    color: #6b7280;
}

.anomaly-alert,
.anomaly-alert * {
    box-sizing: border-box;
}

.anomaly-alert {
    background: #ffffff;
    border-radius: 16px;
    width: min(90%, 280px);
    max-width: 100%;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    border: 3px solid #35363b;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    animation: alert-pop 3s infinite;
    display: flex;
    flex-direction: column;
}

@keyframes alert-pop {

    0%,
    10% {
        transform: translateY(10px);
        opacity: 0;
    }

    15%,
    85% {
        transform: translateY(0);
        opacity: 1;
    }

    90%,
    100% {
        transform: translateY(-10px);
        opacity: 0;
    }
}

.alert-body {
    padding: clamp(12px, 4vw, 20px);
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 16px);
    width: 100%;
    min-width: 0;
}

.alert-icon {
    width: clamp(32px, 8vw, 44px);
    height: clamp(32px, 8vw, 44px);
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.alert-title {
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 500;
    color: #111827;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}

.alert-subtitle {
    font-size: clamp(11px, 2.5vw, 14px);
    color: #9ca3af;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}

.alert-subtitle span {
    color: #111827;
}

.alert-footer {
    background: #35363b;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    min-width: 0;
}

.alert-check-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgb(219, 74, 43);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.alert-check-btn:hover {
    transform: scale(1.1);
}

/* ======================================================== */
/* CAREER INSIGHT SECTION */
/* ======================================================== */
.career-insight-section {
    position: relative;
    background-color: #ffffff;
    color: #111827;
    padding: 15vh 0;
    transition: background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Adds the empty dark space above and below without breaking the centered UI */
}

body.theme-dark .career-insight-section {
    background-color: #35363b;
    color: #ffffff;
}

.ci-intro-title {
    color: #111827;
    transition: color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .ci-intro-title {
    color: #ffffff;
}

.ci-intro-subtitle {
    color: rgba(17, 24, 39, 0.7);
    transition: color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .ci-intro-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.ci-badge-pill {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111827;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .ci-badge-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.career-insight-spacers {
    position: relative;
    z-index: 1;
}

.ci-spacer {
    /* 80vh gives a very short pinned duration, making the transition feel like a quick gesture */
    height: 80vh;
}

.career-insight-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    z-index: 10;
    overflow: hidden;
}

.ci-content-group {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Collectively centers intro and layout */
    gap: clamp(24px, 5vh, 60px);
    padding: 4vh 0;
    /* Guarantee breathing room so title never hits the top edge */
}

/* Prevent top and bottom cutoff on shorter screens or mobile devices */
@media (max-width: 991px),
(max-height: 800px) {
    .ci-content-group {
        justify-content: flex-start;
        padding-top: 75px;
        gap: 16px;
    }
}

@media (max-width: 991px) and (max-height: 700px) {
    .ci-content-group {
        padding-top: 68px;
        gap: 12px;
    }

    .career-insight-stage {
        max-height: 24vh;
    }

    .career-insight-features {
        gap: 8px;
    }

    .career-insight-intro h2 {
        font-size: 32px !important;
        margin-bottom: 8px !important;
        line-height: 1.15 !important;
    }

    .ci-badge {
        margin-bottom: 12px !important;
    }
}


.career-insight-intro {
    width: 100%;
    text-align: center;
    will-change: transform, opacity;
    z-index: 2;
    padding: 0 20px;
    flex-shrink: 0;
}

.career-insight-layout {
    display: flex;
    align-items: center;
    gap: 8%;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.career-insight-left {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.career-insight-features {
    display: flex;
    flex-direction: column;
    gap: 32px;
    opacity: 0;
    transform: translateX(-40px);
    will-change: transform, opacity;
}

.career-insight-feature {
    display: flex;
    gap: 20px;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}

.career-insight-feature.is-active {
    opacity: 1;
}

.career-insight-feature.is-completed {
    opacity: 0.6;
}

.ci-progress-bar {
    width: 2px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .ci-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}

.ci-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(219, 74, 43);
    /* Stenzo brand accent */
    transform: translateY(-100%);
    transition: transform 0.1s linear;
}

.ci-feature-content h4 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #111827;
    letter-spacing: -0.01em;
    transition: color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .ci-feature-content h4 {
    color: #ffffff;
}

.ci-feature-content p {
    font-size: 15px;
    color: rgba(17, 24, 39, 0.65);
    line-height: 1.6;
    margin: 0;
    transition: color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .ci-feature-content p {
    color: rgba(255, 255, 255, 0.65);
}

/* Dashboard Stage */
.career-insight-right {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform;
}

.career-insight-stage {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 55vh;
    /* Prevents dashboard from expanding too tall on short screens */
    aspect-ratio: 16 / 11;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.career-insight-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.career-insight-dashboard {
    position: relative;
    z-index: 2;
    width: 94%;
    height: 94%;
    overflow: hidden;
}

.ci-dashboard-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 18px;
    /* Proportional to parent's 24px border-radius */
}

.ci-dashboard-image.is-active {
    opacity: 1;
    z-index: 3;
}

@media (max-width: 992px) {
    .career-insight-layout {
        flex-direction: column;
        justify-content: center;
        gap: 32px;
        padding: 0 24px;
    }

    .career-insight-left {
        flex: none;
        order: 2;
        width: 100%;
        max-width: 500px;
        gap: 32px;
    }

    .career-insight-right {
        order: 1;
        width: 100%;
    }

    .career-insight-stage {
        aspect-ratio: 16 / 12;
    }

    .career-insight-features {
        gap: 16px;
    }

    .career-insight-feature {
        display: flex;
        opacity: 0.4;
        transition: all 0.4s ease;
    }

    .career-insight-feature.is-active {
        opacity: 1;
    }

    .ci-feature-content p {
        height: 0;
        overflow: hidden;
        opacity: 0;
        margin-top: 0;
        transition: all 0.4s ease;
    }

    .career-insight-feature.is-active .ci-feature-content p {
        height: auto;
        opacity: 1;
        margin-top: 8px;
    }

    .ci-spacer {
        height: 60vh;
    }
}

/* ======================================================== */
/* CUSTOMER SPOTLIGHT SECTION (REFERENCE IMPLEMENTATION) */
/* ======================================================== */
.customer-spotlight-section {
    background-color: transparent;
    /* Allows parent or body background to show */
    padding: 120px 0;
    color: #ffffff;
    overflow: hidden;
}

.customer-spotlight-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 64px;
    padding: 0 24px;
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #4d4f57;
    color: #ffffff;
    padding: 6px 16px 6px 6px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}

.cs-badge-icon {
    background-color: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

.cs-badge-icon svg {
    width: 14px;
    height: 14px;
}

.customer-spotlight-header h2 {
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 24px;
    color: inherit;
    letter-spacing: -0.02em;
}

.customer-spotlight-header p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

body:not(.theme-dark) .customer-spotlight-section {
    color: #111827;
}

body:not(.theme-dark) .customer-spotlight-header p {
    color: rgba(17, 24, 39, 0.7);
}

.customer-spotlight-container {
    width: 100%;
}

.customer-spotlight-viewport {
    width: 100%;
    max-width: 1248px;
    /* 1200px max card + 24px padding on each side */
    margin: 0 auto;
    padding: 0 24px;
    overflow: hidden;
    cursor: grab;
    display: flex;
    box-sizing: border-box;
}

.customer-spotlight-viewport:active {
    cursor: grabbing;
}

.customer-spotlight-track {
    display: flex;
    gap: 24px;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cs-card {
    flex-shrink: 0;
    width: 100%;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    color: #33335e;
}

.cs-card-yellow {
    background-color: #d9ff5c;
}

.cs-card-peach {
    background-color: #e0c5b6;
}

.cs-card-blue {
    background-color: #b8deff;
}

.cs-card-grey {
    background-color: #d9d5dc;
}

.cs-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cs-card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-logo-placeholder {
    width: 60px;
    height: 24px;
    color: #111827;
    opacity: 0.7;
    margin-bottom: 40px;
}

.cs-card-text h4 {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 500;
    /* Stenzo style */
    margin-bottom: 12px;
    color: #111827;
    letter-spacing: -0.01em;
}

.cs-card-text h6 {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: rgba(17, 24, 39, 0.7);
    margin: 0;
}

.cs-image-wrapper {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
}

.cs-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cs-detail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(17, 24, 39, 0.5);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cs-value {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin: 0;
}

.cs-divider {
    height: 1px;
    background-color: #111827;
    opacity: 0.1;
    width: 100%;
}

.customer-spotlight-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    max-width: 1200px;
    margin: 48px auto 0;
    padding: 0 24px;
}

.cs-buttons {
    display: flex;
    gap: 16px;
}

.cs-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background-color: #4d4f57;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
}

.cs-btn:hover {
    background-color: #5d5f67;
}

.cs-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-progress {
    width: 50px;
    height: 4px;
    background-color: #4d4f57;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.cs-progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgb(219, 74, 43);
    border-radius: 2px;
    transition: width 0.3s ease, left 0.3s ease;
}

@media (max-width: 900px) {
    .customer-spotlight-section {
        padding: 64px 0;
    }

    .customer-spotlight-header h2 {
        font-size: 36px;
    }

    .cs-card {
        flex-direction: column;
        gap: 32px;
        padding: 32px 24px;
    }

    .cs-card-left,
    .cs-card-right {
        width: 100%;
    }

    .cs-logo-placeholder {
        margin-bottom: 24px;
    }

    .customer-spotlight-controls {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════
   FAQ SECTION (Stenzo STYLE)
═══════════════════════════════════════════════════ */
.stenzo-faq-section {
    background-color: #ffffff;
    width: 100%;
    padding: 120px 24px;
    position: relative;
    z-index: 10;
}

.stenzo-faq-container-outer {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.stenzo-faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 80px;
}

.stenzo-faq-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-peach);
    /* or another global brand color if preferred, using peach to match hero or blue-light */
    border: 1px solid var(--color-peach-border);
    color: var(--color-dark);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}

.stenzo-faq-pill svg {
    background-color: #fff;
    border-radius: 50%;
    padding: 4px;
    width: 24px;
    height: 24px;
}

.stenzo-faq-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: var(--text-title-weight);
    color: var(--text-title-color);
    letter-spacing: var(--text-title-spacing);
    margin-bottom: 24px;
    line-height: 1.1;
}

.stenzo-faq-mark {
    background-color: rgb(219, 74, 43);
    padding: 0px 16px 4px 16px;
    border-radius: 16px;
    display: inline-block;
    color: var(--color-dark);
}

.stenzo-faq-desc {
    color: var(--text-desc-color);
    font-weight: var(--text-desc-weight);
    letter-spacing: var(--text-desc-spacing);
    font-size: 18px;
    max-width: 500px;
    line-height: var(--text-desc-line-height);
}

.stenzo-faq-main {
    display: grid;
    grid-template-columns: 280px 1fr;
    background-color: transparent;
    align-items: start;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    gap: 0;
}

.stenzo-faq-sidebar {
    background-color: #ebedfa;
    padding: 8px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 120px;
    z-index: 10;
    /* Default: fully rounded on all corners (flat/horizontal appearance) */
    border-radius: 24px 0 0 24px;
    transition: border-radius 0.3s ease;
}

.stenzo-faq-mobile-toggle {
    display: none;
}

.stenzo-faq-category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bottom-right curve — ALWAYS visible (connects sidebar to right panel below) */
.stenzo-faq-sidebar::before,
.stenzo-faq-sidebar::after {
    content: "";
    position: absolute;
    right: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 11;
}

.stenzo-faq-sidebar::before {
    top: -24px;
    background: radial-gradient(circle at top left, transparent 23.5px, #ebedfa 24px);
    /* Top-right curve reveals from bottom to top as right content scrolls — controlled by JS */
    opacity: 1;
    clip-path: inset(calc(24px - var(--faq-top-curve-reveal, 0px)) 0 0 0);
}

.stenzo-faq-sidebar::after {
    bottom: -24px;
    background: radial-gradient(circle at bottom left, transparent 23.5px, #ebedfa 24px);
    /* Bottom-right curve is always visible */
    opacity: 1;
}



.stenzo-faq-category {
    background: transparent;
    border: none;
    text-align: left;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
    color: var(--color-dark-50);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    width: 100%;
}

.stenzo-faq-category:hover {
    color: var(--color-dark-80);
}

.stenzo-faq-category.active {
    background-color: var(--color-white);
    color: var(--color-dark);
    /* Middle tabs get normal 4px corners */
    border-radius: 4px;
}

.stenzo-faq-category:first-child.active {
    /* Large curve on top-left */
    border-radius: 16px 4px 4px 4px;
}

.stenzo-faq-category:last-child.active {
    /* Large curve on bottom-left */
    border-radius: 4px 4px 4px 16px;
}

.stenzo-faq-content {
    background-color: #ebedfa;
    padding: 8px;
    /* Default: fully rounded on all corners */
    border-radius: 0 16px 16px 16px;
    min-height: 100%;
    position: relative;
    z-index: 5;
    transition: border-radius 0.3s ease;
}

/* When sticky is active: open the top-left corner to connect with sidebar */
.stenzo-faq-main.is-stuck .stenzo-faq-content {
    border-radius: 0 16px 16px 16px;
}

.stenzo-faq-accordion {
    display: none;
    flex-direction: column;
    gap: 4px;
    /* Gap creates the separator lines between items */
    margin-bottom: 24px;
}

.stenzo-faq-accordion.active {
    display: flex;
}

.stenzo-faq-item {
    background-color: #ffffff;
    border-radius: 8px;
    border: none;
    /* No borders, background gap separates them */
    overflow: hidden;
    transition: all 0.3s ease;
}

.stenzo-faq-item:last-child {
    border-radius: 8px;
    /* Maintain same border radius */
}

.stenzo-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 36px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #242426;
}

.stenzo-faq-q-text {
    font-size: 18px;
    font-weight: var(--text-title-weight, 500);
    letter-spacing: var(--text-title-spacing);
    color: var(--color-dark);
}

.stenzo-faq-icon {
    color: var(--color-dark);
    opacity: 0.35;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stenzo-faq-item.active .stenzo-faq-icon {
    transform: rotate(45deg);
    opacity: 1;
}

.stenzo-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.stenzo-faq-item.active .stenzo-faq-answer {
    grid-template-rows: 1fr;
}

.stenzo-faq-answer-inner {
    overflow: hidden;
    padding: 0 36px;
}

.stenzo-faq-item.active .stenzo-faq-answer-inner {
    padding: 0 36px 24px 36px;
}

.stenzo-faq-answer p {
    color: var(--text-desc-color);
    font-weight: var(--text-desc-weight);
    letter-spacing: var(--text-desc-spacing);
    line-height: var(--text-desc-line-height);
    font-size: 16px;
    margin: 0;
}

.stenzo-faq-cta {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.stenzo-faq-cta-content {
    flex: 1;
    padding: 48px;
    padding-right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.stenzo-faq-cta-title {
    font-size: 24px;
    font-weight: var(--text-title-weight);
    color: var(--text-title-color);
    letter-spacing: var(--text-title-spacing);
    margin-bottom: 16px;
    line-height: 1.3;
}

.stenzo-faq-cta-desc {
    color: var(--text-desc-color);
    font-weight: var(--text-desc-weight);
    letter-spacing: var(--text-desc-spacing);
    line-height: var(--text-desc-line-height);
    font-size: 16px;
    margin-bottom: 32px;
    max-width: 400px;
}

.stenzo-faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: rgb(28, 28, 28);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgb(255, 255, 255);
    padding: 6px 24px 6px 6px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.stenzo-faq-cta-btn:hover {
    background-color: #383b4c;
}

.stenzo-faq-cta-btn-icon {
    background-color: rgb(219, 74, 43);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgb(28, 28, 28);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 4px 0px;
}

.stenzo-faq-cta-btn-icon svg {
    stroke: rgb(28, 28, 28) !important;
}

.stenzo-faq-cta-image {
    width: 40%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    /* keeps rounded corners clean */
}

.stenzo-faq-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
    display: block;
}

@media (max-width: 991px) {
    .stenzo-faq-main {
        display: grid;
        grid-template-columns: 1fr;
        background-color: transparent;
        align-items: start;
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        gap: 16px;
        height: auto !important;
        /* Override JS fixed height for scroll stop */
    }

    .stenzo-faq-sidebar {
        background-color: #ebedfa;
        padding: 8px;
        position: relative;
        top: 0;
        z-index: 20;
        border-radius: 16px;
    }

    /* Hide the curves on mobile */
    .stenzo-faq-sidebar::before,
    .stenzo-faq-sidebar::after {
        display: none;
    }

    .stenzo-faq-mobile-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: #ffffff;
        border: none;
        padding: 16px 20px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 500;
        color: #242426;
        cursor: pointer;
    }

    .stenzo-faq-mobile-toggle-icon {
        color: rgba(36, 36, 38, 0.5);
        transition: transform 0.3s ease;
    }

    .stenzo-faq-sidebar.dropdown-open .stenzo-faq-mobile-toggle-icon {
        transform: rotate(180deg);
    }

    .stenzo-faq-category-list {
        display: none;
        flex-direction: column;
        gap: 8px;
        background-color: transparent;
        margin-top: 8px;
        padding: 0;
        width: 100%;
    }

    .stenzo-faq-sidebar.dropdown-open .stenzo-faq-category-list {
        display: flex;
    }

    .stenzo-faq-category {
        background: transparent;
        border: none;
        text-align: left;
        padding: 16px 20px;
        border-radius: 12px;
        font-size: 16px;
        color: var(--color-dark-50);
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: 500;
        width: 100%;
    }

    .stenzo-faq-category:hover {
        color: var(--color-dark-80);
    }

    .stenzo-faq-category.active {
        background-color: var(--color-white);
        color: var(--color-dark);
        border-radius: 12px;
    }

    .stenzo-faq-content {
        background-color: #ebedfa;
        padding: 8px;
        border-radius: 16px;
        min-height: auto;
        position: relative;
        z-index: 5;
    }

    .stenzo-faq-main.is-stuck .stenzo-faq-content {
        border-radius: 16px;
    }

    .stenzo-faq-cta {
        background-color: #ffffff;
        border-radius: 16px;
        padding: 0;
        margin: 0;
        overflow: hidden;
        flex-direction: column;
    }

    .stenzo-faq-cta-image {
        width: 100%;
        height: auto;
        justify-content: center;
    }

    .stenzo-faq-cta-image img {
        width: 85%;
        max-width: 420px;
        height: auto;
        object-position: bottom center;
    }
}

@media (max-width: 767px) {
    .stenzo-faq-section {
        padding: 80px 16px;
    }

    .stenzo-faq-question {
        padding: 20px 24px;
    }

    .stenzo-faq-answer-inner {
        padding: 0 24px;
    }

    .stenzo-faq-item.active .stenzo-faq-answer-inner {
        padding: 0 24px 20px 24px;
    }

    .stenzo-faq-q-text {
        font-size: 16px;
    }

    .stenzo-faq-cta-content {
        padding: 32px 24px;
    }
}

/* ═══════════════════════════════════════════════════
   BLOG / LATEST INSIGHTS SECTION (Stenzo)
═══════════════════════════════════════════════════ */
.stenzo-blog-section {
    background: linear-gradient(180deg, #ffffff 0%, #ebeff5 100%);
    padding: 120px 24px;
    width: 100%;
}

.stenzo-blog-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.stenzo-blog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 64px;
}

.stenzo-blog-header-content {
    max-width: 600px;
}

.stenzo-blog-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-peach);
    border: 1px solid var(--color-peach-border);
    color: var(--color-dark);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}

.stenzo-blog-pill svg {
    background-color: var(--color-white);
    border-radius: 50%;
    padding: 4px;
    width: 24px;
    height: 24px;
}

.stenzo-blog-title {
    font-size: clamp(36px, 5vw, 48px);
    font-weight: var(--text-title-weight);
    color: var(--text-title-color);
    letter-spacing: var(--text-title-spacing);
    margin-bottom: 16px;
    line-height: 1.1;
}

.stenzo-blog-desc {
    color: var(--text-desc-color);
    font-weight: var(--text-desc-weight);
    letter-spacing: var(--text-desc-spacing);
    line-height: var(--text-desc-line-height);
    font-size: 18px;
    margin: 0;
}

.stenzo-blog-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: rgb(28, 28, 28);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgb(255, 255, 255);
    padding: 6px 24px 6px 6px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;
    transition: background-color 0.2s ease;
}

.stenzo-blog-header-btn:hover {
    background-color: #383b4c;
}

.stenzo-blog-header-btn-icon {
    background-color: rgb(219, 74, 43);
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 4px 0px;
}

.stenzo-blog-header-btn-icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke: rgb(28, 28, 28) !important;
    stroke-width: 2px !important;
}

.stenzo-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.stenzo-blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.04));
    background: transparent;
}

.stenzo-blog-card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.08));
}

.stenzo-blog-card-main {
    background-color: #ffffff;
    border-radius: 24px 24px 8px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.stenzo-blog-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.stenzo-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.stenzo-blog-card:hover .stenzo-blog-card-image img {
    transform: scale(1.05);
}

.stenzo-blog-card-content {
    padding: 24px 24px 0 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stenzo-blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stenzo-blog-category {
    background-color: #ebedfa;
    color: var(--color-dark);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.stenzo-blog-date {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
}

.stenzo-blog-card-title {
    font-size: 20px;
    font-weight: var(--text-title-weight, 600);
    color: var(--color-dark);
    line-height: 1.4;
    letter-spacing: var(--text-title-spacing);
    margin: 0 0 24px 0;
    flex: 1;
}

.stenzo-blog-card-bottom {
    display: flex;
    width: 100%;
}

.stenzo-blog-read-wrapper {
    background-color: #ffffff;
    border-radius: 0 0 8px 24px;
    /* Matches framer-26mht7 */
    padding: 16px 24px 24px 24px;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.stenzo-blog-btn-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.stenzo-blog-btn-bg {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 5px;
    /* Gap around the green button */
    margin: 5px 0 0 5px;
    /* Margin requested by user for spacing */
}

.stenzo-blog-cutout-mask {
    position: absolute;
    top: -1px;
    /* Slight overlap to prevent 1px gap */
    left: -1px;
    /* Slight overlap to prevent 1px gap */
    width: 25px;
    /* 24px + 1px overlap */
    height: 25px;
    background-color: #ffffff;
    /* Mask is applied inline in HTML. No transform here. */
}

.stenzo-blog-read {
    color: rgba(36, 36, 38, 0.5);
    font-size: 14px;
    font-weight: 500;
}

.stenzo-blog-arrow {
    background-color: rgb(219, 74, 43);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    transition: transform 0.3s ease;
}

.stenzo-blog-card:hover {
    transform: translateX(4px) translateY(-4px);
}

@media (max-width: 991px) {
    .stenzo-blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .stenzo-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .stenzo-blog-section {
        padding: 80px 16px;
    }

    .stenzo-blog-header {
        align-items: center;
        text-align: center;
    }

    .stenzo-blog-grid {
        grid-template-columns: 1fr;
    }
}