/* =========================================================
   NSKDELIVERY PARTNERS
   Light Liquid Glass UI
   ========================================================= */

:root {
    --bg: #f5f7fb;
    --text: #111318;
    --muted: #737985;

    --glass: rgba(255, 255, 255, .58);
    --glass-strong: rgba(255, 255, 255, .76);
    --glass-border: rgba(255, 255, 255, .82);

    --shadow:
        0 30px 80px rgba(60, 70, 90, .12),
        0 8px 30px rgba(60, 70, 90, .08);

    --radius-xl: 42px;
    --radius-lg: 30px;
    --radius-md: 21px;

    --ease: cubic-bezier(.2, .8, .2, 1);
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(255,255,255,.95),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(220,232,255,.65),
            transparent 38%
        ),
        var(--bg);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


a,
button {
    -webkit-tap-highlight-color: transparent;
}


button {
    font: inherit;
    border: 0;
    cursor: pointer;
}


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

.ambient-background {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -2;
}


.light-orb {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(75px);

    opacity: .48;

    animation:
        orbFloat 16s ease-in-out infinite alternate;
}


.orb-1 {
    top: -150px;
    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(255,210,225,.85),
            transparent 68%
        );
}


.orb-2 {
    top: 15%;
    right: -150px;

    background:
        radial-gradient(
            circle,
            rgba(190,220,255,.9),
            transparent 68%
        );

    animation-delay: -5s;
}


.orb-3 {
    bottom: -180px;
    left: 20%;

    background:
        radial-gradient(
            circle,
            rgba(210,245,225,.8),
            transparent 68%
        );

    animation-delay: -9s;
}


.orb-4 {
    top: 45%;
    left: 40%;

    width: 260px;
    height: 260px;

    background:
        radial-gradient(
            circle,
            rgba(230,220,255,.7),
            transparent 68%
        );

    animation-delay: -12s;
}


@keyframes orbFloat {

    0% {
        transform:
            translate3d(-20px,-10px,0)
            scale(.95);
    }

    50% {
        transform:
            translate3d(50px,40px,0)
            scale(1.08);
    }

    100% {
        transform:
            translate3d(-10px,70px,0)
            scale(1);
    }
}


.ambient-grid {
    position: absolute;
    inset: -100px;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(120,130,150,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120,130,150,.12) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 70%
        );

    animation:
        gridMove 30s linear infinite;
}


@keyframes gridMove {

    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(70px,70px);
    }
}


/* =========================================================
   CURSOR
   ========================================================= */

.cursor-glow {
    position: fixed;

    width: 260px;
    height: 260px;

    left: 0;
    top: 0;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.65),
            rgba(210,225,255,.18) 35%,
            transparent 70%
        );

    filter: blur(12px);

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

    z-index: 10;

    opacity: 0;

    transition:
        opacity .5s ease;
}


/* =========================================================
   APP
   ========================================================= */

.app {
    width:
        min(
            1440px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    min-height: 100vh;

    padding:
        28px 0
        30px;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    animation:
        fadeDown .8s var(--ease) both;
}


@keyframes fadeDown {

    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.brand {
    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--text);

    text-decoration: none;
}


.brand-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(225,230,240,.58)
        );

    border:
        1px solid rgba(255,255,255,.9);

    box-shadow:
        0 8px 24px rgba(60,70,90,.12),
        inset 0 1px 1px rgba(255,255,255,.95);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


.brand-symbol {
    font-weight: 800;

    font-size: 18px;

    letter-spacing: -1px;
}


.brand-name {
    font-size: 14px;

    font-weight: 750;

    letter-spacing: .16em;
}


.home-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 44px;

    padding:
        0 15px;

    color: #555a63;

    text-decoration: none;

    font-size: 12px;

    font-weight: 650;

    border-radius: 999px;

    background:
        rgba(255,255,255,.48);

    border:
        1px solid rgba(255,255,255,.78);

    box-shadow:
        0 10px 25px rgba(60,70,90,.06),
        inset 0 1px 1px rgba(255,255,255,.9);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        transform .3s var(--ease),
        box-shadow .3s ease;
}


.home-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background:
        rgba(255,255,255,.7);
}


.home-icon svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   GLASS
   ========================================================= */

.glass-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.38)
        );

    border:
        1px solid rgba(255,255,255,.86);

    box-shadow:
        var(--shadow),
        inset 0 1px 1px rgba(255,255,255,.95);

    backdrop-filter:
        blur(35px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(35px)
        saturate(140%);
}


.glass-small {
    background:
        rgba(255,255,255,.58);

    border:
        1px solid rgba(255,255,255,.82);

    box-shadow:
        0 18px 40px rgba(60,70,90,.1),
        inset 0 1px 1px rgba(255,255,255,.9);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}


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

.hero {
    min-height: 690px;

    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(500px,1.1fr);

    align-items: center;

    gap: 70px;

    padding:
        70px 0
        55px;
}


.hero-content {
    max-width: 620px;

    animation:
        heroReveal 1s .1s var(--ease) both;
}


@keyframes heroReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.glass-pill {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 13px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.48);

    border:
        1px solid rgba(255,255,255,.82);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.9),
        0 10px 30px rgba(70,80,100,.06);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    font-size: 12px;

    font-weight: 600;

    color: #676d78;
}


