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

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

    --glass: rgba(255, 255, 255, 0.58);
    --glass-strong: rgba(255, 255, 255, 0.76);
    --glass-border: rgba(255, 255, 255, 0.82);

    --shadow:
        0 30px 80px rgba(60, 70, 90, 0.12),
        0 8px 30px rgba(60, 70, 90, 0.08);

    --radius-xl: 42px;
    --radius-lg: 28px;
    --radius-md: 20px;

    --accent: #15171b;

    --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;
}


/* =========================================================
   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;

    transform: translateY(-1px);
}


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

    font-weight: 750;

    letter-spacing: .16em;
}


/* =========================================================
   PARTNERS BUTTON
   ========================================================= */

.partners-button {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 44px;

    padding:
        0 14px;

    border-radius: 15px;

    color: #3d424a;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .13em;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.42)
        );

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

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

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

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


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

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


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

    display: grid;
    place-items: center;

    border-radius: 8px;

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


.partners-icon svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
}


.partners-arrow {
    margin-left: 2px;

    font-size: 16px;

    opacity: .55;
}


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

.hero {
    min-height: 680px;

    display: grid;

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

    align-items: center;

    gap: 70px;

    padding:
        70px 0
        50px;
}


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

    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
   ========================================================= */

.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);
}


/* =========================================================
   TITLE
   ========================================================= */

h1 {
    margin-top: 27px;

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

    line-height: .93;

    letter-spacing: -.075em;

    font-weight: 760;
}


h1 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: 490px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.65;

    letter-spacing: -.015em;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.actions {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 36px;
}


button {
    font: inherit;

    border: 0;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


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

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 58px;

    padding:
        0 19px;

    border-radius: 19px;

    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;
}


.primary-button:hover,
.secondary-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,
.driver-icon svg,
.admin-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

    font-size: 20px;

    opacity: .65;
}


.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);
}


.driver-icon,
.admin-icon {
    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 9px;

    background:
        rgba(0,0,0,.045);
}


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

.hero-visual {
    position: relative;

    width: 100%;

    min-height: 530px;

    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);
    }
}


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

.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%);
}


.map-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);
}


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


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

.map-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        15px
        17px
        14px;
}


.map-label {
    color: #969ba4;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;
}


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

    font-size: 17px;

    font-weight: 700;

    letter-spacing: -.025em;
}


.live-badge {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 10px;

    border-radius: 999px;

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

    color: #686e78;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;
}


.live-badge span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #55c77b;

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


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

.map {
    position: relative;

    height: 410px;

    overflow: hidden;

    border-radius: 31px;

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

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


.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%
        );

    pointer-events: none;
}


.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);
    }
}


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

.road {
    position: absolute;

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

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

    border-radius: 999px;
}


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

    top: 45%;

    left: -15%;

    transform: rotate(-13deg);
}


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

    top: 66%;

    left: -10%;

    transform: rotate(22deg);
}


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

    left: 42%;
    top: -10%;

    transform: rotate(17deg);
}


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

    left: 73%;
    top: -5%;

    transform: rotate(-24deg);
}


.road-5 {
    width: 12px;
    height: 120%;

    left: 23%;
    top: -10%;

    transform: rotate(-37deg);

    opacity: .65;
}


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

.map-route {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 5;
}


/*
   Реальный визуальный маршрут.
   A находится внизу слева.
   B находится сверху справа.
*/

.route-line,
.route-shadow {
    position: absolute;

    left: 16%;
    top: 28%;

    width: 69%;
    height: 45%;

    border-radius:
        0
        80px
        80px
        90px;

    transform:
        rotate(-3deg);

    clip-path:
        polygon(
            0 100%,
            8% 96%,
            18% 87%,
            27% 72%,
            36% 57%,
            47% 43%,
            58% 32%,
            69% 21%,
            80% 12%,
            91% 5%,
            100% 0,
            100% 8%,
            92% 14%,
            81% 21%,
            70% 30%,
            60% 40%,
            50% 51%,
            40% 64%,
            30% 78%,
            20% 90%,
            10% 98%,
            0 100%
        );
}


.route-shadow {
    background:
        rgba(80,90,105,.15);

    filter:
        blur(8px);

    transform:
        rotate(-3deg)
        translateY(5px);

    opacity: .65;
}


