/* Design base: 584 × 446 (Figma 2168:17) — width synced to homepage slider via JS */

.home-ai-modal-bg {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Opaque enough that white header vs dark hero don't look split */
    background: rgba(0, 0, 0, 0.62);
}

.home-ai-modal-bg.is-open {
    display: flex;
}

.home-ai-modal {
    position: relative;
    width: var(--home-ai-modal-width, calc(100vw - 40px));
    max-width: var(--home-ai-modal-width, calc(100vw - 40px));
    margin: auto;
    flex-shrink: 0;
    container-type: inline-size;
    container-name: home-ai-modal;
}

.home-ai-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    transform: translate(50%, -50%);
    width: clamp(28px, 6.51cqw, 38px);
    height: clamp(28px, 6.51cqw, 38px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.home-ai-modal__close img {
    display: block;
    width: 100%;
    height: 100%;
}

.home-ai-modal__card {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 584 / 446;
    height: auto;
    max-height: calc(100vh - 40px);
    border-radius: clamp(12px, 3.42cqw, 20px);
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 14, 54, 0.18);
    container-type: inline-size;
    container-name: home-ai-modal-card;
}

.home-ai-modal__bg-top,
.home-ai-modal__bg-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.home-ai-modal__bg--mobile {
    display: none;
}

.home-ai-modal__bg-top {
    top: 0;
    height: 100%;
    overflow: hidden;
}

.home-ai-modal__bg-top img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-ai-modal__bg-bottom {
    top: 24.44%; /* 109/446 */
    height: 75.56%; /* 337/446 */
    overflow: hidden;
}

.home-ai-modal__bg-bottom img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.home-ai-modal__star {
    position: absolute;
    z-index: 1;
    width: 3.46cqw;
    height: 3.64cqw;
}

.home-ai-modal__star--left {
    top: 7.85%;
    left: 5.31%;
}

.home-ai-modal__star--right {
    top: 31.5%;
    left: 82%;
    right: auto;
}

.home-ai-modal__badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18.15%;
    min-height: 4.26%;
    margin: 3.36% auto 0;
    border: 0.3px solid #9547f9;
    border-radius: 999px;
    background: linear-gradient(90deg, #c04cfc 0%, #2996f9 100%);
    color: #fff;
    /* Figma: Inter Medium 10.588px / tracking 0.2118px */
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: clamp(10px, 1.813cqw, 14px);
    font-weight: 500;
    letter-spacing: 0.2118px;
    line-height: 1.2;
}

.home-ai-modal__title {
    position: relative;
    z-index: 1;
    margin: 2.69% 0 0;
    text-align: center;
    /* Figma: Inter Black 41.814px / tracking 0.8363px */
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: clamp(22px, 7.16cqw, 41.814px);
    font-weight: 900;
    letter-spacing: 0.8363px;
    line-height: 1.2;
}

.home-ai-modal__title-main {
    color: #000e36;
}

.home-ai-modal__title-accent {
    background: linear-gradient(90deg, #8641fa 5.88%, #0584fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-ai-modal__subtitle {
    position: relative;
    z-index: 1;
    margin: 2.69% 0 0;
    padding: 0 2.74%;
    text-align: center;
    color: #000e36;
    /* Figma: Noto Sans Regular 16px / tracking 0.32px */
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(12px, 2.74cqw, 16px);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.32px;
    line-height: 1.2;
    white-space: nowrap;
}

.home-ai-modal__features {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 2.57%;
    margin: 5.5% 0 0;
    padding: 0 2.74%;
    list-style: none;
}

.home-ai-modal__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 19.69%;
    min-height: 0;
    padding: 1.37% 1.37% 1.71%;
    border-radius: 6.6px;
    background: #fff;
    text-align: center;
}

.home-ai-modal__feature--purple {
    box-shadow: 0 0 5.3px rgba(130, 67, 250, 0.2);
}

.home-ai-modal__feature--blue {
    box-shadow: 0 0 5.3px rgba(77, 95, 252, 0.2);
}

.home-ai-modal__feature--cyan {
    box-shadow: 0 0 5.3px rgba(12, 128, 254, 0.2);
}

.home-ai-modal__feature img {
    display: block;
    width: 8.56cqw;
    height: 8.56cqw;
}

