/* ============================================================
   Teamvisory — split hero landing page
   Bootstrap 5 + custom styles
   Breakpoint: >= 992px desktop split layout, below = stacked
   ============================================================ */

:root {
    --tv-navy: #17307E;
    --tv-navy-deep: #16296B;
    --tv-blue: #1560D0;
    --tv-sky: #8FCFF0;
    --tv-cyan: #35B4E2;
    --tv-cta-consumer: #35B8E8;
    --tv-cta-consumer-hover: #23AADD;
    --tv-cta-business: #21529E;
    --tv-cta-business-hover: #2A63BC;
    --tv-ink: #111111;
}

html, body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--tv-blue);
    text-decoration: none;
}

    a:hover {
        color: var(--tv-cyan);
    }

.accent-navy {
    color: var(--tv-navy);
}

.accent-sky {
    color: var(--tv-sky);
}

.accent-cyan {
    color: var(--tv-cyan);
}

.accent-blue {
    color: var(--tv-blue);
}

.strong {
    font-weight: 700;
}

/* ---------- Shared pieces ---------- */

.panel {
    position: relative;
}

.panel-img {
    display: block;
}

.badge-pill {
    display: inline-block;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.25;
}

.badge-consumer {
    background: linear-gradient(180deg, #6BD2F4 0%, #47BEEB 100%);
    border: 1px solid rgba(255, 255, 255, .45);
}

.badge-business {
    background: linear-gradient(180deg, #1C5AD0 0%, #14459F 100%);
    border: 1px solid rgba(255, 255, 255, .28);
}

.panel-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: #ffffff;
    text-wrap: pretty;
}

.panel-sub {
    margin: 0;
    font-weight: 400;
    line-height: 1.3;
    color: #ffffff;
}

.cta-row {
    display: flex;
    align-items: center;
}

.cta-note {
    margin: 0;
    font-weight: 400;
    line-height: 1.42;
    color: #ffffff;
    text-align: left;
}

.btn-cta {
    display: inline-block;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .18s ease;
}

    .btn-cta:hover, .btn-cta:focus {
        color: #ffffff;
    }

.btn-consumer {
    background: #33add9;
}

    .btn-consumer:hover {
        background: var(--tv-cta-consumer-hover);
    }

.btn-business {
    background: var(--tv-cta-business);
}

    .btn-business:hover {
        background: var(--tv-cta-business-hover);
    }

.centre {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-logo {
    display: block;
    height: auto;
}

.process-card {
    display: flex;
    align-items: center;
    background: #ffffff;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-icon,
.process-chevron {
    fill: none;
    stroke: var(--tv-blue);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-icon {
    stroke-width: 1.8;
}

.process-chevron {
    stroke-width: 2.4;
}

.process-label {
    font-weight: 500;
    color: var(--tv-navy-deep);
    line-height: 1.2;
}

.tagline {
    margin: 0;
    font-weight: 700;
    color: var(--tv-ink);
}

/* ============================================================
   DESKTOP  (>= 992px) — three overlapping layers on one stage
   Sizes are cqw of the hero, so the design scales exactly.
   ============================================================ */

@media (min-width: 992px) {

    /* --u = one design-height unit; the artwork keeps its internal
     proportions while the panels fill the whole viewport.        */
    body {
        overflow: hidden;
    }

    .hero {
        --u: min(1dvh, .35vw);
        position: relative;
        width: 100%;
        height: 100dvh;
        background: #ffffff;
        overflow: hidden;
    }

    .panel {
        position: static;
    }

    .panel-img {
        position: absolute;
        top: 0;
        height: 100%;
        width: min(41vw, 109.07dvh);
        object-fit: cover;
    }

    .panel-consumer .panel-img {
        left: 0;
        object-position: 100% 50%;
    }

    .panel-business .panel-img {
        right: 0;
        object-position: 0% 50%;
    }

    .panel-content {
        position: absolute;
        top: 15%;
        width: min(calc(125.7 * var(--u)), 40%);
        display: flex;
        flex-direction: column;
    }

    .panel-consumer .panel-content {
        left: calc(8.29 * var(--u));
        align-items: flex-start;
    }

    .panel-business .panel-content {
        right: calc(7.71 * var(--u));
        align-items: flex-end;
        text-align: right;
    }

    .badge-pill {
        padding: calc(1.43 * var(--u)) calc(5 * var(--u));
        font-size: calc(4.49 * var(--u));
        border-width: calc(.26 * var(--u));
    }

    .badge-consumer {
        box-shadow: calc(.8 * var(--u)) calc(.97 * var(--u)) 0 rgba(20, 44, 116, .10);
    }

    .badge-business {
        box-shadow: calc(-.8 * var(--u)) calc(.97 * var(--u)) 0 rgba(6, 29, 79, .22);
    }

    .panel-title {
        margin-top: calc(2.86 * var(--u));
        font-size: calc(6.17 * var(--u));
    }

    .panel-sub {
        margin-top: calc(2.71 * var(--u));
        font-size: calc(3.89 * var(--u));
    }

    .cta-row {
        gap: calc(3.71 * var(--u));
        margin-top: calc(3.71 * var(--u));
    }

    .btn-cta {
        padding: calc(2 * var(--u)) calc(4.71 * var(--u));
        border-radius: calc(1.86 * var(--u));
        font-size: calc(3.06 * var(--u));
    }

    .btn-consumer {
        box-shadow: 0 calc(.71 * var(--u)) calc(2 * var(--u)) rgba(20, 44, 116, .15);
    }

    .btn-business {
        box-shadow: 0 calc(.71 * var(--u)) calc(2 * var(--u)) rgba(6, 29, 79, .25);
    }

    .cta-note {
        font-size: calc(2.4 * var(--u));
    }

    .centre {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 12%;
        height: 70%;
        width: min(calc(97.1 * var(--u)), 24%);
        justify-content: space-between;
        z-index: 9;
    }

    .brand-logo {
        height: 110px;
    }

    .process-card {
        gap: calc(5.43 * var(--u));
        padding: calc(3.43 * var(--u)) calc(5.71 * var(--u));
        border-radius: calc(2.86 * var(--u));
        box-shadow: 0 calc(1.43 * var(--u)) calc(4 * var(--u)) rgba(16, 40, 100, .14);
    }

    .process-step {
        gap: calc(1.29 * var(--u));
    }

    .process-icon {
        width: calc(6.57 * var(--u));
        height: calc(6.57 * var(--u));
    }

    .process-chevron {
        width: calc(3.14 * var(--u));
        height: calc(3.14 * var(--u));
        margin-bottom: calc(3.43 * var(--u));
    }

    .process-label {
        font-size: calc(2.74 * var(--u));
    }

    .tagline {
        margin-top: 0;
        font-size: calc(4.17 * var(--u));
        line-height: 1.25;
        white-space: nowrap;
    }
}

/* ============================================================
   MOBILE / TABLET  (< 992px) — stacked panels, text overlaid
   Sizes are cqw of each panel, so type scales with the screen.
   ============================================================ */

@media (max-width: 991.98px) {

    .hero {
        display: flex;
        flex-direction: column;
        background: #ffffff;
    }

    .panel {
        container-type: inline-size;
        width: 100%;
    }

    .panel-img {
        width: 100%;
        height: auto;
    }

    .panel.panel-consumer {
        background-color: #4ac0ea;
    }

    .panel.panel-business {
        background-color: #093a86;
    }

    .panel-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 7cqw 6cqw 0;
        display: flex;
        flex-direction: column;
    }

    .panel-consumer .panel-content {
        align-items: center;
        text-align: center;
    }

    .panel-business .panel-content {
        align-items: center;
        text-align: center;
    }

    .badge-pill {
        padding: 1.4cqw 4.6cqw;
        font-size: 3.9cqw;
        border-width: .25cqw;
    }

    .badge-consumer {
        box-shadow: .7cqw .9cqw 0 rgba(20, 44, 116, .10);
    }

    .badge-business {
        box-shadow: -.7cqw .9cqw 0 rgba(6, 29, 79, .22);
    }

    .panel-title {
        margin-top: 3cqw;
        font-size: 5.8cqw;
    }

    .panel-sub {
        margin-top: 2.6cqw;
        font-size: 3.15cqw;
    }

    .cta-row {
        gap: 3.6cqw;
        margin-top: 3.6cqw;
        flex-wrap: wrap;
    }

    .panel-business .cta-row {
        justify-content: flex-end;
    }

    .btn-cta {
        padding: 2cqw 4.6cqw;
        border-radius: 1.8cqw;
        font-size: 3.2cqw;
    }

    .btn-consumer {
        box-shadow: 0 .7cqw 2cqw rgba(20, 44, 116, .15);
    }

    .btn-business {
        box-shadow: 0 .7cqw 2cqw rgba(6, 29, 79, .25);
    }

    .cta-note {
        font-size: 2.4cqw;
    }

    .centre {
        container-type: inline-size;
        width: 100%;
        padding: 9cqw 6cqw;
    }

    .brand-logo {
        width: 46%;
        max-width: 300px;
    }

    .process-card {
        margin-top: 7cqw;
        gap: 4.5cqw;
        padding: 3.4cqw 5cqw;
        border-radius: 3cqw;
        box-shadow: 0 1.5cqw 4cqw rgba(16, 40, 100, .14);
    }

    .process-step {
        gap: 1.4cqw;
    }

    .process-icon {
        width: 7cqw;
        height: 7cqw;
    }

    .process-chevron {
        width: 3.4cqw;
        height: 3.4cqw;
        margin-bottom: 3.6cqw;
    }

    .process-label {
        font-size: 3cqw;
    }

    .tagline {
        margin-top: 4cqw;
        font-size: 4.6cqw;
        line-height: 1.3;
        text-align: center;
    }
}