.route-line {
    background:
        linear-gradient(
            90deg,
            #777d87 0%,
            #4e535c 45%,
            #292d33 100%
        );

    filter:
        drop-shadow(
            0 4px 6px
            rgba(50,55,65,.16)
        );
}


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

.route-point {
    position: absolute;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

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

    box-shadow:
        0 10px 25px rgba(50,60,80,.16),
        inset 0 1px 1px rgba(255,255,255,1);

    z-index: 20;
}


.point-start {
    left: 12%;
    top: 66%;

    width: 32px;
    height: 32px;
}


.point-end {
    right: 10%;
    top: 20%;

    width: 42px;
    height: 42px;
}


.point-letter {
    display: grid;

    place-items: center;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    color: white;

    background:
        #666c75;

    font-size: 10px;

    font-weight: 800;
}


.point-home {
    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 10px;

    background:
        rgba(40,44,50,.92);

    color: white;
}


.point-home svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.courier-marker {
    position: absolute;

    left: 12%;
    top: 66%;

    width: 64px;
    height: 64px;

    display: grid;

    place-items: center;

    z-index: 30;

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

    animation:
        courierRoute 18s cubic-bezier(.45,.05,.55,.95) infinite;
}


/*
   Очень медленное движение:
   A → промежуточная точка → B →
   короткая пауза → обратно к A.
*/

@keyframes courierRoute {

    0% {
        left: 12%;
        top: 66%;
    }

    12% {
        left: 24%;
        top: 58%;
    }

    25% {
        left: 36%;
        top: 48%;
    }

    40% {
        left: 48%;
        top: 39%;
    }

    55% {
        left: 61%;
        top: 31%;
    }

    68% {
        left: 74%;
        top: 24%;
    }

    75% {
        left: 87%;
        top: 20%;
    }

    82% {
        left: 87%;
        top: 20%;
    }

    100% {
        left: 12%;
        top: 66%;
    }
}


.courier-pulse {
    position: absolute;

    width: 58px;
    height: 58px;

    border-radius: 50%;

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

    animation:
        pulse 2.8s ease-out infinite;
}


@keyframes pulse {

    0% {
        transform: scale(.55);

        opacity: .75;
    }

    70% {
        transform: scale(1.35);

        opacity: .16;
    }

    100% {
        transform: scale(1.7);

        opacity: 0;
    }
}


.courier-trail {
    position: absolute;

    width: 85px;
    height: 85px;

    border-radius: 50%;

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

    filter: blur(7px);

    opacity: .8;
}


.courier-glass {
    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #3a3e45,
            #111318
        );

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

    box-shadow:
        0 17px 34px rgba(40,45,55,.28),
        0 0 0 5px rgba(255,255,255,.25),
        inset 0 1px 1px rgba(255,255,255,.28);
}


.courier-glass svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
}


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

.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);
}


.map-info {
    position: absolute;

    left: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        11px 14px;

    border-radius: 17px;

    z-index: 50;
}


.map-info-icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 11px;

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


.map-info-icon svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: #34373d;

    stroke-width: 1.7;
}


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


.map-info strong {
    font-size: 13px;
}


.map-info 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;

    z-index: 60;
}


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


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

    font-weight: 700;
}


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

    color: #8a9099;

    font-size: 9px;
}


.floating-card-top {
    top: 56px;
    right: -18px;
}


.floating-card-bottom {
    bottom: 60px;
    left: -25px;

    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;
}


.signal-icon {
    display: flex;

    align-items: end;

    justify-content: center;

    gap: 2px;

    width: 30px;
    height: 30px;

    padding-bottom: 7px;

    border-radius: 10px;

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


.signal-icon span {
    display: block;

    width: 3px;

    border-radius: 10px;

    background: #7b818a;
}


.signal-icon span:nth-child(1) {
    height: 6px;
}


.signal-icon span:nth-child(2) {
    height: 11px;
}


.signal-icon span:nth-child(3) {
    height: 16px;
}


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

.features {
    display: grid;

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

    gap: 1px;

    margin-top: 15px;

    overflow: hidden;

    border-radius: 25px;

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

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

    box-shadow:
        0 15px 45px rgba(60,70,90,.05);

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


.feature {
    display: flex;

    gap: 17px;

    padding:
        25px;

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

    transition:
        background .3s ease;
}


.feature:hover {
    background:
        rgba(255,255,255,.5);
}


.feature-number {
    color: #a3a8b0;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;
}


.feature strong,
.feature span {
    display: block;
}


.feature strong {
    font-size: 13px;
}


.feature span {
    max-width: 210px;

    margin-top: 6px;

    color: #858b95;

    font-size: 11px;

    line-height: 1.5;
}


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

footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        30px 5px 10px;

    color: #9a9fa7;

    font-size: 10px;

    letter-spacing: .04em;
}


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

    letter-spacing: .15em;
}


