/* ==========================================================================
   Home ES — Módulo CSS
   Infoempresa Redesign 2026 — Figma: ecmI2Idtt5APSlPITfdi8D node 587:12759
   Reescrito 2026-03-23 — fidelidad pixel-perfect al Figma
   ========================================================================== */

/* --------------------------------------------------------------------------
   Helpers globales de la home
   -------------------------------------------------------------------------- */

/* Eliminar padding del main en la home (hero arranca pegado al header) */
body.has-hero-header .alphinus-main {
    padding-top: 0;
    padding-bottom: 0;
}

/* Expandir container a full-width */
body.has-hero-header .alphinus-container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* overflow-x: clip recorta el desbordamiento de 100vw sin crear scroll container interno */
body.has-hero-header {
    overflow-x: clip;
}

/* Evitar scroll horizontal en todas las secciones full-bleed */
.home-hero,
.home-hero__stats-wrap,
.home-solutions,
.home-datasources,
.home-pricing,
.home-faq {
    /* Las secciones full-bleed NO deben crear scroll container propio */
    max-width: 100vw;
}

/* --------------------------------------------------------------------------
   HERO — Figma: Hero Section (node I587:12759;393:2408)
   fill: linear-gradient(167deg, ...) + hero-bg.webp texture
   Layout: padding 112px 80px 0, gap 210px, width 1440
   Header es absolute sobre el hero (has-hero-header), se suma al padding-top
   -------------------------------------------------------------------------- */
.home-hero {
    position: relative;
    z-index: 1; /* dropdown sobrepasa la sección de stats que viene después en el DOM */
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background: url('/cdn/sections/home/es/images/hero-bg.webp') center top / cover no-repeat;
    background-color: #1e2c7c;
    /* Padding Figma: 112px top + header (80px) porque header está sobre el hero */
    padding: calc(var(--skin-header-height) + 112px) 80px 0;
}


.home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Stats están fuera del hero — no gap necesario */
    padding-bottom: 96px;
}

/* Container: text + search bar — Figma layout_EIQ64M: column, center, gap 96px, padding 0 20px */
.home-hero__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 96px;
    padding: 0 20px;
    width: 100%;
}

/* Text block: headline + subheadline — Figma layout_OLBX6R: column, center, gap 32px */
.home-hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    width: 100%;
}

/* Figma: Manrope/H2/Bold — fontSize 65, fontWeight 700, lineHeight 1.3385em, center, color var(--skin-white-500) */
/* layout_9O6SDE: width 1132 */
.home-hero__headline {
    font-family: var(--skin-font-display);
    font-size: 65px;
    font-weight: var(--skin-weight-bold);
    line-height: 1.3385em;
    letter-spacing: -0.02em;
    color: var(--skin-white-500);
    margin: 0;
    max-width: 1132px;
    text-align: center;
}

/* Figma: Manrope/body L/semibold — fontSize 20, fontWeight 600, lineHeight 1.45em, center, var(--skin-white-500) */
/* layout_U2BPOZ: width 932 */
.home-hero__subheadline {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-semibold);
    line-height: 1.45em;
    color: var(--skin-white-500);
    margin: 0;
    max-width: 932px;
    text-align: center;
}

/* Search label — Figma inter/body M/semibold: Inter 16px, fw600, lineHeight 1.25em, left, var(--skin-white-500) */
/* layout_9JLTQK: hug */
.home-hero__search-label {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-semibold);
    line-height: 1.25em;
    color: var(--skin-white-500);
    text-align: left;
    align-self: stretch;
    margin: 0;
}

/* Search column: label + search container — Figma layout_42G1KH: column, gap 16px, width 950 */
.home-hero__search {
    width: 100%;
    max-width: 950px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.home-hero__explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-medium);
    color: var(--skin-darkblue-500);
    text-decoration: none;
    background: #ffffff;
    transition: background 0.2s ease;
}
.home-hero__explore-btn:hover {
    background: #f0f1f5;
}

/* Search container — Figma layout_SWX9H8: row, gap 12px, padding 14px 12px, height 80, bg #FFFFFF */
/* Shadows/shadow-xl, border-radius 12px */
.home-hero__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04),
                0px 8px 8px -4px rgba(10, 13, 18, 0.03),
                0px 20px 24px -4px rgba(10, 13, 18, 0.08);
    padding: 14px 12px;
    height: 80px;
    box-sizing: border-box;
    gap: 12px;
}

/* Input area: input + clear button — fills available space */
.home-hero__search-input-area {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    padding: 0 4px 0 12px;
}

/* Figma: inter/body L/Regular — 20px, fw400, var(--skin-dark-900) */
.home-hero__search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-regular);
    color: var(--skin-dark-900);
    min-width: 0;
}

.home-hero__search-input::placeholder {
    color: #8A8A8A;
}

