:root {
    --white: #05070a;
    --off: #0a0c10;
    --blue: #d6d6da;
    --blue-dark: #a4a4aa;
    --blue-light: #151519;
    --blue-mid: #eaeaec;
    --ink: #f4f4f6;
    --ink-60: #a8a8b0;
    --ink-30: #55555c;
    --border: #1e1e22;
    --radius: 14px;
    --shadow: 0 4px 24px rgba(255,255,255,.08);
    --cyan: #ffffff;
    --teal: #c9c9cf;
    --accent: #ffffff;
    --neon: #ffffff;
    --neon-glow: 0 0 8px rgba(255,255,255,.35), 0 0 22px rgba(255,255,255,.15);
    --cyan-glow: 0 0 8px rgba(255,255,255,.4), 0 0 20px rgba(255,255,255,.2);
    --teal-glow: 0 0 8px rgba(210,210,215,.4), 0 0 20px rgba(210,210,215,.2);
    --purple: #9a9aa2;
}

a {
    color: white !important;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Vazirmatn',sans-serif;
    background: var(--white);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
}

    /* === Cyberpunk scanlines overlay === */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px);
        pointer-events: none;
        z-index: 9999;
    }

/* === Top trust bar === */
.trust-topbar {
    background: linear-gradient(90deg,#020d12 0%,#04131c 40%,#020d12 100%);
    border-bottom: 1px solid rgba(255,255,255,.35);
    padding: 9px 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

    .trust-topbar::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 30%,rgba(212,212,217,.08) 70%,transparent 100%);
        animation: topbarShine 4s ease-in-out infinite;
    }

@keyframes topbarShine {
    0%,100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .5px;
    position: relative;
    z-index: 1;
}

    .trust-item .ti-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .trust-item:nth-child(1) .ti-icon {
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.28);
    }

    .trust-item:nth-child(2) .ti-icon {
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.2);
    }

    .trust-item:nth-child(3) .ti-icon {
        background: rgba(212,212,217,.15);
        border: 1px solid rgba(212,212,217,.3);
    }

    .trust-item:nth-child(4) .ti-icon {
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.28);
    }

    .trust-item svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

    .trust-item:nth-child(1) svg, .trust-item:nth-child(4) svg {
        stroke: var(--cyan);
    }

    .trust-item:nth-child(2) svg {
        stroke: var(--accent);
    }

    .trust-item:nth-child(3) svg {
        stroke: var(--cyan);
    }

    .trust-item span {
        color: var(--ink-60);
    }

.latin {
    font-family: 'Space Grotesk','Vazirmatn',sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img, svg {
    display: block;
}

/* ===== Header ===== */
header {
    position: fixed;
    top: var(--topbar-h,44px);
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 5%;
    background: rgba(4,10,16,.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.15);
    transition: background .3s, transform .4s ease, box-shadow .3s, top .2s ease;
}

    header.hide {
        transform: translateY(calc(-110% - var(--topbar-h,44px)));
    }

    header.scrolled {
        box-shadow: 0 2px 30px rgba(255,255,255,.06),0 0 1px rgba(255,255,255,.25);
    }

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 100px;
    height: 100px;
}

.logo-text {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
}

    .logo-text span {
        color: var(--cyan);
        text-shadow: var(--cyan-glow);
    }

nav ul {
    display: flex;
    gap: 32px;
    list-style: none;
}

nav a {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-60);
    transition: color .2s,text-shadow .2s;
}

    nav a:hover {
        color: var(--cyan);
        text-shadow: var(--cyan-glow);
    }

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-60);
    font-size: 18px;
    transition: background .2s,color .2s;
    border: 1px solid transparent;
}

    .icon-btn:hover {
        background: rgba(255,255,255,.1);
        color: var(--cyan);
        border-color: rgba(255,255,255,.3);
    }

    .icon-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

.search-wrap {
    display: flex;
    align-items: center;
    background: rgba(5,15,22,.92);
    border: 1.5px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: width .35s ease, opacity .25s, padding .35s, border-color .25s;
}

    .search-wrap.open {
        width: 210px;
        opacity: 1;
        padding: 0 8px;
        border-color: var(--cyan);
    }

    .search-wrap input {
        border: none;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        padding: 10px 8px;
        width: 100%;
        outline: none;
        color: var(--ink);
    }

.nav-toggle {
    display: none;
    font-size: 22px;
    color: var(--ink);
}

.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--cyan);
    border: 1.5px solid var(--cyan);
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    transition: all .2s;
    box-shadow: var(--neon-glow);
}

    .btn-header:hover {
        background: var(--cyan);
        color: #03080e;
        transform: translateY(-1px);
    }

