@font-face {

    font-family: "YekanBakh-Bold";

    src:
        url("./assets/fonts/YekanBakh-Bold.ttf")
        format("truetype");

    font-weight: 400;

    font-style: normal;

    font-display: swap;
}


/* =====================================================
   VARIABLES
===================================================== */

:root {

    --red-dark: #720b18;
    --red: #a9182c;
    --red-light: #cf4050;

    --gold: #c9a46a;
    --gold-light: #ead7ae;

    --green: #23856d;
    --green-light: #e1f2ed;

    --blue: #2878d4;
    --orange: #e98a2b;
    --purple: #7657c7;
    --cyan: #269eb5;

    --cream: #fffaf5;

    --white: #ffffff;

    --text: #43151a;

    --muted: #80676a;

    --border:
        rgba(114,11,24,.13);

    --shadow:
        0 25px 70px
        rgba(101,12,24,.10);

    --radius: 28px;
}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;

    overflow-x: hidden;
}


body {

    width: 100%;

    min-height: 100vh;

    font-family:
        "YekanBakh-Bold",
        serif;

    background:

        radial-gradient(
            circle at 85% 0%,
            rgba(171,20,37,.09),
            transparent 30%
        ),

        #fffaf5;

    color: var(--text);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


a {

    text-decoration: none;

    color: inherit;
}


button {

    font-family: inherit;
}


section {

    position: relative;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar-wrap {

    position: fixed;

    top: 18px;

    left: 0;

    width: 100%;

    padding: 0 4%;

    z-index: 9999;
}


.navbar {

    max-width: 1400px;

    height: 76px;

    margin: auto;

    padding:
        0 18px 0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius: 24px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(255,248,242,.88)
        );

    border:
        1px solid rgba(114,11,24,.13);

    box-shadow:

        0 18px 55px
        rgba(80,7,18,.10),

        inset
        0 1px 0
        rgba(255,255,255,.9);

    backdrop-filter:
        blur(25px);

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


/* LOGO */

.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--red-dark);

    font-size: 27px;

    font-weight: 900;

    white-space: nowrap;
}


.logo-symbol {

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 19px;

    font-weight: 900;

    background:

        linear-gradient(
            145deg,
            #d53d52,
            #720b18
        );

    box-shadow:

        0 10px 28px
        rgba(114,11,24,.27),

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


/* DESKTOP NAV */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 8px;
}


.desktop-nav a {

    position: relative;

    padding:
        10px 14px;

    color: #684b4f;

    font-family:
        "YekanBakh-Bold",
        serif;

    font-size: 16px;

    transition: .3s;
}


.desktop-nav a::after {

    content: "";

    position: absolute;

    right: 14px;

    left: 14px;

    bottom: 3px;

    height: 2px;

    border-radius: 10px;

    background:

        linear-gradient(
            90deg,
            var(--red),
            var(--gold)
        );

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition: .3s;
}


.desktop-nav a:hover {

    color: var(--red);
}
.desktop-nav a:hover::after {

    transform:
        scaleX(1);
}


/* ACTIONS */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 9px;
}


.theme-btn {

    width: 44px;

    height: 44px;

    border-radius: 14px;

    cursor: pointer;

    color: var(--red);

    background:

        linear-gradient(
            145deg,
            #fff5ee,
            #fbe7df
        );

    border:
        1px solid rgba(114,11,24,.11);

    font-size: 21px;

    transition: .3s;
}


.theme-btn:hover {

    transform:
        translateY(-2px)
        rotate(8deg);
}


.nav-login {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding:
        0 20px;

    overflow: hidden;

    border-radius: 14px;

    color: white;

    font-family:
        "YekanBakh-Bold",
        serif;

    font-size: 16px;

    font-weight: 700;

    background:

        linear-gradient(
            135deg,
            #d13a4e,
            #8c1020 55%,
            #650914
        );

    box-shadow:

        0 12px 28px
        rgba(114,11,24,.23);

    transition: .35s;
}


.nav-login::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 70%;

    height: 100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transform:
        skewX(-20deg);

    transition: .6s;
}


.nav-login:hover::before {

    left: 130%;
}


.nav-login:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 17px 35px
        rgba(114,11,24,.3);
}


.nav-login span {

    font-family: Arial, sans-serif;

    font-size: 15px;
}


/* =====================================================
   HAMBURGER
===================================================== */

.menu-btn {

    position: relative;

    display: none;

    width: 46px;

    height: 46px;

    border-radius: 15px;

    cursor: pointer;

    background:

        linear-gradient(
            145deg,
            #fff7f0,
            #fbe8df
        );

    border:
        1px solid rgba(114,11,24,.13);

    box-shadow:
        0 8px 20px
        rgba(114,11,24,.08);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    transition: .35s;
}


.menu-btn::before {

    content: "";

    position: absolute;

    inset: 3px;

    border-radius: 12px;

    border:
        1px solid rgba(201,164,106,.22);

    pointer-events: none;
}


.menu-btn span {

    position: relative;

    z-index: 2;

    width: 21px;

    height: 2px;

    border-radius: 10px;

    background:

        linear-gradient(
            90deg,
            var(--red-dark),
            var(--red)
        );

    transition: .35s;
}


.menu-btn span:nth-child(2) {

    width: 14px;

    margin-right: 7px;
}


.menu-btn.active {

    background:

        linear-gradient(
            145deg,
            #8c1020,
            #620713
        );

    box-shadow:

        0 12px 28px
        rgba(114,11,24,.28);
}


.menu-btn.active span {

    background: white;
}


.menu-btn.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-btn.active span:nth-child(2) {

    opacity: 0;

    transform:
        translateX(10px);
}


.menu-btn.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.mobile-menu {

    position: fixed;

    top: 88px;

    right: 12px;

    left: 12px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-20px)
        scale(.96);

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s;

    border-radius: 27px;

    overflow: hidden;

    background:
linear-gradient(
            145deg,
            rgba(255,252,249,.98),
            rgba(255,242,235,.97)
        );

    border:
        1px solid rgba(114,11,24,.14);

    box-shadow:

        0 30px 80px
        rgba(72,5,16,.20),

        inset
        0 1px 0
        rgba(255,255,255,.9);

    backdrop-filter:
        blur(25px);

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


.mobile-menu::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -100px;

    right: -60px;

    border-radius: 50%;

    background:
        rgba(201,164,106,.15);

    filter:
        blur(20px);

    pointer-events: none;
}


.mobile-menu.active {

    opacity: 1;

    visibility: visible;

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


.mobile-menu-inner {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    padding: 15px;
}


.mobile-menu a {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 54px;

    padding:
        0 14px;

    color: #56383d;

    font-family:
        "YekanBakh-Bold",
        serif;

    font-size: 18px;

    border-bottom:
        1px solid rgba(114,11,24,.07);

    transition: .3s;
}


.mobile-menu a:not(.mobile-login)::before {

    content: "۰";

    margin-left: 10px;

    color: var(--gold);

    font-family:
        "YekanBakh-Bold",
        serif;

    transition: .3s;
}


.mobile-menu a:hover {

    color: var(--red);

    padding-right: 20px;
}


.mobile-menu .mobile-login {

    margin-top: 14px;

    min-height: 54px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    border: none;

    border-radius: 15px;

    color: white;

    font-size: 18px;

    background:

        linear-gradient(
            135deg,
            #d03a4e,
            #720b18
        );

    box-shadow:

        0 12px 30px
        rgba(114,11,24,.22);
}


.mobile-menu .mobile-login::before {

    display: none;
}


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

.hero {

    min-height: 930px;

    padding:
        165px 7% 100px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 50px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 12% 45%,
            rgba(194,31,52,.11),
            transparent 30%
        ),

        radial-gradient(
            circle at 82% 45%,
            rgba(201,164,106,.13),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #fffdfb,
            #fff4ed
        );
}


.hero-light {

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    filter:
        blur(100px);

    pointer-events: none;
}


.light-one {

    background:
        rgba(180,25,45,.18);

    right: -180px;

    top: 250px;
}


.light-two {

    background:
        rgba(201,164,106,.16);

    left: -180px;

    bottom: 30px;
}


/* HERO CONTENT */

.hero-content {

    position: relative;

    z-index: 5;

    max-width: 650px;
}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 15px;

    margin-bottom: 25px;

    border-radius: 100px;

    color: var(--red);

    font-family:
        "YekanBakh-Bold",
        serif;

    font-size: 15px;

    background:
        rgba(169,24,44,.06);

    border:
        1px solid rgba(169,24,44,.12);
}


.hero-badge span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:

        0 0 0 5px
        rgba(35,133,109,.10);
}


.hero h1 {

    font-size:
        clamp(42px, 5vw, 78px);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -2px;

    color: #421218;

    margin-bottom: 27px;
}


