/* =========================================================
   VORIK SERVICES PREMIUM HUB
   ========================================================= */

[data-vorik-services-premium] {
    --vsh-blue: #0f4c81;
    --vsh-blue-2: #1768a6;
    --vsh-sky: #38bdf8;
    --vsh-dark: #092d4c;
    --vsh-ink: #10263b;
    --vsh-muted: #637487;
    --vsh-line: #dfe8ef;
    --vsh-soft: #f4f8fb;
    --vsh-white: #ffffff;

    color: var(--vsh-ink);
    background: #fff;
    overflow: hidden;
}

[data-vorik-services-premium] *,
[data-vorik-services-premium] *::before,
[data-vorik-services-premium] *::after {
    box-sizing: border-box;
}

.vsh-shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.vsh-section {
    padding: 96px 0;
}

.vsh-kicker,
.vsh-eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--vsh-blue);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vsh-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.vsh-heading-center {
    margin-inline: auto;
    text-align: center;
}

.vsh-heading h2,
.vsh-platform-copy h2,
.vsh-position-card h2,
.vsh-final-card h2 {
    margin: 12px 0 16px;
    color: var(--vsh-ink);
    font-size: clamp(31px, 4vw, 49px);
    line-height: 1.07;
    letter-spacing: -.04em;
}

.vsh-heading p,
.vsh-platform-copy > p {
    margin: 0;
    color: var(--vsh-muted);
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   BUTTONS — EXPLICIT CONTRAST
   ========================================================= */

.vsh-btn {
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 800;
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.vsh-btn:hover {
    transform: translateY(-2px);
}

.vsh-btn-primary,
.vsh-btn-primary:link,
.vsh-btn-primary:visited,
.vsh-btn-primary * {
    color: #fff !important;
}

.vsh-btn-primary {
    background: var(--vsh-blue);
    border: 1px solid var(--vsh-blue);
    box-shadow: 0 14px 30px rgba(15,76,129,.18);
}

.vsh-btn-primary:hover,
.vsh-btn-primary:focus {
    background: var(--vsh-dark);
    border-color: var(--vsh-dark);
    color: #fff !important;
}

.vsh-btn-secondary,
.vsh-btn-secondary:link,
.vsh-btn-secondary:visited,
.vsh-btn-secondary * {
    color: var(--vsh-ink) !important;
}

.vsh-btn-secondary {
    background: #fff;
    border: 1px solid #cfdae3;
}

.vsh-btn-secondary:hover {
    border-color: var(--vsh-blue);
    color: var(--vsh-blue) !important;
}

.vsh-btn-white,
.vsh-btn-white:link,
.vsh-btn-white:visited,
.vsh-btn-white * {
    color: var(--vsh-dark) !important;
}

.vsh-btn-white {
    background: #fff;
    border: 1px solid #fff;
}

.vsh-btn-white:hover {
    background: var(--vsh-sky);
    border-color: var(--vsh-sky);
    color: var(--vsh-dark) !important;
}

.vsh-btn-outline-light,
.vsh-btn-outline-light:link,
.vsh-btn-outline-light:visited,
.vsh-btn-outline-light * {
    color: #fff !important;
}

.vsh-btn-outline-light {
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.08);
}

.vsh-btn-outline-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--vsh-dark) !important;
}

.vsh-btn-outline-light:hover * {
    color: var(--vsh-dark) !important;
}

.vsh-btn:focus-visible,
.vsh-service-card:focus-visible {
    outline: 3px solid #f6c945;
    outline-offset: 3px;
}


/* =========================================================
   HERO
   ========================================================= */

.vsh-hero {
    position: relative;
    min-height: 720px;
    padding: 100px 0;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 80% 20%, rgba(56,189,248,.18), transparent 29%),
        radial-gradient(circle at 8% 85%, rgba(15,76,129,.09), transparent 26%),
        linear-gradient(135deg, #f7fbfd 0%, #fff 56%, #eef8fc 100%);
}

.vsh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(rgba(15,76,129,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,76,129,.045) 1px, transparent 1px);
    background-size: 40px 40px;
}

.vsh-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .94fr 1.06fr;
    gap: 70px;
    align-items: center;
}

.vsh-hero-copy h1 {
    max-width: 680px;
    margin: 18px 0 22px;
    color: var(--vsh-ink);
    font-size: clamp(48px, 5.6vw, 74px);
    line-height: .98;
    letter-spacing: -.055em;
}