/* ===== Hero ===== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 180px 5% 80px;
    background: #030810;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 70% 60% at 15% 50%, rgba(190,190,195,.16) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 20%, rgba(255,255,255,.08) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 50% 90%, rgba(212,212,217,.07) 0%, transparent 55%);
    z-index: 0;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: .6;
    z-index: 0;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%,100% {
        opacity: .6;
    }

    50% {
        opacity: .3;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    color: var(--cyan);
    border: 1px solid rgba(255,255,255,.3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 28px;
    text-transform: uppercase;
    box-shadow: var(--cyan-glow);
}

    .eyebrow::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        animation: pulse 2s infinite;
        box-shadow: var(--cyan-glow);
    }

@keyframes pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

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

.hero h1 {
    font-size: clamp(38px,5.5vw,72px);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 22px;
    color: var(--ink);
    letter-spacing: -1px;
}

    .hero h1 em {
        font-style: normal;
        color: var(--neon);
        text-shadow: var(--neon-glow);
    }

.hero p {
    font-size: 17px;
    color: var(--ink-60);
    max-width: 460px;
    margin-bottom: 38px;
    line-height: 1.7;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--neon);
    color: #000;
    padding: 15px 32px;
    font-weight: 800;
    font-size: 14px;
    border-radius: 12px;
    transition: transform .25s, background .25s, box-shadow .25s;
    box-shadow: var(--neon-glow);
}

    .btn:hover {
        background: var(--blue-dark);
        transform: translateY(-3px);
        box-shadow: 0 10px 32px rgba(255,255,255,.5);
    }

.btn-ghost {
    background: transparent;
    color: var(--cyan);
    border: 2px solid rgba(255,255,255,.4);
    box-shadow: var(--cyan-glow);
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.1);
        transform: translateY(-3px);
        border-color: var(--cyan);
    }

.hero-visual {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    width: min(46vw,540px);
    z-index: 1;
    filter: drop-shadow(0 0 40px rgba(255,255,255,.18));
    animation: floatY 6s ease-in-out infinite;
}

@keyframes floatY {
    0%,100% {
        transform: translateY(-50%);
    }

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

.hero-badges {
    display: flex;
    gap: 14px;
    margin: 10px;
    width: 100%;
    text-align: center;
    justify-content: center;
    z-index: 2;
}

.badge-pill {
    background: rgba(4,12,20,.9);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 24px rgba(255,255,255,.06);
    min-width: 180px;
    backdrop-filter: blur(8px);
}

    .badge-pill .bp-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .badge-pill .bp-icon svg {
            width: 20px;
            height: 20px;
            stroke: var(--cyan);
            fill: none;
            stroke-width: 2;
        }

    .badge-pill b {
        display: block;
        font-size: 14px;
        color: var(--ink);
    }

    .badge-pill span {
        font-size: 11px;
        color: var(--ink-60);
    }

/* ===== Marquee ===== */
.marquee {
    overflow: hidden;
    background: rgba(2,8,14,.9);
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.22);
    border-bottom: 1px solid rgba(255,255,255,.22);
    position: relative;
}

    .marquee::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(255,255,255,.04) 0%,transparent 50%,rgba(212,212,217,.06) 100%);
    }

.marquee-track {
    display: flex;
    gap: 0;
    animation: marquee 22s linear infinite;
    width: max-content;
}

    .marquee-track span {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        color: var(--cyan);
        text-transform: uppercase;
        padding: 0 28px;
        display: flex;
        align-items: center;
        gap: 28px;
        text-shadow: var(--neon-glow);
    }

        .marquee-track span::after {
            content: '◆';
            font-size: 7px;
            opacity: .5;
            color: var(--accent);
        }

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ===== Section ===== */
.section {
    padding: 100px 5%;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 52px;
    flex-wrap: wrap;
    gap: 20px;
}

    .section-head h2 {
        font-size: clamp(28px,3.5vw,46px);
        font-weight: 900;
        letter-spacing: -0.5px;
    }

    .section-head p {
        color: var(--ink-60);
        max-width: 340px;
        font-size: 14px;
    }

.tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--cyan);
    text-transform: uppercase;
    text-shadow: var(--cyan-glow);
    margin-bottom: 12px;
    display: block;
}

/* ===== Categories ===== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.cat-card {
    background: var(--off);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

    .cat-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(255,255,255,.08),0 0 1px rgba(255,255,255,.4);
        border-color: rgba(255,255,255,.4);
    }

.cat-img {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,rgba(255,255,255,.07) 0%, rgba(212,212,217,.08) 100%);
    position: relative;
    overflow: hidden;
}

    .cat-img::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg,transparent,transparent 12px,rgba(255,255,255,.025) 12px,rgba(255,255,255,.025) 13px);
    }

    .cat-img svg {
        width: 80%;
        height: 80%;
        transition: transform .4s;
        filter: drop-shadow(0 0 8px rgba(255,255,255,.25));
    }

.cat-card:hover .cat-img svg {
    transform: scale(1.08);
}

.cat-body {
    padding: 18px 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .cat-body h3 {
        font-size: 16px;
        font-weight: 800;
    }

.cat-count {
    font-size: 11px;
    color: var(--ink-60);
    margin-bottom: 4px;
}

.cat-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .2s,color .2s,border-color .2s,box-shadow .2s;
    flex-shrink: 0;
    color: var(--cyan);
}

.cat-card:hover .cat-arrow {
    background: var(--cyan);
    color: #03080e;
    border-color: var(--cyan);
    box-shadow: var(--cyan-glow);
}

/* ===== Products grid ===== */
.section.products-section {
    background: #040b12;
}