.hero h1 strong {

    display: block;

    color: var(--red);

    background:
linear-gradient(
            90deg,
            #7d0d1b,
            #c52d43,
            #a9182c
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero-content > p {

    max-width: 610px;

    color: var(--muted);

    font-family:
        "YekanBakh-Bold",
        serif;

    font-size: 14px;

    line-height: 2;

    margin-bottom: 32px;
}


/* BUTTONS */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;
}


.primary-btn,
.secondary-btn {

    min-height: 55px;

    padding:
        0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 15px;

    font-family:
        "YekanBakh-Bold",
        serif;

    font-size: 17px;

    font-weight: 700;

    transition: .35s;
}


.primary-btn {

    color: white;

    background:

        linear-gradient(green, var(--green));

    box-shadow:

        0 17px 35px
        rgba(114,11,24,.23);
}


.primary-btn:hover {

    transform:
        translateY(-4px);
}


.secondary-btn {

    color:
        var(--red-dark);

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

    border:
        1px solid rgba(114,11,24,.18);
}


.secondary-btn:hover {

    background: white;

    transform:
        translateY(-3px);
}


/* STATS */

.hero-stats {

    display: flex;

    align-items: center;

    gap: 42px;

    margin-top: 43px;
}


.hero-stats div {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.hero-stats strong {

    color:
        var(--red-dark);

    font-size: 28px;

    font-family:
        "YekanBakh-Bold",
        serif;
}


.hero-stats span {

    color: #967478;

    font-family:
        "YekanBakh-Bold",
        serif;

    font-size: 14px;
}


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

.hero-visual {

    position: relative;

    height: 600px;

    display: grid;

    place-items: center;
}


.orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(169,24,44,.15);
}


.orbit-one {

    width: 550px;

    height: 550px;

    transform:
        rotate(-15deg);

    box-shadow:

        0 0 90px
        rgba(169,24,44,.07);
}


.orbit-two {

    width: 420px;

    height: 420px;

    border-color:
        rgba(201,164,106,.23);
}


.gold-dot {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background:
        var(--gold);

    box-shadow:

        0 0 0 7px
        rgba(201,164,106,.12);
}


.dot-one {

    top: 90px;

    right: 50px;
}


.dot-two {

    bottom: 100px;

    left: 55px;
}


/* =====================================================
   PHONES
===================================================== */

.hero-phone {

    position: absolute;

    width: 240px;

    height: 490px;

    padding: 7px;

    border-radius: 40px;

    border:
        4px solid white;

    box-shadow:
        0 35px 80px rgba(0,0,0,.25);
}


.main-phone {

    z-index: 4;

    transform:
        translateX(15px)
        rotate(7deg);

    animation:
        phoneFloat 5s ease-in-out infinite;

    background:

        linear-gradient(
            145deg,
            #202124,
            #9b9da1 35%,
            #36383c 65%,
            #111214
        );
}


.back-phone {

    z-index: 2;

    transform:
        translateX(-115px)
        translateY(35px)
        rotate(-12deg);

    opacity: .95;

    background:

        linear-gradient(
            145deg,
            #bfc1c5,
            #eeeeef 40%,
            #85878c
        );
}


@keyframes phoneFloat {

    0%,
    100% {

        transform:
            translateX(15px)
            rotate(7deg)
            translateY(0);
    }

    50% {

        transform:
            translateX(15px)
            rotate(7deg)
            translateY(-15px);
    }
}


.phone-screen {

    height: 100%;
border-radius: 31px;

    padding:
        25px 17px;

    overflow: hidden;

    color: white;

    background:

        linear-gradient(
            160deg,
            #e0495a,
            #850b1d
        );
}


.camera {

    position: absolute;

    z-index: 5;

    top: 13px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 80px;

    height: 20px;

    border-radius: 20px;

    background:
        #620715;
}


.phone-top {

    display: flex;

    justify-content: space-between;

    font-size: 15px;

    margin-bottom: 20px;
}


.fake-map {

    height: 170px;

    margin-bottom: 15px;

    border-radius: 20px;

    background:

        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.08) 0 2px,
            transparent 2px 13px
        ),

        rgba(255,255,255,.08);
}


.order-box {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 17px;

    border-radius: 18px;

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

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


.order-box small {

    opacity: .65;

    font-size: 12px;
}


.order-box strong {

    font-size: 19px;
}


/* MAIN PHONE */

.main-screen {

    padding-top: 25px;
}


.app-logo {

    width: 60px;

    height: 60px;

    display: grid;

    place-items: center;

    margin:
        45px auto 9px;

    border-radius: 20px;

    color: white;

    font-size: 29px;

    font-family:
        Arial, sans-serif;

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

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


.app-name {

    display: block;

    text-align: center;

    font-family:
        Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 25px;
}


.gold-line {

    width: 75%;

    height: 2px;

    margin: auto;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold-light),
            transparent
        );
}


.app-stat {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px;

    margin-top: 13px;

    border-radius: 15px;

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

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


.app-stat span {

    font-size: 12px;
}


.app-stat strong {

    font-size: 15px;
}


.app-bottom {

    display: flex;

    justify-content: space-around;

    margin-top: 37px;

    padding-top: 14px;

    border-top:
        1px solid rgba(255,255,255,.18);
}


/* FLOATING CARDS */

.floating-card {

    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 16px;

    border-radius: 16px;

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

    border:
        1px solid rgba(114,11,24,.11);

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

    backdrop-filter:
        blur(15px);

    animation:
        floatCard 4s ease-in-out infinite;
}


.floating-top {

    top: 75px;

    right: 0;
}


.floating-bottom {

    bottom: 70px;

    left: 0;

    animation-delay: -2s;
}


.floating-icon {

    width: 37px;

    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: white;

    background:
        var(--red);

    font-family: Arial, sans-serif;
}


.green-icon {

    background:
        var(--green);
}


.floating-card div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.floating-card small {

    color: #96777b;

    font-size: 11px;
}


.floating-card strong {

    color:
        var(--red-dark);

    font-size: 13px;
}


@keyframes floatCard {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-10px);
    }
}


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

.section {

    padding:
        130px 7%;
}


.section-heading {

    max-width: 720px;
margin:
        0 auto 60px;

    text-align: center;
}


.section-label {

    display: inline-block;

    color:
        var(--red);

    font-size: 16px;

    font-weight: 800;

    margin-bottom: 12px;
}


.section-heading h2 {

    color: #45131a;

    font-size:
        clamp(36px,4vw,55px);

    line-height: 1.35;

    margin-bottom: 13px;
}


.section-heading h2 strong {

    color:
        var(--red);
}


.section-heading p {

    color:
        var(--muted);

    font-size: 13px;

    line-height: 2;
}


/* =====================================================
   ROLES
===================================================== */

.roles {

    background:

        linear-gradient(
            180deg,
            #fffaf5,
            #fff1eb
        );
}


.role-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}


.role-card {

    position: relative;

    min-height: 570px;

    padding: 30px;

    overflow: hidden;

    border-radius:
        var(--radius);

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #fff7f1
        );

    border:
        1px solid rgba(114,11,24,.11);

    box-shadow:

        0 20px 55px
        rgba(101,8,24,.07);

    transition: .4s;
}


.role-card:hover {

    transform:
        translateY(-9px);

    box-shadow:

        0 30px 70px
        rgba(101,8,24,.13);
}


.provider-card {

    background:

        linear-gradient(
            145deg,
            #fffdf9,
            #ffede9
        );

    border-color:
        rgba(201,164,106,.3);
}


.role-number {

    position: absolute;

    top: 22px;

    left: 24px;

    color:
        rgba(169,24,44,.18);

    font-size: 13px;

    font-weight: 900;
}


.role-icon {

    width: 60px;

    height: 60px;

    display: grid;

    place-items: center;

    margin-bottom: 20px;

    border-radius: 18px;

    color: white;

    font-family:
        Arial, sans-serif;

    font-size: 26px;

    background:

        linear-gradient(
            135deg,
            #c93145,
            #720b18
        );

    box-shadow:

        0 15px 30px
        rgba(114,11,24,.19);
}


.provider-role {

    background:

        linear-gradient(
            135deg,
            #d39a32,
            #916314
        );
}


.green-role {

    background:

        linear-gradient(
            135deg,
            #2c957c,
            #166852
        );
}


.role-card h3 {

    color:
        #48141a;

    font-size: 28px;

    margin-bottom: 10px;
}


.role-card > p {

    min-height: 95px;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 2;
}


/* ROLE IMAGE */

.role-image {

    height: 220px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* MINI PHONE */

.mini-phone {

    position: relative;

    width: 115px;

    height: 185px;

    padding: 6px;

    border-radius: 24px;

    transform:
        rotate(-7deg);

    background:

        linear-gradient(
            145deg,
            #151515,
            #5d6065 45%,
            #151515
        );

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

    box-shadow:

        0 25px 45px
        rgba(0,0,0,.25);

    overflow: hidden;
}


.mini-camera {

    position: absolute;

    z-index: 4;

    top: 8px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 35px;

    height: 7px;

    border-radius: 10px;

    background:
        #090909;
}


.mini-screen {

    height: 100%;

    padding:
        25px 12px;

    border-radius: 18px;

    background:

        linear-gradient(
            160deg,
            #f04e61,
            #7b0b1c
        );
}


.mini-line {

    height: 9px;

    width: 80%;

    margin-bottom: 10px;

    border-radius: 10px;

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


.mini-line.short {

    width: 55%;
}


.mini-product {

    height: 55px;

    margin-top: 17px;

    border-radius: 12px;
background:
        rgba(255,255,255,.15);
}


.small-product {

    height: 25px;

    margin-top: 8px;
}


/* DASHBOARD */

.fake-dashboard {

    width: 255px;

    height: 160px;

    padding: 15px;

    border-radius: 17px;

    background:
        white;

    box-shadow:

        0 20px 45px
        rgba(101,8,24,.12);

    transform:

        perspective(500px)
        rotateX(8deg)
        rotateY(-5deg);
}


.dash-head {

    width: 65%;

    height: 12px;

    margin-bottom: 17px;

    border-radius: 10px;

    background:
        #e5bf71;
}


.dash-grid {

    display: flex;

    gap: 8px;

    margin-bottom: 9px;
}


.dash-grid span {

    flex: 1;

    height: 33px;

    border-radius: 8px;

    background:
        #fff0ed;
}


.dash-grid span:nth-child(1) {

    background:
        #e9f4ff;
}


.dash-grid span:nth-child(2) {

    background:
        #fff4df;
}


.dash-grid span:nth-child(3) {

    background:
        #e9f8ef;
}


/* COURIER */

.road {

    position: absolute;

    bottom: 35px;

    width: 280px;

    height: 55px;

    border-radius: 50%;

    border-bottom:
        3px solid
        rgba(35,133,109,.28);
}


.bike {

    width: 65px;

    height: 65px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: white;

    font-family:
        Arial, sans-serif;

    font-size: 20px;

    background:

        linear-gradient(
            135deg,
            #2d947c,
            #166b55
        );

    box-shadow:

        0 15px 30px
        rgba(35,133,109,.2);

    z-index: 2;
}


.bike-wheel {

    position: absolute;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    border: 3px solid #166b55;

    background: white;
}


.wheel-one {

    transform:
        translate(-32px,32px);
}


.wheel-two {

    transform:
        translate(32px,32px);
}


.location-point {

    position: absolute;

    width: 14px;

    height: 14px;

    top: 40px;

    right: 45px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:

        0 0 0 9px
        rgba(35,133,109,.1);
}


/* ROLE BUTTON */

.role-button {

    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 13px;

    color:
        var(--red-dark);

    border:
        1px solid
        rgba(114,11,24,.17);

    font-size: 15px;

    transition: .3s;
}


.role-button:hover {

    color: white;

    background:
        var(--red);

    border-color:
        var(--red);
}


.provider-button:hover {

    background:
        #bd8a2b;

    border-color:
        #bd8a2b;
}


.courier-button {

    color:
        #166b55;

    border-color:
        rgba(35,133,109,.25);
}


.courier-button:hover {

    background:
        var(--green);

    border-color:
        var(--green);
}


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

.features {

    background:
        #fffdfb;
}


.feature-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}


.feature-card {

    min-height: 260px;

    padding: 28px;

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background:
        white;

    border:
        1px solid
        rgba(114,11,24,.10);

    box-shadow:

        0 15px 45px
        rgba(80,7,18,.06);

    transition:
        transform .4s,
        box-shadow .4s;
}


.feature-card::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    left: -50px;

    bottom: -65px;

    border-radius: 50%;

    background:
        var(--feature-color);

    opacity: .10;

    filter: blur(4px);
}