.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #7bcf99;

    box-shadow:
        0 0 12px rgba(80,190,120,.6);
}


h1 {
    margin-top: 27px;

    font-size:
        clamp(
            58px,
            6vw,
            92px
        );

    line-height: .93;

    letter-spacing: -.075em;

    font-weight: 760;
}


h1 span,
h2 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            110deg,
            #16181c 0%,
            #6f7480 45%,
            #a6abb5 75%,
            #272a30 100%
        );

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

    background-size: 220% auto;

    animation:
        textShine 7s linear infinite;
}


@keyframes textShine {

    to {
        background-position:
            220% center;
    }
}


.hero-description {
    max-width: 510px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.65;

    letter-spacing: -.015em;
}


.hero-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 36px;
}


.primary-button,
.secondary-button {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 58px;

    padding:
        0 19px;

    border-radius: 19px;

    text-decoration: none;

    transition:
        transform .35s var(--ease),
        box-shadow .35s ease;
}


.primary-button {
    color: white;

    background:
        linear-gradient(
            145deg,
            #292c32,
            #111317
        );

    box-shadow:
        0 18px 35px rgba(20,22,26,.18),
        inset 0 1px 1px rgba(255,255,255,.18);
}


.primary-button::before {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.15),
            transparent 40%
        );

    pointer-events: none;
}


.secondary-button {
    color: #33363c;

    background:
        rgba(255,255,255,.55);

    border:
        1px solid rgba(255,255,255,.85);

    box-shadow:
        0 15px 35px rgba(60,70,90,.08),
        inset 0 1px 1px rgba(255,255,255,.95);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}


.primary-button:hover,
.secondary-button:hover,
.home-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 24px 45px rgba(50,60,80,.16);
}


.button-icon {
    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.12);
}


.button-icon svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
}


.button-arrow {
    margin-left: 5px;

    font-size: 20px;

    opacity: .65;
}


.hero-note {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 17px;

    color: #8a9099;

    font-size: 11px;
}


.note-check {
    display: grid;

    place-items: center;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    color: #50b977;

    background:
        rgba(80,185,119,.1);
}


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

.hero-visual {
    position: relative;

    width: 100%;

    min-height: 540px;

    display: flex;

    align-items: center;

    justify-content: center;

    animation:
        visualReveal 1.1s .25s var(--ease) both;
}


@keyframes visualReveal {

    from {
        opacity: 0;

        transform:
            translateY(45px)
            scale(.94);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.delivery-card {
    position: relative;

    width:
        min(
            100%,
            650px
        );

    padding: 14px;

    border-radius: var(--radius-xl);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);

    transition:
        transform .8s var(--ease);
}


.delivery-card:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-6px);
}


.delivery-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        15px 17px 14px;
}


.small-label {
    color: #969ba4;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;
}


.delivery-title {
    margin-top: 4px;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: -.025em;
}


.delivery-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 10px;

    border-radius: 999px;

    color: #686e78;

    background:
        rgba(255,255,255,.55);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;
}


.delivery-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #55c77b;

    box-shadow:
        0 0 10px rgba(85,199,123,.6);

    animation:
        statusPulse 2s ease-in-out infinite;
}


@keyframes statusPulse {

    50% {
        transform: scale(.7);
        opacity: .6;
    }
}


/* =========================================================
   DEMO MAP
   ========================================================= */

.demo-map {
    position: relative;

    height: 410px;

    overflow: hidden;

    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            rgba(230,236,244,.92),
            rgba(205,216,231,.72)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);
}


.demo-map::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.75),
            transparent 24%
        ),
        radial-gradient(
            circle at 75% 70%,
            rgba(255,255,255,.5),
            transparent 27%
        );
}


.map-glow {
    position: absolute;

    width: 330px;
    height: 330px;

    left: 28%;
    top: 18%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.7),
            transparent 68%
        );

    filter: blur(20px);

    animation:
        mapGlow 7s ease-in-out infinite alternate;
}


@keyframes mapGlow {

    from {
        transform: translate(-20px,0);
    }

    to {
        transform: translate(50px,20px);
    }
}


.demo-road {
    position: absolute;

    background:
        rgba(255,255,255,.52);

    box-shadow:
        0 1px 0 rgba(150,160,175,.08);
}


.road-a {
    width: 130%;
    height: 28px;

    top: 45%;
    left: -15%;

    transform: rotate(-13deg);
}


.road-b {
    width: 120%;
    height: 19px;

    top: 66%;
    left: -10%;

    transform: rotate(22deg);
}


.road-c {
    width: 24px;
    height: 120%;

    left: 42%;
    top: -10%;

    transform: rotate(17deg);
}


.road-d {
    width: 15px;
    height: 110%;

    left: 73%;
    top: -5%;

    transform: rotate(-24deg);
}


/* =========================================================
   DEMO ROUTE
   ========================================================= */