.cat-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.cat-btn {
    padding: 10px 22px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.18);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink-60);
    transition: all .2s;
    background: rgba(255,255,255,.04);
}

    .cat-btn.active, .cat-btn:hover {
        background: rgba(255,255,255,.12);
        color: var(--cyan);
        border-color: rgba(255,255,255,.5);
        box-shadow: 0 0 12px rgba(255,255,255,.15);
    }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(256px,1fr));
    gap: 24px;
}

.card {
    background: var(--off);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius);
    padding: 22px 20px 18px;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s, border-color .3s;
    position: relative;
    overflow: hidden;
}

    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
        opacity: 0;
        transition: opacity .3s;
    }

    .card:hover::before {
        opacity: 1;
    }

    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 44px rgba(255,255,255,.07),0 0 1px rgba(255,255,255,.28);
        border-color: rgba(255,255,255,.3);
    }

.card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--teal);
    color: #e8f4f8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    box-shadow: var(--teal-glow);
}

.card-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 10px;
    transition: transform .4s;
    background: rgba(255,255,255,.03);
}

.card:hover .card-img {
    transform: scale(1.04);
}

.card-img svg {
    width: 75%;
    height: 75%;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.18));
}

.card h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
}

.card .cat-label {
    font-size: 11px;
    color: var(--ink-30);
    margin-bottom: 14px;
}

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

.price {
    font-weight: 900;
    font-size: 18px;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(255,255,255,.35);
}

    .price span {
        font-size: 11px;
        color: var(--ink-60);
        font-weight: 500;
    }

.add-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: var(--cyan);
    border: 1px solid rgba(255,255,255,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all .2s;
}

.card:hover .add-btn {
    background: var(--cyan);
    color: #03080e;
    box-shadow: var(--neon-glow);
}

.load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--cyan);
    border: 1.5px solid rgba(255,255,255,.38);
    padding: 13px 36px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    transition: all .2s;
    box-shadow: var(--cyan-glow);
}

    .btn-load-more:hover {
        background: rgba(255,255,255,.09);
        transform: translateY(-2px);
    }

.load-more-count {
    font-size: 12px;
    color: var(--ink-60);
}

/* ===== Customer Reviews ===== */
.reviews-section {
    background: #030a12;
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
}

    .reviews-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,255,255,.05) 0%,transparent 70%);
    }

.reviews-scroll-wrap {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

    .reviews-scroll-wrap::before, .reviews-scroll-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none;
    }

    .reviews-scroll-wrap::before {
        left: 0;
        background: linear-gradient(90deg,#030a12,transparent);
    }

    .reviews-scroll-wrap::after {
        right: 0;
        background: linear-gradient(-90deg,#030a12,transparent);
    }

.reviews-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 12px 8px 24px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.3) rgba(255,255,255,.04);
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

    .reviews-track.dragging {
        cursor: grabbing;
        scroll-behavior: auto;
        scroll-snap-type: none;
        user-select: none;
    }

        .reviews-track.dragging .rev-card {
            pointer-events: none;
        }

.rev-card {
    scroll-snap-align: start;
}

.reviews-track::-webkit-scrollbar {
    height: 4px;
}

.reviews-track::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
    border-radius: 2px;
}

.reviews-track::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.35);
    border-radius: 2px;
}

.rev-card {
    flex-shrink: 0;
    width: 300px;
    background: rgba(6,16,24,.92);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    padding: 24px;
    transition: transform .3s,border-color .3s,box-shadow .3s;
    position: relative;
}

    .rev-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255,255,255,.4);
        box-shadow: 0 16px 40px rgba(255,255,255,.07);
    }

    .rev-card::before {
        content: '"';
        position: absolute;
        top: 12px;
        left: 16px;
        font-size: 48px;
        color: rgba(255,255,255,.18);
        line-height: 1;
        font-family: serif;
    }

.rev-stars {
    color: var(--cyan);
    font-size: 13px;
    margin-bottom: 10px;
    text-shadow: var(--neon-glow);
}

.rev-text {
    font-size: 13px;
    color: rgba(228,228,232,.65);
    line-height: 1.7;
    margin-bottom: 16px;
}

.rev-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rev-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255,255,255,.35);
}

.rev-name {
    font-size: 13px;
    font-weight: 800;
}

.rev-product {
    font-size: 11px;
    color: var(--ink-60);
}

.reviews-nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 28px;
}

.rev-nav-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.3);
    color: var(--cyan);
    background: rgba(255,255,255,.07);
    transition: all .2s;
    cursor: pointer;
    font-family: inherit;
}

    .rev-nav-btn:hover {
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.55);
    }

