.hero-banner {
    --hero-navy: #07224b;
    --hero-blue: #0a7dce;
    --hero-blue-light: #3fabe0;
    --hero-left: 10.3%;
    --page-width: calc(100vw - var(--scrollbar-width, 0px));
    position: relative;
    width: var(--page-width);
    margin-top: -30px;
    margin-left: calc(50% - var(--page-width) / 2);
    height: clamp(520px, 49.5vw, 880px);
    overflow: hidden;
    background: #cfe3f2;
    font-family: "Montserrat", sans-serif;
    isolation: isolate;
}

.hero-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-banner__bg {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--hero-bg);
    opacity: 0;
    transition: opacity 1s ease;
    transform: scale(1.04);
    animation: hero-zoom 18s ease-in-out infinite alternate;
}

.hero-banner__bg.is-active {
    opacity: 1;
}

@media (max-width: 600px) {
    .hero-banner__bg {
        background-image: var(--hero-bg-mobile, var(--hero-bg));
    }
}

.hero-banner__media::before,
.hero-banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-banner__media::before {
    background:
        linear-gradient(90deg, rgba(6, 18, 48, .78) 0%, rgba(6, 18, 48, .58) 28%, rgba(6, 18, 48, .22) 52%, rgba(6, 18, 48, 0) 72%),
        linear-gradient(180deg, rgba(6, 18, 48, .35) 0%, rgba(6, 18, 48, 0) 22%);
}

.hero-banner__media::after {
    background:
        radial-gradient(120% 90% at 70% 40%, rgba(0, 0, 0, 0) 55%, rgba(4, 12, 32, .35) 100%),
        linear-gradient(0deg, rgba(7, 34, 75, .55) 0%, rgba(7, 34, 75, .2) 16%, rgba(7, 34, 75, 0) 32%);
}

.hero-banner__balloon {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    animation: hero-float 7s ease-in-out infinite;
    will-change: transform;
}

.hero-banner__balloon--main {
    right: 9%;
    top: -3%;
    width: 29%;
    z-index: 2;
}

.hero-banner__balloon--b1 { left: 49.5%; top: 9%;  width: 6.8%; animation-duration: 8s; animation-delay: -2s; }
.hero-banner__balloon--b2 { left: 56.5%; top: 31%; width: 7.6%; animation-duration: 9s; animation-delay: -4s; }
.hero-banner__balloon--b3 { left: 46%;   top: 48%; width: 4.4%; animation-duration: 10s; animation-delay: -1s; }
.hero-banner__balloon--b4 { left: 52.5%; top: 37%; width: 2.2%; animation-duration: 11s; animation-delay: -3s; }
.hero-banner__balloon--b5 { left: 61.5%; top: 54%; width: 2.6%; animation-duration: 9s; animation-delay: -5s; }
.hero-banner__balloon--b6 { left: 89.5%; top: 36%; width: 7.4%; animation-duration: 8s; animation-delay: -6s; }
.hero-banner__balloon--b7 { left: 96%;   top: 54%; width: 2%;   animation-duration: 12s; animation-delay: -2s; }

.hero-banner__slides {
    position: absolute;
    left: var(--hero-left);
    top: 16%;
    width: min(42%, 640px);
    z-index: 3;
}

.hero-banner__slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
}

.hero-banner__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .7s ease, transform .7s ease, visibility 0s;
}

.hero-banner__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.35vw;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(11px, .95vw, 16px);
    font-weight: 600;
    letter-spacing: .24em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hero-banner__eyebrow::before {
    flex: 0 0 auto;
    width: clamp(24px, 2.6vw, 44px);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f9842b, #fb4423);
    content: "";
}

.hero-banner__title {
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(4, 12, 32, .35);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(25px, 3.3vw, 45px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.005em;
    text-transform: uppercase;
}

.hero-banner__title span {
    display: block;
}

.hero-banner__title .is-accent {
    background: linear-gradient(90deg, #5cc4ff 0%, #8fd8ff 55%, #c4ecff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.hero-banner__desc {
    max-width: 520px;
    margin-top: clamp(10px, 1.1vw, 18px);
    color: rgba(255, 255, 255, .85);
    font-family: "Plus Jakarta Sans", "Montserrat", sans-serif;
    font-size: clamp(13px, 1.05vw, 17px);
    line-height: 1.65;
}

.hero-banner__desc p {
    margin: 0;
    color: inherit;
}

.hero-banner__site {
    margin: 2.3vw 0 0;
    color: var(--hero-navy);
    font-size: clamp(11px, .98vw, 17px);
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1;
    text-transform: uppercase;
}

.hero-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: .55vw;
    margin-top: 2vw;
    text-decoration: none;
}

.hero-banner__cta-label {
    display: inline-flex;
    align-items: center;
    height: clamp(38px, 3.3vw, 58px);
    padding: 0 clamp(16px, 1.75vw, 32px);
    border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: 999px;
    color: #ffffff;
    font-size: clamp(11px, .95vw, 16px);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.hero-banner__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 3.3vw, 58px);
    height: clamp(38px, 3.3vw, 58px);
    border-radius: 50%;
    background: linear-gradient(135deg, #f9842b, #fb4423);
    box-shadow: 0 8px 20px rgba(251, 68, 35, .35);
    color: #ffffff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.hero-banner__cta-icon svg {
    width: 42%;
    height: 42%;
}

.hero-banner__cta:hover .hero-banner__cta-label {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--hero-navy);
}