.demo-route {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.route-segment {
    position: absolute;

    border:
        3px solid rgba(50,54,61,.34);

    border-left-color: transparent;
    border-bottom-color: transparent;

    filter:
        drop-shadow(
            0 3px 5px
            rgba(255,255,255,.5)
        );
}


.segment-one {
    width: 180px;
    height: 100px;

    left: 18%;
    top: 53%;

    border-radius:
        0 80px 0 0;

    transform: rotate(-5deg);
}


.segment-two {
    width: 190px;
    height: 125px;

    left: 37%;
    top: 30%;

    border-radius:
        0 90px 0 0;

    transform: rotate(17deg);
}


.segment-three {
    width: 170px;
    height: 105px;

    left: 58%;
    top: 20%;

    border-radius:
        0 80px 0 0;

    transform: rotate(-12deg);
}


.demo-point {
    position: absolute;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.78);

    border:
        2px solid rgba(255,255,255,.95);

    box-shadow:
        0 8px 18px rgba(50,60,80,.12);
}


.point-company {
    left: 13%;
    top: 69%;

    width: 22px;
    height: 22px;
}


.point-company span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #737981;
}


.point-client {
    right: 11%;
    top: 22%;

    width: 38px;
    height: 38px;

    font-size: 15px;
}


/* =========================================================
   DEMO CAR
   ========================================================= */

.demo-car {
    position: absolute;

    left: 51%;
    top: 42%;

    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

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

    animation:
        demoCarMove 12s ease-in-out infinite;
}


@keyframes demoCarMove {

    0% {
        transform:
            translate(-50%,-50%)
            translate(-110px,105px);
    }

    25% {
        transform:
            translate(-50%,-50%)
            translate(-45px,55px);
    }

    50% {
        transform:
            translate(-50%,-50%)
            translate(25px,10px);
    }

    75% {
        transform:
            translate(-50%,-50%)
            translate(70px,-30px);
    }

    100% {
        transform:
            translate(-50%,-50%)
            translate(125px,-80px);
    }
}


.car-pulse {
    position: absolute;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background:
        rgba(50,55,62,.09);

    animation:
        carPulse 2.5s ease-out infinite;
}


@keyframes carPulse {

    0% {
        transform: scale(.5);
        opacity: .8;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}


.car-icon {
    position: relative;

    z-index: 2;

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #34383e,
            #111318
        );

    box-shadow:
        0 15px 30px rgba(40,45,55,.22),
        inset 0 1px 1px rgba(255,255,255,.2);
}


.car-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
}


/* =========================================================
   MAP LABELS
   ========================================================= */

.map-location {
    position: absolute;

    padding:
        9px 12px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.6);

    border:
        1px solid rgba(255,255,255,.8);

    box-shadow:
        0 12px 25px rgba(60,70,90,.08);

    backdrop-filter: blur(18px);
}


.map-location strong,
.map-location span {
    display: block;
}


.map-location strong {
    font-size: 10px;
}


.map-location span {
    margin-top: 3px;

    color: #8a9099;

    font-size: 8px;
}


.location-company {
    left: 8%;
    bottom: 12%;
}


.location-client {
    right: 5%;
    top: 12%;
}


/* =========================================================
   ETA
   ========================================================= */

.eta-card {
    position: absolute;

    left: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        11px 14px;

    border-radius: 17px;
}


.eta-icon {
    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(255,255,255,.7);
}


.eta-icon svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: #34373d;

    stroke-width: 1.7;

    stroke-linecap: round;
}


.eta-card strong,
.eta-card span {
    display: block;
}


.eta-card strong {
    font-size: 13px;
}


.eta-card span {
    margin-top: 2px;

    color: #888e97;

    font-size: 9px;
}


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

.floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 14px;

    border-radius: 17px;

    animation:
        floating 5s ease-in-out infinite;
}


.floating-card-one {
    top: 48px;
    right: -15px;
}


.floating-card-two {
    bottom: 55px;
    left: -20px;

    animation-delay: -2.5s;
}


@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


.floating-icon {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(255,255,255,.75);

    color: #51bb78;

    font-size: 15px;

    font-weight: 800;
}


.tracking-icon {
    color: #747b86;
}


.floating-card strong,
.floating-card span {
    display: block;
}


.floating-card strong {
    font-size: 11px;
}


.floating-card span {
    margin-top: 3px;

    color: #8a9099;

    font-size: 9px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.idea-section,
.features-section,
.process-section,
.trial-section,
.pricing-section,
.final-section {
    margin-top: 95px;
}


.section-heading {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    align-items: start;

    margin-bottom: 28px;
}


.section-heading.compact {
    margin-bottom: 25px;
}


.section-number {
    padding-top: 6px;

    color: #a1a6ae;

    font-size: 10px;

    font-weight: 750;

    letter-spacing: .14em;
}


.section-label {
    color: #969ba4;

    font-size: 9px;

    font-weight: 750;

    letter-spacing: .18em;
}


.section-heading h2 {
    max-width: 750px;

    margin-top: 9px;

    font-size:
        clamp(
            34px,
            4vw,
            58px
        );

    line-height: 1;

    letter-spacing: -.065em;
}


/* =========================================================
   IDEA
   ========================================================= */

.idea-card {
    position: relative;

    min-height: 310px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 48px;

    overflow: hidden;

    border-radius: var(--radius-xl);
}


.idea-card-glow {
    position: absolute;

    width: 400px;
    height: 400px;

    right: -100px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220,230,255,.65),
            transparent 68%
        );

    filter: blur(20px);
}


.idea-content {
    position: relative;

    max-width: 620px;
}


.idea-icon {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #34383e,
            #111318
        );

    box-shadow:
        0 14px 30px rgba(30,35,40,.16);
}