/* ===== Promo banner ===== */
.promo-banner {
    background: linear-gradient(120deg,#020c16 0%,#041826 55%,#031020 100%);
    color: #fff;
    padding: 56px 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
    border-top: 1px solid rgba(255,255,255,.25);
    border-bottom: 1px solid rgba(255,255,255,.25);
}

    .promo-banner:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 60px rgba(255,255,255,.12);
    }

    .promo-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 40%, rgba(212,212,217,.22), transparent 55%), radial-gradient(circle at 20% 60%, rgba(255,255,255,.08), transparent 40%);
        z-index: 0;
    }

.promo-text {
    position: relative;
    z-index: 2;
    max-width: 480px;
}

    .promo-text .tag {
        color: var(--cyan);
        text-shadow: var(--cyan-glow);
    }

    .promo-text h2 {
        font-size: clamp(26px,3.8vw,42px);
        font-weight: 900;
        margin-bottom: 14px;
        line-height: 1.15;
    }

    .promo-text p {
        color: rgba(228,228,232,.6);
        font-size: 14px;
        margin-bottom: 26px;
    }

.promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--cyan);
    border: 1.5px solid var(--cyan);
    padding: 13px 28px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    transition: all .25s;
    box-shadow: var(--neon-glow);
}

.promo-banner:hover .promo-cta {
    background: var(--cyan);
    color: #03080e;
    gap: 16px;
}

.promo-img {
    position: relative;
    z-index: 2;
    width: min(34vw,300px);
    flex-shrink: 0;
    transition: transform .5s;
    filter: drop-shadow(0 0 30px rgba(255,255,255,.3));
}

.promo-banner:hover .promo-img {
    transform: scale(1.06) rotate(3deg);
}

@media(max - width:820px) {
    .promo-banner {
        flex-direction: column;
        text-align: center;
        padding: 40px 8%;
    }

    .promo-text {
        max-width: 100%;
    }

    .promo-img {
        width: 55vw;
    }
}

/* ===== Popular scroll row ===== */
.section.popular {
    background: #030c16;
}

.popular-row {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap: 20px;
}

    .popular-row.expanded {
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    }

/* ===== Amazing Deals (شگفت‌انگیز) ===== */
.section.deals {
    background: #060608;
    position: relative;
    overflow: hidden;
}

    .section.deals::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255,255,255,.05) 0%, transparent 65%);
        pointer-events: none;
    }

.deals-row {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap: 20px;
    position: relative;
    z-index: 1;
}

    .deals-row.expanded {
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    }

.card.deal-card {
    border-color: rgba(255,255,255,.16);
}

    .card.deal-card:hover {
        border-color: rgba(255,255,255,.4);
    }

.deal-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: #ffffff;
    color: #05070a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    padding: 5px 11px;
    border-radius: 100px;
    box-shadow: var(--neon-glow);
    display: flex;
    align-items: center;
    gap: 4px;
}

.deal-timer {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 100px;
    backdrop-filter: blur(6px);
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.price-old {
    font-size: 12px;
    color: var(--ink-30);
    text-decoration: line-through;
    font-weight: 600;
}

.deals-head-tag {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== About ===== */
.about {
    background: #04101a;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .about::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 50% 60% at 80% 50%,rgba(255,255,255,.05) 0%,transparent 70%);
    }

    .about .tag {
        color: var(--cyan);
        text-shadow: var(--cyan-glow);
    }

    .about h2 {
        font-size: clamp(28px,3.5vw,46px);
        font-weight: 900;
        margin-bottom: 22px;
        letter-spacing: -0.5px;
    }

    .about p {
        color: rgba(255,255,255,.65);
        font-size: 15px;
        max-width: 500px;
        line-height: 1.75;
    }

.about-quote {
    margin-top: 32px;
    padding: 20px 22px;
    border-right: 3px solid var(--cyan);
    box-shadow: -3px 0 12px rgba(255,255,255,.15);
    background: rgba(255,255,255,.04);
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    color: rgba(255,255,255,.75);
    max-width: 500px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 34px;
}

.about-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .about-feature .icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        flex-shrink: 0;
        background: rgba(255,255,255,.08);
        color: var(--cyan);
        border: 1px solid rgba(255,255,255,.18);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .about-feature .icon svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
        }

    .about-feature b {
        display: block;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 2px;
    }

    .about-feature span {
        font-size: 12px;
        color: rgba(255,255,255,.5);
    }

.about-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.stat b {
    display: block;
    font-size: 38px;
    font-weight: 900;
    color: var(--cyan);
    text-shadow: var(--neon-glow);
}

.stat span {
    font-size: 12px;
    color: rgba(255,255,255,.55);
}

.about-visual {
    aspect-ratio: 1/1;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(255,255,255,.03);
    overflow: hidden;
    box-shadow: 0 0 40px rgba(255,255,255,.04);
}

    .about-visual::before {
        content: '';
        position: absolute;
        width: 120%;
        height: 120%;
        background: radial-gradient(circle at 60% 40%, rgba(255,255,255,.07), transparent 60%);
    }

    .about-visual svg {
        width: 65%;
        height: 65%;
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 0 12px rgba(255,255,255,.25));
    }