/* =========================================================
   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);

    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;
}


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

    font-size: 30px;

    letter-spacing: -.045em;
}


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

    color: #7c828c;

    font-size: 13px;

    line-height: 1.6;
}


.tracking-input-wrapper {
    display: flex;

    gap: 8px;

    margin-top: 25px;

    padding: 6px;

    border-radius: 17px;

    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);
}


.tracking-input-wrapper input {
    min-width: 0;

    flex: 1;

    height: 48px;

    padding: 0 13px;

    border: 0;

    outline: 0;

    color: #25282d;

    background: transparent;

    font-size: 14px;
}


.tracking-input-wrapper input::placeholder {
    color: #a4a9b1;
}


.tracking-input-wrapper button {
    width: 48px;

    border-radius: 13px;

    color: white;

    background:
        #191b20;

    font-size: 21px;

    transition:
        transform .25s ease;
}


.tracking-input-wrapper button:hover {
    transform: translateX(2px);
}


.modal-error {
    min-height: 18px;

    margin-top: 10px;

    color: #d75f65;

    font-size: 11px;
}


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

@media (max-width: 1050px) {

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

        gap: 35px;

        padding-top: 60px;
    }


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


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


    .map-card {
        transform: none;
    }


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


    .floating-card-top {
        right: 0;
    }


    .floating-card-bottom {
        left: 0;
    }
}


@media (max-width: 800px) {

    .actions {
        flex-wrap: wrap;
    }


    .primary-button,
    .secondary-button {
        flex: 1;
    }


    .admin-button {
        flex-basis: 100%;
    }


    .tracking-input-wrapper input,
    .tracking-input-wrapper input:focus {
        font-size: 16px !important;
    }


    .modal {
        position: fixed;

        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 20px;
    }


    .modal-card {
        width: min(
            100%,
            420px
        );

        max-height: none;

        transform:
            translateZ(0);
    }
}


@media (max-width: 700px) {

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

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


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

        padding:
            0 10px;

        font-size: 9px;
    }


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


    .partners-arrow {
        display: none;
    }


    .hero {
        min-height: auto;

        padding:
            55px 0
            25px;
    }


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


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

        font-size: 15px;
    }


    .actions {
        flex-direction: column;

        align-items: stretch;

        margin-top: 30px;
    }


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

        flex-basis: auto;
    }


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

        margin-top: 20px;
    }


    .map-card {
        width: 100%;

        padding: 9px;

        border-radius: 29px;
    }


    .map {
        height: 350px;

        border-radius: 23px;
    }


    .map-header {
        padding:
            12px
            11px;
    }


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


    .courier-marker {
        width: 54px;
        height: 54px;
    }


    .courier-glass {
        width: 45px;
        height: 45px;

        border-radius: 15px;
    }


    .courier-glass svg {
        width: 22px;
        height: 22px;
    }


    .point-start {
        left: 10%;
        top: 68%;
    }


    .point-end {
        right: 8%;
        top: 19%;
    }


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


    .floating-card-top {
        top: 15px;

        right: -4px;
    }


    .floating-card-bottom {
        bottom: 22px;

        left: -4px;
    }


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

        margin-top: 25px;
    }


    .feature {
        padding: 20px;
    }


    footer {
        padding-bottom:
            max(
                15px,
                env(safe-area-inset-bottom)
            );

        gap: 12px;

        flex-wrap: wrap;
    }
}


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

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

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

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

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


/* =========================================================
   MODAL BODY LOCK
   ========================================================= */

body.modal-open {

    overflow: hidden;

    position: fixed;

    width: 100%;
}