.feature-card:hover {

    transform:
        translateY(-8px);

    box-shadow:

        0 28px 60px
        rgba(80,7,18,.12);
}


/* COLORS */

.feature-card:nth-child(1) {

    --feature-color:
        #d83249;
}


.feature-card:nth-child(2) {
--feature-color:
        #e98a2b;
}


.feature-card:nth-child(3) {

    --feature-color:
        #d9aa3c;
}


.feature-card:nth-child(4) {

    --feature-color:
        #43a56d;
}


.feature-card:nth-child(5) {

    --feature-color:
        #2878d4;
}


.feature-card:nth-child(6) {

    --feature-color:
        #7657c7;
}


.feature-icon {

    width: 50px;

    height: 50px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 15px;

    color: white;

    font-family:
        Arial, sans-serif;

    font-size: 21px;

    background:
        var(--feature-color);

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.12);
}


.feature-card > span {

    color:
        rgba(114,11,24,.3);

    font-size: 12px;

    font-weight: 800;
}


.feature-card h3 {

    position: relative;

    color:
        #49141b;

    font-size: 25px;

    margin:
        7px 0;
}


.feature-card p {

    position: relative;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 2;
}


.feature-decoration {

    position: absolute;

    left: 20px;

    bottom: 15px;

    font-size: 48px;

    opacity: .07;

    filter:
        grayscale(.3);
}


/* =====================================================
   ABOUT
===================================================== */

.about {

    background:

        linear-gradient(
            180deg,
            #fff8f4,
            #ffebe8
        );
}


.about-box {

    position: relative;

    isolation: isolate;

    max-width: 1400px;

    min-height: 570px;

    margin: auto;

    padding: 75px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 60px;

    overflow: hidden;

    border-radius: 40px;

    color: white;

    background:

        radial-gradient(
            circle at 80% 25%,
            rgba(234,215,174,.22),
            transparent 25%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(255,255,255,.08),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #650914,
            #921526 45%,
            #bd3145
        );

    box-shadow:

        0 35px 90px
        rgba(126,7,25,.22);
}


.about-box::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -160px;

    top: -160px;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 35px
        rgba(255,255,255,.025),

        0 0 0 75px
        rgba(255,255,255,.02);

    z-index: -1;
}


.about-box::after {

    content: "";

    position: absolute;

    width: 8px;

    height: 8px;

    top: 70px;

    right: 45%;

    border-radius: 50%;

    background:
        var(--gold-light);

    box-shadow:

        0 0 0 7px
        rgba(234,215,174,.10),

        120px 180px 0
        rgba(234,215,174,.55),

        -190px 280px 0
        rgba(255,255,255,.25);

    z-index: -1;
}


.about-content {

    position: relative;

    z-index: 5;
}


.about .section-label {

    color:
        var(--gold-light);
}


.about h2 {

    font-size:
        clamp(42px,5vw,64px);

    line-height: 1.35;

    margin-bottom: 20px;

    text-shadow:
        0 8px 30px
        rgba(50,0,8,.18);
}


.about h2 strong {

    display: block;

    color: white;
}


.about-content > p {

    max-width: 590px;

    color:
        #ffe5e7;

    font-size: 14px;

    line-height: 2.2;

    margin-bottom: 13px;
}


.about-button {

    min-height: 53px;

    padding:
        0 22px;

    margin-top: 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 14px;

    color:
        var(--red-dark);

    background:
        white;

    font-size: 15px;

    transition: .35s;

    box-shadow:
        0 12px 30px
        rgba(45,0,5,.18);
}


.about-button:hover {

    color: white;

    background:
        var(--gold);

    transform:
        translateY(-4px);
}


/* ABOUT VISUAL */
.about-visual {

    height: 420px;

    display: grid;

    place-items: center;

    position: relative;
}


.about-orbit {

    position: absolute;

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

    border-radius: 50%;
}


.orbit-a {

    width: 350px;

    height: 350px;

    transform:
        rotate(20deg);
}


.orbit-b {

    width: 235px;

    height: 235px;

    border-color:
        rgba(234,215,174,.35);
}


.about-logo {

    position: relative;

    width: 175px;

    height: 175px;

    display: grid;

    place-items: center;

    border-radius: 45px;

    transform:
        rotate(-8deg);

    color:
        var(--red-dark);

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f5e8d2
        );

    font-family:
        Arial, sans-serif;

    font-size: 70px;

    font-weight: 900;

    box-shadow:

        0 35px 80px
        rgba(50,0,8,.30);

    animation:
        logoFloat 4s ease-in-out infinite;

    transition: .5s;
}


.about-logo::before {

    content: "";

    position: absolute;

    inset: 11px;

    border-radius: 35px;

    border:
        1px solid
        rgba(114,11,24,.12);
}


.about-logo::after {

    content: "VURALL";

    position: absolute;

    bottom: 27px;

    font-family:
        Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    color:
        var(--red-dark);
}


.about-logo:hover {

    transform:
        rotate(0)
        scale(1.05);
}


.about-dot {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 0 7px
        rgba(234,215,174,.10);
}


.about-dot-one {

    top: 35px;

    right: 90px;
}


.about-dot-two {

    bottom: 55px;

    left: 80px;
}


@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-8deg);
    }

    50% {

        transform:
            translateY(-12px)
            rotate(-5deg);
    }
}


/* =====================================================
   FAQ
===================================================== */

.faq {

    background:
        #fffdfb;
}


.faq-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px;
}


.faq details {

    overflow: hidden;

    border-radius: 16px;

    background:
        white;

    border:
        1px solid
        rgba(114,11,24,.11);

    transition: .3s;
}


.faq details[open] {

    border-color:
        rgba(169,24,44,.3);

    box-shadow:

        0 15px 35px
        rgba(101,8,24,.07);
}


.faq summary {

    min-height: 66px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    list-style: none;

    color:
        #541820;

    font-size: 14px;

    font-weight: 600;
}


.faq summary::-webkit-details-marker {

    display: none;
}


.faq summary b {

    color:
        var(--red);

    font-size: 20px;

    transition: .3s;
}


.faq details[open]
summary b {

    transform:
        rotate(45deg);
}


.faq details p {

    padding:
        0 20px 20px;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 2;
}


/* =====================================================
   DOWNLOAD
===================================================== */

.download {

    max-width: 1400px;

    min-height: 400px;

    margin:
        0 auto 100px;

    padding:
        65px 80px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 40px;

    color: white;

    background:

        linear-gradient(
            120deg,
            #720b18,
            #b91e34,
            #9d152a
        );

    box-shadow:

        0 30px 80px
        rgba(126,7,25,.2);
}


.download-glow {

    position: absolute;

    width: 400px;

    height: 400px;

    right: -100px;

    border-radius: 50%;
background:
        rgba(201,164,106,.15);

    filter:
        blur(20px);
}


.download-content {

    position: relative;

    z-index: 2;
}


.download .section-label {

    color:
        var(--gold-light);
}


.download h2 {

    font-size: 48px;

    line-height: 1.4;

    margin-bottom: 14px;
}


.download h2 strong {

    color: white;
}


.download p {

    color:
        #ffe5e8;

    font-size: 14px;

    margin-bottom: 24px;
}


/* STORE BUTTONS */

.store-buttons {

    display: flex;

    gap: 10px;
}


.store-button {

    position: relative;

    overflow: hidden;

    min-width: 145px;

    min-height: 58px;

    padding:
        9px 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 15px;

    color: white;

    border: none;

    transition:
        transform .3s,
        box-shadow .3s;
}