.vsh-lead {
    max-width: 660px;
    margin: 0;
    color: var(--vsh-muted);
    font-size: 19px;
    line-height: 1.72;
}

.vsh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 31px;
}

.vsh-hero-trust {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.vsh-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #53697a;
    font-size: 13px;
    font-weight: 800;
}

.vsh-hero-trust i {
    color: var(--vsh-blue);
}


/* HERO ECOSYSTEM */

.vsh-hero-visual {
    position: relative;
    min-height: 540px;
}

.vsh-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(15,76,129,.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.vsh-orbit-one {
    width: 470px;
    height: 470px;
}

.vsh-orbit-two {
    width: 330px;
    height: 330px;
}

.vsh-core {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 35% 25%, #267db7, var(--vsh-blue) 50%, var(--vsh-dark));
    color: #fff;
    box-shadow: 0 30px 70px rgba(15,76,129,.28);
}

.vsh-core-mark {
    width: 55px;
    height: 55px;
    margin-bottom: 8px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--vsh-blue);
    font-size: 29px;
    font-weight: 900;
}

.vsh-core strong {
    font-size: 19px;
    letter-spacing: .05em;
}

.vsh-core small {
    margin-top: 4px;
    color: #d6edf9;
    font-size: 10px;
}

.vsh-satellite {
    position: absolute;
    z-index: 6;
    min-width: 180px;
    padding: 14px 16px;
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 20px 45px rgba(20,54,82,.13);
}

.vsh-satellite > span {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #eaf6fc;
    color: var(--vsh-blue);
}

.vsh-satellite > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vsh-satellite small {
    color: #8495a2;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.vsh-satellite b {
    color: var(--vsh-ink);
    font-size: 13px;
}

.vsh-satellite-rider {
    left: 0;
    top: 80px;
}

.vsh-satellite-driver {
    right: -5px;
    top: 125px;
}

.vsh-satellite-owner {
    left: 15px;
    bottom: 70px;
}

.vsh-satellite-fleet {
    right: 0;
    bottom: 55px;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.vsh-paths {
    background: #fff;
    scroll-margin-top: 90px;
}

.vsh-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.vsh-service-card,
.vsh-service-card:link,
.vsh-service-card:visited {
    position: relative;
    min-height: 430px;
    padding: 34px;
    border: 1px solid var(--vsh-line);
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--vsh-ink) !important;
    text-decoration: none !important;
    background: #fff;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.vsh-service-card:hover {
    transform: translateY(-6px);
    border-color: #c9dce9;
    box-shadow: 0 28px 60px rgba(20,54,82,.11);
}

.vsh-service-card * {
    text-decoration: none !important;
}

.vsh-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vsh-card-icon {
    width: 55px;
    height: 55px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: #eaf6fc;
    color: var(--vsh-blue);
    font-size: 20px;
}

.vsh-card-number {
    color: #b4c1ca;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
}

.vsh-card-label {
    margin-top: 32px;
    color: var(--vsh-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}

.vsh-service-card h3 {
    max-width: 440px;
    margin: 10px 0 13px;
    color: var(--vsh-ink);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.vsh-service-card p {
    max-width: 490px;
    margin: 0;
    color: var(--vsh-muted);
    font-size: 14px;
    line-height: 1.7;
}

.vsh-card-action {
    margin-top: auto;
    padding-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--vsh-blue);
    font-size: 13px;
    font-weight: 900;
}

.vsh-card-action i {
    transition: transform .2s ease;
}

.vsh-service-card:hover .vsh-card-action i {
    transform: translateX(4px);
}


/* RIDER VISUAL */

.vsh-card-visual {
    position: relative;
    height: 90px;
    margin-top: 24px;
    border-radius: 17px;
    overflow: hidden;
    background: #f3f8fb;
}

.vsh-route-line {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 44px;
    height: 3px;
    background: #bfd3df;
}

.vsh-route-line::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 18%;
    top: -1px;
    border-top: 5px dotted var(--vsh-sky);
}

.vsh-route-line span {
    position: absolute;
    top: -7px;
    width: 17px;
    height: 17px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--vsh-blue);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.vsh-route-line span:first-child { left: 0; }
.vsh-route-line span:last-child { right: 0; }

.vsh-card-visual > i {
    position: absolute;
    z-index: 2;
    left: 53%;
    top: 31px;
    color: var(--vsh-blue);
    font-size: 26px;
}


/* DRIVER VISUAL */