.idea-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
}


.idea-content h3 {
    margin-top: 24px;

    max-width: 580px;

    font-size: 32px;

    line-height: 1.05;

    letter-spacing: -.045em;
}


.idea-content p {
    max-width: 540px;

    margin-top: 14px;

    color: #7c828c;

    font-size: 14px;

    line-height: 1.65;
}


.idea-stats {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;
}


.stat {
    min-width: 90px;

    text-align: center;
}


.stat strong {
    display: block;

    color: #777d86;

    font-size: 20px;

    font-weight: 700;
}


.stat span {
    display: block;

    margin-top: 5px;

    color: #9297a0;

    font-size: 10px;
}


.stat-arrow {
    color: #b0b4ba;

    font-size: 18px;
}


/* =========================================================
   FEATURES
   ========================================================= */

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 14px;
}


.feature-card {
    min-height: 260px;

    padding: 25px;

    border-radius: 25px;

    transition:
        transform .35s var(--ease),
        background .35s ease,
        box-shadow .35s ease;
}


.feature-card:hover {
    transform: translateY(-7px);

    background:
        rgba(255,255,255,.7);

    box-shadow:
        0 25px 55px rgba(60,70,90,.12);
}


.feature-icon {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: #3d4148;

    background:
        rgba(255,255,255,.7);
}


.feature-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.feature-number {
    margin-top: 28px;

    color: #a4a9b0;

    font-size: 9px;

    font-weight: 750;

    letter-spacing: .14em;
}


.feature-card h3 {
    margin-top: 8px;

    font-size: 18px;

    letter-spacing: -.03em;
}


.feature-card p {
    margin-top: 9px;

    color: #858b95;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-card {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 20px;

    padding: 45px 35px;

    border-radius: var(--radius-xl);
}


.process-line {
    position: absolute;

    left: 14%;
    right: 14%;

    top: 68px;

    height: 1px;

    background:
        rgba(110,116,126,.18);
}


.process-step {
    position: relative;

    z-index: 1;

    text-align: center;
}


.process-circle {
    width: 48px;
    height: 48px;

    margin: 0 auto;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #555b64;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid rgba(255,255,255,.9);

    box-shadow:
        0 10px 25px rgba(60,70,90,.08),
        inset 0 1px 1px rgba(255,255,255,.95);

    font-size: 10px;

    font-weight: 750;
}


.process-step strong {
    display: block;

    margin-top: 18px;

    font-size: 13px;
}


.process-step span {
    display: block;

    max-width: 150px;

    margin: 6px auto 0;

    color: #8a9099;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   TRIAL
   ========================================================= */

.trial-card {
    position: relative;

    min-height: 450px;

    padding: 60px;

    overflow: hidden;

    border-radius: var(--radius-xl);
}


.trial-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -120px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(205,225,255,.75),
            transparent 68%
        );

    filter: blur(25px);
}


.trial-content {
    position: relative;

    max-width: 720px;
}


.trial-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 13px;

    border-radius: 999px;

    color: #676d77;

    background:
        rgba(255,255,255,.62);

    border:
        1px solid rgba(255,255,255,.85);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;
}


.trial-badge span {
    display: grid;

    place-items: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            145deg,
            #34383e,
            #111318
        );

    font-size: 10px;
}


.trial-card h2 {
    margin-top: 24px;

    max-width: 760px;

    font-size:
        clamp(
            39px,
            5vw,
            65px
        );

    line-height: .98;

    letter-spacing: -.065em;
}


.trial-card p {
    max-width: 620px;

    margin-top: 18px;

    color: #7d838d;

    font-size: 14px;

    line-height: 1.7;
}


.trial-points {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 20px;

    margin-top: 25px;
}


.trial-points div {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #727883;

    font-size: 11px;
}


.trial-points span {
    color: #52b978;

    font-weight: 800;
}


.trial-button {
    margin-top: 30px;
}


/* =========================================================
   PRICING
   ========================================================= */

.pricing-grid {
    display: grid;

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

    gap: 18px;
}


.pricing-card {
    position: relative;

    padding: 36px;

    border-radius: 31px;

    overflow: hidden;

    transition:
        transform .35s var(--ease),
        box-shadow .35s ease;
}


.pricing-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 35px 80px rgba(60,70,90,.15),
        inset 0 1px 1px rgba(255,255,255,.95);
}


.pricing-featured {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.43)
        );
}


.popular-badge {
    position: absolute;

    top: 20px;
    right: 20px;

    padding:
        7px 10px;

    border-radius: 999px;

    color: #60656e;

    background:
        rgba(255,255,255,.65);

    border:
        1px solid rgba(255,255,255,.86);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}