.store-button::before {

    content: "";

    position: absolute;

    width: 80px;

    height: 80px;

    top: -45px;

    left: -30px;

    border-radius: 50%;

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


.store-button:nth-child(1) {

    background:

        linear-gradient(blue, cornflowerblue);

    box-shadow:

        0 12px 28px
        rgba(52,168,83,.25);
}


.store-button:nth-child(2) {

    background:

        linear-gradient(green, var(--green));

    box-shadow:

        0 12px 28px
        rgba(0,168,120,.25);
}


.store-button:nth-child(3) {

    background:

        linear-gradient(
            135deg,
            #24a6c7,
            #087c9b
        );

    box-shadow:

        0 12px 28px
        rgba(36,166,199,.25);
}


.store-button:hover {

    color: white;

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 35px
        rgba(0,0,0,.22);
}


.store-icon {

    position: relative;

    z-index: 2;

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 10px;

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

    font-family:
        Arial, sans-serif;

    font-weight: 900;
}


.store-text {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 1px;
}


.store-button small {

    font-size: 10px;

    opacity: .8;
}


.store-button strong {

    font-size: 14px;
}


/* DOWNLOAD PHONE */

.download-phone {

    position: relative;

    width: 210px;

    height: 350px;

    margin-left: 80px;

    padding: 7px;

    border-radius: 35px;

    transform:
        rotate(-10deg);

    background:

        linear-gradient(
            145deg,
            #d9dde2,
            #ffffff 35%,
            #9ca1a7 70%,
            #5d6167
        );

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

    box-shadow:

        0 30px 65px
        rgba(20,20,20,.28);
}


.download-camera {

    position: absolute;

    z-index: 5;

    top: 12px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 60px;

    height: 15px;

    border-radius: 20px;

    background:
        #101010;
}


.download-screen {

    height: 100%;

    border-radius: 29px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    background:

        linear-gradient(
            145deg,
            #e24a5d,
            #850b1d
        );
}


.download-screen strong {

    font-family:
        Arial, sans-serif;

    font-size: 70px;
}


.download-screen span {

    font-family:
        Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 4px;
}


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

footer {

    padding:
        70px 7% 20px;

    color: white;

    background:

        linear-gradient(
            135deg,
            #680916,
            #941327
        );
}


.footer-main {

    max-width: 1400px;

    margin: auto;

    display: grid;
grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap: 50px;
}


.footer-brand .logo {

    color: white;

    margin-bottom: 18px;
}


.footer-brand .logo-symbol {

    color:
        var(--red-dark);

    background:
        white;
}


.footer-brand p {

    max-width: 330px;

    color:
        #ffdfe3;

    font-size: 13px;

    line-height: 2;
}


.socials {

    display: flex;

    gap: 8px;

    margin-top: 22px;
}


.socials a {

    width: 37px;

    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 11px;

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

    transition: .3s;
}


.socials a:hover {

    color:
        var(--red-dark);

    background:
        white;
}


.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.footer-column h4 {

    font-size: 18px;

    margin-bottom: 7px;
}


.footer-column a,
.footer-column span {

    color:
        #ffdfe3;

    font-size: 12px;

    transition: .3s;
}


.footer-column a:hover {

    color: white;

    transform:
        translateX(-4px);
}


.footer-bottom {

    max-width: 1400px;

    margin:
        55px auto 0;

    padding-top: 20px;

    display: flex;

    justify-content: space-between;

    border-top:
        1px solid
        rgba(255,255,255,.14);

    color:
        #efb8c0;

    font-size: 11px;
}


/* =====================================================
   BACK TOP
===================================================== */

.back-top {

    position: fixed;

    z-index: 30;

    left: 25px;

    bottom: 25px;

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color:
        var(--red-dark);

    background:
        white;

    box-shadow:

        0 10px 30px
        rgba(100,8,24,.18);

    transition: .3s;
}


.back-top:hover {

    color: white;

    background:
        var(--red);

    transform:
        translateY(-4px);
}


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

@media (max-width: 1100px) {

    .desktop-nav {

        gap: 2px;
    }


    .desktop-nav a {

        padding:
            8px 9px;

        font-size: 14px;
    }


    .hero {

        grid-template-columns:
            1fr;

        text-align: center;

        padding-top: 155px;
    }


    .hero-content {

        margin: auto;
    }


    .hero-content > p {

        margin-left: auto;

        margin-right: auto;
    }


    .hero-buttons,
    .hero-stats {

        justify-content: center;
    }


    .hero-visual {

        margin-top: 20px;
    }


    .role-grid {

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


    .feature-grid {

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


    .footer-main {

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


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

@media (max-width: 760px) {


    /* NAV */

    .navbar-wrap {

        top: 8px;

        padding:
            0 9px;
    }


    .navbar {

        height: 62px;

        padding:
            0 9px 0 12px;

        border-radius: 18px;
    }


    .desktop-nav {

        display: none;
    }


    .theme-btn,
    .nav-login {

        display: none;
    }


    .menu-btn {

        display: flex;
    }


    .logo {

        font-size: 21px;
    }


    .logo-symbol {

        width: 35px;

        height: 35px;

        border-radius: 11px;
    }


    /* HERO */

    .hero {

        min-height: auto;

        padding:
            125px 12px 65px;

        gap: 20px;
    }


    .hero h1 {

        font-size: 43px;

        letter-spacing: -1px;

        line-height: 1.08;
    }


    .hero-badge {

        font-size: 12px;
    }


    .hero-content > p {

        font-size: 13px;

        line-height: 2;
    }


    .hero-buttons {

        flex-direction: column;
width: 100%;
    }


    .primary-btn,
    .secondary-btn {

        width: 100%;

        min-height: 51px;

        font-size: 15px;
    }


    .hero-stats {

        gap: 24px;

        margin-top: 32px;
    }


    .hero-stats strong {

        font-size: 21px;
    }


    .hero-stats span {

        font-size: 11px;
    }


    /* HERO VISUAL */

    .hero-visual {

        width: 100%;

        height: 430px;

        transform:
            scale(.70);

        transform-origin:
            center top;

        margin-bottom: -90px;
    }


    .orbit-one {

        width: 520px;

        height: 520px;
    }


    .orbit-two {

        width: 390px;

        height: 390px;
    }


    .floating-top {

        right: -30px;
    }


    .floating-bottom {

        left: -30px;
    }


    /* SECTION */

    .section {

        padding:
            80px 9px;
    }


    .section-heading {

        margin-bottom: 35px;
    }


    .section-label {

        font-size: 14px;
    }


    .section-heading h2 {

        font-size: 32px;
    }


    .section-heading p {

        font-size: 11px;
    }


    /* =================================================
       ROLES
       3 CARDS IN ONE ROW
    ================================================= */

    .role-grid {

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

        gap: 7px;

        width: 100%;
    }


    .role-card {

        min-width: 0;

        min-height: 390px;

        padding:
            14px 7px;

        border-radius: 17px;

        display: flex;

        flex-direction: column;
    }


    .role-number {

        top: 9px;

        left: 8px;

        font-size: 7px;
    }


    .role-icon {

        width: 38px;

        height: 38px;

        margin-bottom: 10px;

        border-radius: 12px;

        font-size: 16px;
    }


    .role-card h3 {

        font-size: 16px;

        line-height: 1.3;

        margin-bottom: 5px;
    }


    .role-card > p {

        min-height: 108px;

        font-size: 7px;

        line-height: 1.9;

        overflow: hidden;
    }


    .role-image {

        height: 110px;

        flex-shrink: 0;

        transform:
            scale(.70);
    }


    .role-button {

        min-height: 38px;

        margin-top: auto;

        padding:
            0 2px;

        border-radius: 10px;

        font-size: 6.8px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* =================================================
       FEATURES
       3 x 2
    ================================================= */

    .feature-grid {

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

        gap: 7px;
    }


    .feature-card {

        grid-column: auto;

        grid-row: auto;

        min-width: 0;

        min-height: 245px;

        padding:
            13px 7px;

        border-radius: 16px;
    }


    .feature-icon {

        width: 36px;

        height: 36px;

        margin-bottom: 11px;

        border-radius: 11px;

        font-size: 14px;
    }


    .feature-card > span {

        font-size: 7px;
    }


    .feature-card h3 {

        font-size: 15px;

        line-height: 1.4;

        margin:
            5px 0;
    }


    .feature-card p {

        font-size: 6.8px;

        line-height: 1.9;
    }


    .feature-decoration {

        left: 6px;

        bottom: 5px;

        font-size: 30px;
    }


    /* =================================================
       ABOUT
    ================================================= */

    .about-box {

        min-height: auto;

        padding:
            45px 16px;

        grid-template-columns:
            1fr;

        text-align: center;

        gap: 20px;

        border-radius: 28px;

        margin:
            0 3px;
    }


    .about h2 {

        font-size: 34px;
    }


    .about-content > p {

        font-size: 10px;
    }


    .about-button {

        width: 100%;

        font-size: 13px;
    }


    .about-visual {
height: 250px;
    }


    .about-logo {

        width: 120px;

        height: 120px;

        font-size: 55px;

        border-radius: 32px;
    }


    .about-logo::after {

        bottom: 19px;

        font-size: 7px;
    }


    .orbit-a {

        width: 270px;

        height: 270px;
    }


    .orbit-b {

        width: 180px;

        height: 180px;
    }


    /* =================================================
       FAQ
    ================================================= */

    .faq-grid {

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

        gap: 8px;
    }


    .faq summary {

        min-height: 75px;

        padding:
            0 9px;

        font-size: 9px;

        line-height: 1.8;
    }


    .faq summary b {

        font-size: 15px;

        flex-shrink: 0;

        margin-right: 4px;
    }


    .faq details p {

        padding:
            0 9px 12px;

        font-size: 8px;

        line-height: 2;
    }


    /* =================================================
       DOWNLOAD
    ================================================= */

    .download {

        margin:
            0 9px 60px;

        padding:
            50px 18px;

        flex-direction: column;

        text-align: center;

        border-radius: 28px;
    }


    .download h2 {

        font-size: 34px;
    }


    .download p {

        font-size: 10px;

        line-height: 2;
    }


    .store-buttons {

        width: 100%;

        flex-direction: column;

        gap: 8px;
    }


    .store-button {

        width: 100%;

        min-height: 56px;
    }


    .download-phone {

        margin:
            50px 0 0;

        transform:
            rotate(-7deg)
            scale(.75);
    }


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

    footer {

        padding:
            60px 20px 20px;
    }


    .footer-main {

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

        gap:
            35px 20px;
    }


    .footer-brand {

        grid-column:
            span 2;
    }


    .footer-column h4 {

        font-size: 15px;
    }


    .footer-column a,
    .footer-column span {

        font-size: 10px;
    }


    .footer-bottom {

        flex-direction: column;

        gap: 8px;

        text-align: center;

        font-size: 8px;
    }


    .back-top {

        width: 42px;

        height: 42px;

        left: 13px;

        bottom: 13px;
    }
}


/* =====================================================
   EXTRA SMALL PHONES
===================================================== */

@media (max-width: 390px) {


    .hero h1 {

        font-size: 38px;
    }


    .role-grid {

        gap: 5px;
    }


    .role-card {

        min-height: 390px;

        padding:
            12px 5px;
    }


    .role-card h3 {

        font-size: 14px;
    }


    .role-card > p {

        font-size: 6.2px;
    }


    .role-button {

        font-size: 6.1px;
    }


    .feature-grid {

        gap: 5px;
    }


    .feature-card {

        padding:
            11px 5px;
    }


    .feature-card h3 {

        font-size: 13px;
    }


    .feature-card p {

        font-size: 6.1px;
    }


    .faq summary {

        font-size: 7.5px;
    }
}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 330px) {

    .role-card h3 {

        font-size: 13px;
    }


    .role-card > p {

        font-size: 5.7px;
    }


    .role-button {

        font-size:5.6px;
    }


    .feature-card h3 {

        font-size: 12px;
    }


    .feature-card p {

        font-size: 5.6px;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}


/* ------------------------------
   NAVBAR ON SCROLL
------------------------------ */

.navbar-wrap {
    transition: transform .4s ease;
}

.navbar-wrap.scrolled {
    transform: translateY(-4px);
}

.navbar-wrap.scrolled .navbar {
    box-shadow:
        0 22px 60px rgba(80, 7, 18, .16);
}


/* ------------------------------
   SCROLL REVEAL
   فقط برای سکشن‌ها
------------------------------ */

.reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ------------------------------
   CARDS REVEAL
------------------------------ */

.reveal-card {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.reveal-card.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ------------------------------
   CARD DELAYS
------------------------------ */

.reveal-card:nth-child(1) {
    transition-delay: .05s;
}

.reveal-card:nth-child(2) {
    transition-delay: .12s;
}

.reveal-card:nth-child(3) {
    transition-delay: .19s;
}

.reveal-card:nth-child(4) {
    transition-delay: .26s;
}

.reveal-card:nth-child(5) {
    transition-delay: .33s;
}

.reveal-card:nth-child(6) {
    transition-delay: .40s;
}


/* ------------------------------
   BACK TO TOP
------------------------------ */

.back-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(15px) scale(.9);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}

.back-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

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


/* =====================================================
   DARK MODE
===================================================== */

body {
    transition:
        background-color .5s ease,
        color .5s ease;
}


/* ---------- BODY ---------- */

body.dark-mode {
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(171, 20, 37, .15),
            transparent 30%
        ),
        #10090b;

    color: #f7e9e6;
}


/* ---------- NAVBAR ---------- */

body.dark-mode .navbar {
    background:
        linear-gradient(
            135deg,
            rgba(32, 20, 23, .96),
            rgba(24, 14, 17, .94)
        );

    border-color:
        rgba(234, 215, 174, .15);

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .35);
}


body.dark-mode .desktop-nav a {
    color: #d8c3c3;
}


body.dark-mode .desktop-nav a:hover {
    color: #ead7ae;
}


body.dark-mode .theme-btn {
    color: #ead7ae;

    background:
        linear-gradient(
            145deg,
            #342126,
            #211519
        );

    border-color:
        rgba(234, 215, 174, .18);
}


/* ---------- MOBILE MENU ---------- */

body.dark-mode .mobile-menu {
    background:
        linear-gradient(
            145deg,
            rgba(30, 18, 21, .98),
            rgba(21, 12, 15, .98)
        );

    border-color:
        rgba(234, 215, 174, .15);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .5);
}


body.dark-mode .mobile-menu a {
    color: #ead8d5;
}


/* ---------- HERO ---------- */

body.dark-mode .hero {
    background:
        radial-gradient(
            circle at 12% 45%,
            rgba(194, 31, 52, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 82% 45%,
            rgba(201, 164, 106, .09),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #130a0d,
            #1d0d12
        );
}


body.dark-mode .hero h1 {
    color: #fff1ed;
}


body.dark-mode .hero-content > p {
    color: #c5afb1;
}


body.dark-mode .hero-badge {
    background:
        rgba(201, 164, 106, .07);

    border-color:
        rgba(201, 164, 106, .18);
}


body.dark-mode .secondary-btn {
    color: #f1d9d5;

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

    border-color:
        rgba(234, 215, 174, .20);
}


body.dark-mode .hero-stats span {
    color: #b69fa2;
}


/* ---------- FLOATING CARDS ---------- */

body.dark-mode .floating-card {
    background:
        rgba(30, 18, 21, .94);

    border-color:
        rgba(234, 215, 174, .14);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .4);
}


body.dark-mode .floating-card small {
    color: #a99497;
}


body.dark-mode .floating-card strong {
    color: #f1dfdc;
}


/* ---------- ROLES ---------- */

body.dark-mode .roles {
    background:
        linear-gradient(
            180deg,
            #130a0d,
            #1c0d12
        );
}


body.dark-mode .role-card {
    background:
        linear-gradient(
            145deg,
            #1d1114,
            #261418
        );

    border-color:
        rgba(234, 215, 174, .12);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .3);
}


body.dark-mode .provider-card {
    background:
        linear-gradient(
            145deg,
            #211714,
            #2a1519
        );
}


body.dark-mode .role-card h3 {
    color: #f8e7e3;
}


body.dark-mode .role-card > p {
    color: #c0abad;
}


body.dark-mode .role-button {
    color: #f0d8d4;

    border-color:
        rgba(234, 215, 174, .18);
}


/* ---------- FEATURES ---------- */

body.dark-mode .features {
    background: #10090b;
}


body.dark-mode .feature-card {
    background: #1a0f12;

    border-color:
        rgba(234, 215, 174, .11);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .28);
}


body.dark-mode .feature-card h3 {
    color: #f7e6e2;
}


body.dark-mode .feature-card p {
    color: #bea8ab;
}


/* ---------- SECTION HEADINGS ---------- */

body.dark-mode .section-heading h2 {
    color: #fff0ed;
}


/* ---------- ABOUT ---------- */

body.dark-mode .about {
    background:
        linear-gradient(
            180deg,
            #180b0f,
            #220d13
        );
}


/* ---------- FAQ ---------- */

body.dark-mode .faq {
    background: #10090b;
}


body.dark-mode .faq details {
    background: #1a0f12;

    border-color:
        rgba(234, 215, 174, .12);
}


body.dark-mode .faq summary {
    color: #f2ddda;
}


body.dark-mode .faq details p {
    color: #bea8ab;
}


/* ---------- BACK TOP ---------- */

body.dark-mode .back-top {
    color: #f4dfdb;

    background: #251418;

    border:
        1px solid
        rgba(234, 215, 174, .15);
}


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

@media (max-width: 760px) {

    .reveal {
        transform: translateY(25px);
    }

    .reveal-card {
        transform: translateY(20px);
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

    .reveal,
    .reveal-card {
        opacity: 1;
        transform: none;
        transition: none;
    }

}



/* =====================================================
   MOBILE — ALL FONTS +55%
   فقط گوشی
===================================================== */

@media (max-width: 760px) {

    /* -------------------------
       NAVBAR
    ------------------------- */

    .logo {
        font-size: 32.5px !important;
    }

    .mobile-menu a {
        font-size: 27.9px !important;
    }

    .mobile-menu .mobile-login {
        font-size: 27.9px !important;
    }


    /* -------------------------
       HERO
    ------------------------- */

    .hero h1 {
        font-size: 66.7px !important;
    }

    .hero-badge {
        font-size: 18.6px !important;
    }

    .hero-content > p {
        font-size: 20.2px !important;
        line-height: 1.8 !important;
    }

    .primary-btn,
    .secondary-btn {
        font-size: 23.3px !important;
    }

    .hero-stats strong {
        font-size: 32.6px !important;
    }

    .hero-stats span {
        font-size: 17px !important;
    }


    /* -------------------------
       SECTION HEADINGS
    ------------------------- */

    .section-label {
        font-size: 21.7px !important;
    }

    .section-heading h2 {
        font-size: 29.6px !important;
    }

    .section-heading p {
        font-size: 17px !important;
        line-height: 1.9 !important;
    }


    /* -------------------------
       ROLE CARDS
    ------------------------- */

    .role-number {
        font-size: 10.9px !important;
    }

    .role-card h3 {
        font-size: 24.8px !important;
    }

    .role-card > p {
        font-size: 10.9px !important;
        line-height: 1.75 !important;
    }

    .role-button {
        font-size: 10.5px !important;
    }


    /* -------------------------
       FEATURE CARDS
    ------------------------- */

    .feature-card > span {
        font-size: 5.9px !important;
    }

    .feature-card h3 {
        font-size: 10.3px !important;
    }

    .feature-card p {
        font-size: 4.5px !important;
        line-height: 1.75 !important;
    }


    /* -------------------------
       FLOATING CARDS
    ------------------------- */

    .floating-card small {
        font-size: 17.1px !important;
    }

    .floating-card strong {
        font-size: 20.2px !important;
    }


    /* -------------------------
       ABOUT
    ------------------------- */

    .about h2 {
        font-size: 52.7px !important;
    }

    .about-content > p {
        font-size: 15.5px !important;
        line-height: 2 !important;
    }

    .about-button {
        font-size: 20.2px !important;
    }


    /* -------------------------
       FAQ
    ------------------------- */

    .faq summary {
        font-size: 13.9px !important;
        line-height: 1.7 !important;
    }

    .faq summary b {
        font-size: 23.3px !important;
    }

    .faq details p {
        font-size: 12.4px !important;
        line-height: 1.8 !important;
    }


    /* -------------------------
       DOWNLOAD
    ------------------------- */

    .download h2 {
        font-size: 52.7px !important;
    }

    .download p {
        font-size: 15.5px !important;
        line-height: 1.9 !important;
    }

    .store-button small {
        font-size: 15.5px !important;
    }

    .store-button strong {
        font-size: 21.7px !important;
    }


    /* -------------------------
       FOOTER
    ------------------------- */

    .footer-brand p {
        font-size: 20.2px !important;
        line-height: 1.9 !important;
    }

    .footer-column h4 {
        font-size: 23.3px !important;
    }

    .footer-column a,
    .footer-column span {
        font-size: 15.5px !important;
    }

    .footer-bottom {
        font-size: 12.4px !important;
    }

}


/* =====================================================
   VAZIRMATN FOR MUTED / SMALL CARD TEXT
   ===================================================== */

.role-card > p,
.feature-card p,
.floating-card small,
.faq details p {
    font-family: "Vazirmatn", sans-serif;
    font-weight: 400;
}



/* =====================================================
   MOBILE CARD TEXT — حدود 10% کوچکتر
===================================================== */

@media (max-width: 760px) {

    /* کارت‌های نقش */
    .role-card > p {
        font-size: 10.2px !important;
        line-height: 1.7 !important;
    }

    /* کارت‌های ویژگی */
    .feature-card p {
        font-size: 9.8px !important;
        line-height: 1.7 !important;
    }

    /* متن کم‌رنگ کارت‌های شناور */
    .floating-card small {
        font-size: 9.7px !important;
    }

    /* متن‌های ریز داخل FAQ */
    .faq details p {
        font-size: 11.6px !important;
        line-height: 1.75 !important;
    }

    /* متن توضیحی دانلود */
    .download p {
        font-size: 14.5px !important;
        line-height: 1.8 !important;
    }

    /* متن توضیحی About */
    .about-content > p {
        font-size: 14.5px !important;
        line-height: 1.85 !important;
    }

    /* توضیح Hero */
    .hero-content > p {
        font-size: 13.7px !important;
        line-height: 1.85 !important;
    }
}


/* =====================================================
   EXTRA SMALL PHONES
===================================================== */

@media (max-width: 390px) {

    .role-card > p {
        font-size: 9px !important;
    }

    .feature-card p {
        font-size: 8.7px !important;
    }

    .faq details p {
        font-size: 10.4px !important;
    }
}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 330px) {

    .role-card > p {
        font-size: 8.3px !important;
    }

    .feature-card p {
        font-size: 8.1px !important;
    }

    .faq details p {
        font-size: 9.6px !important;
    }
}


.vurall-app-download {
    position: relative;
    overflow: hidden;

    padding: 110px 6%;

    direction: rtl;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(169,24,44,.14),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #fffafa 0%,
            #fff0f2 100%
        );
}