.home-ai-modal__feature span {
    margin-top: 1.37cqw;
    color: #000e36;
    /* Figma: Noto Sans Medium 13.172px / tracking 0.2634px */
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(10px, 2.255cqw, 13.172px);
    font-weight: 500;
    letter-spacing: 0.2634px;
    line-height: 1.2;
}

.home-ai-modal__cta {
    position: absolute;
    top: 58.52%; /* 261/446 */
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 39.04%;
    height: 7.49%; /* 33.4/446 */
    margin: 0;
    padding: 0 2.5%;
    transform: translateX(-50%);
    border: 0.8px solid #9547f9;
    border-radius: 999px;
    background: linear-gradient(90deg, #c04cfc 0%, #2698f9 100%);
    color: #fff;
    /* Figma: Inter Semi Bold 18px / tracking 0.36px */
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: clamp(13px, 3.082cqw, 18px);
    font-weight: 600;
    letter-spacing: 0.36px;
    line-height: 1.2;
    text-decoration: none;
}

.home-ai-modal__cta:hover {
    opacity: 0.92;
    color: #fff;
    text-decoration: none;
}

.home-ai-modal__cta span {
    flex: 1;
    text-align: center;
}

.home-ai-modal__cta img {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 45%;
}

.home-ai-modal__compare {
    position: absolute;
    top: 63%; /* 281/446 — keep birds centered on bg circles */
    left: 0;
    width: 100%;
    height: 37%; /* to bottom; both circles fully visible */
    z-index: 1;
    margin: 0;
    padding: 0;
}

.home-ai-modal__compare-before,
.home-ai-modal__compare-after {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-ai-modal__compare-before {
    top: 0;
    left: 12.52%; /* 73.13/584 */
    width: 16.35%; /* 95.5/584 */
    height: 92.4%; /* 152.5 / (446-281) */
}

.home-ai-modal__compare-after {
    top: 4.24%; /* (288-281)/(446-281) */
    left: 64.81%; /* 378.53/584 */
    width: 22.78%; /* 133.06/584 */
    height: 88.2%; /* 145.56 / (446-281) */
    align-items: stretch;
}

.home-ai-modal__logo-after-frame {
    position: absolute;
    top: 0;
    left: 9.16%;
    display: block;
    width: 81.59%;
    height: 81.38%;
}

.home-ai-modal__logo-after-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.home-ai-modal__jpg {
    position: relative;
    width: 100%;
    height: 83.49%; /* 127.33/152.5 */
}

.home-ai-modal__jpg-frame {
    display: block;
    width: 100%;
    height: 100%;
}

.home-ai-modal__jpg-logo {
    position: absolute;
    top: 15.6%; /* (300.86-281)/127.33 */
    left: 50%;
    width: 66.6%; /* 63.59/95.5 */
    height: auto;
    aspect-ratio: 64 / 71;
    transform: translateX(-50%);
    object-fit: contain;
    opacity: 0.9;
}

.home-ai-modal__jpg-ext {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23.87%;
    color: #fff;
    /* Figma: Noto Sans Bold 14.306px / tracking 0.2861px */
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(9px, 2.45cqw, 14.306px);
    font-weight: 700;
    letter-spacing: 0.2861px;
    line-height: 1.2;
    pointer-events: none;
}

.home-ai-modal__logo-after {
    position: absolute;
    left: -49.68%;
    top: -32.95%;
    display: block;
    width: 201.27%;
    height: 182.66%;
    max-width: none;
    object-fit: fill;
}

.home-ai-modal__after-dot,
.home-ai-modal__after-pointer {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.home-ai-modal__after-dot {
    width: 3.06%;
    height: 3.06%;
    border: 1px solid #262626;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

.home-ai-modal__after-dot--1 {
    left: 71%;
    top: 22%;
}

.home-ai-modal__after-dot--2 {
    left: 65.9%;
    top: 41.6%;
}

.home-ai-modal__after-dot--3 {
    left: 48.6%;
    top: 21.1%;
}

.home-ai-modal__after-dot--4 {
    left: 52%;
    top: 0%;
}

.home-ai-modal__after-dot--5 {
    left: 5.7%;
    top: 13.6%;
}

.home-ai-modal__after-pointer {
    left: 73.5%;
    top: 14.5%;
    width: 9.7%;
    height: auto;
    aspect-ratio: 1;
}

.home-ai-modal__compare-after .home-ai-modal__compare-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 0;
    text-align: center;
}

.home-ai-modal__compare-label {
    margin-top: 5.25%;
    /* Figma before: Inter Medium 10.717px; after: 10.164px — use before as base */
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: clamp(10px, 1.835cqw, 14px);
    font-weight: 500;
    letter-spacing: 0.2143px;
    line-height: 1.2;
    white-space: nowrap;
}

.home-ai-modal__compare-label--gray {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 83.77%;
    height: 12.46%;
    padding: 0 10.47%;
    border-radius: 999px;
    background: #e2e4ec;
    color: #000;
}

.home-ai-modal__compare-label--gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 12.06%;
    padding: 0;
    border: 0.3px solid #9547f9;
    border-radius: 999px;
    background: linear-gradient(90deg, #c04cfc 0%, #19ccf9 100%);
    color: #fff;
}

/* Hide AI float below 1280px — modal shows at all sizes (mobile layout ≤640) */
@media (max-width: 1279px) {
    .home-ai-float,
    .home-ai-float.is-visible {
        display: none !important;
        pointer-events: none !important;
    }
}

/* Mid desktop (641–1240): 75% width via JS — keep Figma 584/446 ratio (540 looked stretched).
   Tighten features slightly so CTA keeps air without moving absolute compare/birds. */
@media (min-width: 641px) and (max-width: 1240px) {
    .home-ai-modal__features {
        margin-top: 3.5%;
        gap: 2%;
    }

    .home-ai-modal__feature {
        padding: 1% 1% 1.2%;
    }

    .home-ai-modal__feature img {
        width: 7.2cqw;
        height: 7.2cqw;
    }

    .home-ai-modal__feature span {
        margin-top: 0.9cqw;
        font-size: clamp(8px, 1.9cqw, 12px);
    }
}

/* ===== Mobile modal — Figma 2224:24 (263 × 484) ===== */
@media (max-width: 640px) {
    .home-ai-modal-bg {
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px 16px;
    }

    .home-ai-modal {
        width: min(263px, calc(100vw - 32px)) !important;
        max-width: min(263px, calc(100vw - 32px)) !important;
        margin: auto !important;
    }

    .home-ai-modal__close {
        top: 0;
        right: 0;
        /* Sit on the corner like desktop — was -6px/no-transform and ate into the card */
        transform: translate(50%, -50%);
        width: 30px;
        height: 30px;
    }

    .home-ai-modal__bg--desktop {
        display: none;
    }

    .home-ai-modal__bg--mobile {
        display: block;
    }

    .home-ai-modal__card {
        aspect-ratio: 263 / 484;
        height: auto;
        max-height: calc(100vh - 48px);
        min-height: 0;
        overflow: hidden;
        border-radius: 20px;
    }

    .home-ai-modal__bg-top {
        top: 0;
        height: 100%;
        overflow: hidden;
    }

    .home-ai-modal__bg-bottom {
        top: 8.26%; /* (217-177)/484 */
        bottom: auto;
        height: 91.74%; /* 444/484 */
        overflow: hidden;
    }

    /* Figma 2224:26 / 2224:27 — raw fill + exact crop (not flattened screenshot) */
    .home-ai-modal__bg-top img {
        position: absolute;
        left: -18.58%;
        top: -29.05%;
        width: 140.22%;
        height: 135.36%;
        max-width: none;
        transform: none;
        object-fit: fill;
    }

    .home-ai-modal__bg-bottom img {
        position: absolute;
        left: -14.29%;
        top: -7.5%;
        width: 128.59%;
        height: 120.19%;
        max-width: none;
        transform: none;
        object-fit: fill;
    }

    /* Stars */
    .home-ai-modal__star--left {
        top: 6%;
        left: 3.4%;
        width: 7.7%;
        height: auto;
        aspect-ratio: 1;
    }

    .home-ai-modal__star--right {
        top: 22.7%;
        left: 85%;
        right: auto;
        width: 7.7%;
        height: auto;
        aspect-ratio: 1;
    }

    /* Badge — top 13/484, 152×27 */
    .home-ai-modal__badge {
        position: absolute;
        top: 2.69%;
        left: 50%;
        z-index: 1;
        width: 57.82%;
        min-width: 0;
        min-height: 0;
        height: 5.63%;
        margin: 0;
        transform: translateX(-50%);
        border-radius: 999px;
        font-size: clamp(14px, 6.08cqw, 18px);
        font-weight: 500;
        letter-spacing: 0.32px;
        line-height: 1.2;
    }

    /* Title stacked — top 55/484 */
    .home-ai-modal__title {
        position: absolute;
        top: 11.36%;
        left: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
        font-size: clamp(22px, 11.04cqw, 29.024px);
        font-weight: 900;
        letter-spacing: 0.5805px;
        line-height: 1.2;
    }

    .home-ai-modal__title-main,
    .home-ai-modal__title-accent {
        display: block;
    }

    /* Subtitle — top 144/484, w 226 */
    .home-ai-modal__subtitle {
        position: absolute;
        top: 29.75%;
        left: 50%;
        z-index: 1;
        width: 85.93%;
        margin: 0;
        padding: 0;
        transform: translateX(-50%);
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: clamp(12px, 6.08cqw, 16px);
        font-weight: 400;
        letter-spacing: 0.32px;
        line-height: 1.35;
        white-space: normal;
    }

    /* Features — top 207/484 */
    .home-ai-modal__features {
        position: absolute;
        top: 42.77%;
        left: 50%;
        z-index: 1;
        width: 90.5%;
        margin: 0;
        padding: 0;
        gap: 3.4%;
        transform: translateX(-50%);
    }

    .home-ai-modal__feature {
        width: 30.5%;
        min-height: 0;
        height: auto;
        aspect-ratio: 72.4 / 57.4;
        padding: 2.8% 1% 2%;
        border-radius: 4.16px;
        box-shadow: 0 0 3.3px rgba(130, 67, 250, 0.2);
        justify-content: flex-start;
    }

    .home-ai-modal__feature--blue {
        box-shadow: 0 0 3.3px rgba(77, 95, 252, 0.2);
    }

    .home-ai-modal__feature--cyan {
        box-shadow: 0 0 3.3px rgba(12, 128, 254, 0.2);
    }

    .home-ai-modal__feature img {
        width: 43.7%;
        height: auto;
        aspect-ratio: 1;
        max-width: 31.6px;
    }

    .home-ai-modal__feature span {
        margin-top: 3px;
        font-family: "Noto Sans JP", "Noto Sans", sans-serif;
        font-size: clamp(7px, 3.16cqw, 8.322px);
        font-weight: 500;
        letter-spacing: 0.1664px;
        line-height: 1.2;
    }

    /* Compare — Figma 2224:45 top 469/484; height covers birds + labels (≈116.5px) */
    .home-ai-modal__compare {
        position: absolute;
        top: 60.33%;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 24.07%; /* 116.5/484 */
        margin: 0;
        padding: 0;
    }

    .home-ai-modal__compare-before {
        position: absolute;
        top: 0;
        left: 3.8%; /* (77-67)/263 */
        width: 27.74%; /* 72.95/263 */
        height: auto;
    }

    .home-ai-modal__compare-after {
        position: absolute;
        top: 5.17%; /* (475-469)/116.5 */
        left: 57.03%; /* (217-67)/263 */
        width: 38.65%; /* 101.65/263 */
        height: 95.45%; /* 111.2/116.5 */
        align-items: stretch;
    }

    .home-ai-modal__jpg {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 72.95 / 97.27;
    }

    .home-ai-modal__jpg-logo {
        top: 15.6%; /* (484.17-469)/97.27 */
        left: 50%;
        width: 66.59%; /* 48.58/72.95 */
        height: auto;
        aspect-ratio: 48.58 / 53.89;
        transform: translateX(-50%);
    }

    .home-ai-modal__jpg-ext {
        font-size: clamp(8px, 4.15cqw, 10.929px);
        letter-spacing: 0.2186px;
    }

    .home-ai-modal__logo-after-frame {
        position: absolute;
        top: 0;
        left: 9.16%; /* (226.31-217)/101.65 */
        width: 81.59%; /* 82.94/101.65 */
        height: auto;
        aspect-ratio: 82.94 / 91.4;
        margin: 0;
    }

    .home-ai-modal__logo-after-clip {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .home-ai-modal__logo-after {
        left: -49.68%;
        top: -32.95%;
        width: 201.27%;
        height: 182.66%;
    }

    .home-ai-modal__after-dot {
        width: 3.06%; /* 2.54/82.94 */
        height: auto;
        aspect-ratio: 1;
    }

    /* Dots relative to frame origin (226.31, 475), size 82.94×91.4 */
    .home-ai-modal__after-dot--1 {
        left: 70.41%;
        top: 23.15%;
    }

    .home-ai-modal__after-dot--2 {
        left: 65.3%;
        top: 42.59%;
    }

    .home-ai-modal__after-dot--3 {
        left: 47.96%;
        top: 22.22%;
    }

    .home-ai-modal__after-dot--4 {
        left: 52.04%;
        top: 0%;
    }

    .home-ai-modal__after-dot--5 {
        left: 5.1%;
        top: 13.89%;
    }

    .home-ai-modal__after-pointer {
        width: 9.7%; /* 8.04/82.94 */
        left: 73.46%; /* (287.24-226.31)/82.94 */
        top: 14.35%; /* (488.12-475)/91.4 */
    }

    .home-ai-modal__compare-after .home-ai-modal__compare-label {
        position: absolute;
        top: 87.94%; /* (572.79-475)/111.2 */
        bottom: auto;
        left: 0;
        width: 100%;
        margin-top: 0;
    }

    .home-ai-modal__compare-label {
        margin-top: 5.24%; /* (571.37-469-97.27)/97.27 */
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: clamp(9px, 3.11cqw, 10.188px);
        font-weight: 500;
        letter-spacing: 0.1638px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .home-ai-modal__compare-label--gray {
        display: flex;
        min-width: 0;
        width: 83.66%; /* 61.04/72.95 */
        height: auto;
        min-height: 0;
        aspect-ratio: 61.04 / 14.14;
        margin: 5.24% auto 0;
        padding: 0;
        border-radius: 999px;
    }

    .home-ai-modal__compare-label--gradient {
        height: auto;
        min-height: 0;
        aspect-ratio: 101.65 / 13.41;
        padding: 0;
        border-radius: 999px;
        font-size: clamp(8.5px, 2.95cqw, 9.765px);
        letter-spacing: 0.1553px;
        white-space: nowrap;
        text-align: center;
    }

    /* CTA — top 435/484, 228×33.4 */
    .home-ai-modal__cta {
        position: absolute;
        top: 89.88%;
        left: 50%;
        z-index: 1;
        order: unset;
        transform: translateX(-50%);
        width: 86.69%;
        height: 6.9%;
        min-height: 0;
        margin: 0;
        padding: 0 3.5%;
        border-radius: 999px;
        font-size: clamp(14px, 6.84cqw, 18px);
        font-weight: 600;
        letter-spacing: 0.36px;
        line-height: 1.2;
        gap: 0;
        justify-content: space-between;
    }

    .home-ai-modal__cta img {
        height: 40%;
        max-height: 14px;
    }
}


/* ===== Fixed left float (shown after modal close) — Figma 2168:114, 142x259 ===== */
.home-ai-float {
    position: fixed;
    left: 11px;
    top: 0;
    z-index: 9990;
    display: none;
    width: 142px;
    transform: none;
    pointer-events: none;
}

.home-ai-float.is-visible {
    display: block !important;
    pointer-events: auto;
}

.home-ai-float__card {
    position: relative;
    overflow: hidden;
    width: 142px;
    height: 259px;
    border: 1.5px solid #7f45fa;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 14, 54, 0.12);
}

.home-ai-float__bg {
    position: absolute;
    left: 50%;
    top: -14px;
    width: 263px;
    height: 345px;
    transform: translateX(-50%);
    pointer-events: none;
}

.home-ai-float__bg img {
    position: absolute;
    left: -6.71%;
    top: -32.85%;
    width: 113.13%;
    height: 153.08%;
    max-width: none;
}

.home-ai-float__badge {
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 106px;
    height: 19px;
    border: 0.3px solid #9547f9;
    border-radius: 9.5px;
    background: linear-gradient(90deg, #c04cfc 0%, #2996f9 100%);
    color: #fff;
    /* Figma: Inter Medium 10.588px */
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: 10.588px;
    font-weight: 500;
    letter-spacing: 0.2118px;
    line-height: 1.2;
}

.home-ai-float__title {
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 1;
    width: 100%;
    margin: 0;
    text-align: center;
    /* Figma: Noto Sans Black */
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-weight: 900;
    line-height: 1.2;
}

.home-ai-float__title-main {
    display: block;
    color: #000e36;
    /* Figma: 23.086px / tracking 0.4617px */
    font-size: 23.086px;
    letter-spacing: 0.4617px;
}

.home-ai-float__title-accent {
    display: block;
    margin-top: 0;
    /* Figma: 28.467px / tracking 0.5693px */
    font-size: 28.467px;
    letter-spacing: 0.5693px;
    background: linear-gradient(90deg, #8641fa 5.88%, #0584fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-ai-float__subtitle {
    position: absolute;
    top: 113px;
    left: 0;
    z-index: 1;
    width: 100%;
    margin: 0;
    text-align: center;
    color: #000e36;
    /* Figma: Inter Bold 11px / tracking 0.22px / lh 1.38 */
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22px;
    line-height: 1.38;
}

.home-ai-float__compare {
    position: absolute;
    top: 138px;
    left: 11px;
    z-index: 1;
    width: 121px;
    height: 76px;
}

.home-ai-float__before,
.home-ai-float__after {
    position: absolute;
    top: 0;
    width: 52px;
    height: 76px;
}

.home-ai-float__before {
    left: 0;
}

.home-ai-float__after {
    left: 69px;
}

.home-ai-float__before-card,
.home-ai-float__after-card {
    position: relative;
    overflow: hidden;
    width: 52px;
    height: 76px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.home-ai-float__before-logo {
    position: absolute;
    top: 6px;
    left: 3.5px;
    width: 45px;
    height: 50px;
    object-fit: contain;
    opacity: 0.9;
}

.home-ai-float__after-frame {
    position: absolute;
    top: 6.5px;
    left: 4px;
    display: block;
    overflow: hidden;
    width: 45px;
    height: 49.5px;
}

.home-ai-float__after-logo {
    position: absolute;
    left: -49.68%;
    top: -32.95%;
    width: 201.27%;
    height: 182.66%;
    max-width: none;
}

.home-ai-float__dot {
    position: absolute;
    z-index: 2;
    width: 1.4px;
    height: 1.4px;
    border: 0.5px solid #262626;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    pointer-events: none;
}

.home-ai-float__dot--1 { left: 71%; top: 22%; }
.home-ai-float__dot--2 { left: 65.9%; top: 41.6%; }
.home-ai-float__dot--3 { left: 48.6%; top: 21.1%; }
.home-ai-float__dot--4 { left: 52.6%; top: 0%; }
.home-ai-float__dot--5 { left: 5.7%; top: 12.7%; }

.home-ai-float__pointer {
    position: absolute;
    left: 74%;
    top: 13.1%;
    z-index: 2;
    width: 9.7%;
    height: auto;
    pointer-events: none;
}

.home-ai-float__tag {
    position: absolute;
    left: 50%;
    bottom: 5px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    height: auto;
    min-height: 10px;
    padding: 2px 0;
    transform: translateX(-50%);
    border-radius: 4.9px;
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: 6px;
    font-weight: 500;
    letter-spacing: 0.12px;
    line-height: 1;
    white-space: nowrap;
}

.home-ai-float__tag--gray {
    background: #e2e4ec;
    color: #000;
}

.home-ai-float__tag--gradient {
    background: linear-gradient(90deg, #aa35fc 0%, #1192fb 100%);
    color: #fff;
}

.home-ai-float__arrow {
    position: absolute;
    top: 28px;
    left: 50px;
    z-index: 2;
    width: 23px;
    height: 21px;
}

.home-ai-float__cta {
    position: absolute;
    top: 226px;
    left: 11px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 121px;
    height: 23px;
    border: 0.5px solid #9547f9;
    border-radius: 11px;
    background: linear-gradient(90deg, #c04cfc 0%, #2698f9 100%);
    color: #fff;
    /* Figma: Inter Semi Bold 11.71px / tracking 0.2342px */
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: 11.71px;
    font-weight: 600;
    letter-spacing: 0.2342px;
    line-height: 1.2;
    text-decoration: none;
}

.home-ai-float__cta:hover {
    opacity: 0.92;
    color: #fff;
    text-decoration: none;
}

.home-ai-float__cta img {
    display: block;
    width: 9px;
    height: auto;
}