.pricing-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.pricing-label {
    color: #9a9fa7;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}


.pricing-card h3 {
    margin-top: 7px;

    font-size: 28px;

    letter-spacing: -.045em;
}


.pricing-icon {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color: #777d86;

    background:
        rgba(255,255,255,.65);

    border:
        1px solid rgba(255,255,255,.85);

    font-size: 10px;

    font-weight: 800;
}


.price {
    display: flex;

    align-items: baseline;

    gap: 6px;

    margin-top: 32px;
}


.price strong {
    font-size: 25px;

    letter-spacing: -.04em;
}


.price span {
    color: #9297a0;

    font-size: 11px;
}


.pricing-save {
    margin-top: 9px;

    color: #54b977;

    font-size: 10px;

    font-weight: 650;
}


.pricing-divider {
    height: 1px;

    margin:
        25px 0;

    background:
        rgba(110,116,126,.12);
}


.pricing-card ul {
    list-style: none;
}


.pricing-card li {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 12px;

    color: #717781;

    font-size: 11px;
}


.pricing-card li span {
    color: #54b977;

    font-weight: 800;
}


.pricing-button {
    width: 100%;

    min-height: 52px;

    margin-top: 28px;

    border-radius: 16px;

    color: #353940;

    background:
        rgba(255,255,255,.65);

    border:
        1px solid rgba(255,255,255,.88);

    box-shadow:
        0 12px 25px rgba(60,70,90,.06),
        inset 0 1px 1px rgba(255,255,255,.95);

    transition:
        transform .3s var(--ease),
        background .3s ease;
}


.pricing-button:hover {
    transform: translateY(-3px);

    background:
        rgba(255,255,255,.9);
}


.featured-button {
    color: white;

    background:
        linear-gradient(
            145deg,
            #292c32,
            #111317
        );

    border: 0;

    box-shadow:
        0 16px 30px rgba(20,22,26,.16);
}


.featured-button:hover {
    background:
        linear-gradient(
            145deg,
            #34373d,
            #15171b
        );
}


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

.final-card {
    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px;

    overflow: hidden;

    text-align: center;

    border-radius: var(--radius-xl);
}


.final-orb {
    position: absolute;

    width: 430px;
    height: 430px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(215,225,255,.65),
            transparent 68%
        );

    filter: blur(25px);
}


.final-content {
    position: relative;

    max-width: 760px;
}


.final-content h2 {
    margin-top: 14px;

    font-size:
        clamp(
            39px,
            5vw,
            65px
        );

    line-height: .98;

    letter-spacing: -.065em;
}


.final-content p {
    max-width: 580px;

    margin: 20px auto 0;

    color: #7f858f;

    font-size: 14px;

    line-height: 1.7;
}


.final-button {
    margin-top: 28px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        30px 5px 10px;

    color: #9a9fa7;

    font-size: 10px;

    letter-spacing: .04em;
}


footer span:first-child {
    font-weight: 800;

    letter-spacing: .15em;
}


footer a {
    color: inherit;

    text-decoration: none;

    transition:
        color .25s ease;
}


footer a:hover {
    color: #555a62;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    z-index: 100;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.modal.active {
    visibility: visible;

    opacity: 1;
}


.modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(240,244,250,.48);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.modal-card {
    position: relative;

    width:
        min(
            100%,
            450px
        );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    padding: 34px;

    border-radius: 34px;

    transform:
        translateY(25px)
        scale(.96);

    transition:
        transform .45s var(--ease);
}


.modal.active .modal-card {
    transform:
        translateY(0)
        scale(1);
}


.modal-close {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    color: #70757d;

    background:
        rgba(255,255,255,.55);

    border:
        1px solid rgba(255,255,255,.8);

    font-size: 22px;

    line-height: 1;
}


.modal-icon {
    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #30343a,
            #111318
        );

    box-shadow:
        0 14px 30px rgba(30,35,40,.18);
}


.modal-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
}


.modal-label {
    margin-top: 22px;

    color: #969ba4;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;
}


.modal-card h2 {
    margin-top: 7px;

    font-size: 30px;

    letter-spacing: -.045em;
}


.modal-card > p {
    margin-top: 10px;

    color: #7c828c;

    font-size: 13px;

    line-height: 1.6;
}


.form-field {
    margin-top: 17px;
}


.form-field label {
    display: block;

    margin-bottom: 7px;

    color: #747a83;

    font-size: 10px;

    font-weight: 650;
}


.form-field input {
    width: 100%;

    height: 49px;

    padding:
        0 14px;

    border-radius: 15px;

    outline: none;

    color: #25282d;

    background:
        rgba(255,255,255,.55);

    border:
        1px solid rgba(255,255,255,.85);

    box-shadow:
        inset 0 1px 2px rgba(80,90,100,.04);

    font-size: 14px;

    transition:
        border .25s ease,
        background .25s ease;
}


.form-field input:focus {
    background:
        rgba(255,255,255,.8);

    border-color:
        rgba(150,160,180,.45);
}


.form-field input::placeholder {
    color: #a4a9b1;
}


.form-plan {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 18px;

    padding: 13px;

    border-radius: 15px;

    background:
        rgba(255,255,255,.42);

    border:
        1px solid rgba(255,255,255,.7);
}


.form-plan span {
    color: #969ba4;

    font-size: 9px;
}


.form-plan strong {
    color: #555b63;

    font-size: 11px;
}


.form-submit {
    width: 100%;

    margin-top: 18px;
}


.form-message {
    min-height: 18px;

    margin-top: 10px;

    color: #5c626b;

    font-size: 11px;

    line-height: 1.5;
}


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

