/*
|--------------------------------------------------------------------------
| ToolVerse - Home Hero
|--------------------------------------------------------------------------
| ONLY Home Hero section.
| No styles leak into other sections/pages.
|--------------------------------------------------------------------------
*/

.tv-home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 72px 0 78px;
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(99, 91, 255, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(0, 168, 132, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fcfdff 0%,
            #f7f9fc 100%
        );
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.tv-home-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.tv-home-hero__orb {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.tv-home-hero__orb--one {
    top: 50px;
    left: -120px;
    width: 280px;
    height: 280px;
    background: rgba(99, 91, 255, 0.055);
}

.tv-home-hero__orb--two {
    right: -90px;
    bottom: 40px;
    width: 240px;
    height: 240px;
    background: rgba(0, 168, 132, 0.05);
}

.tv-home-hero__grid {
    position: absolute;
    inset: 0;
    display: block;

    background-image:
        linear-gradient(
            rgba(17, 24, 39, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17, 24, 39, 0.018) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.45),
            transparent 88%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.45),
            transparent 88%
        );
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.tv-home-hero__container {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, 0.92fr);

    align-items: center;

    gap: 68px;
}

.tv-home-hero__content {
    min-width: 0;
}


/* =========================================================
   EYEBROW
========================================================= */

.tv-home-hero__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 34px;

    margin-bottom: 18px;

    padding: 0 12px;

    border:
        1px solid
        rgba(99, 91, 255, 0.14);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.82);

    color:
        var(--tv-color-primary-dark);

    font-size: 11px;
    font-weight: 750;
    line-height: 1;

    box-shadow:
        0 4px 14px
        rgba(16, 24, 40, 0.035);
}

.tv-home-hero__eyebrow-icon {
    display: grid;
    place-items: center;

    width: 18px;
    height: 18px;

    color:
        var(--tv-color-primary);
}

.tv-home-hero__eyebrow-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}


/* =========================================================
   HEADING
========================================================= */

.tv-home-hero__title {
    max-width: 650px;

    margin: 0;

    color:
        var(--tv-color-heading);

    font-size:
        clamp(
            38px,
            4.1vw,
            56px
        );

    font-weight: 820;

    line-height: 1.04;

    letter-spacing: -2px;
}

.tv-home-hero__title span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            120deg,
            #635bff 0%,
            #7c3aed 52%,
            #0f9f92 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.tv-home-hero__description {
    max-width: 620px;

    margin:
        21px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.tv-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 11px;

    margin-top: 27px;
}

.tv-home-hero__primary-action,
.tv-home-hero__secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 750;

    line-height: 1;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}


/* PRIMARY */

.tv-home-hero__primary-action {
    gap: 9px;

    padding:
        0
        18px;

    background:
        linear-gradient(
            135deg,
            #7169ff 0%,
            #635bff 52%,
            #5048dc 100%
        );

    color: #ffffff;

    box-shadow:
        0 10px 22px
        rgba(99, 91, 255, 0.20);
}

.tv-home-hero__primary-action svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.tv-home-hero__primary-action:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(99, 91, 255, 0.27);
}

.tv-home-hero__action-arrow {
    display: inline-block;

    font-size: 16px;

    line-height: 1;

    transition:
        transform 180ms ease;
}

.tv-home-hero__primary-action:hover
.tv-home-hero__action-arrow {
    transform:
        translateX(3px);
}


/* SECONDARY */

.tv-home-hero__secondary-action {
    padding:
        0
        18px;

    border:
        1px solid
        var(--tv-color-border);

    background:
        rgba(255, 255, 255, 0.84);

    color:
        var(--tv-color-heading);

    box-shadow:
        0 2px 8px
        rgba(16, 24, 40, 0.035);
}

.tv-home-hero__secondary-action:hover {
    border-color:
        var(--tv-color-border-strong);

    background:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(16, 24, 40, 0.07);
}


/* =========================================================
   BENEFITS
========================================================= */

.tv-home-hero__benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        11px
        16px;

    margin:
        21px
        0
        0;

    padding: 0;

    list-style: none;
}

.tv-home-hero__benefits li {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #526071;

    font-size: 11px;
    font-weight: 650;

    line-height: 1.3;
}

.tv-home-hero__benefits li span {
    display: grid;
    place-items: center;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        var(--tv-color-accent-soft);

    color:
        var(--tv-color-success);

    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.tv-home-hero__visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    min-height: 430px;

    padding:
        22px
        18px;
}