/* subtle decoration */

.vurall-app-download::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -280px;
    bottom: -330px;

    border-radius: 50%;

    border: 1px solid rgba(169,24,44,.08);

    box-shadow:
        0 0 0 80px rgba(169,24,44,.025),
        0 0 0 160px rgba(169,24,44,.015);

    pointer-events: none;
}


/* =====================================================
   INNER
===================================================== */

.vurall-app-download-inner {
    position: relative;

    z-index: 2;

    max-width: 1150px;

    margin: auto;

    text-align: center;
}


/* =====================================================
   TAG
===================================================== */

.vurall-app-tag {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 18px;

    border-radius: 50px;

    color: #8c1528;

    background: rgba(169,24,44,.055);

    border: 1px solid rgba(169,24,44,.14);

    font-size: 12px;

    font-weight: 700;
}

.vurall-app-tag::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #a9182c;

    box-shadow:
        0 0 12px rgba(169,24,44,.7);
}


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

.vurall-app-download h2 {
    margin: 23px 0 14px;

    color: #5d0714;

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.35;

    font-weight: 500;

    letter-spacing: -1px;
}

.vurall-app-download h2 strong {
    color: #a9182c;

    font-weight: 900;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.vurall-app-download-inner > p {
    max-width: 570px;

    margin: 0 auto 43px;

    color: #925c65;

    font-size: 15px;

    line-height: 2;
}


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

.vurall-store-buttons {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 13px;

    flex-wrap: wrap;
}


/* =====================================================
   BASE BUTTON
===================================================== */

.vurall-store-btn {
    --brand: #a9182c;
    --brand-glow: rgba(169,24,44,.16);

    position: relative;

    min-width: 235px;

    height: 72px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 10px 8px 12px;

    border-radius: 17px;

    text-decoration: none;

    background: #ffffff;

    border: 1px solid rgba(114,11,24,.10);

    box-shadow:
        0 9px 28px rgba(114,11,24,.07);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* red/brand accent */

.vurall-store-btn::before {
    content: "";

    position: absolute;

    right: 0;

    top: 13px;
    bottom: 13px;

    width: 3px;

    border-radius: 10px;

    background: var(--brand);

    opacity: .7;

    transition:
        top .3s ease,
        bottom .3s ease;
}


.vurall-store-btn:hover {
    transform: translateY(-6px);

    border-color: var(--brand);

    box-shadow:
        0 18px 42px rgba(114,11,24,.12),
        0 0 25px var(--brand-glow);
}


.vurall-store-btn:hover::before {
    top: 7px;
    bottom: 7px;
}


/* =====================================================
   GOOGLE
===================================================== */

.google-play-btn {
    --brand: #4285f4;
    --brand-glow: rgba(66,133,244,.20);
}


/* =====================================================
   MYKET
===================================================== */

.myket-btn {
    --brand: #2476ff;
    --brand-glow: rgba(36,118,255,.20);
}


/* =====================================================
   BAZAAR
===================================================== */

.bazaar-btn {
    --brand: #98592f;
    --brand-glow: rgba(152,89,47,.20);
}


/* =====================================================
   DIRECT
===================================================== */

.direct-btn {
    --brand: #a9182c;
    --brand-glow: rgba(169,24,44,.22);
}


/* =====================================================
   LOGOS
===================================================== */

.vurall-store-logo {
    width: 51px;
    height: 51px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 14px;

    transition:
        transform .35s ease;
}


.vurall-store-btn:hover
.vurall-store-logo {
    transform:
        scale(1.08)
        rotate(-3deg);
}


/* =====================================================
   GOOGLE LOGO
===================================================== */

.google-play-logo {
    background: #ffffff;

    border: 1px solid #e2e2e2;

    box-shadow:
        0 4px 12px rgba(0,0,0,.07);
}


.google-play-logo svg {
    width: 33px;
    height: 33px;
}


.google-play-logo svg path:nth-child(1) {
    fill: #34a853;
}

.google-play-logo svg path:nth-child(2) {
    fill: #4285f4;
}

.google-play-logo svg path:nth-child(3) {
    fill: #fbbc04;
}

.google-play-logo svg path:nth-child(4) {
    fill: #ea4335;
}


/* =====================================================
   MYKET
===================================================== */

.myket-logo {
    color: #2476ff;

    background: #ffffff;

    border: 3px solid #2476ff;

    font-size: 22px;

    font-weight: 900;

    box-shadow:
        0 0 0 4px rgba(36,118,255,.07),
        0 7px 18px rgba(36,118,255,.15);
}


/* =====================================================
   BAZAAR
===================================================== */

.bazaar-logo {
    color: #98592f;

    background: #ffffff;

    border: 3px solid #98592f;

    font-size: 22px;

    font-weight: 900;

    box-shadow:
        0 0 0 4px rgba(152,89,47,.07),
        0 7px 18px rgba(152,89,47,.15);
}


/* =====================================================
   DIRECT
===================================================== */

.direct-logo {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #bd263e,
            #7d0b1b
        );

    font-size: 27px;

    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(169,24,44,.20);
}


/* =====================================================
   TEXT
===================================================== */

.vurall-store-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: right;
}