/* Clear button (×) — 16×16, shown when query not empty */
.home-hero__search-clear {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #8A8A8A;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.15s ease;
}

.home-hero__search-clear:hover {
    color: var(--skin-dark-900);
}

/* Search btn icon — always visible; text hidden on mobile */
.home-hero__search-btn-icon {
    flex-shrink: 0;
    display: none; /* Desktop: hidden (text is enough) */
}

/* Button — Figma layout_NC7Z2K: row, center, gap 8px, padding 12px 24px, fill height, bg var(--skin-darkblue-500), radius 12px */
/* Shadows/shadow-xs */
.home-hero__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--skin-brand-navy);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: var(--skin-weight-semibold);
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: stretch;
    transition: background 0.2s ease;
}

.home-hero__search-btn:hover {
    background: var(--skin-navy-hover);
}

/* Dropdown — Figma layout_GZHOWE: shadow, radius 12px */
.home-hero__suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 8px 8px 0px rgba(10, 13, 18, 0.05),
                0px 20px 24px 0px rgba(10, 13, 18, 0.12);
    z-index: 100;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

/* Dropdown header — "N resultados" — Figma layout_0XT8HM: padding 8px 16px 1px */
.home-hero__suggestions-header {
    padding: 8px 16px;
    border-bottom: 1px solid var(--skin-border-subtle-strong);
    font-family: var(--skin-font-secondary);
    font-size: 12px;
    font-weight: var(--skin-weight-regular);
    color: var(--skin-text-muted);
    line-height: 1.33em;
}

/* Result item — Figma layout_IH1PHT: row, center, fill, gap 12px, padding 12px 44px 12px 16px */
.home-hero__suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 44px 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.home-hero__suggestion-item:hover,
.home-hero__suggestion-item.is-active {
    background: #F9FAFB;
}

/* Icon container — 40×40, radius 8px — Figma: empresa=#E7EFFF, dirigente=#E9EAF2 */
.home-hero__suggestion-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #E7EFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--skin-brand-navy);
}

.home-hero__suggestion-icon--dirigente {
    background: #E9EAF2;
}

/* Text column — name + secondary */
.home-hero__suggestion-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Top row: name + badge inline — Figma Container 838x21: row, center, gap 8px */
.home-hero__suggestion-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* inter/body s/Medium — 14px, fw500, var(--skin-dark-900) — Figma fontWeight=500 */
.home-hero__suggestion-name {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: 500;
    color: var(--skin-dark-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* inter/Caption/Regular — 12px, fw400, var(--skin-text-muted) */
.home-hero__suggestion-secondary {
    font-family: var(--skin-font-secondary);
    font-size: 12px;
    font-weight: var(--skin-weight-regular);
    color: var(--skin-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Type badge — Figma: 12px/400, radius 6px, padding 2px 8px */
/* Placed INSIDE body top row, inline with the name */
.home-hero__suggestion-badge {
    flex-shrink: 0;
    font-family: var(--skin-font-secondary);
    font-size: 12px;
    font-weight: 400;
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
    line-height: 16px;
}

/* Empresa badge — Figma fill=#E7EFFF text=var(--skin-darkblue-500) */
.home-hero__suggestion-badge--empresa {
    background: #E7EFFF;
    color: var(--skin-darkblue-500);
}

/* Dirigente badge — Figma fill=#E9EAF2 text=#1B2871 */
.home-hero__suggestion-badge--dirigente {
    background: #E9EAF2;
    color: #1B2871;
}

/* Footer — "Ver todos los resultados" */
.home-hero__suggestions-footer {
    border-top: 1px solid var(--skin-border-subtle-strong);
    padding: 8px 16px;
    text-align: center;
}

.home-hero__suggestions-all {
    font-family: var(--skin-font-secondary);
    font-size: 13px;
    font-weight: var(--skin-weight-semibold);
    color: var(--skin-brand-navy);
    text-decoration: none;
    transition: color 0.15s ease;
}

.home-hero__suggestions-all:hover {
    color: #3344F6;
}

/* --------------------------------------------------------------------------
   DROPDOWN — Estado sin resultados — Figma: Search bar 102:1881 "Empty & no-result states"
   Container: layout_KZR2TK — column, center, padding 40px 0, width 950 (fill of wrap)
   Inner frame: layout_QL31EH — column, center, gap 12px, padding 0 0 16px
   Divider section: layout_HF4J43 — column, gap 12px, border-top 1px rgba(0,0,0,.06), padding-top 25px
   Chips row: layout_M6CO8F — row, center, gap 12px, padding 0 176px
   -------------------------------------------------------------------------- */
.home-hero__no-results {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    z-index: 100;
    /* layout_KZR2TK: column, center, padding 40px 0 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    overflow: hidden;
}

/* Inner column: icon + title + desc — layout_QL31EH: column, center, gap 12px, padding-bottom 16px */
.home-hero__no-results-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    width: 618px;
    max-width: 100%;
}

/* Search icon — 64×64px, border-radius 50% included in SVG */
.home-hero__no-results-icon {
    flex-shrink: 0;
    display: block;
}

/* "No results found" — inter/body M/semibold: 16px, fw600, var(--skin-dark-900) */
.home-hero__no-results-title {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-semibold);
    line-height: 1.25em;
    color: var(--skin-dark-900);
    margin: 0;
    text-align: center;
}

/* Description text — inter/body M/Regular: 16px, fw400, var(--skin-text-muted) */
.home-hero__no-results-desc {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-regular);
    line-height: 1.25em;
    color: var(--skin-text-muted);
    margin: 0;
    text-align: center;
}

/* Suggestions section — layout_HF4J43: column, gap 12px, padding-top 25px, border-top */
.home-hero__no-results-suggestions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    width: 618px;
    max-width: 100%;
}

/* "Try searching for:" hint — inter/Caption/Regular: 12px, fw400, var(--skin-text-muted) */
.home-hero__no-results-hint {
    font-family: var(--skin-font-secondary);
    font-size: 12px;
    font-weight: var(--skin-weight-regular);
    line-height: 1.333em;
    color: var(--skin-text-muted);
    margin: 0;
    text-align: center;
}

/* Chips row — layout_M6CO8F: row, center, gap 12px */
.home-hero__no-results-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Each chip button — layout_OY8RUO: row, center, padding 8px 12px, radius 6px, fill #F3F3F3 */
/* inter/body s/Medium: 14px, fw500, var(--skin-dark-900), TITLE case */
.home-hero__no-results-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #F3F3F3;
    border: none;
    cursor: pointer;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: var(--skin-weight-medium);
    line-height: 1.214em;
    color: var(--skin-dark-900);
    white-space: nowrap;
    transition: background 0.15s ease;
}