.tv-home-hero__visual-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 390px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99, 91, 255, 0.12),
            rgba(99, 91, 255, 0.025) 52%,
            transparent 72%
        );

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: none;
}


/* =========================================================
   CALCULATOR CARD
========================================================= */

.tv-home-hero__dashboard {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 420px;

    overflow: hidden;

    border:
        1px solid
        rgba(218, 223, 232, 0.95);

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 25px 60px
        rgba(16, 24, 40, 0.11),
        0 5px 18px
        rgba(99, 91, 255, 0.055);
}


/* =========================================================
   CARD HEADER
========================================================= */

.tv-home-hero__dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 56px;

    padding:
        0
        18px;

    border-bottom:
        1px solid
        var(--tv-color-border);

    background:
        #ffffff;
}

.tv-home-hero__dashboard-brand {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color:
        var(--tv-color-heading);

    font-size: 11px;
    font-weight: 750;
}

.tv-home-hero__dashboard-brand > span {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #635bff;

    box-shadow:
        0 0 0 4px
        rgba(99, 91, 255, 0.09);
}

.tv-home-hero__dashboard-dots {
    display: flex;
    align-items: center;

    gap: 5px;
}

.tv-home-hero__dashboard-dots span {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #d7dce5;
}


/* =========================================================
   CARD BODY
========================================================= */

.tv-home-hero__dashboard-body {
    padding: 22px;
}

.tv-home-hero__mini-label {
    color:
        var(--tv-color-muted);

    font-size: 10px;
    font-weight: 700;

    line-height: 1.4;
}

.tv-home-hero__amount {
    margin-top: 5px;

    color:
        var(--tv-color-heading);

    font-size: 30px;
    font-weight: 810;

    line-height: 1.2;

    letter-spacing: -1px;
}


/* =========================================================
   RANGE
========================================================= */

.tv-home-hero__range {
    position: relative;

    height: 7px;

    margin-top: 17px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #edf0f5;
}

.tv-home-hero__range span {
    display: block;

    width: 68%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #635bff,
            #8b5cf6
        );
}


/* =========================================================
   STATS
========================================================= */

.tv-home-hero__stats {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 19px;
}

.tv-home-hero__stat {
    min-width: 0;

    padding: 13px;

    border:
        1px solid
        var(--tv-color-border);

    border-radius: 13px;

    background:
        #ffffff;
}

.tv-home-hero__stat small {
    display: block;

    color:
        var(--tv-color-muted);

    font-size: 9px;
    font-weight: 700;

    line-height: 1.4;
}

.tv-home-hero__stat strong {
    display: block;

    margin-top: 4px;

    color:
        var(--tv-color-heading);

    font-size: 14px;
    font-weight: 780;

    line-height: 1.3;
}


/* =========================================================
   MONTHLY EMI RESULT
========================================================= */

.tv-home-hero__result {
    position: relative;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 72px;

    margin-top: 11px;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(99, 91, 255, 0.13);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #efeeff 0%,
            #f6f4ff 100%
        );
}

.tv-home-hero__result small {
    display: block;

    color:
        #6b6f89;

    font-size: 9px;
    font-weight: 700;

    line-height: 1.4;
}

.tv-home-hero__result strong {
    display: block;

    margin-top: 3px;

    color:
        var(--tv-color-primary-dark);

    font-size: 20px;
    font-weight: 820;

    line-height: 1.2;

    letter-spacing: -0.5px;
}

.tv-home-hero__result-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    border-radius: 11px;

    background:
        #635bff;

    color:
        #ffffff;

    box-shadow:
        0 7px 16px
        rgba(99, 91, 255, 0.19);
}

.tv-home-hero__result-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.tv-home-hero__floating-card {
    position: absolute;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 148px;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(224, 228, 236, 0.98);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 12px 28px
        rgba(16, 24, 40, 0.08);
}


/*
| IMPORTANT:
| Cards are intentionally outside the central
| Monthly EMI area.
*/

.tv-home-hero__floating-card--top {
    top: 6px;
    right: -5px;
}

.tv-home-hero__floating-card--bottom {
    left: -5px;
    bottom: 2px;
}


/* NO automatic floating animation */

.tv-home-hero__floating-icon,
.tv-home-hero__floating-check {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    flex:
        0
        0
        32px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 850;
}

.tv-home-hero__floating-icon {
    background:
        var(--tv-color-primary-soft);

    color:
        var(--tv-color-primary-dark);
}