.about-badge {
    position: absolute;
    bottom: 5%;
    left: 8%;
    background: var(--teal);
    color: #e8f4f8;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--teal-glow),0 16px 40px rgba(190,190,195,.3);
    border: 4px solid #04101a;
}

    .about-badge b {
        font-size: 22px;
        font-weight: 900;
        line-height: 1;
    }

    .about-badge span {
        font-size: 10px;
        font-weight: 700;
        margin-top: 4px;
        line-height: 1.3;
    }

/* ===== App / Dashboard showcase ===== */
.app-section {
    background: #030c16;
    position: relative;
    overflow: hidden;
}

    .app-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 55% 55% at 20% 40%,rgba(255,255,255,.06) 0%,transparent 65%), radial-gradient(ellipse 45% 50% at 85% 60%,rgba(190,190,195,.07) 0%,transparent 60%);
    }

.app-showcase {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.app-info ul.app-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 34px;
}

.app-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,.75);
}

.app-features .icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255,255,255,.08);
    color: var(--cyan);
    border: 1px solid rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .app-features .icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

.app-features b {
    color: var(--ink);
    font-weight: 800;
}

.app-stores {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.03);
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: 12px;
    padding: 11px 18px;
    transition: transform .2s,border-color .2s,background .2s;
}

    .store-btn:hover {
        transform: translateY(-3px);
        border-color: var(--cyan);
        background: rgba(255,255,255,.07);
    }

    .store-btn svg {
        width: 20px;
        height: 20px;
        stroke: var(--cyan);
        fill: none;
        stroke-width: 1.8;
    }

    .store-btn span {
        display: block;
        font-size: 9px;
        color: var(--ink-60);
    }

    .store-btn b {
        display: block;
        font-size: 13px;
        font-weight: 800;
        color: var(--ink);
    }

/* --- Device frames --- */
.app-devices {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(16px,3vw,36px);
    flex-wrap: wrap;
    padding: 30px 0;
}

.device-frame {
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(160deg,#0c1e2c,#040d14);
    box-shadow: 0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.15),inset 0 0 0 1px rgba(255,255,255,.04);
    container-type: inline-size;
}

.tablet-frame {
    width: clamp(260px,32vw,380px);
    aspect-ratio: 4/3;
    border-radius: 26px;
    padding: 16px 16px 22px;
}

.phone-frame {
    width: clamp(150px,17vw,196px);
    aspect-ratio: 9/19.5;
    border-radius: 32px;
    padding: 9px 8px;
}

    .phone-frame::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        width: 34%;
        height: 16px;
        background: #08080f;
        border-radius: 0 0 12px 12px;
        z-index: 3;
    }

.tablet-frame::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #08080f;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.08);
    z-index: 3;
}

.device-screen {
    width: 100%;
    height: 100%;
    background: #040e18;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 9px; /* fallback for browsers without container queries */
}

.phone-frame .device-screen {
    border-radius: 24px;
    font-size: 4.6cqi;
}

.tablet-frame .device-screen {
    border-radius: 14px;
    font-size: 3.1cqi;
}

.dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6em 1.4em 1em;
    flex-shrink: 0;
}

.dash-greet b {
    display: block;
    font-size: 1.3em;
    color: var(--ink);
}

.dash-greet span {
    font-size: 1em;
    color: var(--ink-60);
}

.dash-avatar {
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg,var(--cyan),var(--purple));
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.6em;
    padding: 0 1.4em;
    flex-shrink: 0;
}

.dash-stat {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 0.9em;
    padding: 0.75em 0.6em;
    text-align: center;
}

    .dash-stat b {
        display: block;
        font-size: 1.25em;
        color: var(--cyan);
        text-shadow: 0 0 6px rgba(255,255,255,.45);
    }

    .dash-stat span {
        display: block;
        font-size: 0.78em;
        color: var(--ink-60);
        margin-top: 0.2em;
        white-space: nowrap;
    }

.dash-chart {
    margin: 1em 1.4em 0;
    background: rgba(255,255,255,.035);
    border-radius: 0.9em;
    padding: 0.9em 0.9em 0.7em;
    display: flex;
    align-items: flex-end;
    gap: 0.45em;
    height: 4.6em;
    flex-shrink: 0;
}

    .dash-chart i {
        flex: 1;
        border-radius: 0.3em 0.3em 0 0;
        background: linear-gradient(180deg,var(--cyan),rgba(255,255,255,.12));
        display: block;
    }

.dash-orders {
    margin: 1em 1.4em 1.3em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.dash-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    background: rgba(255,255,255,.035);
    border-radius: 0.7em;
    padding: 0.6em 0.8em;
    font-size: 0.95em;
    color: var(--ink);
}

    .dash-order-row .d-status {
        padding: 0.25em 0.65em;
        border-radius: 1em;
        font-size: 0.82em;
        font-weight: 700;
        flex-shrink: 0;
    }