.home-hero__no-results-chip:hover {
    background: var(--skin-border-subtle-strong);
}

/* --------------------------------------------------------------------------
   STATS (Numbers) — Figma: layout_NSRGUT
   Fuera del hero, sobre fondo blanco. Full-bleed wrapper + inner centrado.
   Figma Numbers frame: 1280×230px — alineado con max-width 1280px igual que
   el resto de secciones (hero inner, solutions, datasources, pricing, faq).
   row, justify center, gap 20px, padding 24px 80px, fill
   -------------------------------------------------------------------------- */
.home-hero__stats-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding-top: 90px;
}

/* Inner container — mismo patrón que .home-solutions__inner, .home-datasources__inner, etc.
   max-width 1280px + margin auto + padding horizontal 80px = alineación exacta con el resto */
.home-hero__stats-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
}

.home-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 20px;
    padding: 24px 0;
}

/* Each stat container — flex column: label, value, sublabel + divider al final */
/* Figma: border-bottom 1px var(--skin-border-subtle-strong), padding-bottom 16px */
/* align-items: stretch on grid makes all cells same height.
   flex-direction: column + margin-top: auto on value ensures the big number
   always starts at the same vertical position regardless of label line count. */
/* Hover: sombra suave con elevación — design system shadow-md + translateY(-3px) */
.home-hero__stat-item {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 16px;
    border-bottom: 1px solid var(--skin-border-subtle-strong);
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: default;
}

.home-hero__stat-item:hover {
    box-shadow: var(--skin-shadow-md);
    transform: translateY(-3px);
}

/* stat label */
.home-hero__stat-label {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-semibold);
    line-height: 1.45em;
    color: var(--skin-dark-900);
    margin: 0 0 8px;
}

/* stat value — margin-top: auto pushes the value + sublabel block down
   so the big number aligns at the same vertical position across all cards
   even when the label above wraps to a different number of lines */
.home-hero__stat-value {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-4xl);
    font-weight: var(--skin-weight-bold);
    line-height: 1.2em;
    color: var(--skin-dark-900);
    margin: auto 0 0;
}

/* stat sublabel */
.home-hero__stat-sublabel {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-medium);
    line-height: 1.25em;
    color: var(--skin-text-muted);
    margin: 16px 0 0;
}

/* --------------------------------------------------------------------------
   SECTION HEADERS — reutilizables
   Figma: layout_MUWOG0 — column, center, stretch, gap 16px
   -------------------------------------------------------------------------- */
.home-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    text-align: center;
}

/* H5/Bold — 40px, fw700, lineHeight 1.2em */
.home-section-title {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-h5);
    font-weight: var(--skin-weight-bold);
    line-height: 1.2em;
    color: var(--skin-dark-900);
    margin: 0;
}

