body,
    html {
        background-color: #f7f9ff;
    }

    body[data-page="index"] .base_container {
        width: calc(100% - 48px);
        max-width: 1440px;
        padding-right: 0;
        padding-left: 0;
    }

    .home-shell {
        color: #0c1933;
    }

    .home-hero {
        position: relative;
        overflow: hidden;
        min-height: 590px;
        margin: 20px 0 0;
        border: 1px solid #e5ebfb;
        border-radius: 36px;
        background-color: #fff;
        box-shadow: 0 30px 80px rgba(32, 68, 145, 0.12);
    }

    .home-hero__grid {
        display: grid;
        min-height: 590px;
        grid-template-columns: minmax(0, 0.88fr) minmax(620px, 1.2fr);
        align-items: center;
    }

    .home-hero__copy {
        position: relative;
        z-index: 2;
        padding: 68px 0 66px 56px;
        background-color: #fff;
    }

    .home-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 26px;
        padding: 10px 16px;
        border: 1px solid #d9e2ff;
        border-radius: 999px;
        background-color: rgba(255, 255, 255, 0.92);
        color: #2357dc;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .home-eyebrow i {
        color: #6c3df0;
    }

    .home-hero__title {
        max-width: 620px;
        margin: 0 0 22px;
        color: #091735;
        font-size: clamp(3.5rem, 5.1vw, 5.4rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.055em;
        word-break: keep-all;
    }

    .home-hero__title span {
        display: block;
        color: #315ce9;
    }

    .home-hero__description {
        max-width: 560px;
        margin: 0 0 30px;
        color: #60708d;
        font-size: 1.16rem;
        font-weight: 500;
        line-height: 1.7;
        word-break: keep-all;
    }

    .home-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 30px;
    }

    .home-btn {
        display: inline-flex;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 0 26px;
        border: 1px solid transparent;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 800;
        text-decoration: none !important;
        transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }

    .home-btn--primary {
        background-color: #315ce9;
        color: #fff !important;
        box-shadow: 0 15px 28px rgba(49, 92, 233, 0.24);
    }

    .home-btn--secondary {
        border-color: #d9e2f4;
        background-color: #fff;
        color: #17305f !important;
    }

    .home-btn:hover,
    .home-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(49, 92, 233, 0.2);
    }

    .home-btn:focus-visible,
    .home-quick-link:focus-visible,
    .workflow-card:focus-visible,
    .feature-link:focus-visible {
        outline: 3px solid rgba(49, 92, 233, 0.32);
        outline-offset: 4px;
    }

    .home-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        margin: 0;
        padding: 0;
        color: #526681;
        font-size: 0.9rem;
        font-weight: 700;
        list-style: none;
    }

    .home-trust li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .home-trust i {
        color: #315ce9;
    }

    .home-hero__visual {
        align-self: stretch;
        min-width: 0;
    }

    .home-hero__visual img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 590px;
        object-fit: cover;
        object-position: 52% center;
    }

    .home-quick-nav {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin: -28px 36px 80px;
        padding: 18px;
        border: 1px solid #e4eafb;
        border-radius: 24px;
        background-color: #fff;
        box-shadow: 0 24px 56px rgba(27, 63, 135, 0.13);
    }

    .home-quick-link {
        display: grid;
        min-height: 104px;
        grid-template-columns: 56px minmax(0, 1fr) 36px;
        gap: 14px;
        align-items: center;
        padding: 18px;
        border: 1px solid #e6ebf7;
        border-radius: 18px;
        background-color: #f8faff;
        color: #0f2142 !important;
        text-decoration: none !important;
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .home-quick-link:hover {
        transform: translateY(-3px);
        border-color: #cdd9ff;
        box-shadow: 0 14px 28px rgba(41, 82, 174, 0.11);
    }

    .home-quick-link__icon,
    .home-quick-link__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .home-quick-link__icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background-color: #315ce9;
        color: #fff;
        font-size: 1.35rem;
        box-shadow: 0 10px 22px rgba(49, 92, 233, 0.2);
    }

    .home-quick-link:nth-child(2) .home-quick-link__icon {
        background-color: #4778ec;
    }

    .home-quick-link:nth-child(3) .home-quick-link__icon {
        background-color: #17a6be;
    }

    .home-quick-link:nth-child(4) .home-quick-link__icon {
        background-color: #6c3df0;
    }

    .home-quick-link strong,
    .home-quick-link small {
        display: block;
    }

    .home-quick-link strong {
        margin-bottom: 5px;
        font-size: 1.04rem;
        line-height: 1.3;
    }

    .home-quick-link small {
        color: #73829d;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .home-quick-link__arrow {
        width: 36px;
        height: 36px;
        border: 1px solid #e1e7f5;
        border-radius: 50%;
        background-color: #fff;
        color: #315ce9;
    }

    .home-section-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        margin: 0 0 30px;
    }

    .home-section-heading__eyebrow {
        display: block;
        margin-bottom: 10px;
        color: #315ce9;
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .home-section-heading h2 {
        margin: 0;
        color: #0b1934;
        font-size: clamp(2rem, 3.2vw, 3.1rem);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: -0.04em;
        word-break: keep-all;
    }

    .home-section-heading p {
        max-width: 520px;
        margin: 0;
        color: #687994;
        font-size: 1rem;
        line-height: 1.7;
        word-break: keep-all;
    }

    .workflow-section {
        margin-bottom: 80px;
    }

    .workflow-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .workflow-card {
        overflow: hidden;
        border: 1px solid #e2e8f7;
        border-radius: 26px;
        background-color: #fff;
        color: #101f3c !important;
        text-decoration: none !important;
        box-shadow: 0 18px 44px rgba(28, 61, 126, 0.09);
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .workflow-card:hover {
        transform: translateY(-6px);
        border-color: #cfd9fb;
        box-shadow: 0 26px 58px rgba(28, 61, 126, 0.15);
    }

    .workflow-card__media {
        overflow: hidden;
        aspect-ratio: 5 / 3;
        background-color: #f4f7ff;
    }

    .workflow-card__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 240ms ease;
    }

    .workflow-card:hover .workflow-card__media img {
        transform: scale(1.025);
    }

    .workflow-card__body {
        padding: 24px 24px 26px;
    }

    .workflow-card__tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 12px;
        color: #315ce9;
        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .workflow-card h3 {
        margin: 0 0 10px;
        color: #0c1b38;
        font-size: 1.38rem;
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .workflow-card p {
        min-height: 52px;
        margin: 0 0 18px;
        color: #6b7c97;
        font-size: 0.94rem;
        line-height: 1.65;
        word-break: keep-all;
    }

    .workflow-card__action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #173ec4;
        font-size: 0.91rem;
        font-weight: 900;
    }

    .feature-section,
    .example-section {
        margin-bottom: 80px;
        padding: 54px;
        border: 1px solid #e2e8f7;
        border-radius: 30px;
        background-color: #fff;
        box-shadow: 0 20px 54px rgba(28, 61, 126, 0.08);
    }

    .feature-title,
    .example-title {
        margin: 0 0 34px;
        color: #0c1b38;
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        font-weight: 900;
        letter-spacing: -0.04em;
        text-align: left;
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .feature-link {
        display: block;
        color: inherit !important;
        text-decoration: none !important;
    }

    .feature-card {
        display: grid;
        min-height: 146px;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 16px;
        align-content: center;
        padding: 22px;
        border: 1px solid #e7ecf8;
        border-radius: 18px;
        background-color: #f8faff;
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }

    .feature-link:hover .feature-card {
        transform: translateY(-3px);
        border-color: #cad6fc;
        background-color: #fff;
        box-shadow: 0 14px 30px rgba(39, 75, 153, 0.1);
    }

    .feature-icon {
        display: inline-flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        grid-row: 1 / span 2;
        border-radius: 14px;
        background-color: #eef2ff;
        color: #315ce9;
        font-size: 1.15rem;
    }

    .feature-card-title {
        align-self: end;
        margin-bottom: 5px;
        color: #152546;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.35;
    }

    .feature-card-desc {
        align-self: start;
        color: #74839a;
        font-size: 0.84rem;
        line-height: 1.5;
        word-break: keep-all;
    }

    .example-section .container,
    .feature-section .container {
        max-width: none;
        padding: 0;
    }

    .example-card {
        display: flex;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
        padding: 16px;
        border: 1px solid #e5ebf7;
        border-radius: 20px;
        background-color: #f8faff;
    }

    .example-img-wrap {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
    }

    .example-img {
        display: block;
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
        background-color: #eef2fb;
    }

    .example-img-wrap video.example-img {
        height: auto;
    }

    .example-label {
        position: absolute;
        right: 12px;
        bottom: 12px;
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 13px;
        border-radius: 999px;
        background-color: rgba(12, 27, 56, 0.86);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 800;
    }

    .home-cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 32px;
        align-items: center;
        margin-bottom: 80px;
        padding: 42px 48px;
        border-radius: 28px;
        background-color: #10275f;
        color: #fff;
        box-shadow: 0 24px 54px rgba(16, 39, 95, 0.22);
    }

    .home-cta h2 {
        margin: 0 0 9px;
        color: #fff;
        font-size: clamp(1.7rem, 3vw, 2.5rem);
        font-weight: 900;
        letter-spacing: -0.04em;
    }

    .home-cta p {
        margin: 0;
        color: #cad7fb;
        font-size: 1rem;
        line-height: 1.65;
    }

    .home-cta .home-btn--primary {
        background-color: #fff;
        color: #173ec4 !important;
        box-shadow: none;
    }

    @media (max-width: 1199px) {
        .home-hero__grid {
            grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
        }

        .home-hero__copy {
            padding-left: 42px;
        }

        .home-hero__title {
            font-size: clamp(3rem, 5vw, 4.3rem);
        }

        .home-quick-nav {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {
        body[data-page="index"] .base_container {
            width: calc(100% - 30px);
        }

        .home-hero__grid {
            grid-template-columns: 1fr;
        }

        .home-hero__copy {
            padding: 56px 42px 18px;
        }

        .home-hero__visual img {
            min-height: 400px;
            object-position: center;
        }

        .workflow-grid,
        .feature-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .home-section-heading {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    @media (max-width: 767px) {
        body[data-page="index"] .base_container {
            width: calc(100% - 22px);
        }

        .home-hero {
            min-height: 0;
            margin-top: 12px;
            border-radius: 24px;
        }

        .home-hero__grid {
            min-height: 0;
        }

        .home-hero__copy {
            padding: 38px 24px 8px;
        }

        .home-eyebrow {
            margin-bottom: 20px;
            padding: 8px 12px;
            font-size: 0.67rem;
        }

        .home-hero__title {
            margin-bottom: 18px;
            font-size: clamp(2.5rem, 13vw, 3.4rem);
            line-height: 1.11;
        }

        .home-hero__description {
            margin-bottom: 24px;
            font-size: 1rem;
        }

        .home-btn {
            min-height: 52px;
            flex: 1 1 auto;
            padding: 0 18px;
        }

        .home-trust {
            display: grid;
            gap: 8px;
        }

        .home-hero__visual img {
            min-height: 310px;
            object-position: 48% center;
        }

        .home-quick-nav {
            grid-template-columns: 1fr;
            margin: -14px 12px 60px;
            padding: 12px;
            border-radius: 20px;
        }

        .home-quick-link {
            min-height: 90px;
        }

        .workflow-grid,
        .feature-grid {
            grid-template-columns: 1fr;
        }

        .workflow-section,
        .feature-section,
        .example-section,
        .home-cta {
            margin-bottom: 60px;
        }

        .feature-section,
        .example-section {
            padding: 28px 18px;
            border-radius: 24px;
        }

        .feature-title,
        .example-title {
            margin-bottom: 24px;
            font-size: 1.65rem;
        }

        .example-card {
            flex-direction: column;
            gap: 14px;
        }

        .home-cta {
            grid-template-columns: 1fr;
            padding: 34px 26px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .home-btn,
        .home-quick-link,
        .workflow-card,
        .workflow-card__media img,
        .feature-card {
            transition: none;
        }
    }