@media (max-width: 1100px) {

    .hero {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-top: 60px;
    }


    .hero-content {
        max-width: 720px;
    }


    .hero-visual {
        min-height: 500px;
    }


    .delivery-card {
        transform: none;
    }


    .delivery-card:hover {
        transform: translateY(-5px);
    }


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


@media (max-width: 800px) {

    .app {
        width:
            min(
                100% - 28px,
                560px
            );

        padding-top:
            max(
                18px,
                env(safe-area-inset-top)
            );
    }


    .hero {
        min-height: auto;

        padding:
            55px 0
            25px;
    }


    h1 {
        font-size:
            clamp(
                53px,
                15vw,
                76px
            );
    }


    .hero-description {
        margin-top: 24px;

        font-size: 15px;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .primary-button,
    .secondary-button {
        width: 100%;
    }


    .hero-visual {
        min-height: 400px;

        margin-top: 20px;
    }


    .delivery-card {
        width: 100%;

        padding: 9px;

        border-radius: 29px;
    }


    .demo-map {
        height: 350px;

        border-radius: 23px;
    }


    .floating-card-one {
        top: 15px;
        right: -4px;
    }


    .floating-card-two {
        bottom: 22px;
        left: -4px;
    }


    .section-heading {
        grid-template-columns:
            40px 1fr;

        gap: 12px;
    }


    .idea-card {
        flex-direction: column;

        align-items: flex-start;

        padding: 30px;

        gap: 30px;
    }


    .idea-stats {
        width: 100%;

        justify-content: space-between;
    }


    .features-grid {
        grid-template-columns: 1fr;
    }


    .feature-card {
        min-height: auto;
    }


    .process-card {
        grid-template-columns:
            1fr;

        gap: 25px;

        padding: 30px;
    }


    .process-line {
        left: 50%;

        top: 55px;
        bottom: 55px;

        width: 1px;
        height: auto;
    }


    .process-step {
        display: grid;

        grid-template-columns:
            48px 1fr;

        column-gap: 15px;

        text-align: left;

        align-items: center;
    }


    .process-circle {
        grid-row:
            span 2;

        margin: 0;
    }


    .process-step strong {
        margin-top: 0;
    }


    .process-step span {
        margin: 4px 0 0;

        max-width: none;
    }


    .trial-card,
    .final-card {
        padding: 35px 25px;
    }


    .pricing-grid {
        grid-template-columns: 1fr;
    }


    footer {
        flex-wrap: wrap;

        justify-content: center;

        text-align: center;
    }
}


@media (max-width: 520px) {

    .brand-name {
        font-size: 11px;

        letter-spacing: .12em;
    }


    .home-button {
        min-height: 40px;

        padding:
            0 11px;

        font-size: 10px;
    }


    .home-icon {
        width: 23px;
        height: 23px;
    }


    .hero {
        padding-top: 45px;
    }


    .delivery-card-header {
        padding:
            12px 11px;
    }


    .delivery-title {
        font-size: 14px;
    }


    .demo-map {
        height: 330px;
    }


    .map-location {
        transform: scale(.82);

        transform-origin: center;
    }


    .location-company {
        left: 2%;
        bottom: 9%;
    }


    .location-client {
        right: 0;
        top: 9%;
    }


    .eta-card {
        left: 12px;
        bottom: 12px;

        transform: scale(.9);

        transform-origin: bottom left;
    }


    .floating-card {
        transform: scale(.8);
    }


    .idea-card {
        padding: 25px;
    }


    .idea-content h3 {
        font-size: 27px;
    }


    .idea-stats {
        gap: 5px;
    }


    .stat {
        min-width: 65px;
    }


    .stat strong {
        font-size: 17px;
    }


    .stat span {
        font-size: 9px;
    }


    .stat-arrow {
        font-size: 14px;
    }


    .trial-points {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }


    .pricing-card {
        padding: 28px 24px;
    }


    .modal {
        padding: 14px;
    }


    .modal-card {
        padding: 28px 22px;
    }
}


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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }
}


@media (max-width: 800px) {

    .form-field input,
    .form-field input:focus {

        font-size: 16px !important;

    }
}


body.modal-open {
    overflow: hidden;

    position: fixed;

    width: 100%;
}

/* =========================================================
   NSKDELIVERY — LIVE COURIER DEMO
   ========================================================= */

.delivery-demo {
    position: relative;

    width: min(100%, 650px);

    padding: 14px;

    border-radius: var(--radius-xl);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);

    transition:
        transform .8s var(--ease);
}


.delivery-demo:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-6px);
}


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

.delivery-demo-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        15px 17px 14px;
}


.delivery-demo-label {

    color: #969ba4;

    font-size: 9px;

    font-weight: 750;

    letter-spacing: .18em;
}


.delivery-demo-title {

    margin-top: 4px;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: -.025em;
}


.delivery-demo-online {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 10px;

    border-radius: 999px;

    color: #686e78;

    background:
        rgba(255,255,255,.55);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .1em;

    white-space: nowrap;
}


.delivery-demo-online span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #55c77b;

    box-shadow:
        0 0 10px rgba(85,199,123,.65);

    animation:
        deliveryOnlinePulse 2s ease-in-out infinite;
}


@keyframes deliveryOnlinePulse {

    50% {
        transform: scale(.65);

        opacity: .55;
    }
}


/* =========================================================
   MAP
   ========================================================= */

.delivery-demo-map {

    position: relative;

    height: 410px;

    overflow: hidden;

    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            rgba(231,237,245,.96),
            rgba(202,214,230,.78)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);
}