/* body L/Medium — 20px, fw500, lineHeight 1.45em */
.home-section-subtitle {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-medium);
    line-height: 1.45em;
    color: var(--skin-text-muted);
    margin: 0;
    max-width: 680px;
}

/* --------------------------------------------------------------------------
   SOLUTIONS — Figma: solution section (layout_9X2NBQ)
   column, stretch, gap 48px, padding 80px, background #FFFFFF (default)
   Cards grid: layout_ZTBVZ8 — row, center, wrap, gap 48px
   -------------------------------------------------------------------------- */
.home-solutions {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 80px;
    background: #FFFFFF;
}

.home-solutions__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.home-solutions__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
}

/* Sol card — Figma: column, stretch, gap 16px, width 350, hug height */
.home-sol-card {
    width: 350px;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.2s ease;
}

.home-sol-card:hover {
    transform: translateY(-4px);
    color: inherit;
}

/* Image container — Figma: fill width, borderRadius 24px, image fill */
.home-sol-card__img {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    flex-shrink: 0;
}

/* Text block — Figma: column, fill, gap 16px */
.home-sol-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
}

/* Manrope/body L/Bold — 20px fw700, var(--skin-dark-900) */
.home-sol-card__title {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-bold);
    color: var(--skin-dark-900);
    margin: 0;
    line-height: 1.45em;
}

/* Inter/body M/Regular — 16px fw400, var(--skin-text-muted) */
.home-sol-card__desc {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-regular);
    color: var(--skin-text-muted);
    line-height: 1.25em;
    margin: 0;
}

/* --------------------------------------------------------------------------
   DATASOURCES — Figma: OfficialDataSection (layout_0LOWE2)
   column, center, stretch, gap 48px, padding 80px, bg #F9FAFB
   Cards grid: layout_KJSQYI — row, center, wrap, gap 24px
   -------------------------------------------------------------------------- */
.home-datasources {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 80px;
    background: #F9FAFB;
}

.home-datasources__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.home-datasources__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    align-self: stretch;
}

/* DS Card — Figma layout_8D8ADL: column, space-between, stretch, gap 32px, padding 32px 24px, 300x438 */
/* bg #FFFFFF, radius 16px, shadow-xs */
.home-ds-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 300px;
    height: 438px;
    flex-shrink: 0;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

/* Top: icon + title — layout_O2UDNN: column, stretch, gap 12px */
.home-ds-card__top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

/* Bottom: desc + link — layout_QXUMMA: column, stretch, gap 37px */
.home-ds-card__bottom {
    display: flex;
    flex-direction: column;
    gap: 37px;
    align-self: stretch;
}

/* Icon container — layout_PCVMYN: row, center, 48x48, bg #E7EFFF, radius 12px */
.home-ds-card__logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--skin-tag-blue-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--skin-brand-navy);
}

/* Manrope/H7/semibold — 28px, fw600, lineHeight 1.214em, left, var(--skin-darkblue-500) */
.home-ds-card__title {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-h7);
    font-weight: var(--skin-weight-semibold);
    color: var(--skin-brand-navy);
    margin: 0;
    line-height: 1.214em;
    text-align: left;
}

/* inter/body M/Regular — 16px, fw400, lineHeight 1.25em, left, var(--skin-text-muted) */
.home-ds-card__desc {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-regular);
    color: var(--skin-text-muted);
    line-height: 1.25em;
    margin: 0;
    text-align: left;
}

/* --------------------------------------------------------------------------
   PRICING — Figma: Pricing Section (layout_5CEAIS / layout_SBJI88)
   row, center, padding 80px, bg #F9FAFB, container column gap 48px padding 0 20px
   Cards: 342x248px, gap 48px
   -------------------------------------------------------------------------- */
.home-pricing {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 80px;
    background: #F9FAFB;
}

/* layout_4QR8PX: column, center, gap 48px, hug — outer section provides 80px padding */
.home-pricing__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

/* Section header for pricing — Figma layout_8HU49W: column, center, stretch, gap 16px */
.home-pricing__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    text-align: center;
}

/* Figma: Manrope/H5/Bold — 40px, fw700, lineHeight 1.2em, center, var(--skin-dark-900) */
.home-pricing__title {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-h5);
    font-weight: var(--skin-weight-bold);
    line-height: 1.2em;
    color: var(--skin-dark-900);
    margin: 0;
    text-align: center;
    max-width: 1152px;
}

/* Figma: Manrope/body L/Medium — 20px, fw500, lineHeight 1.45em, center, var(--skin-text-muted) */
.home-pricing__subtitle {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-medium);
    line-height: 1.45em;
    color: var(--skin-text-muted);
    margin: 0;
    text-align: center;
}

/* Cards grid — layout_FNCHTK: row, gap 48px, hug — Fix 1: uniform gap */
.home-pricing__grid {
    display: flex;
    flex-direction: row;
    gap: 48px;
    justify-content: center;
    align-items: flex-start;
}