.d-status.ok {
    background: rgba(0,245,100,.15);
    color: #00f564;
}

.d-status.wait {
    background: rgba(255,255,255,.15);
    color: var(--neon);
}

.d-status.go {
    background: rgba(255,255,255,.15);
    color: var(--cyan);
}

/* ===== Contact ===== */
.contact {
    background: #040e18;
}

.contact-wrap {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 36px;
    align-items: stretch;
}

.contact-card {
    background: var(--off);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 40px;
}

    .contact-card h3 {
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 24px;
        color: var(--cyan);
    }

.field {
    margin-bottom: 18px;
    position: relative;
}

    .field label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 7px;
        color: var(--ink-60);
    }

    .field input, .field textarea {
        width: 100%;
        padding: 13px 16px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 10px;
        font-family: inherit;
        font-size: 14px;
        background: rgba(255,255,255,.03);
        transition: border-color .25s,background .25s;
        color: var(--ink);
    }

        .field input:focus, .field textarea:focus {
            outline: none;
            border-color: rgba(255,255,255,.45);
            background: rgba(255,255,255,.05);
            box-shadow: 0 0 12px rgba(255,255,255,.08);
        }

.contact-submit {
    width: 100%;
    justify-content: center;
    background: var(--cyan);
    color: #03080e;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: var(--neon-glow);
}

    .contact-submit:hover {
        background: var(--blue-mid);
    }

.contact-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink-60);
}

.contact-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-info-card {
    background: rgba(4,14,24,.96);
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

    .info-item .icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        flex-shrink: 0;
        background: rgba(255,255,255,.08);
        color: var(--cyan);
        border: 1px solid rgba(255,255,255,.18);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .info-item .icon svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
        }

    .info-item b {
        display: block;
        font-size: 11px;
        color: rgba(255,255,255,.5);
        margin-bottom: 4px;
        font-weight: 600;
    }

    .info-item span {
        font-size: 15px;
        font-weight: 700;
    }

.contact-socials {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

    .contact-socials a {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .2s;
    }

        .contact-socials a:hover {
            background: rgba(255,255,255,.15);
            border-color: rgba(255,255,255,.35);
        }

    .contact-socials svg {
        width: 16px;
        height: 16px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
    }

.map-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    position: relative;
    overflow: hidden;
}

    .map-box::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(255,255,255,.03) 24px,rgba(255,255,255,.03) 25px), repeating-linear-gradient(90deg,transparent,transparent 24px,rgba(255,255,255,.03) 24px,rgba(255,255,255,.03) 25px);
    }

.map-pin {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pin-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--cyan-glow);
}

    .pin-dot svg {
        width: 18px;
        height: 18px;
        stroke: #000;
        fill: none;
        stroke-width: 2;
    }

.map-pin span {
    font-size: 13px;
    font-weight: 700;
    color: var(--cyan);
}