.vurall-store-content small {
    margin-bottom: 3px;

    color: #a4777e;

    font-size: 9px;

    line-height: 1;
}


.vurall-store-content strong {
    color: #650b18;

    font-size: 15px;

    font-weight: 900;

    white-space: nowrap;
}


/* =====================================================
   DOWNLOAD LABEL
===================================================== */

.vurall-download-label {
    padding: 8px 12px;

    border-radius: 9px;

    color: #ffffff;

    background: var(--brand);

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 5px 14px var(--brand-glow);

    transition:
        transform .3s ease;
}


.vurall-store-btn:hover
.vurall-download-label {
    transform: scale(1.06);
}


/* =====================================================
   ARROW
===================================================== */

.vurall-store-arrow {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    color: #8d2534;

    background: #fff1f3;

    font-size: 13px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.vurall-store-btn:hover
.vurall-store-arrow {
    color: #fff;

    background: var(--brand);

    transform: translateX(-4px);
}


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

@media (max-width: 720px) {

    .vurall-app-download {
        padding: 75px 18px;
    }

    .vurall-app-download h2 {
        font-size: 34px;

        line-height: 1.45;
    }

    .vurall-app-download-inner > p {
        font-size: 14px;

        margin-bottom: 32px;
    }

    .vurall-store-buttons {
        width: 100%;

        flex-direction: column;

        gap: 11px;
    }

    .vurall-store-btn {
        width: 100%;

        min-width: 0;

        height: 68px;

        border-radius: 16px;
    }

    .vurall-store-logo {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 760px) {

    .roles-visible .role-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .roles-visible .role-card {
        height: 210px !important;
        min-height: 210px !important;
        padding: 8px 5px !important;
        border-radius: 13px !important;
    }

    .roles-visible .role-icon {
        width: 27px !important;
        height: 27px !important;
        margin-bottom: 4px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    .roles-visible .role-card h3 {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }

    .roles-visible .role-card > p {
        height: 42px !important;
        min-height: 0 !important;
        font-size: 7px !important;
        line-height: 1.5 !important;
        overflow: hidden !important;
    }

    .roles-visible .role-image {
        height: 48px !important;
        transform: scale(.38) !important;
    }

    .roles-visible .role-button {
        height: 24px !important;
        min-height: 24px !important;
        font-size: 6px !important;
        margin-top: auto !important;
    }
}

/* =====================================================
   VURALL — ROLES MOBILE PREMIUM
   اصلاح کامل سکشن نقش‌ها در موبایل
===================================================== */

@media (max-width: 760px) {

    /* خود سکشن */
    .roles {
        padding: 70px 14px 75px !important;
    }

    /* عنوان سکشن */
    .roles .section-heading {
        max-width: 100%;
        margin: 0 auto 30px !important;
        padding: 0 8px;
    }

    .roles .section-label {
        font-size: 13px !important;
        margin-bottom: 8px;
    }

    .roles .section-heading h2 {
        font-size: 29px !important;
        line-height: 1.45 !important;
        margin-bottom: 9px !important;
    }

    .roles .section-heading p {
        font-size: 11.5px !important;
        line-height: 2 !important;
        max-width: 330px;
        margin: auto;
    }


    /* =================================================
       GRID
    ================================================= */

    .roles .role-grid {
        width: 100% !important;
        max-width: 430px !important;
        margin: auto !important;

        display: grid !important;

        /* هر کارت یک ردیف */
        grid-template-columns: 1fr !important;

        gap: 16px !important;
    }


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

    .roles .role-card {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        padding: 19px 18px 16px !important;

        border-radius: 22px !important;

        display: grid !important;

        grid-template-columns: 58px 1fr;
        grid-template-rows: auto auto auto;

        column-gap: 14px;
        row-gap: 3px;

        text-align: right;

        overflow: hidden;

        box-shadow:
            0 14px 35px rgba(101,8,24,.08) !important;

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


    /* افکت لمس */
    .roles .role-card:active {
        transform: scale(.985);
    }


    /* شماره */
    .roles .role-number {
        top: 12px !important;
        left: 14px !important;

        font-size: 9px !important;

        opacity: .8;
    }


    /* =================================================
       ICON
    ================================================= */

    .roles .role-icon {
        grid-column: 1;
        grid-row: 1 / span 2;

        width: 54px !important;
        height: 54px !important;

        margin: 0 !important;

        border-radius: 16px !important;

        font-size: 22px !important;

        box-shadow:
            0 10px 22px rgba(114,11,24,.18) !important;
    }


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

    .roles .role-card h3 {
        grid-column: 2;
        grid-row: 1;

        margin: 0 !important;

        color: #48141a;

        font-size: 19px !important;
        line-height: 1.4 !important;
    }


    /* =================================================
       DESCRIPTION
    ================================================= */

    .roles .role-card > p {
        grid-column: 2;
        grid-row: 2;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;

        color: #80676a;

        font-family: "Vazirmatn", sans-serif !important;

        font-size: 10.5px !important;
        font-weight: 400 !important;

        line-height: 1.9 !important;

        overflow: visible !important;
    }


    /* =================================================
       IMAGE
    ================================================= */

    .roles .role-image {
        grid-column: 1 / -1;
        grid-row: 3;

        width: 100% !important;

        height: 185px !important;

        margin: 8px 0 2px !important;

        transform: none !important;

        display: flex !important;
        align-items: center;
        justify-content: center;
    }


    /* گوشی داخل کارت */
    .roles .mini-phone {
        width: 62px !important;
        height: 100px !important;

        border-radius: 19px !important;

        transform: rotate(-7deg) !important;

        box-shadow:
            0 18px 35px rgba(0,0,0,.20) !important;
    }


    .roles .mini-screen {
        padding: 15px 9px !important;
        border-radius: 14px !important;
    }


    .roles .mini-camera {
        top: 6px !important;

        width: 25px !important;
        height: 5px !important;
    }


    .roles .mini-line {
        height: 6px !important;
        margin-bottom: 7px !important;
    }


    .roles .mini-product {
        height: 38px !important;
        margin-top: 11px !important;
        border-radius: 9px !important;
    }


    .roles .small-product {
        height: 18px !important;
        margin-top: 6px !important;
    }


    /* داشبورد */
    .roles .fake-dashboard {
        width: 210px !important;
        height: 130px !important;

        padding: 12px !important;

        border-radius: 15px !important;

        transform:
            perspective(500px)
            rotateX(8deg)
            rotateY(-5deg) !important;
    }


    .roles .dash-head {
        height: 9px !important;
        margin-bottom: 12px !important;
    }


    .roles .dash-grid {
        gap: 6px !important;
        margin-bottom: 7px !important;
    }


    .roles .dash-grid span {
        height: 26px !important;
        border-radius: 6px !important;
    }


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

    .roles .road {
        width: 220px !important;
        bottom: 20px !important;
    }


    .roles .bike {
        width: 52px !important;
        height: 52px !important;

        font-size: 17px !important;
    }


    .roles .location-point {
        width: 11px !important;
        height: 11px !important;

        top: 30px !important;
        right: 25px !important;
    }


    .roles .bike-wheel {
        width: 13px !important;
        height: 13px !important;

        border-width: 2px !important;
    }


    .roles .wheel-one {
        transform:
            translate(-25px,25px) !important;
    }


    .roles .wheel-two {
        transform:
            translate(25px,25px) !important;
    }


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

    .roles .role-button {
        grid-column: 1 / -1;
        grid-row: 4;

        width: 100% !important;

        min-height: 43px !important;
        height: 43px !important;

        margin: 3px 0 0 !important;

        padding: 0 12px !important;

        border-radius: 12px !important;

        font-size: 11px !important;

        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 390px) {

    .roles {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .roles .role-grid {
        gap: 13px !important;
    }

    .roles .role-card {
        padding: 17px 15px 14px !important;

        grid-template-columns: 52px 1fr;

        column-gap: 12px;
    }

    .roles .role-icon {
        width: 49px !important;
        height: 49px !important;

        border-radius: 14px !important;

        font-size: 20px !important;
    }

    .roles .role-card h3 {
        font-size: 17px !important;
    }

    .roles .role-card > p {
        font-size: 9.8px !important;
        line-height: 1.85 !important;
    }

    .roles .role-image {
        height: 120px !important;
    }

    .roles .mini-phone {
        width: 75px !important;
        height: 120px !important;
    }

    .roles .fake-dashboard {
        width: 190px !important;
        height: 118px !important;
    }

    .roles .role-button {
        min-height: 41px !important;
        height: 41px !important;

        font-size: 10.5px !important;
    }
}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 330px) {

    .roles .role-card {
        padding: 15px 13px 13px !important;
    }

    .roles .role-card h3 {
        font-size: 16px !important;
    }

    .roles .role-card > p {
        font-size: 9px !important;
    }

    .roles .role-image {
        height: 110px !important;
    }

    .roles .role-button {
        font-size: 10px !important;
    }
}
/* =====================================================
   VURALL LOGO — BIGGER & RED
===================================================== */

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo img {
    width: 165px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
    display: block;

    /* قرمزتر و لوکس‌تر */
    filter:
        sepia(1)
        saturate(8)
        hue-rotate(325deg)
        brightness(.78)
        contrast(1.15);

    transition:
        transform .3s ease,
        filter .3s ease;
}

.logo:hover img {
    transform: scale(1.04);

    filter:
        sepia(1)
        saturate(10)
        hue-rotate(325deg)
        brightness(.72)
        contrast(1.2);
}


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

@media (max-width: 760px) {

    .logo img {
        width: 135px;
        max-height: 52px;
    }

}
/* =====================================================
   MOBILE — NAVBAR + HERO SMALLER
===================================================== */

@media (max-width: 760px) {

    /* =========================
       NAVBAR
    ========================= */

    .logo img {
        width: 125px !important;
        max-height: 48px !important;
    }

    .navbar {
        height: 58px !important;
    }

    .logo {
        font-size: 18px !important;
    }

    .menu-btn {
        font-size: 18px !important;
    }

    /* متن‌های داخل منوی موبایل */
    .mobile-menu a,
    .mobile-menu button,
    .mobile-nav a,
    .mobile-nav button {
        font-size: 13px !important;
    }


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

    .hero {
        padding:
            110px 14px 50px !important;
        gap: 12px !important;
    }

    .hero h1 {
        font-size: 36px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
    }

    .hero-badge {
        font-size: 10.5px !important;
        padding: 6px 11px !important;
    }

    .hero-content > p {
        font-size: 11.5px !important;
        line-height: 1.9 !important;
    }

    .hero-buttons {
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .primary-btn,
    .secondary-btn {
        min-height: 46px !important;
        font-size: 12.5px !important;
    }

    .hero-stats {
        gap: 18px !important;
        margin-top: 24px !important;
    }

    .hero-stats strong {
        font-size: 18px !important;
    }

    .hero-stats span {
        font-size: 9.5px !important;
    }
}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 390px) {

    .logo img {
        width: 118px !important;
    }

    .hero h1 {
        font-size: 32px !important;
    }

    .hero-content > p {
        font-size: 10.5px !important;
    }

    .primary-btn,
    .secondary-btn {
        font-size: 11.5px !important;
    }

    .hero-stats strong {
        font-size: 17px !important;
    }

    .hero-stats span {
        font-size: 9px !important;
    }
}
/* =====================================================
   MOBILE MENU LOGIN — SMALLER
===================================================== */

@media (max-width: 760px) {

    .mobile-menu .mobile-login {
        min-height: 42px !important;
        height: 42px !important;

        margin-top: 10px !important;

        padding: 0 14px !important;

        border-radius: 12px !important;

        font-size: 12px !important;

        gap: 7px !important;

        box-shadow:
            0 8px 20px rgba(114,11,24,.18) !important;
    }

    .mobile-menu .mobile-login span {
        font-size: 12px !important;
    }

}


/* گوشی‌های کوچک */
@media (max-width: 390px) {

    .mobile-menu .mobile-login {
        min-height: 39px !important;
        height: 39px !important;

        font-size: 11px !important;
    }

    .mobile-menu .mobile-login span {
        font-size: 11px !important;
    }

}
/* =====================================================
   ABOUT CONTENT — MOBILE FONT
===================================================== */

@media (max-width: 760px) {

    .about-content h2 {
        font-size: 26px !important;
        line-height: 1.45 !important;
    }

    .about-content p {
        font-size: 11px !important;
        line-height: 1.9 !important;
    }

    .about-content .section-label {
        font-size: 11px !important;
    }

    .about-content strong {
        font-size: inherit !important;
    }

}


/* گوشی‌های کوچک */
@media (max-width: 390px) {

    .about-content h2 {
        font-size: 23px !important;
    }

    .about-content p {
        font-size: 10px !important;
        line-height: 1.85 !important;
    }

    .about-content .section-label {
        font-size: 10px !important;
    }

}

/* =====================================================
   FORCE COMPACT — VURALL DOWNLOAD MOBILE
===================================================== */

@media screen and (max-width: 760px) {

    /* کل بخش */
    section.vurall-app-download,
    .vurall-app-download {
        padding: 38px 10px !important;
        min-height: 0 !important;
    }

    /* تگ */
    .vurall-app-download .vurall-app-tag {
        padding: 4px 10px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        gap: 5px !important;
    }

    .vurall-app-download .vurall-app-tag::before {
        width: 4px !important;
        height: 4px !important;
    }

    /* عنوان */
    .vurall-app-download h2,
    .vurall-app-download h2 strong {
        font-size: 22px !important;
        line-height: 1.35 !important;
        margin: 12px 0 8px !important;
        letter-spacing: 0 !important;
    }

    /* توضیحات */
    .vurall-app-download .vurall-app-download-inner > p {
        font-size: 9px !important;
        line-height: 1.75 !important;
        max-width: 300px !important;
        margin: 0 auto 17px !important;
    }

    /* کانتینر دکمه‌ها */
    .vurall-app-download .vurall-store-buttons {
        width: 100% !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    /* کارت‌های دانلود */
    .vurall-app-download .vurall-store-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 330px !important;

        height: 45px !important;
        min-height: 45px !important;

        padding: 4px 6px !important;

        border-radius: 10px !important;

        gap: 6px !important;
    }

    /* لوگوی فروشگاه */
    .vurall-app-download .vurall-store-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;

        font-size: 14px !important;
    }

    /* متن داخل کارت */
    .vurall-app-download .vurall-store-content {
        min-width: 0 !important;
    }

    .vurall-app-download .vurall-store-content small {
        font-size: 6px !important;
        line-height: 1 !important;
        margin-bottom: 1px !important;
    }

    .vurall-app-download .vurall-store-content strong {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* دکمه دانلود */
    .vurall-app-download .vurall-download-label {
        padding: 4px 6px !important;
        border-radius: 6px !important;
        font-size: 6.5px !important;
        line-height: 1 !important;
    }

    /* فلش */
    .vurall-app-download .vurall-store-arrow {
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;

        font-size: 8px !important;
    }

    /* خط کنار کارت */
    .vurall-app-download .vurall-store-btn::before {
        width: 2px !important;
        top: 7px !important;
        bottom: 7px !important;
    }
}


/* =====================================================
   VERY SMALL PHONE
===================================================== */

@media screen and (max-width: 390px) {

    section.vurall-app-download,
    .vurall-app-download {
        padding: 32px 8px !important;
    }

    .vurall-app-download h2,
    .vurall-app-download h2 strong {
        font-size: 19px !important;
    }

    .vurall-app-download .vurall-app-download-inner > p {
        font-size: 8px !important;
        max-width: 280px !important;
    }

    .vurall-app-download .vurall-store-btn {
        max-width: 300px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .vurall-app-download .vurall-store-logo {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
    }

    .vurall-app-download .vurall-store-content strong {
        font-size: 8.5px !important;
    }

    .vurall-app-download .vurall-download-label {
        font-size: 6px !important;
    }
}
/* =====================================================
   تجربه وورال — MOBILE COMPACT
===================================================== */

@media screen and (max-width: 760px) {

    /* خود باکس قرمز */
    .download {
        width: calc(100% - 20px) !important;
        max-width: none !important;

        min-height: 0 !important;

        margin: 0 10px 35px !important;

        padding: 35px 18px !important;

        border-radius: 24px !important;

        gap: 20px !important;
    }


    /* عنوان «تجربه وورال» */
    .download h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;

        margin-bottom: 8px !important;
    }


    /* متن توضیحی */
    .download p {
        font-size: 9.5px !important;
        line-height: 1.85 !important;

        margin-bottom: 17px !important;
    }


    /* کانتینر دکمه‌ها */
    .download .store-buttons {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 7px !important;
    }


    /* دکمه‌های فروشگاه */
    .download .store-button {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;

        padding: 5px 9px !important;

        gap: 7px !important;

        border-radius: 11px !important;
    }


    /* آیکون */
    .download .store-icon {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        border-radius: 8px !important;

        font-size: 12px !important;
    }


    /* نوشته‌های داخل دکمه */
    .download .store-text {
        gap: 0 !important;
    }

    .download .store-button small {
        font-size: 7px !important;
        line-height: 1.1 !important;
    }

    .download .store-button strong {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }


    /* گوشی کنار سکشن */
    .download .download-phone {
        width: 150px !important;
        height: 250px !important;

        margin: 20px auto 0 !important;

        transform:
            rotate(-7deg)
            scale(.65) !important;
    }


    /* نور تزئینی */
    .download .download-glow {
        width: 220px !important;
        height: 220px !important;

        right: -90px !important;
    }
}


/* =====================================================
   گوشی‌های کوچک
===================================================== */

@media screen and (max-width: 390px) {

    .download {
        width: calc(100% - 16px) !important;

        margin: 0 8px 28px !important;

        padding: 29px 14px !important;

        border-radius: 21px !important;
    }

    .download h2 {
        font-size: 22px !important;
    }

    .download p {
        font-size: 8.5px !important;
    }

    .download .store-button {
        height: 41px !important;
        min-height: 41px !important;
    }

    .download .store-icon {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
    }

    .download .store-button small {
        font-size: 6.5px !important;
    }

    .download .store-button strong {
        font-size: 9px !important;
    }

    .download .download-phone {
        width: 135px !important;
        height: 225px !important;
    }
}


/* =====================================================
   FOOTER MOBILE — FORCE SMALL
===================================================== */

@media screen and (max-width: 760px) {

    /* خود فوتر */
    body footer {
        padding: 35px 14px 15px !important;
    }

    /* متن توضیح کنار لوگو */
    body footer .footer-brand p {
        font-size: 9px !important;
        line-height: 1.75 !important;
        max-width: 280px !important;
    }

    /* عنوان ستون‌ها */
    body footer .footer-column h4 {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 4px !important;
    }

    /* لینک‌ها و شماره تماس و... */
    body footer .footer-column a,
    body footer .footer-column span {
        font-size: 8.5px !important;
        line-height: 1.7 !important;
    }

    /* فاصله بین آیتم‌های ستون */
    body footer .footer-column {
        gap: 6px !important;
    }

    /* شبکه‌های اجتماعی */
    body footer .socials {
        gap: 5px !important;
        margin-top: 12px !important;
    }

    body footer .socials a {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    /* بخش پایین فوتر */
    body footer .footer-bottom {
        margin-top: 25px !important;
        padding-top: 12px !important;
        gap: 5px !important;
        font-size: 7.5px !important;
        line-height: 1.6 !important;
    }

    /* اگر متن‌های داخل footer-bottom تگ جدا داشته باشند */
    body footer .footer-bottom * {
        font-size: 7.5px !important;
        line-height: 1.6 !important;
    }

    /* لوگوی فوتر */
    body footer .footer-brand .logo img {
        width: 105px !important;
        max-height: 40px !important;
    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media screen and (max-width: 390px) {

    body footer {
        padding: 28px 11px 12px !important;
    }

    body footer .footer-brand p {
        font-size: 8px !important;
    }

    body footer .footer-column h4 {
        font-size: 10.5px !important;
    }

    body footer .footer-column a,
    body footer .footer-column span {
        font-size: 7.5px !important;
    }

    body footer .socials a {
        width: 25px !important;
        height: 25px !important;
        font-size: 9px !important;
    }

    body footer .footer-bottom,
    body footer .footer-bottom * {
        font-size: 6.8px !important;
    }

}


/* =====================================================
    VURALL ROLE DOWNLOAD BUTTONS
    DESKTOP + FULL MOBILE RESPONSIVE
 ===================================================== */

.role-downloads {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}


/* =====================================================
   BASE BUTTON
===================================================== */

.download-button {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 50px;

    padding: 9px 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 15px;

    text-decoration: none;

    font-family: "Vazirmatn", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease;
}


/* =====================================================
   SHINE
===================================================== */

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

    position: absolute;

    top: 0;
    left: -130%;

    width: 75%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.42),
            transparent
        );

    transform: skewX(-22deg);

    transition: left .6s ease;

    pointer-events: none;
}


.download-button:hover::before {
    left: 145%;
}


/* =====================================================
   ICON
===================================================== */

.download-icon {
    position: relative;
    z-index: 2;

    width: 25px;
    min-width: 25px;
    height: 25px;

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

    border-radius: 8px;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;

    flex-shrink: 0;

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


.download-button span:last-child {
    position: relative;
    z-index: 2;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =====================================================
   BAZAAR — LIGHT GREEN
===================================================== */

.bazaar-button {
    color: #18552c;

    background:
        linear-gradient(
            135deg,
            #e2fae8 0%,
            #c9f5d4 48%,
            #b2edc1 100%
        );

    border: 1px solid rgba(66, 184, 95, .30);

    box-shadow:
        0 8px 22px rgba(57, 174, 86, .14),
        inset 0 1px 0 rgba(255,255,255,.85);
}


.bazaar-button .download-icon {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #68cf82,
            #45b966
        );

    box-shadow:
        0 5px 12px rgba(55, 171, 82, .25);
}


/* =====================================================
   MYKET — LIGHT BLUE
===================================================== */

.myket-button {
    color: #15506d;

    background:
        linear-gradient(
            135deg,
            #e4f7ff 0%,
            #cbedfc 48%,
            #b5e5f8 100%
        );

    border: 1px solid rgba(73, 174, 220, .30);

    box-shadow:
        0 8px 22px rgba(65, 166, 214, .14),
        inset 0 1px 0 rgba(255,255,255,.9);
}


.myket-button .download-icon {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #66c7ed,
            #4daed8
        );

    box-shadow:
        0 5px 12px rgba(55, 158, 202, .25);
}


/* =====================================================
   HOVER
===================================================== */

.download-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.025);
}


.bazaar-button:hover {
    box-shadow:
        0 12px 28px rgba(57, 174, 86, .22),
        inset 0 1px 0 rgba(255,255,255,.9);
}
.myket-button:hover {
    box-shadow:
        0 12px 28px rgba(65, 166, 214, .22),
        inset 0 1px 0 rgba(255,255,255,.9);
}


.download-button:hover .download-icon {
    transform: translateY(2px) scale(1.05);
}


/* =====================================================
   ACTIVE
===================================================== */

.download-button:active {
    transform: translateY(-1px) scale(.98);
}

/* =====================================================
   MOBILE — نوار پایین ثابت قرمز (سایز استاندارد)
   با دکمه آبی (چپ) و سبز (راست)
===================================================== */

@media (max-width: 760px) {

    .role-downloads {
        position: fixed !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: 92% !important;
        max-width: 400px !important;           /* ۳۹۰ → ۴۰۰ */

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;                   /* ۶ → ۷ */
        padding: 7px 12px !important;          /* ۶-۱۱ → ۷-۱۲ */
        padding-bottom: max(7px, env(safe-area-inset-bottom)) !important;

        background: rgba(220, 80, 80, 0.09) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;

        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -3px 12px rgba(220, 80, 80, 0.10) !important;
        border-top: 1px solid rgba(220, 80, 80, 0.15) !important;

        z-index: 999 !important;
        box-sizing: border-box !important;
    }


    /* ===== دکمه‌ها ===== */
    .download-button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;

        height: 35px !important;               /* ۳۲ → ۳۵ (+~۱۰%) */
        min-height: 35px !important;
        padding: 0 9px !important;             /* ۸ → ۹ */

        border-radius: 10px !important;        /* ۹ → ۱۰ */
        border: 1px solid rgba(255,255,255,0.2) !important;

        font-size: 12px !important;            /* ۱۱ → ۱۲ (+~۱۰%) */
        font-weight: 700 !important;
        white-space: nowrap !important;
        gap: 5px !important;                   /* ۴ → ۵ */

        box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
        transition: all 0.12s ease !important;
        box-sizing: border-box !important;
    }


    /* ✅ دکمه سمت چپ — آبی روشن */
    .download-button:first-child {
        background: #64B5F6 !important;
        color: #ffffff !important;
        border-color: rgba(100, 181, 246, 0.3) !important;
    }

    .download-button:first-child:active {
        background: #42A5F5 !important;
        transform: scale(0.94) !important;
    }


    /* ✅ دکمه سمت راست — سبز روشن */
    .download-button:last-child {
        background: #81C784 !important;
        color: #ffffff !important;
        border-color: rgba(129, 199, 132, 0.3) !important;
    }

    .download-button:last-child:active {
        background: #66BB6A !important;
        transform: scale(0.94) !important;
    }


    /* ===== آیکون‌ها ===== */
    .download-icon {
        width: 17px !important;                /* ۱۵ → ۱۷ */
        min-width: 17px !important;
        height: 17px !important;
        flex-shrink: 0 !important;

        filter: brightness(0) invert(1) !important;
    }
}

/* =====================================================
   گوشی‌های خیلی ریز (زیر ۴۰۰px) — ۱۰٪ بزرگ‌تر متناسب
===================================================== */

@media (max-width: 400px) {

    .role-downloads {
        width: 94% !important;
        gap: 6px !important;                   /* ۵ → ۶ */
        padding: 6px 10px !important;          /* ۵-۹ → ۶-۱۰ */
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .download-button {
        height: 32px !important;               /* ۲۹ → ۳۲ */
        min-height: 32px !important;
        font-size: 11px !important;            /* ۱۰ → ۱۱ */
        padding: 0 8px !important;             /* ۷ → ۸ */
        border-radius: 9px !important;         /* ۸ → ۹ */
        gap: 4px !important;                   /* ۳ → ۴ */
    }

    .download-icon {
        width: 15px !important;                /* ۱۴ → ۱۵ */
        min-width: 15px !important;
        height: 15px !important;
    }
}


/* =====================================================
   ROLE BUTTONS — DESKTOP ONLY: VERTICAL
   ظاهر دکمه‌ها حفظ می‌شود؛ فقط در دسکتاپ زیر هم قرار می‌گیرند.
===================================================== */
@media (min-width: 761px) {
    .role-downloads {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .role-downloads .download-button {
        width: 100%;
    }
}

/* وب اپلیکیشن در کارت‌های نقش */
.role-downloads .webapp-button {
    /* ظاهر اصلی دکمه‌ها حفظ می‌شود */
}