.aiti-roadmap {
    margin: 12px 0 26px;
}

.aiti-roadmap__shell {
    position: relative;
    border: 1px solid var(--border, #e0e6f5);
    border-radius: 24px;
    padding: 24px 20px 28px;
    overflow: hidden;
    background:
        linear-gradient(to right, rgba(30, 43, 79, 0.06) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(to bottom, rgba(30, 43, 79, 0.06) 1px, transparent 1px) 0 0 / 26px 26px,
        radial-gradient(circle at 10% 0%, rgba(47, 109, 253, 0.1), transparent 44%),
        radial-gradient(circle at 100% 100%, rgba(255, 122, 26, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.95));
    box-shadow: 0 18px 34px rgba(30, 43, 79, 0.09);
}

.aiti-roadmap__shell::before {
    content: "";
    position: absolute;
    inset: 26% 5.2% 13% 5.2%;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360' preserveAspectRatio='none'%3E%3Cg opacity='0.44'%3E%3Crect x='18' y='312' width='46' height='48' rx='7' fill='%237aa7ff'/%3E%3Crect x='88' y='292' width='46' height='68' rx='7' fill='%2395b8ff'/%3E%3Crect x='158' y='272' width='46' height='88' rx='7' fill='%23ffb27d'/%3E%3Crect x='228' y='252' width='46' height='108' rx='7' fill='%23ffc67a'/%3E%3Crect x='298' y='230' width='46' height='130' rx='7' fill='%2396d6c0'/%3E%3Crect x='368' y='208' width='46' height='152' rx='7' fill='%238ec0ff'/%3E%3Crect x='438' y='184' width='46' height='176' rx='7' fill='%23ff9f7a'/%3E%3Crect x='508' y='158' width='46' height='202' rx='7' fill='%23a7c3ff'/%3E%3Crect x='578' y='132' width='46' height='228' rx='7' fill='%23ffd27a'/%3E%3Crect x='648' y='106' width='46' height='254' rx='7' fill='%2394d8b2'/%3E%3Crect x='718' y='80' width='46' height='280' rx='7' fill='%238db8ff'/%3E%3Crect x='788' y='56' width='46' height='304' rx='7' fill='%23ffab84'/%3E%3Crect x='858' y='34' width='46' height='326' rx='7' fill='%23b4caff'/%3E%3Crect x='928' y='18' width='46' height='342' rx='7' fill='%23ffd980'/%3E%3Crect x='998' y='8' width='46' height='352' rx='7' fill='%2398ddb8'/%3E%3Crect x='1068' y='0' width='46' height='360' rx='7' fill='%2392bdff'/%3E%3Crect x='1138' y='0' width='46' height='360' rx='7' fill='%23ffbe88'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.68;
}

.aiti-roadmap__shell::after {
    content: "";
    position: absolute;
    inset: 16% 4% 10% 4%;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360' preserveAspectRatio='none'%3E%3Cpolyline points='20,334 86,334 98,304 154,304 168,270 226,270 242,236 300,236 316,202 376,202 392,168 452,168 468,136 528,136 544,104 604,104 622,74 692,74 710,48 780,48 798,30 878,30 896,22 972,22 992,14 1068,14 1088,8 1166,8' fill='none' stroke='%23ff5a1f' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.88;
}

.aiti-roadmap__header {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    text-align: center;
    margin: 0 auto 16px;
    max-width: 820px;
}

.aiti-roadmap__title {
    margin: 0;
    color: var(--navy, #1e2b4f);
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1.08;
}

.aiti-roadmap__intro {
    margin: 0;
    color: var(--muted, #51607d);
    font-size: 16px;
}

.aiti-roadmap__grid {
    --roadmap-cols: 4;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--roadmap-cols), minmax(220px, 260px));
    justify-content: center;
    align-items: stretch;
    gap: 14px 16px;
    padding: 14px 0 6px;
}

.aiti-roadmap__grid--count-1 {
    --roadmap-cols: 1;
}

.aiti-roadmap__grid--count-2 {
    --roadmap-cols: 2;
}

.aiti-roadmap__grid--count-3 {
    --roadmap-cols: 3;
}

.aiti-roadmap__card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 8px;
    min-height: 246px;
    height: 100%;
    border-radius: 16px;
    padding: 10px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
        linear-gradient(
            135deg,
            rgba(47, 109, 253, 0.48),
            rgba(255, 122, 26, 0.38),
            rgba(47, 109, 253, 0.26)
        )
        border-box;
    box-shadow: 0 8px 18px rgba(30, 43, 79, 0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.aiti-roadmap__card:hover,
.aiti-roadmap__card:focus-within {
    transform: translateY(-4px);
    box-shadow:
        0 14px 30px rgba(30, 43, 79, 0.14),
        0 18px 34px rgba(47, 109, 253, 0.12);
}

.aiti-roadmap__step {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(30, 43, 79, 0.08);
    color: var(--navy, #1e2b4f);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.aiti-roadmap__media {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-soft, #f2f6ff);
    min-height: 92px;
}

.aiti-roadmap__media img {
    display: block;
    width: 100%;
    height: auto;
}

.aiti-roadmap__media-fallback {
    width: 100%;
    height: 100%;
    min-height: 92px;
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 900;
    color: rgba(30, 43, 79, 0.42);
}

.aiti-roadmap__content {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.aiti-roadmap__content h4 {
    margin: 0;
    color: var(--navy, #1e2b4f);
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}

.aiti-roadmap__content p {
    margin: 0;
    color: var(--muted, #51607d);
    line-height: 1.4;
    font-size: 14px;
    text-align: center;
}

.aiti-roadmap__card .button {
    width: 100%;
    border-radius: 11px;
    font-weight: 800;
}

@media (max-width: 1120px) {
    .aiti-roadmap__grid {
        --roadmap-cols: 3;
        grid-template-columns: repeat(var(--roadmap-cols), minmax(210px, 250px));
        gap: 12px;
    }
}

@media (max-width: 782px) {
    .aiti-roadmap__shell {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .aiti-roadmap__grid {
        --roadmap-cols: 1;
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin: 0 auto;
        gap: 12px;
        padding: 0;
    }

    .aiti-roadmap__shell::before {
        opacity: 0.4;
    }

    .aiti-roadmap__title {
        font-size: clamp(22px, 8vw, 28px);
    }

    .aiti-roadmap__card {
        min-height: 0;
    }
}