/* ===== Modal ===== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,10,.75);
    backdrop-filter: blur(10px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

    .overlay.open {
        opacity: 1;
        pointer-events: all;
    }

.modal {
    background: #040e18;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    transform: scale(.96);
    transition: transform .3s;
    box-shadow: 0 0 60px rgba(255,255,255,.06);
}

.overlay.open .modal {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--ink-60);
    font-size: 14px;
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .2s;
}

    .modal-close:hover {
        background: rgba(255,255,255,.15);
    }

.modal-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.action-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: var(--ink-60);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

    .action-btn:hover {
        background: rgba(255,255,255,.12);
        color: var(--cyan);
        border-color: rgba(255,255,255,.3);
    }

    .action-btn svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

    .action-btn.liked {
        color: var(--purple);
    }

.modal-gallery {
    background: linear-gradient(135deg,rgba(255,255,255,.05),rgba(190,190,195,.04));
    border-radius: 20px 0 0 20px;
    padding: 56px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 1px solid rgba(255,255,255,.1);
}

.gallery-main {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gallery-main svg {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 10px rgba(255,255,255,.18));
    }

.gallery-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.13);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s,box-shadow .2s;
    background: rgba(255,255,255,.03);
}

    .thumb.active, .thumb:hover {
        border-color: rgba(255,255,255,.45);
        box-shadow: 0 0 8px rgba(255,255,255,.15);
    }

    .thumb svg {
        width: 90%;
        height: 90%;
    }

.modal-info {
    padding: 56px 28px 28px 24px;
}

    .modal-info .cat-label {
        font-size: 11px;
        color: var(--ink-60);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
    }

    .modal-info h2 {
        font-size: 22px;
        font-weight: 900;
        margin: 6px 0;
    }

.stars {
    font-size: 14px;
    color: var(--cyan);
    margin-bottom: 10px;
    text-shadow: var(--neon-glow);
}

    .stars span {
        color: var(--ink-60);
        font-size: 12px;
    }

.modal-price {
    font-size: 26px;
    font-weight: 900;
    color: var(--cyan);
    text-shadow: var(--neon-glow);
    margin-bottom: 12px;
}

.modal-desc {
    font-size: 13px;
    color: var(--ink-60);
    line-height: 1.7;
    margin-bottom: 18px;
}

.stock-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,220,120,.08);
    color: #00d978;
    border: 1px solid rgba(0,220,120,.18);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 18px;
}

    .stock-note::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #00d978;
        border-radius: 50%;
        box-shadow: 0 0 6px #00d978;
    }

.option-block {
    margin-bottom: 18px;
}

    .option-block label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-60);
        margin-bottom: 10px;
    }

.size-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.size-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    font-weight: 700;
    font-size: 13px;
    background: rgba(255,255,255,.03);
    color: var(--ink);
    transition: all .2s;
}

    .size-btn.active, .size-btn:hover {
        border-color: rgba(255,255,255,.45);
        background: rgba(255,255,255,.09);
        color: var(--cyan);
    }

.qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    transition: all .2s;
}

    .qty-btn:hover {
        border-color: rgba(255,255,255,.45);
        color: var(--cyan);
    }

.qty-val {
    font-size: 16px;
    font-weight: 800;
    min-width: 20px;
    text-align: center;
}

.modal-info .btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
}

.reviews h4, .related h4 {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.review {
    margin-bottom: 12px;
    font-size: 13px;
    padding: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
}

.review-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-weight: 700;
}

.r-stars {
    color: var(--cyan);
    font-size: 12px;
}

.review p {
    color: var(--ink-60);
    line-height: 1.5;
}

.related-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.related-item {
    flex-shrink: 0;
    width: 100px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, transform .2s;
    background: rgba(255,255,255,.03);
}

    .related-item:hover {
        border-color: rgba(255,255,255,.45);
        transform: translateY(-3px);
    }

    .related-item .related-img {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
    }

        .related-item .related-img svg {
            width: 100%;
            height: 100%;
        }

    .related-item .related-name {
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .related-item .related-price {
        font-size: 11px;
        color: var(--ink-60);
    }

/* ===== Auth modal ===== */
.auth-modal {
    background: #040e18;
    border: 1px solid rgba(255,255,255,.16);
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    position: relative;
    padding: 44px 36px 36px;
    transform: translateY(28px);
    transition: transform .3s;
    box-shadow: 0 0 40px rgba(255,255,255,.06);
}

.overlay.open .auth-modal {
    transform: translateY(0);
}

.auth-modal .modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
}

.auth-head {
    text-align: center;
    margin-bottom: 28px;
}

    .auth-head .logo-wrap {
        justify-content: center;
    }

    .auth-head p {
        color: var(--ink-60);
        font-size: 13px;
        margin-top: 8px;
    }

.auth-view {
    display: none;
}

    .auth-view.active {
        display: block;
    }

    .auth-view .btn {
        width: 100%;
        justify-content: center;
        margin-top: 6px;
    }

.auth-links {
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    margin-top: 12px;
}

    .auth-links a {
        font-weight: 700;
        color: var(--cyan);
    }

.auth-switch {
    text-align: center;
    font-size: 12px;
    color: var(--ink-60);
    margin-top: 20px;
}

    .auth-switch a {
        font-weight: 800;
        color: var(--cyan);
    }

/* ===== Toast ===== */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #0d0d1a;
    color: var(--neon);
    border: 1px solid rgba(255,255,255,.3);
    padding: 12px 26px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 2000;
    box-shadow: var(--neon-glow);
}

    .toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

/* ===== Footer ===== */
.footer-top {
    background: #050510;
    color: #fff;
    padding: 72px 5% 48px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-top: 1px solid rgba(255,255,255,.1);
}

    .footer-top p {
        color: rgba(255,255,255,.5);
        font-size: 13px;
        margin-top: 14px;
        max-width: 260px;
        line-height: 1.7;
    }