.vsh-driver-visual {
    position: relative;
    margin-top: 24px;
    padding: 20px;
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(135deg, var(--vsh-dark), var(--vsh-blue));
    color: #fff;
}

.vsh-online-dot {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,255,.6);
    border-radius: 50%;
    background: #48d597;
}

.vsh-driver-visual b {
    color: #fff;
}

.vsh-driver-visual small {
    margin-top: 4px;
    color: #d7e7f0;
}


/* OWNER VISUAL */

.vsh-owner-visual {
    margin-top: 24px;
    padding: 19px 21px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 17px;
    background: #eef7fb;
}

.vsh-owner-visual > i {
    color: var(--vsh-blue);
    font-size: 42px;
}

.vsh-owner-visual > div {
    display: flex;
    flex-direction: column;
}

.vsh-owner-visual small {
    color: #8294a2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.vsh-owner-visual b {
    margin-top: 3px;
    color: var(--vsh-ink);
}


/* FLEET VISUAL */

.vsh-fleet-visual {
    margin-top: 24px;
    padding: 20px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    background: var(--vsh-dark);
}

.vsh-fleet-visual span {
    width: 58px;
    height: 50px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.1);
    color: var(--vsh-sky);
}


/* =========================================================
   PLATFORM
   ========================================================= */

.vsh-platform-section {
    background: var(--vsh-dark);
}

.vsh-platform-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.vsh-platform-copy .vsh-kicker {
    color: var(--vsh-sky);
}

.vsh-platform-copy h2 {
    color: #fff;
}

.vsh-platform-copy > p {
    color: #bacbd6;
}

.vsh-platform-points {
    margin-top: 30px;
    display: grid;
    gap: 13px;
}

.vsh-platform-points div {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #eef6fa;
    font-size: 14px;
    font-weight: 700;
}

.vsh-platform-points i {
    color: var(--vsh-sky);
}


/* MAP */

.vsh-platform-map {
    position: relative;
    min-height: 450px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 28px;
    overflow: hidden;
    background: #f6fafc;
    box-shadow: 0 30px 70px rgba(0,0,0,.25);
}