/* Card wrapper — holds the card + details panel below it */
.home-product-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    width: 343px;
}

/* Base card — layout_VVS3FN: 343x248, radius 12px */
.home-product-card {
    position: relative;
    width: 343px;
    height: 248px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    text-decoration: none;
    display: block;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.home-product-card:hover {
    box-shadow: 0 8px 28px rgba(10, 13, 18, 0.16);
    transform: translateY(-3px);
}

/* Photographic background image */
.home-product-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.home-product-card--annual .home-product-card__bg {
    transform: rotate(180deg);
}

/* Color overlay */
.home-product-card__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Card variant 1 — Annual Accounts: white bg + blue overlay */
.home-product-card--annual {
    background: #FFFFFF;
}

.home-product-card--annual .home-product-card__overlay {
    background: var(--skin-brand-navy);
    mix-blend-mode: color;
    opacity: 0.5;
}

/* Card variant 2 — Full Financial: dark navy bg, radius 10px */
/* Figma: SOFT_LIGHT de #B9BED6 sobre textura. background-blend-mode aplica dentro del elemento. */
.home-product-card--financial {
    background: #242947;
    border-radius: 10px;
}

.home-product-card--financial .home-product-card__overlay {
    background: var(--skin-darkblue-100);
    mix-blend-mode: soft-light;
}

/* Content layer — layout_RHXRUM: absolute, x:16, y:12, 311x222 */
.home-product-card__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 16px;
    z-index: 2;
}

/* Info block — layout_4F7PWP: column, justify flex-end, gap 48px, padding 10px 0 */
/* Fix 2: badges div removed — info block now fills the full content area */
.home-product-card__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 48px;
    justify-content: flex-end;
    padding: 10px 0;
}

/* Details dropdown panel — expands below the card */
.home-product-card__details {
    background: #FFFFFF;
    border: 1px solid var(--skin-border-subtle-strong);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 16px 20px 20px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.home-product-card__details-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-product-card__details-list li {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-sm);
    font-weight: var(--skin-weight-regular);
    line-height: 1.5em;
    color: var(--skin-dark-900);
    padding-left: 20px;
    position: relative;
}

.home-product-card__details-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--skin-brand-navy);
    flex-shrink: 0;
}

/* Details panel transition helpers */
.pricing-details-enter      { transition: opacity .25s ease, max-height .3s ease; overflow: hidden; }
.pricing-details-enter-start{ opacity: 0; max-height: 0; }
.pricing-details-enter-end  { opacity: 1; max-height: 300px; }
.pricing-details-leave      { transition: opacity .2s ease, max-height .25s ease; overflow: hidden; }
.pricing-details-leave-start{ opacity: 1; max-height: 300px; }
.pricing-details-leave-end  { opacity: 0; max-height: 0; }

/* Actions row: toggle button — Figma layout_2764DQ: row, space-between, center, fill */
.home-product-card__actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/* inter/body M/Medium — 16px, fw500 */
.home-product-card__toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--skin-white-500);
    cursor: pointer;
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-medium);
    padding: 0;
    transition: color 0.2s ease;
}

.home-product-card__toggle-btn:hover {
    color: var(--skin-white-500);
}

.home-product-card__toggle-icon {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.home-product-card__toggle-icon.is-open {
    transform: rotate(180deg);
}

.home-product-card__title-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Manrope/H8/Bold — 24px, fw700, lineHeight 1.208em, var(--skin-white-500) */
.home-product-card__title {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-2xl);
    font-weight: var(--skin-weight-bold);
    line-height: 1.208em;
    color: var(--skin-white-500);
    margin: 0;
}

/* inter/H8/semibold — 24px, fw600, lineHeight 1.208em, var(--skin-white-500) */
.home-product-card__price {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-2xl);
    font-weight: var(--skin-weight-semibold);
    line-height: 1.208em;
    color: var(--skin-white-500);
    margin: 0;
}

/* CTA — white bg, border var(--skin-border-subtle-strong), radius 12px, height 48px */
.home-product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 12px;
    font-family: var(--skin-font-primary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-semibold);
    color: var(--skin-dark-900);
    text-decoration: none;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.home-product-card__cta:hover {
    background: var(--skin-white-500);
    color: var(--skin-dark-900);
}

/* --------------------------------------------------------------------------
   FAQ — Figma: Faq Section (layout_G9WP2E)
   column, center, stretch, padding 96px 80px
   Inner: layout_RU67EL — row, center, gap 96px
   Left col: 503px (Container), right: 1fr (accordion)
   -------------------------------------------------------------------------- */
.home-faq {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 96px 80px;
    background: #FFFFFF;
}

.home-faq__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    /* Left col approx 503px based on Figma, right fills rest */
    grid-template-columns: 503px 1fr;
    gap: 96px;
    align-items: start;
}