.hero-banner__cta:hover .hero-banner__cta-icon {
    box-shadow: 0 10px 24px rgba(251, 68, 35, .45);
    transform: translateX(4px);
}

.hero-banner__pager {
    position: absolute;
    left: var(--hero-left);
    top: 80%;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.25vw, 22px);
    transform: translateY(-50%);
}

.hero-banner button {
    min-width: 0;
    height: auto;
    margin: 0;
    box-shadow: none;
    text-shadow: none;
}

.hero-banner .hero-banner__dot {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, .72);
    font-family: inherit;
    font-size: clamp(11px, .98vw, 17px);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
    transition: color .25s ease;
}

.hero-banner .hero-banner__dot.is-active,
.hero-banner .hero-banner__dot:hover {
    color: #ffffff;
    background: none;
}

.hero-banner__progress {
    position: relative;
    width: clamp(90px, 13vw, 240px);
    height: 2px;
    margin-left: clamp(4px, .6vw, 12px);
    background: rgba(255, 255, 255, .35);
    overflow: hidden;
}

.hero-banner__progress span {
    position: absolute;
    inset: 0;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left center;
}

.hero-banner__progress span.is-running {
    animation: hero-progress var(--hero-interval, 6s) linear forwards;
}

.hero-banner__nav {
    position: absolute;
    right: 3.9%;
    top: 76%;
    z-index: 6;
    display: flex;
    gap: clamp(8px, 1.3vw, 20px);
    transform: translateY(-50%);
}

.hero-banner .hero-banner__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(34px, 2.8vw, 48px);
    height: clamp(34px, 2.8vw, 48px);
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: rgba(7, 34, 75, .28);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}

.hero-banner__arrow svg {
    width: 44%;
    height: 44%;
}

.hero-banner .hero-banner__arrow:hover {
    background: rgba(255, 255, 255, .25);
    transform: scale(1.06);
}

.hero-banner__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 5;
    width: 100%;
    background: linear-gradient(180deg, rgba(246, 248, 248, 0) 70%, rgba(246, 248, 248, .88) 88%, #f6f8f8 100%);
    pointer-events: none;
}

.hero-banner__wave::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, rgba(246, 248, 248, 0) 0%, rgba(246, 248, 248, .75) 55%, #f6f8f8 100%);
}

.hero-banner__wave img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1000 / 200;
    object-fit: fill;
    margin-bottom: -3.8%;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3.5%); }
}

@keyframes hero-zoom {
    from { transform: scale(1.04); }
    to { transform: scale(1.1); }
}

@keyframes hero-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 959px) {
    .hero-banner {
        --hero-left: 6%;
        height: clamp(460px, 78vw, 640px);
    }

    .hero-banner__slides {
        top: 12%;
        width: 60%;
    }

    .hero-banner__balloon--main {
        width: 40%;
        right: 2%;
        top: 4%;
    }

    .hero-banner__balloon--b6,
    .hero-banner__balloon--b7 {
        display: none;
    }

    .hero-banner__eyebrow { margin-bottom: 14px; }
    .hero-banner__site { margin-top: 18px; }
    .hero-banner__cta { margin-top: 18px; gap: 6px; }
}

@media (max-width: 600px) {
    .hero-banner {
        height: 560px;
    }

    .hero-banner__media::before {
        background: linear-gradient(180deg, rgba(6, 18, 48, .78) 0%, rgba(6, 18, 48, .55) 45%, rgba(6, 18, 48, .1) 70%, rgba(6, 18, 48, 0) 80%);
    }

    .hero-banner__media::after {
        background: linear-gradient(0deg, rgba(7, 34, 75, .55) 0%, rgba(7, 34, 75, 0) 30%);
    }

    .hero-banner__slides {
        top: 7%;
        width: 88%;
    }

    .hero-banner__balloon--main {
        width: 58%;
        right: -6%;
        top: 44%;
    }

    .hero-banner__balloon--b1,
    .hero-banner__balloon--b2,
    .hero-banner__balloon--b3 {
        display: none;
    }

    .hero-banner__pager,
    .hero-banner__nav {
        top: 80%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner__bg,
    .hero-banner__balloon {
        animation: none;
    }

    .hero-banner__slide {
        transition: none;
    }
}