.vsh-map-grid {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(#dbe7ed 1px, transparent 1px),
        linear-gradient(90deg, #dbe7ed 1px, transparent 1px);
    background-size: 45px 45px;
}

.vsh-map-route {
    position: absolute;
    height: 5px;
    border-radius: 30px;
    background: var(--vsh-blue);
    transform-origin: left center;
}

.vsh-map-route-a {
    left: 18%;
    top: 57%;
    width: 58%;
    transform: rotate(-20deg);
}

.vsh-map-route-b {
    left: 44%;
    top: 40%;
    width: 42%;
    transform: rotate(31deg);
    background: var(--vsh-sky);
}

.vsh-map-pin {
    position: absolute;
    z-index: 3;
    width: 47px;
    height: 47px;
    border: 5px solid #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--vsh-blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(20,54,82,.2);
}

.vsh-map-pin-a { left: 15%; top: 56%; }
.vsh-map-pin-b { right: 19%; top: 26%; }
.vsh-map-pin-c { right: 12%; bottom: 19%; }

.vsh-map-center {
    position: absolute;
    z-index: 5;
    left: 48%;
    top: 46%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border-radius: 14px;
    background: var(--vsh-dark);
    color: #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
}

.vsh-map-center b {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--vsh-blue);
}

.vsh-map-center span {
    font-size: 12px;
    font-weight: 900;
}

.vsh-map-card {
    position: absolute;
    z-index: 4;
    left: 25px;
    top: 24px;
    padding: 13px 16px;
    border: 1px solid #dce7ed;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 12px 25px rgba(20,54,82,.1);
}

.vsh-map-card small {
    color: #8395a3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.vsh-map-card strong {
    margin-top: 3px;
    color: var(--vsh-ink);
}


/* =========================================================
   OPTIONS
   ========================================================= */

.vsh-options-section {
    background: var(--vsh-soft);
}

.vsh-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.vsh-options-grid article {
    min-height: 255px;
    padding: 28px;
    border: 1px solid #dce6ed;
    border-radius: 22px;
    background: #fff;
}

.vsh-options-grid article > span {
    width: 51px;
    height: 51px;
    margin-bottom: 27px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #eaf6fc;
    color: var(--vsh-blue);
    font-size: 19px;
}

.vsh-options-grid h3 {
    margin: 0 0 11px;
    color: var(--vsh-ink);
    font-size: 19px;
}

.vsh-options-grid p {
    margin: 0;
    color: var(--vsh-muted);
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   POSITION
   ========================================================= */

.vsh-position-section {
    padding-top: 35px;
    background: #fff;
}

.vsh-position-card {
    padding: 42px;
    border: 1px solid #dce7ee;
    border-radius: 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
    background: linear-gradient(135deg, #f7fbfd, #fff);
}

.vsh-position-icon {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: var(--vsh-blue);
    color: #fff;
    font-size: 23px;
}

.vsh-position-card h2 {
    margin-top: 8px;
    font-size: 30px;
}

.vsh-position-card p {
    max-width: 900px;
    margin: 0;
    color: var(--vsh-muted);
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.vsh-final-section {
    padding: 20px 0 100px;
    background: #fff;
}

.vsh-final-card {
    position: relative;
    min-height: 430px;
    padding: 60px;
    border-radius: 34px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr .8fr;
    align-items: center;
    background:
        radial-gradient(circle at 90% 5%, rgba(56,189,248,.3), transparent 36%),
        linear-gradient(135deg, var(--vsh-blue), var(--vsh-dark));
}

.vsh-final-card > div:first-child {
    position: relative;
    z-index: 5;
}

.vsh-final-card > div:first-child > span {
    color: var(--vsh-sky);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
}

.vsh-final-card h2 {
    max-width: 620px;
    color: #fff;
    font-size: clamp(38px, 4.2vw, 56px);
}

.vsh-final-card p {
    max-width: 600px;
    margin: 0;
    color: #d4e6ef;
    font-size: 16px;
    line-height: 1.7;
}

.vsh-final-actions {
    margin-top: 29px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vsh-final-visual {
    position: relative;
    min-height: 300px;
}

.vsh-final-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.vsh-final-circle::after {
    content: "";
    position: absolute;
    inset: 35px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
}

.vsh-final-logo {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.vsh-final-logo b {
    width: 75px;
    height: 75px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--vsh-blue);
    font-size: 39px;
}

.vsh-final-logo strong {
    margin-top: 9px;
    letter-spacing: .08em;
}

.vsh-final-mini {
    position: absolute;
    z-index: 5;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    color: #fff;
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 800;
}

.vsh-mini-owner {
    left: 0;
    top: 55px;
}

.vsh-mini-fleet {
    right: 0;
    bottom: 55px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .vsh-hero-grid,
    .vsh-platform-grid {
        grid-template-columns: 1fr;
    }

    .vsh-hero-visual {
        width: min(680px, 100%);
        margin-inline: auto;
    }

    .vsh-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 780px) {
    .vsh-shell {
        width: min(100% - 28px, 1180px);
    }

    .vsh-section {
        padding: 72px 0;
    }

    .vsh-hero {
        min-height: auto;
        padding: 72px 0;
    }

    .vsh-hero-copy h1 {
        font-size: clamp(41px, 12vw, 59px);
    }

    .vsh-hero-grid {
        gap: 30px;
    }

    .vsh-service-grid,
    .vsh-final-card {
        grid-template-columns: 1fr;
    }

    .vsh-position-card {
        grid-template-columns: 1fr;
    }

    .vsh-final-card {
        padding: 42px 30px;
    }
}

@media (max-width: 560px) {
    .vsh-hero-visual {
        min-height: 450px;
    }

    .vsh-orbit-one {
        width: 360px;
        height: 360px;
    }

    .vsh-orbit-two {
        width: 255px;
        height: 255px;
    }

    .vsh-core {
        width: 150px;
        height: 150px;
    }

    .vsh-satellite {
        min-width: 145px;
        padding: 10px;
    }

    .vsh-satellite > span {
        width: 32px;
        height: 32px;
    }

    .vsh-satellite-rider {
        top: 45px;
    }

    .vsh-satellite-driver {
        top: 105px;
    }

    .vsh-satellite-owner {
        bottom: 60px;
        left: 0;
    }

    .vsh-satellite-fleet {
        bottom: 25px;
    }

    .vsh-options-grid {
        grid-template-columns: 1fr;
    }

    .vsh-service-card {
        min-height: 410px;
        padding: 27px;
    }

    .vsh-platform-map {
        min-height: 380px;
    }

    .vsh-final-actions,
    .vsh-actions {
        flex-direction: column;
    }

    .vsh-actions .vsh-btn,
    .vsh-final-actions .vsh-btn {
        width: 100%;
    }

    .vsh-final-visual {
        min-height: 250px;
    }
}