/* soft map light */

.delivery-demo-map::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(255,255,255,.82),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(255,255,255,.6),
            transparent 30%
        );

    pointer-events: none;
}


.delivery-map-glow {

    position: absolute;

    width: 360px;

    height: 360px;

    left: 25%;

    top: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.68),
            transparent 68%
        );

    filter: blur(20px);

    animation:
        deliveryMapGlow 8s ease-in-out infinite alternate;
}


@keyframes deliveryMapGlow {

    from {
        transform:
            translate(-25px,-5px);
    }

    to {
        transform:
            translate(45px,25px);
    }
}


/* =========================================================
   MAP ROADS
   ========================================================= */

.delivery-road {

    position: absolute;

    background:
        rgba(255,255,255,.52);

    box-shadow:
        0 1px 0
        rgba(145,155,170,.09);
}


.delivery-road-1 {

    width: 135%;

    height: 31px;

    left: -18%;

    top: 43%;

    transform:
        rotate(-13deg);
}


.delivery-road-2 {

    width: 125%;

    height: 20px;

    left: -12%;

    top: 70%;

    transform:
        rotate(21deg);
}


.delivery-road-3 {

    width: 22px;

    height: 125%;

    left: 41%;

    top: -12%;

    transform:
        rotate(16deg);
}


.delivery-road-4 {

    width: 15px;

    height: 120%;

    left: 73%;

    top: -10%;

    transform:
        rotate(-23deg);
}


.delivery-road-5 {

    width: 10px;

    height: 100%;

    left: 18%;

    top: 0;

    transform:
        rotate(31deg);

    opacity: .65;
}


/* =========================================================
   ROUTE
   ========================================================= */

.delivery-route {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: visible;

    pointer-events: none;
}


.delivery-route-shadow {

    fill: none;

    stroke:
        rgba(255,255,255,.8);

    stroke-width: 8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.delivery-route-line {

    fill: none;

    stroke:
        rgba(55,60,68,.48);

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 8 7;

    animation:
        deliveryRouteMove 1.5s linear infinite;
}


@keyframes deliveryRouteMove {

    to {
        stroke-dashoffset: -30;
    }
}


/* =========================================================
   MAP POINTS
   ========================================================= */

.delivery-point {

    position: absolute;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.8);

    border:
        2px solid rgba(255,255,255,.96);

    box-shadow:
        0 8px 20px
        rgba(50,60,80,.13);

    z-index: 4;
}


.delivery-point-company {

    left: 12%;

    top: 72%;

    width: 22px;

    height: 22px;
}


.delivery-point-company span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #6d737c;
}


.delivery-point-client {

    right: 9%;

    top: 14%;

    width: 42px;

    height: 42px;
}


.delivery-client-icon {

    display: grid;

    place-items: center;

    width: 29px;

    height: 29px;

    border-radius: 10px;

    color: #41454c;

    background:
        rgba(255,255,255,.72);
}


.delivery-client-icon svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   LOCATION LABELS
   ========================================================= */

.delivery-location {

    position: absolute;

    z-index: 5;

    padding:
        9px 12px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.62);

    border:
        1px solid rgba(255,255,255,.82);

    box-shadow:
        0 12px 25px
        rgba(60,70,90,.08);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);
}


.delivery-location strong,
.delivery-location span {

    display: block;
}


.delivery-location strong {

    font-size: 10px;
}


.delivery-location span {

    margin-top: 3px;

    color: #858b95;

    font-size: 8px;
}


.delivery-location-company {

    left: 7%;

    bottom: 12%;
}


.delivery-location-client {

    right: 4%;

    top: 5%;
}


/* =========================================================
   COURIER
   ========================================================= */

.delivery-courier {

    position: absolute;

    left: 15%;

    top: 72%;

    width: 58px;

    height: 58px;

    z-index: 10;

    pointer-events: none;

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

    offset-path:
        path(
            "M 0 0
             C 75 -35 65 -85 150 -90
             C 245 -95 215 -175 305 -175
             C 395 -175 390 -230 505 -245"
        );

    offset-distance: 0%;

    offset-rotate: 0deg;

    animation:
        deliveryCourierMove 14s
        cubic-bezier(.45,0,.55,1)
        infinite;
}


@keyframes deliveryCourierMove {

    0% {

        offset-distance: 0%;

    }

    50% {

        offset-distance: 55%;

    }

    100% {

        offset-distance: 100%;

    }
}


.delivery-courier-pulse {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        rgba(55,60,68,.12);

    animation:
        deliveryCourierPulse 2.4s ease-out infinite;
}


@keyframes deliveryCourierPulse {

    0% {

        transform: scale(.55);

        opacity: .75;

    }

    100% {

        transform: scale(1.9);

        opacity: 0;

    }
}


.delivery-courier-icon {

    position: relative;

    z-index: 2;

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    margin: 5px;

    border-radius: 16px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #34383e,
            #111318
        );

    box-shadow:
        0 15px 30px
        rgba(40,45,55,.23),

        inset 0 1px 1px
        rgba(255,255,255,.2);
}


.delivery-courier-icon svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   ETA
   ========================================================= */

.delivery-eta {

    position: absolute;

    left: 18px;

    bottom: 18px;

    z-index: 15;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 13px;

    border-radius: 17px;
}