.footer-col h5 {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a {
    font-size: 14px;
    color: rgba(255,255,255,.5);
    transition: color .2s;
}

    .footer-col a:hover {
        color: var(--cyan);
    }

.social-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

    .social-btn svg {
        width: 16px;
        height: 16px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
    }

    .social-btn:hover {
        background: rgba(200,200,206,.2);
        border-color: rgba(200,200,206,.4);
    }

.enamad-box {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .enamad-box .enamad-icon {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        background: rgba(255,255,255,.12);
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .enamad-box .enamad-icon svg {
            width: 22px;
            height: 22px;
            stroke: var(--cyan);
        }

    .enamad-box .enamad-text {
        font-size: 11px;
        line-height: 1.5;
        color: rgba(255,255,255,.6);
    }

        .enamad-box .enamad-text b {
            display: block;
            font-size: 12px;
            color: #fff;
        }

.footer-bottom {
    background: #030308;
    color: rgba(255,255,255,.3);
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ===== Scroll reveal ===== */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}

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

.reveal-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}

    .reveal-left.in {
        opacity: 1;
        transform: translateX(0);
    }

.reveal-scale {
    opacity: 0;
    transform: scale(.92);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}

    .reveal-scale.in {
        opacity: 1;
        transform: scale(1);
    }

[data-delay="1"] {
    transition-delay: .1s;
}

[data-delay="2"] {
    transition-delay: .2s;
}

[data-delay="3"] {
    transition-delay: .3s;
}

[data-delay="4"] {
    transition-delay: .4s;
}

/* ===== Cyberpunk extra animations ===== */
@keyframes glitch {
    0% {
        text-shadow: 2px 0 var(--cyan),-2px 0 var(--purple);
    }

    25% {
        text-shadow: -2px 0 var(--cyan),2px 0 var(--purple);
    }

    50% {
        text-shadow: 2px 0 var(--purple),-2px 0 var(--cyan);
    }

    100% {
        text-shadow: none;
    }
}

@keyframes borderPulse {
    0%,100% {
        border-color: rgba(255,255,255,.2);
    }

    50% {
        border-color: rgba(255,255,255,.5);
    }
}

.section-head h2 {
    background: linear-gradient(90deg,var(--ink) 0%,rgba(240,240,255,.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero h1 {
    background: linear-gradient(135deg,#ffffff 0%,rgba(240,240,255,.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .hero h1 em {
        background: linear-gradient(135deg,var(--neon) 0%,#b8b8be 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 10px rgba(255,255,255,.5));
    }

/* section alternating bg */
#categories {
    background: #090914;
}

#popular.popular {
    background: #060611;
}

/* ===== Responsive ===== */
@media(max - width:820px) {
    .trust-topbar {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 26px;
        padding: 8px 5%;
        scrollbar-width: none;
    }

        .trust-topbar::-webkit-scrollbar {
            display: none;
        }

    .trust-item {
        flex-shrink: 0;
    }
}

@media(max - width:900px) {
    .cat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    nav {
        position: fixed;
        top: 88px;
        right: 0;
        left: 0;
        background: rgba(8,8,18,.95);
        flex-direction: column;
        padding: 20px 5%;
        border-bottom: 1px solid rgba(255,255,255,.2);
        display: none;
        box-shadow: 0 8px 40px rgba(0,0,0,.4);
        backdrop-filter: blur(16px);
    }

        nav.open {
            display: flex;
        }

        nav ul {
            flex-direction: column;
            gap: 16px;
        }

    .nav-toggle {
        display: block;
    }

    .hero-visual {
        width: 60vw;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .hero-badges {
        display: none;
    }

    .hero {
        padding-bottom: 50vw;
    }

        .hero::after {
            content: '';
            display: block;
        }

    .about, .contact-wrap, .app-showcase {
        grid-template-columns: 1fr;
    }

    .app-showcase {
        gap: 36px;
    }

    .app-devices {
        order: -1;
    }

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

    .modal-gallery {
        border-radius: 20px 20px 0 0;
    }
}

@media(max - width:520px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    header {
        padding: 12px 4%;
        gap: 8px;
    }

    .logo-icon {
        width: 30px;
        height: 30px;
    }

    .logo-text {
        font-size: 17px;
    }

    .header-right {
        gap: 4px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }

    .search-wrap.open {
        width: 130px;
    }

    .trust-item span {
        font-size: 11px;
    }

        .trust-item span b {
            white-space: nowrap;
        }
}




.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* wrapper عکس داخل کارت‌ها؛ card-img خودش استایل flex/center داره
   ولی برای img واقعی باید ابعاد ثابت بدیم */
.card-img {
    overflow: hidden;
}

    .card-img img {
        display: block;
    }

.cat-img {
    overflow: hidden;
}

    .cat-img img {
        display: block;
    }
/* Drawer overlay */
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,8,.65);
    backdrop-filter: blur(4px);
    z-index: 98;
    opacity: 0;
    transition: opacity .35s ease;
}

    .drawer-overlay.open {
        opacity: 1;
    }

/* Mobile drawer */
@media (max-width: 900px) {
    .drawer-overlay {
        display: block;
        pointer-events: none;
    }

        .drawer-overlay.open {
            pointer-events: all;
        }

    nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 240px;
        background: rgba(8,12,22,.97);
        border-left: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(24px);
        padding: 28px 0 20px;
        transform: translateX(100%);
        transition: transform .38s cubic-bezier(.25,.46,.45,.94);
        display: flex !important;
        flex-direction: column;
        z-index: 99;
        box-shadow: -20px 0 60px rgba(0,0,0,.6);
    }

        nav.open {
            transform: translateX(0);
        }

        nav::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
        }

        nav ul {
            flex-direction: column;
            gap: 0;
            padding: 12px 0;
        }

            nav ul li a {
                display: flex;
                align-items: center;
                padding: 12px 20px;
                font-size: 14px;
                font-weight: 700;
                border-right: 2px solid transparent;
                transition: all .18s;
            }

                nav ul li a:hover {
                    background: rgba(255,255,255,.07);
                    border-right-color: rgba(255,255,255,.6);
                    color: #fff !important;
                }
}