/*
 * VELTRIX HOME 2.5
 * Banner iPhone 18 Pro
 */

.vx18 {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 520px;
    background: #04060a;
    color: #fff;
    isolation: isolate;
}

.vx18-track {
    position: relative;
    min-height: 520px;
}

.vx18-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.015);
    transition:
        opacity .65s ease,
        visibility .65s ease,
        transform 1.1s ease;
    pointer-events: none;
}

.vx18-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
}

.vx18-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.vx18-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(2, 4, 8, .95) 0%,
            rgba(3, 6, 12, .83) 42%,
            rgba(5, 8, 14, .25) 70%,
            rgba(5, 8, 14, .55) 100%
        );
}

.vx18-bg-one {
    background:
        radial-gradient(
            circle at 76% 50%,
            rgba(117, 22, 43, .7),
            transparent 29%
        ),
        radial-gradient(
            circle at 70% 22%,
            rgba(70, 82, 111, .3),
            transparent 32%
        ),
        #05070c;
}

.vx18-bg-two {
    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(39, 75, 137, .48),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(83, 37, 118, .28),
            transparent 30%
        ),
        #03060b;
}

.vx18-bg-three {
    background:
        radial-gradient(
            circle at 76% 50%,
            rgba(34, 105, 138, .4),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(74, 30, 105, .27),
            transparent 28%
        ),
        #030609;
}

.vx18-inner {
    width: min(1220px, calc(100% - 64px));
    min-height: 520px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    align-items: center;
    gap: 30px;
    position: relative;
}

.vx18-copy {
    padding: 64px 0 74px;
    position: relative;
    z-index: 5;
}

.vx18-kicker {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .24em;
    color: rgba(255,255,255,.58);
}

.vx18-badge {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 11px;
    margin-bottom: 19px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.vx18 h2 {
    max-width: 660px;
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 5.6vw, 82px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 760;
}

.vx18 h2 span {
    display: block;
    color: rgba(255,255,255,.65);
    font-weight: 600;
}

.vx18-lead {
    margin: 25px 0 7px;
    color: rgba(255,255,255,.94);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.25;
    letter-spacing: -.02em;
}

.vx18-meta {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,.56);
    font-size: 13px;
    line-height: 1.55;
}

.vx18-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    margin-top: 25px;
    padding: 0 20px;
    border-radius: 999px;
    background: #fff;
    color: #070a10;
    text-decoration: none;
    font-size: 13px;
    font-weight: 760;
    transition:
        transform .2s ease,
        opacity .2s ease;
}

.vx18-button:hover {
    color: #070a10;
    transform: translateY(-2px);
}

.vx18-button span {
    font-size: 19px;
    line-height: 1;
}

.vx18-visual {
    position: relative;
    height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vx18-visual.has-image img {
    position: relative;
    width: min(650px, 110%);
    max-height: 480px;
    object-fit: contain;
    filter:
        drop-shadow(0 40px 55px rgba(0,0,0,.45));
    transform: translateX(4%);
}

.vx18-device {
    position: absolute;
    width: 190px;
    height: 385px;
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow:
        0 50px 80px rgba(0,0,0,.5),
        inset 0 0 0 4px rgba(255,255,255,.05);
}

.vx18-device-back {
    transform:
        translate(-58px, 13px)
        rotate(-9deg);
    background:
        linear-gradient(
            145deg,
            #7f233a,
            #3c111e 54%,
            #18070d
        );
}

.vx18-device-front {
    transform:
        translate(68px, -11px)
        rotate(8deg);
    overflow: hidden;
    background:
        radial-gradient(
            circle at 55% 70%,
            rgba(126, 25, 49, .95),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #10121a,
            #010205
        );
}

.vx18-camera {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 45% 43%,
            #27445c 0 13%,
            #081018 16% 47%,
            #1b1c20 50% 66%,
            #050608 69%
        );
    box-shadow:
        0 0 0 4px rgba(147, 80, 91, .65);
}

.vx18-camera.c1 {
    top: 28px;
    left: 26px;
}

.vx18-camera.c2 {
    top: 88px;
    left: 26px;
}

.vx18-camera.c3 {
    top: 57px;
    left: 84px;
}

.vx18-island {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 73px;
    height: 20px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: #000;
}

.vx18-screen-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:
        translate(-50%, -50%);
    font-size: 105px;
    font-weight: 750;
    letter-spacing: -.09em;
    color: rgba(255,255,255,.86);
}

.vx18-feature-visual {
    position: relative;
    height: 430px;
}

.vx18-lens {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 46% 43%,
            #26435f 0 8%,
            #07101a 11% 37%,
            #28313c 40% 43%,
            #090b0e 47% 65%,
            #3d4550 68% 72%,
            #090b0e 76%
        );
    box-shadow:
        0 30px 60px rgba(0,0,0,.48),
        0 0 60px rgba(56,104,182,.15);
}

.vx18-lens span {
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
}

.vx18-lens-one {
    width: 180px;
    height: 180px;
    right: 24%;
    top: 35px;
}

.vx18-lens-two {
    width: 130px;
    height: 130px;
    right: 5%;
    top: 165px;
}

.vx18-lens-three {
    width: 105px;
    height: 105px;
    right: 41%;
    top: 245px;
}

.vx18-feature-number {
    position: absolute;
    right: 3%;
    bottom: 5px;
    font-size: 96px;
    line-height: .9;
    font-weight: 760;
    letter-spacing: -.07em;
    color: rgba(255,255,255,.18);
}