.delivery-eta-icon {

    width: 31px;

    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(255,255,255,.72);
}


.delivery-eta-icon svg {

    width: 16px;

    height: 16px;

    fill: none;

    stroke: #34373d;

    stroke-width: 1.7;

    stroke-linecap: round;
}


.delivery-eta strong,
.delivery-eta span {

    display: block;
}


.delivery-eta strong {

    font-size: 13px;
}


.delivery-eta span {

    margin-top: 2px;

    color: #858b94;

    font-size: 9px;
}


/* =========================================================
   DISTANCE
   ========================================================= */

.delivery-distance {

    position: absolute;

    right: 18px;

    bottom: 18px;

    z-index: 15;

    display: flex;

    flex-direction: column;

    gap: 3px;

    padding:
        10px 13px;

    border-radius: 15px;

    text-align: right;
}


.delivery-distance span {

    color: #8a9099;

    font-size: 8px;
}


.delivery-distance strong {

    color: #4f555d;

    font-size: 12px;
}


/* =========================================================
   GPS
   ========================================================= */

.delivery-gps {

    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 15;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        8px 11px;

    border-radius: 999px;

    color: #747a83;

    font-size: 8px;

    font-weight: 700;
}


.delivery-gps span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #53bd79;

    box-shadow:
        0 0 9px
        rgba(83,189,121,.65);

    animation:
        deliveryGpsPulse 2s ease-in-out infinite;
}


@keyframes deliveryGpsPulse {

    50% {

        transform: scale(.6);

        opacity: .55;

    }
}


/* =========================================================
   FOOTER
   ========================================================= */

.delivery-demo-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        15px 17px 8px;
}


.delivery-current-status {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


.delivery-status-icon {

    width: 35px;

    height: 35px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: #444950;

    background:
        rgba(255,255,255,.7);
}


.delivery-status-icon svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.delivery-current-status strong,
.delivery-current-status span {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.delivery-current-status strong {

    color: #535962;

    font-size: 10px;
}


.delivery-current-status span {

    margin-top: 3px;

    color: #91969f;

    font-size: 8px;
}


.delivery-live {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;

    color: #70767f;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;
}


.delivery-live span {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #53bd79;

    box-shadow:
        0 0 8px
        rgba(83,189,121,.65);
}


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

.delivery-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 14px;

    border-radius: 17px;

    z-index: 20;

    animation:
        deliveryFloating 5s ease-in-out infinite;
}


.delivery-floating-one {

    top: 48px;

    right: -15px;
}


.delivery-floating-two {

    left: -20px;

    bottom: 55px;

    animation-delay: -2.5s;
}


@keyframes deliveryFloating {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }
}


.delivery-floating-icon {

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    color: #51bb78;

    background:
        rgba(255,255,255,.75);

    font-size: 15px;

    font-weight: 800;
}


.delivery-floating-tracking {

    color: #737a84;
}


.delivery-floating-card strong,
.delivery-floating-card span {

    display: block;
}


.delivery-floating-card strong {

    font-size: 11px;
}


.delivery-floating-card span {

    margin-top: 3px;

    color: #8a9099;

    font-size: 9px;
}


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

@media (max-width: 1100px) {

    .delivery-demo {

        transform: none;

    }


    .delivery-demo:hover {

        transform:
            translateY(-5px);

    }

}


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

@media (max-width: 800px) {

    .delivery-demo {

        width: 100%;

        padding: 9px;

        border-radius: 29px;

    }


    .delivery-demo-map {

        height: 350px;

        border-radius: 23px;

    }


    .delivery-floating-one {

        top: 15px;

        right: -4px;

    }


    .delivery-floating-two {

        left: -4px;

        bottom: 22px;

    }


    .delivery-floating-card {

        transform: scale(.88);

    }


    .delivery-demo-footer {

        padding:
            13px 10px 5px;

    }

}


@media (max-width: 520px) {

    .delivery-demo-header {

        padding:
            12px 11px;

    }


    .delivery-demo-title {

        font-size: 14px;

    }


    .delivery-demo-online {

        padding:
            6px 8px;

        font-size: 7px;

    }


    .delivery-demo-map {

        height: 330px;

    }


    .delivery-location {

        transform: scale(.82);

    }


    .delivery-location-company {

        left: 2%;

        bottom: 9%;

    }


    .delivery-location-client {

        right: 0;

        top: 7%;

    }


    .delivery-eta {

        left: 12px;

        bottom: 12px;

        transform: scale(.9);

        transform-origin: bottom left;

    }


    .delivery-distance {

        right: 12px;

        bottom: 12px;

        transform: scale(.9);

        transform-origin: bottom right;

    }


    .delivery-gps {

        top: 12px;

        left: 12px;

        transform: scale(.9);

        transform-origin: top left;

    }


    .delivery-floating-card {

        transform: scale(.75);

    }


    .delivery-floating-one {

        right: -18px;

    }


    .delivery-floating-two {

        left: -18px;

    }


    .delivery-current-status span {

        max-width: 190px;

    }

}


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

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

    .delivery-route-line,
    .delivery-courier,
    .delivery-courier-pulse,
    .delivery-map-glow,
    .delivery-floating-card,
    .delivery-demo-online span,
    .delivery-gps span {

        animation: none !important;

    }

}