.tv-home-hero__floating-check {
    background:
        var(--tv-color-accent-soft);

    color:
        var(--tv-color-success);
}

.tv-home-hero__floating-card small {
    display: block;

    color:
        var(--tv-color-muted);

    font-size: 8px;
    font-weight: 700;

    line-height: 1.3;
}

.tv-home-hero__floating-card strong {
    display: block;

    margin-top: 2px;

    color:
        var(--tv-color-heading);

    font-size: 10px;
    font-weight: 760;

    line-height: 1.3;
}


/* =========================================================
   DESKTOP HOVER - VERY LIGHT
========================================================= */

@media (hover: hover) {

    .tv-home-hero__dashboard {
        transition:
            transform 220ms ease,
            box-shadow 220ms ease;
    }

    .tv-home-hero__dashboard:hover {
        transform:
            translateY(-3px);

        box-shadow:
            0 29px 65px
            rgba(16, 24, 40, 0.13),
            0 7px 20px
            rgba(99, 91, 255, 0.065);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .tv-home-hero {
        padding:
            62px
            0
            72px;
    }

    .tv-home-hero__container {
        grid-template-columns: 1fr;

        gap: 46px;
    }

    .tv-home-hero__content {
        width: 100%;
        max-width: 720px;

        margin-inline: auto;

        text-align: center;
    }

    .tv-home-hero__title {
        max-width: 650px;

        margin-inline: auto;
    }

    .tv-home-hero__description {
        max-width: 620px;

        margin-left: auto;
        margin-right: auto;
    }

    .tv-home-hero__eyebrow {
        justify-content: center;
    }

    .tv-home-hero__actions {
        justify-content: center;
    }

    .tv-home-hero__benefits {
        justify-content: center;
    }

    .tv-home-hero__visual {
        width: 100%;
        max-width: 590px;

        min-height: 430px;

        margin-inline: auto;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .tv-home-hero {
        padding:
            48px
            0
            58px;
    }

    .tv-home-hero__container {
        gap: 38px;
    }

    .tv-home-hero__eyebrow {
        min-height: 32px;

        margin-bottom: 15px;

        font-size: 10px;
    }

    .tv-home-hero__title {
        max-width: 520px;

        font-size:
            clamp(
                33px,
                10vw,
                43px
            );

        line-height: 1.05;

        letter-spacing: -1.45px;
    }

    .tv-home-hero__description {
        margin-top: 18px;

        font-size: 14px;

        line-height: 1.7;
    }

    .tv-home-hero__actions {
        flex-direction: column;

        align-items: stretch;

        margin-top: 23px;
    }

    .tv-home-hero__primary-action,
    .tv-home-hero__secondary-action {
        width: 100%;

        min-height: 48px;
    }

    .tv-home-hero__benefits {
        margin-top: 18px;

        gap:
            9px
            12px;
    }

    .tv-home-hero__visual {
        min-height: auto;

        padding:
            28px
            8px;
    }

    .tv-home-hero__dashboard {
        max-width: 400px;

        border-radius: 19px;
    }

    .tv-home-hero__floating-card {
        display: none;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .tv-home-hero {
        padding-top: 42px;
    }

    .tv-home-hero__title {
        font-size:
            clamp(
                31px,
                9.5vw,
                39px
            );

        letter-spacing: -1.2px;
    }

    .tv-home-hero__dashboard-top {
        min-height: 52px;

        padding:
            0
            14px;
    }

    .tv-home-hero__dashboard-body {
        padding: 16px;
    }

    .tv-home-hero__amount {
        font-size: 26px;
    }

    .tv-home-hero__stats {
        gap: 8px;
    }

    .tv-home-hero__stat {
        padding: 11px;
    }

    .tv-home-hero__result {
        min-height: 66px;

        padding:
            12px
            14px;
    }

    .tv-home-hero__result strong {
        font-size: 18px;
    }

    .tv-home-hero__result-icon {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .tv-home-hero__title {
        font-size: 30px;
    }

    .tv-home-hero__benefits {
        flex-direction: column;

        align-items: center;
    }

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


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .tv-home-hero__primary-action,
    .tv-home-hero__secondary-action,
    .tv-home-hero__action-arrow,
    .tv-home-hero__dashboard {
        transition: none;
    }

    .tv-home-hero__primary-action:hover,
    .tv-home-hero__secondary-action:hover,
    .tv-home-hero__dashboard:hover {
        transform: none;
    }
}