.vx18-feature-number small {
    font-size: 20px;
    letter-spacing: 0;
}

.vx18-chip-wrap {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vx18-chip-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(64,147,191,.36),
            rgba(53,50,134,.12) 45%,
            transparent 70%
        );
    filter: blur(18px);
}

.vx18-chip {
    position: relative;
    z-index: 3;
    width: 225px;
    height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    border: 1px solid rgba(255,255,255,.22);
    background:
        linear-gradient(
            145deg,
            rgba(25,31,42,.98),
            rgba(5,8,13,.98)
        );
    box-shadow:
        0 40px 90px rgba(0,0,0,.55),
        inset 0 0 35px rgba(80,154,196,.08);
}

.vx18-chip::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 27px;
}

.vx18-chip span {
    font-size: 62px;
    line-height: .95;
    font-weight: 750;
    letter-spacing: -.07em;
}

.vx18-chip small {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .24em;
    color: rgba(255,255,255,.55);
}

.vx18-chip-line {
    position: absolute;
    height: 1px;
    width: 150px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(101,184,229,.5),
            transparent
        );
}

.vx18-chip-line.line-one {
    transform:
        translate(-180px,-90px)
        rotate(20deg);
}

.vx18-chip-line.line-two {
    transform:
        translate(180px,-80px)
        rotate(-18deg);
}

.vx18-chip-line.line-three {
    transform:
        translate(-170px,100px)
        rotate(-17deg);
}

.vx18-chip-line.line-four {
    transform:
        translate(180px,100px)
        rotate(17deg);
}

.vx18-arrow {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(6,8,13,.37);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,.75);
    font-size: 27px;
    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.vx18-arrow:hover {
    background: rgba(255,255,255,.11);
    color: #fff;
}

.vx18-prev {
    left: 18px;
}

.vx18-next {
    right: 18px;
}

.vx18-dots {
    position: absolute;
    z-index: 8;
    bottom: 24px;
    left: 50%;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.vx18-dot {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    transition:
        width .25s ease,
        background .25s ease;
}

.vx18-dot.is-active {
    width: 48px;
    background: rgba(255,255,255,.92);
}

@media (max-width: 900px) {

    .vx18,
    .vx18-track {
        min-height: 630px;
    }

    .vx18-inner {
        width: min(100% - 38px, 720px);
        min-height: 630px;
        grid-template-columns: 1fr;
        align-content: center;
        gap: 0;
    }

    .vx18-copy {
        padding: 62px 0 10px;
        text-align: center;
    }

    .vx18 h2 {
        margin-inline: auto;
        font-size: clamp(43px, 11vw, 72px);
    }

    .vx18-meta {
        margin-inline: auto;
    }

    .vx18-visual,
    .vx18-feature-visual,
    .vx18-chip-wrap {
        height: 245px;
        min-height: 245px;
    }

    .vx18-visual.has-image img {
        max-height: 270px;
        transform: none;
    }

    .vx18-device {
        width: 113px;
        height: 230px;
        border-radius: 25px;
    }

    .vx18-camera {
        width: 29px;
        height: 29px;
    }

    .vx18-camera.c1 {
        top: 19px;
        left: 17px;
    }

    .vx18-camera.c2 {
        top: 55px;
        left: 17px;
    }

    .vx18-camera.c3 {
        top: 37px;
        left: 52px;
    }

    .vx18-screen-number {
        font-size: 62px;
    }

    .vx18-lens-one {
        width: 105px;
        height: 105px;
        right: 51%;
        top: 15px;
    }

    .vx18-lens-two {
        width: 82px;
        height: 82px;
        right: 29%;
        top: 92px;
    }

    .vx18-lens-three {
        width: 63px;
        height: 63px;
        right: 57%;
        top: 135px;
    }

    .vx18-feature-number {
        right: 8%;
        font-size: 60px;
    }

    .vx18-chip {
        width: 150px;
        height: 150px;
        border-radius: 25px;
    }

    .vx18-chip span {
        font-size: 43px;
    }

    .vx18-chip-glow {
        width: 240px;
        height: 240px;
    }

    .vx18-chip-line {
        width: 90px;
    }

    .vx18-chip-line.line-one {
        transform:
            translate(-115px,-60px)
            rotate(20deg);
    }

    .vx18-chip-line.line-two {
        transform:
            translate(115px,-55px)
            rotate(-18deg);
    }

    .vx18-chip-line.line-three {
        transform:
            translate(-110px,68px)
            rotate(-17deg);
    }

    .vx18-chip-line.line-four {
        transform:
            translate(115px,68px)
            rotate(17deg);
    }

}

@media (max-width: 600px) {

    .vx18,
    .vx18-track {
        min-height: 660px;
    }

    .vx18-inner {
        min-height: 660px;
        width: calc(100% - 30px);
    }

    .vx18-copy {
        padding-top: 52px;
    }

    .vx18 h2 {
        font-size: 45px;
    }

    .vx18-lead {
        font-size: 18px;
    }

    .vx18-meta {
        font-size: 12px;
    }

    .vx18-arrow {
        top: auto;
        bottom: 17px;
        width: 36px;
        height: 36px;
        transform: none;
    }

    .vx18-prev {
        left: 15px;
    }

    .vx18-next {
        right: 15px;
    }

    .vx18-dots {
        bottom: 33px;
    }

}

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

    .vx18-slide,
    .vx18-button,
    .vx18-dot {
        transition: none;
    }

}