/* Left column — sticky, top-aligned */
.home-faq__left {
    position: sticky;
    top: calc(var(--skin-header-height) + 24px);
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 16px;
}

/* Manrope/H5/Bold — 40px, fw700, lineHeight 1.2em, var(--skin-dark-900) */
.home-faq__title {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-h5);
    font-weight: var(--skin-weight-bold);
    line-height: 1.2em;
    color: var(--skin-dark-900);
    margin: 0;
    text-align: left;
}

/* FAQ subtitle — Inter body M/Regular, muted, below title */
.home-faq__subtitle {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-regular);
    color: var(--skin-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Manrope/body L/Medium — 20px, fw500, lineHeight 1.45em, var(--skin-text-muted) */
.home-faq__contact-text {
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-medium);
    line-height: 1.45em;
    color: var(--skin-text-muted);
    margin: 0;
    text-align: center;
}

.home-faq__contact-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--skin-brand-navy);
    color: #FFFFFF;
    font-family: var(--skin-font-primary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-semibold);
    text-decoration: none;
    transition: background 0.2s ease;
    height: 52px;
    box-sizing: border-box;
}

.home-faq__contact-btn:hover {
    background: var(--skin-navy-hover);
    color: #FFFFFF;
}

/* Accordion list */
.home-faq__list {
    display: flex;
    flex-direction: column;
}

.home-faq__item {
    border-bottom: 1px solid var(--skin-border-subtle-strong);
}

.home-faq__item:first-child {
    border-top: 1px solid var(--skin-border-subtle-strong);
}

/* Question button — Manrope — 20px, fw400 (expanded: fw500), left, var(--skin-dark-900) */
.home-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--skin-font-display);
    font-size: var(--skin-text-xl);
    font-weight: var(--skin-weight-regular);
    color: var(--skin-dark-900);
    gap: 16px;
    transition: color 0.2s ease;
}

.home-faq__question[aria-expanded="true"] {
    font-weight: var(--skin-weight-medium);
}

/* Icon — 26x26, #303B4F */
.home-faq__icon {
    color: #303B4F;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

.home-faq__answer {
    padding: 0 0 24px;
}

/* inter/body M/Regular — 16px, fw400, lineHeight 1.25em, var(--skin-dark-900) */
.home-faq__answer p {
    font-family: var(--skin-font-secondary);
    font-size: var(--skin-text-md);
    font-weight: var(--skin-weight-regular);
    color: var(--skin-dark-900);
    line-height: 1.5em;
    margin: 0;
}

/* FAQ transition helpers */
.faq-enter      { transition: opacity .25s ease, max-height .25s ease; }
.faq-enter-start{ opacity: 0; max-height: 0; }
.faq-enter-end  { opacity: 1; max-height: 400px; }
.faq-leave      { transition: opacity .2s ease, max-height .2s ease; }
.faq-leave-start{ opacity: 1; max-height: 400px; }
.faq-leave-end  { opacity: 0; max-height: 0; }

/* --------------------------------------------------------------------------
   HORIZONTAL SCROLL WRAPPER + ARROWS — Figma: node 647:21286
   Flechas de navegación para scrolls horizontales en móvil.
   En desktop: ocultas (display: none). Solo visibles en max-width: 768px.
   Wrapper: position relative para las flechas absolutas.
   Arrow button: 40x40, bg #FFFFFF, shadow, radius 50%, arrow SVG 24x24 fill var(--skin-darkblue-500).
   -------------------------------------------------------------------------- */

/* Wrapper — ocupa todo el ancho disponible, posición relativa para las flechas */
.home-scroll-wrapper {
    position: relative;
    width: 100%;
}

/* Barra de navegación inferior — flechas + dots en línea, debajo del track */
/* Figma layout_ACSZL6: row, center, center, gap 24px, alignSelf stretch */
.home-scroll-nav {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-top: 16px;
    width: 100%;
}

/* Flecha base — inline en la barra nav (no absolute) */
.home-scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: var(--skin-darkblue-500);
    transition: opacity 0.2s ease;
    width: 24px;
    height: 24px;
}

.home-scroll-arrow.is-invisible {
    visibility: hidden;
    pointer-events: none;
}

.home-scroll-arrow:hover {
    opacity: 0.7;
}

.home-scroll-arrow:active {
    opacity: 0.5;
}

/* Dots container — Figma layout_9BX8T2: row, center, gap 8px */
.home-scroll-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Dot — Figma layout_TRZL0D: 8×8px, radius 16777200 (full circle), fill #DDDDDD */
.home-scroll-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #DDDDDD;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, width 0.2s ease;
}

/* Active dot — Figma layout_7C89ZU: horizontal fill (pill), fill var(--skin-darkblue-500) */
.home-scroll-dot.is-active {
    background: var(--skin-darkblue-500);
    width: 24px;
}

/* Stats wrapper */
.home-scroll-wrapper--stats {
    padding: 0;
}

/* Solutions wrapper */
.home-scroll-wrapper--solutions {
    padding: 0;
}

/* --------------------------------------------------------------------------
   CAROUSEL NAV — oculto en desktop, visible en mobile via media query
   Figma: layout_IOIFK9 row, center, gap 24px. Dots: 8px circles, active pill var(--skin-darkblue-500)
   -------------------------------------------------------------------------- */
.home-carousel-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 16px 0;
}

.home-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 128px;
    background: #828E94;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, width 0.2s;
}

.home-carousel-dot.is-active {
    background: var(--skin-brand-navy);
    width: 24px;
    border-radius: 9999px;
}

.home-carousel-arrow {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #828E94;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.home-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Tablet (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Stats inner — alineado con secciones que reducen padding a 40px en tablet */
    .home-hero__stats-inner {
        padding: 0 40px;
    }

    .home-hero {
        padding: calc(var(--skin-header-height) + 80px) 40px 0;
    }
    .home-hero__headline {
        font-size: var(--skin-text-4xl);
    }
    .home-pricing__grid {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .home-product-card-wrap {
        width: 343px;
    }
    .home-faq__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .home-faq__left {
        position: static;
    }
    .home-solutions,
    .home-datasources,
    .home-pricing,
    .home-faq {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Tablet (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Hero */
    .home-hero {
        padding: calc(var(--skin-header-height) + 56px) 16px 0;
    }
    .home-hero__top {
        gap: 56px;
        padding: 0;
    }
    .home-hero__text {
        gap: 32px;
    }
    .home-hero__headline {
        font-size: var(--skin-text-h5);
        line-height: 1.3em;
    }
    .home-hero__subheadline {
        font-size: var(--skin-text-md);
        font-weight: var(--skin-weight-regular);
    }
    .home-hero__search {
        max-width: 100%;
    }
    .home-hero__search-wrap {
        height: 54px;
        padding: 12px;
    }
    .home-hero__search-input {
        font-size: var(--skin-text-md);
    }
    .home-hero__search-btn-text {
        display: none;
    }
    .home-hero__search-btn-icon {
        display: block;
    }
    .home-hero__search-btn {
        padding: 0 14px;
        min-width: 48px;
    }
    .home-hero__inner {
        padding-bottom: 56px;
    }

    /* Stats — 2×2 grid en móvil */
    .home-hero__stats-wrap {
        padding-top: 40px;
    }
    /* Inner padding 16px en móvil — igual que otras secciones */
    .home-hero__stats-inner {
        padding: 0 16px;
    }
    /* Disable scroll wrapper clipping so the grid lays out normally */
    .home-scroll-wrapper--stats {
        overflow: visible;
    }
    .home-hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        overflow: visible;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: auto;
        padding: 24px 0;
    }
    .home-hero__stat-item {
        width: 100%;
        min-width: 0;
        flex-shrink: unset;
        scroll-snap-align: none;
    }

    /* Ocultar nav bar (flechas + dots) en grid mode */
    .home-scroll-wrapper--stats .home-scroll-nav {
        display: none;
    }
    /* Nav bar solutions — visible en móvil, debajo del track */
    .home-scroll-wrapper--solutions .home-scroll-nav {
        display: flex;
    }
    .home-hero__stat-value {
        font-size: 36px;
    }
    .home-hero__stat-label {
        font-size: var(--skin-text-md);
    }
    .home-hero__stat-sublabel {
        font-size: var(--skin-text-sm);
    }

    /* Section titles */
    .home-section-title,
    .home-pricing__title,
    .home-faq__title {
        font-size: var(--skin-text-2xl);
    }
    .home-section-subtitle,
    .home-pricing__subtitle {
        font-size: var(--skin-text-md);
    }

    /* Solutions — horizontal scroll (Figma: row, overflowScroll x, gap 24px, width 288px) */
    .home-solutions {
        padding: 40px 0;
    }
    .home-solutions__inner {
        gap: 24px;
        padding: 0 16px;
        overflow: visible;
    }
    /* Wrapper — overflow visible so nav bar extends naturally below */
    .home-scroll-wrapper--solutions {
        overflow: visible;
    }
    .home-solutions__grid {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 4px 0 16px;
        /* Hide scrollbar visually but keep functional */
        scrollbar-width: none;
        align-items: flex-start;
    }
    .home-solutions__grid::-webkit-scrollbar {
        display: none;
    }
    .home-sol-card {
        flex-shrink: 0;
        width: 260px;
        scroll-snap-align: start;
    }
    .home-sol-card__img {
        height: 180px;
        border-radius: 19px;
    }

    /* Datasources — vertical stack (Figma: column, alignSelf stretch, height 270px per card) */
    .home-datasources {
        padding: 40px 16px;
    }
    .home-datasources__inner {
        gap: 24px;
    }
    .home-datasources__grid {
        gap: 16px;
        flex-direction: column;
        align-items: stretch;
    }
    .home-ds-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 20px 16px;
    }
    .home-ds-card__bottom {
        gap: 20px;
        margin-top: 16px;
    }
    .home-ds-card__title {
        font-size: 22px;
    }

    /* Pricing — stacked cards */
    .home-pricing {
        padding: 40px 16px;
    }
    .home-pricing__inner {
        gap: 32px;
    }
    .home-pricing__grid {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        width: 100%;
    }
    .home-product-card-wrap {
        width: 100%;
    }
    .home-product-card {
        width: 100%;
        max-width: 100%;
        height: 248px;
    }

    /* FAQ — single column */
    .home-faq {
        padding: 40px 16px;
    }
    .home-faq__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .home-faq__left {
        position: static;
        align-items: flex-start;
        text-align: left;
    }
    .home-faq__title {
        text-align: left;
    }
    .home-faq__question {
        font-size: var(--skin-text-md);
        padding: 16px 0;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Mobile 375px (Figma node 647:19776)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Hero — Figma Container 288×446, text gap 32px, content gap 56px */
    .home-hero {
        padding: calc(var(--skin-header-height) + 40px) 16px 0;
    }
    .home-hero__top {
        gap: 40px;
        padding: 0;
    }
    /* Figma mobile: text block centered */
    .home-hero__text {
        gap: 24px;
        align-items: center;
        text-align: center;
    }
    .home-hero__headline {
        font-size: var(--skin-text-h5);
        line-height: 1.3em;
        text-align: center;
    }
    .home-hero__subheadline {
        font-size: 15px;
        font-weight: var(--skin-weight-regular);
        text-align: center;
    }
    .home-hero__search-label {
        font-size: var(--skin-text-sm);
    }
    .home-hero__inner {
        padding-bottom: 40px;
    }

    /* Stats — 2×2 grid compact (inherits grid layout from 768px breakpoint) */
    .home-hero__stats-wrap {
        padding-top: 32px;
    }
    .home-hero__stats {
        gap: 12px;
        padding: 24px 0;
    }
    /* width: 100% + min-width: 0 already set at 768px — no fixed width override needed */
    .home-hero__stat-label {
        font-size: var(--skin-text-md);
    }
    .home-hero__stat-value {
        font-size: var(--skin-text-h5);
    }
    .home-hero__stat-sublabel {
        font-size: var(--skin-text-md);
    }

    /* Solutions — horizontal scroll at 480px: override card width only, rest inherited from 768px */
    .home-solutions__grid {
        justify-content: flex-start;
    }
    .home-sol-card {
        width: 220px;
        min-width: 0;
    }
    .home-sol-card__img {
        height: 150px;
        border-radius: 16px;
    }
    .home-solutions .home-carousel-nav { display: none; }

    /* Datasources — vertical stack (Figma: column layout, cards stretch to full width) */
    .home-datasources {
        padding: 40px 16px;
    }
    .home-datasources__inner {
        gap: 24px;
    }
    .home-datasources__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        gap: 16px;
        padding: 0;
        width: 100%;
    }
    .home-ds-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        height: auto;
        flex-shrink: 1;
        padding: 20px 16px;
        scroll-snap-align: none;
    }
    .home-ds-card__title {
        font-size: var(--skin-text-xl);
    }
    .home-datasources .home-carousel-nav { display: none; }

    /* Pricing — stack vertical */
    .home-pricing {
        padding: 40px 16px;
    }
    .home-pricing__inner {
        gap: 24px;
    }
    .home-pricing__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        gap: 16px;
        padding: 0;
        width: 100%;
        align-items: stretch;
    }
    .home-product-card-wrap {
        width: 100%;
    }
    .home-product-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        height: 248px;
        flex-shrink: 1;
    }

    /* FAQ — Figma: Faq Section pad 40/16, gap 32, single column */
    .home-faq {
        padding: 40px 16px;
    }
    .home-faq__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .home-faq__left {
        position: static;
        align-items: flex-start;
        text-align: left;
    }
    .home-faq__title {
        font-size: var(--skin-text-2xl);
        text-align: left;
    }
    .home-faq__question {
        font-size: var(--skin-text-md);
        padding: 16px 0;
        gap: 12px;
    }
    .home-faq__icon {
        width: 20px;
        height: 20px;
    }

    /* Section titles */
    .home-section-title,
    .home-pricing__title {
        font-size: var(--skin-text-2xl);
        font-weight: var(--skin-weight-semibold);
    }
    .home-section-subtitle,
    .home-pricing__subtitle {
        font-size: 15px;
    }
}