:root {
    --site-bg: #050916;
    --site-bg-deep: #030712;

    --panel: #070c19;
    --panel-dark: #040812;

    --purple: #7135ef;
    --purple-light: #9b4dff;
    --purple-deep: #4618b5;

    --gold: #f1ad26;
    --gold-light: #ffd33d;
    --gold-deep: #d88913;

    --ink: #f5f6fb;
    --muted: #aeb5c7;

    --border: rgba(255, 255, 255, .075);
    --border-light: rgba(255, 255, 255, .11);

    --container: 1200px;
    --header-height: 80px;
}


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

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

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

html,
body {
    width: 100%;
    min-height: 100%;

    background: var(--site-bg);
    color: var(--ink);

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

    direction: rtl;

    overflow-x: hidden;
}

body {
    text-align: right;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

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


/* =========================================================
   PAGE
========================================================= */

.page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    background: var(--site-bg);
}


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

header {
    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    z-index: 1000;

    width: 100%;
    height: var(--header-height);

    display: flex;
    align-items: center;

    padding:
        18px
        48px;

    direction: rtl;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease;
}

header.scrolled {
    background:
        rgba(5, 9, 22, .78);

    backdrop-filter: blur(16px);

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


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

.logo {
    display: flex;
    align-items: center;

    direction: rtl;

    gap: 12px;

    flex-shrink: 0;

    color: inherit;

    text-decoration: none;

    transition:
        opacity .2s ease;
}

.logo:hover {
    opacity: .9;
}

.logo-mark {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;
}

.logo-mark svg {
    width: 38px;
    height: 38px;

    display: block;
}

.logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1.12;

    direction: ltr;

    text-align: left;

    flex-shrink: 0;
}

.logo-text .name {
    font-weight: 800;

    font-size: 19px;

    letter-spacing: .6px;

    white-space: nowrap;
}

.logo-text .tag {
    margin-top: 3px;

    font-size: 9px;

    color: rgba(210, 216, 230, .58);

    font-weight: 400;

    white-space: nowrap;
}


/* =========================================================
   NAV
========================================================= */

nav {
    position: absolute;

    top: 50%;
    left: 50%;

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

    display: flex;
    align-items: center;

    width: max-content;

    gap: 32px;

    direction: rtl;

    flex-shrink: 0;

    white-space: nowrap;
}

nav a {
    position: relative;

    padding-bottom: 7px;

    color: #e1e4ec;

    font-size: 14px;

    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    text-shadow:
        0 1px 8px
        rgba(0, 0, 0, .32);

    transition:
        color .2s ease;
}

nav a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background: var(--gold-light);

    transition:
        width .25s ease;
}

nav a:hover,
nav a.active {
    color: #fff;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}


/* =========================================================
   MOBILE MENU BUTTON
   ---------------------------------------------------------
   در دسکتاپ کاملاً مخفی
========================================================= */

.mobile-menu-toggle {
    display: none;
}


/* =========================================================
   MAIN
========================================================= */

main {
    width: 100%;

    background: var(--site-bg);
}

.section {
    position: relative;

    width: 100%;

    background: var(--site-bg);
}

.section-inner {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}


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

.hero {
    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 760px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 28% 45%,
            rgba(67, 32, 130, .10) 0%,
            transparent 46%
        ),

        var(--site-bg);
}


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

.hero-visual {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    overflow: hidden;

    background: transparent;

    pointer-events: none;
}

.hero-visual img {
    position: absolute;

    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    clip-path: polygon(
        43% 0%,
        100% 0%,
        100% 100%,
        24% 100%
    );

    object-position: 55% 50%;

    transform: none;

    transform-origin: center;

    filter:
        brightness(.78)
        contrast(1.07)
        saturate(.91);

    z-index: 1;
}


/* =========================================================
   SHARDS
========================================================= */

.hero-visual .shards {
    display: none !important;
}


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

.hero-text {
    position: absolute;

    z-index: 50;

    top: 22%;

    left: 4.5%;

    width: min(
        25vw,
        370px
    );

    direction: rtl;

    text-align: right;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    padding: 0;

    pointer-events: auto;
}

.hero-text .eyebrow {
    width: 100%;

    margin-bottom: 14px;

    color: #a96aff;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.8;
}

.hero-text h1 {
    width: 100%;

    margin:
        0 0 17px;

    color: #f5f6fb;

    font-size:
        clamp(
            30px,
            3.15vw,
            44px
        );

    font-weight: 800;

    line-height: 1.42;

    letter-spacing: -.5px;
}

.hero-text h1 .accent {
    color: #ffc82e;
}

.hero-text .hero-desc {
    width: 100%;

    max-width: 380px;

    margin:
        0 0 27px;

    color: #b4bac9;

    font-size: 14px;

    line-height: 2;
}

.hero-text .hero-cta {
    display: inline-flex;

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

    gap: 10px;

    min-width: 117px;

    padding:
        11px
        22px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7237ed 0%,
            #8541ee 45%,
            #f4b72b 100%
        );

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    box-shadow:
        0 10px 25px
        rgba(104, 50, 220, .30);

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

.hero-text .hero-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(104, 50, 220, .43);
}

.hero-text .hero-cta svg {
    width: 17px;
    height: 17px;

    transform: scaleX(-1);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading {
    max-width: 720px;

    margin-inline: auto;

    text-align: center;
}

.section-kicker {
    margin-bottom: 13px;

    color: var(--purple-light);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .2px;
}

.section-heading h2 {
    margin-bottom: 18px;

    color: #f7f8fc;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    font-weight: 800;

    line-height: 1.35;
}

.section-heading h2 span {
    color: var(--gold-light);
}

.section-heading p {
    max-width: 650px;

    margin-inline: auto;

    color: var(--muted);

    font-size: 15px;

    line-height: 2;
}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {
    padding:
        120px
        0
        130px;

    background:
        radial-gradient(
            ellipse at 75% 45%,
            rgba(113, 53, 239, .035) 0%,
            transparent 50%
        ),

        var(--site-bg);
}

.products-section .section-heading {
    margin-bottom: 55px;
}


/* ---------------------------------------------------------
   PRODUCT SLIDER
--------------------------------------------------------- */

.product-slider {
    position: relative;

    width: 100%;
}

.product-stage {
    position: relative;

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(19, 24, 46, .72),
            rgba(7, 11, 24, .80)
        );

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

.product-track {
    position: relative;

    width: 100%;

    min-height: 520px;

    overflow: hidden;
}


/* =========================================================
   PRODUCT SLIDES
   ---------------------------------------------------------
   انیمیشن نرم بین اسلایدها
========================================================= */

.product-slide {
    position: absolute;

    top: 0;
    right: 0;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .85fr);

    min-height: 520px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(32px);

    transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        transform .75s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .75s;
}

.product-slide.active {
    position: relative;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0);

    transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        transform .75s cubic-bezier(.22, 1, .36, 1),
        visibility 0s;
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
--------------------------------------------------------- */

.product-image {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    background: #090e1f;
}

.product-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 50%,
            rgba(4, 8, 18, .42) 100%
        );

    pointer-events: none;
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform 1.15s cubic-bezier(.22, 1, .36, 1);
}

.product-slide.active .product-image img {
    transform: scale(1.012);
}


/* ---------------------------------------------------------
   PRODUCT CONTENT
--------------------------------------------------------- */

.product-content {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        55px 54px;
}

.product-number {
    margin-bottom: 18px;

    color: var(--purple-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    direction: ltr;
}

.product-content h3 {
    margin-bottom: 17px;

    color: #fff;

    font-size:
        clamp(
            26px,
            3vw,
            38px
        );

    font-weight: 800;

    line-height: 1.4;
}

.product-content p {
    max-width: 440px;

    margin-bottom: 28px;

    color: var(--muted);

    font-size: 14px;

    line-height: 2;
}

.product-link {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 10px;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    transition:
        color .2s ease;
}

.product-link span {
    color: var(--gold-light);

    font-size: 18px;

    transition:
        transform .2s ease;
}

.product-link:hover {
    color: var(--gold-light);
}

.product-link:hover span {
    transform: translateX(-4px);
}


/* ---------------------------------------------------------
   SLIDER CONTROLS
--------------------------------------------------------- */

.slider-controls {
    display: flex;

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

    gap: 18px;

    margin-top: 25px;
}

.slider-button {
    width: 46px;
    height: 46px;

    border:
        1px solid
        var(--border-light);

    border-radius: 50%;

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

    color: #fff;

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

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .3s cubic-bezier(.22, 1, .36, 1);
}

.slider-button:hover {
    background:
        rgba(113, 53, 239, .18);

    border-color:
        rgba(155, 77, 255, .45);

    transform: translateY(-2px);
}

.slider-button svg {
    width: 19px;
    height: 19px;
}

.slider-dots {
    display: flex;

    align-items: center;

    gap: 7px;
}

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

    border: none;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}

.slider-dot.active {
    width: 24px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--purple-light),
            var(--gold-light)
        );
}


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

.features-section {
    padding:
        125px
        0
        135px;

    background:
        radial-gradient(
            ellipse at 20% 50%,
            rgba(113, 53, 239, .025) 0%,
            transparent 52%
        ),

        var(--site-bg);
}

.features-section .section-heading {
    margin-bottom: 55px;
}

.features-grid {
    display: grid;

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

    gap: 18px;
}

.feature-card {
    position: relative;

    padding: 34px 28px;

    min-height: 260px;

    border: 1px solid var(--border);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 20, 39, .62),
            rgba(7, 11, 24, .70)
        );

    overflow: hidden;

    transform:
        translateY(0);

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}

.feature-card::before {
    content: "";

    position: absolute;

    top: -90px;
    left: -70px;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 53, 239, .18),
            transparent 70%
        );
}

.feature-card:hover,
.feature-card.reveal.is-visible:hover {
    transform:
        translateY(-8px);

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

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

    border-color:
        rgba(155, 77, 255, .28);
}


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

    margin-bottom: 25px;

    border-radius: 16px;

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

    background:
        linear-gradient(
            135deg,
            rgba(113, 53, 239, .18),
            rgba(241, 173, 38, .08)
        );

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

.feature-icon svg {
    width: 25px;
    height: 25px;
}

.feature-card h3 {
    margin-bottom: 13px;

    color: #fff;

    font-size: 19px;

    font-weight: 700;
}

.feature-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 2;
}


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

.about-section {
    padding:
        125px
        0;

    background:
        radial-gradient(
            ellipse at 75% 45%,
            rgba(241, 173, 38, .018) 0%,
            transparent 48%
        ),

        var(--site-bg);
}

.about-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(360px, .85fr);

    gap: 80px;

    align-items: center;
}

.about-copy {
    max-width: 600px;
}

.about-copy .section-kicker {
    margin-bottom: 14px;
}

.about-copy h2 {
    margin-bottom: 24px;

    color: #fff;

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

    line-height: 1.35;
}

.about-copy h2 span {
    color: var(--gold-light);
}

.about-copy p {
    margin-bottom: 18px;

    color: var(--muted);

    font-size: 15px;

    line-height: 2.2;
}

.about-panel {
    position: relative;

    min-height: 420px;

    border:
        1px solid
        var(--border);

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(155, 77, 255, .18),
            transparent 35%
        ),

        radial-gradient(
            circle at 75% 70%,
            rgba(241, 173, 38, .10),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(10, 16, 35, .68) 0%,
            rgba(4, 8, 19, .72) 100%
        );

    overflow: hidden;

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

.about-panel::before {
    content: "";

    position: absolute;

    inset: 30px;

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

    border-radius: 24px;
}

.about-glow {
    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 53, 239, .24),
            transparent 70%
        );

    filter: blur(4px);
}

.about-panel-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    align-items: center;

    direction: ltr;

    text-align: center;
}

.about-panel-content span {
    margin-bottom: 2px;

    color: rgba(255, 255, 255, .58);

    font-size: 13px;

    letter-spacing: 6px;
}

.about-panel-content strong {
    color: #fff;

    font-size:
        clamp(
            44px,
            6vw,
            78px
        );

    line-height: 1;

    letter-spacing: 2px;

    text-shadow:
        0 0 35px
        rgba(155, 77, 255, .24);
}

.about-panel-content small {
    margin-top: 17px;

    color: var(--gold-light);

    font-size: 11px;

    letter-spacing: 3px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    padding:
        120px
        0
        130px;

    background:
        radial-gradient(
            ellipse at 50% 40%,
            rgba(113, 53, 239, .045) 0%,
            transparent 50%
        ),

        var(--site-bg);
}

.contact-box {
    position: relative;

    padding:
        80px
        40px;

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

    border-radius: 34px;

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(8, 13, 28, .72),
            rgba(5, 9, 20, .78)
        );
}

.contact-box::before {
    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 53, 239, .16),
            transparent 70%
        );
}

.contact-box > * {
    position: relative;

    z-index: 2;
}

.contact-box .section-kicker {
    margin-bottom: 15px;
}

.contact-box h2 {
    max-width: 800px;

    margin:
        0
        auto
        20px;

    color: #fff;

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height: 1.4;
}

.contact-box h2 span {
    color: var(--gold-light);
}

.contact-box p {
    max-width: 650px;

    margin:
        0
        auto
        30px;

    color: var(--muted);

    font-size: 14px;

    line-height: 2;
}

.contact-button {
    display: inline-flex;

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

    gap: 10px;

    padding:
        13px
        25px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7237ed,
            #8541ee 48%,
            #f4b72b
        );

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 14px 35px
        rgba(104, 50, 220, .28);

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

.contact-actions {
    display: flex;

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

    gap: 12px;

    flex-wrap: wrap;
}

.contact-actions .contact-button {
    min-width: 150px;
}

.contact-call {
    background:
        linear-gradient(
            90deg,
            #7237ed,
            #8541ee 48%,
            #f4b72b
        );
}

.contact-email {
    background:
        rgba(255, 255, 255, .045);

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

    box-shadow:
        none;
}

.contact-email:hover {
    background:
        rgba(113, 53, 239, .12);

    border-color:
        rgba(155, 77, 255, .35);

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

.contact-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 40px
        rgba(104, 50, 220, .4);
}

.contact-button svg {
    width: 17px;
    height: 17px;

    transform: scaleX(-1);
}


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

.site-footer {
    padding:
        25px
        0;

    background:
        var(--site-bg);

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

.footer-inner {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;

    display: flex;

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

    gap: 20px;

    color:
        rgba(210, 216, 230, .52);

    font-size: 12px;
}

.footer-inner a {
    transition:
        color .2s ease;
}

.footer-inner a:hover {
    color: #fff;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(45px)
        scale(.985);

    transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-visible {
    opacity: 1;

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

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

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

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

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


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    header {
        padding-left: 58px;
        padding-right: 58px;
    }

    .hero {
        min-height: 820px;
    }

    .hero-visual img {
        clip-path: polygon(
            41.5% 0%,
            100% 0%,
            100% 100%,
            22% 100%
        );
    }

    .hero-text {
        top: 22.5%;

        left: 5.2%;

        width:
            min(
                26vw,
                390px
            );
    }

    nav {
        gap: 35px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1201px) and (max-width: 1499px) {

    .hero {
        min-height: 760px;
    }

    .hero-visual img {
        clip-path: polygon(
            43% 0%,
            100% 0%,
            100% 100%,
            24% 100%
        );
    }

    .hero-text {
        top: 23%;

        left: 4.5%;

        width:
            min(
                27vw,
                370px
            );
    }

    nav {
        gap: 30px;
    }
}


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

@media (max-width: 1200px) and (min-width: 981px) {

    header {
        height: 76px;

        padding:
            17px
            30px;
    }

    .logo {
        gap: 10px;
    }

    .logo-mark {
        width: 39px;
        height: 39px;
    }

    .logo-mark svg {
        width: 35px;
        height: 35px;
    }

    .logo-text .name {
        font-size: 18px;
    }

    .logo-text .tag {
        font-size: 8px;
    }

    nav {
        gap: 23px;
    }

    nav a {
        font-size: 13px;
    }

    .hero {
        min-height: 720px;
    }

    .hero-visual img {
        clip-path: polygon(
            48% 0%,
            100% 0%,
            100% 100%,
            29% 100%
        );
    }

    .hero-text {
        top: 22%;

        left: 4%;

        width:
            min(
                28vw,
                315px
            );
    }

    .hero-text h1 {
        font-size: 33px;
    }

    .hero-text .hero-desc {
        max-width: 305px;

        font-size: 13px;
    }

    .product-slide {
        grid-template-columns:
            1.05fr
            .95fr;
    }

    .product-content {
        padding:
            45px 38px;
    }

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

    .about-layout {
        gap: 45px;
    }
}


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

@media (max-width: 980px) {

    html {
        scroll-padding-top: 72px;
    }

    header {
        height: 70px;

        padding:
            14px
            20px;
    }

    header.scrolled {
        background:
            rgba(5, 9, 22, .88);
    }

    nav {
        display: none;
    }


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

    .hero {
        display: flex;
        flex-direction: column;

        height: auto;

        min-height: 0;

        overflow: visible;
    }

    .hero-visual {
        position: relative;

        inset: auto;

        order: 1;

        width: 100%;

        height: 55vh;

        min-height: 330px;

        overflow: hidden;
    }

    .hero-visual img {
        position: absolute;

        top: 0;
        right: 0;

        width: 100%;
        height: 100%;

        clip-path: none;

        object-fit: cover;

        object-position: 58% center;

        transform: none;
    }

    .hero-text {
        position: relative;

        top: auto;
        left: auto;

        order: 2;

        width: 100%;

        max-width: none;

        min-width: 0;

        padding:
            50px
            24px
            70px;

        background:
            linear-gradient(
                145deg,
                rgba(3, 7, 17, .95),
                rgba(8, 15, 33, .95)
            );

        align-items: flex-start;

        text-align: right;
    }

    .hero-text h1 {
        font-size:
            clamp(
                30px,
                7vw,
                42px
            );
    }

    .hero-text .hero-desc {
        max-width: 100%;
    }


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

    .mobile-menu-toggle {
        position: absolute;

        top: 50%;
        left: 20px;

        transform:
            translateY(-50%);

        width: 44px;
        height: 44px;

        padding: 0;

        border: 0;

        background: transparent;

        color: #fff;

        display: flex;
        flex-direction: column;

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

        gap: 5px;

        cursor: pointer;

        z-index: 1200;
    }

    .mobile-menu-toggle span {
        width: 21px;
        height: 2px;

        border-radius: 999px;

        background: #fff;

        transition:
            transform .45s cubic-bezier(.22, 1, .36, 1),
            opacity .25s ease;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* -----------------------------------------------------
       MOBILE NAV
       -----------------------------------------------------
       لایه‌ی کامل از بالا
    ----------------------------------------------------- */

    header nav {
        position: fixed;

        top: 0;
        right: 0;
        left: 0;

        width: 100%;

        height: auto;

        min-height: 0;

        padding:
            90px
            24px
            30px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 4px;

        direction: rtl;

        background:
            rgba(5, 9, 22, .98);

        backdrop-filter: blur(18px);

        box-shadow:
            0 20px 45px
            rgba(0, 0, 0, .22);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-18px);

        transition:
            opacity .4s ease,
            transform .45s cubic-bezier(.22, 1, .36, 1),
            visibility .4s ease;

        z-index: 1100;
    }

    header.mobile-menu-open nav {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }

    header nav a {
        width: 100%;

        padding:
            16px
            8px;

        border-radius: 0;

        color: #e1e4ec;

        font-size: 15px;

        text-align: right;

        text-shadow: none;

        background: transparent;

        transition:
            color .25s ease,
            padding-right .3s ease;
    }

    header nav a::after {
        display: none;
    }

    header nav a:hover,
    header nav a.active {
        color: #fff;

        background: transparent;

        padding-right: 15px;
    }

    header .logo {
        position: relative;

        z-index: 1200;
    }


    /* -----------------------------------------------------
       GENERAL
    ----------------------------------------------------- */

    .section-inner {
        width: min(
            calc(100% - 36px),
            var(--container)
        );
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-section {
        padding:
            90px
            0
            100px;
    }

    .products-section .section-heading {
        margin-bottom: 38px;
    }

    .product-track {
        min-height: 0;
    }

    .product-slide {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .product-image {
        min-height: 330px;

        height: 42vh;
    }

    .product-content {
        padding:
            35px
            28px
            40px;
    }

    .product-content h3 {
        font-size: 28px;
    }


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

    .features-section {
        padding:
            90px
            0
            100px;
    }

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

        gap: 14px;
    }

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

        padding:
            28px
            22px;
    }


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

    .about-section {
        padding:
            90px
            0;
    }

    .about-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-copy {
        max-width: none;
    }

    .about-panel {
        min-height: 330px;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-section {
        padding:
            90px
            0
            100px;
    }

    .contact-box {
        padding:
            60px
            24px;
    }


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

    .footer-inner {
        width: min(
            calc(100% - 36px),
            var(--container)
        );
    }
}


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

@media (max-width: 560px) {

    header {
        height: 66px;

        padding:
            13px
            17px;
    }

    .logo {
        gap: 9px;
    }

    .logo-mark {
        width: 37px;
        height: 37px;
    }

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

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

    .logo-text .tag {
        font-size: 8px;
    }

    .mobile-menu-toggle {
        left: 17px;

        width: 42px;
        height: 42px;
    }

    header nav {
        padding:
            84px
            19px
            28px;
    }


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

    .hero-visual {
        height: 47vh;

        min-height: 285px;
    }

    .hero-text {
        padding:
            38px
            19px
            55px;
    }

    .hero-text .eyebrow {
        font-size: 12px;
    }

    .hero-text h1 {
        font-size: 29px;
    }

    .hero-text .hero-desc {
        font-size: 13px;

        line-height: 1.9;
    }


    /* -----------------------------------------------------
       SECTION WIDTH
    ----------------------------------------------------- */

    .section-inner {
        width:
            min(
                calc(100% - 30px),
                var(--container)
            );
    }


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

    .section-heading h2 {
        font-size: 31px;
    }

    .section-heading p {
        font-size: 13px;
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-section,
    .features-section,
    .about-section,
    .contact-section {
        padding-top: 78px;
        padding-bottom: 88px;
    }

    .product-stage {
        border-radius: 24px;
    }

    .product-image {
        height: 285px;

        min-height: 285px;
    }

    .product-content {
        padding:
            30px
            22px
            35px;
    }

    .product-content h3 {
        font-size: 25px;
    }

    .product-content p {
        font-size: 13px;
    }


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

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

    .feature-card {
        min-height: 0;

        padding:
            26px
            22px;
    }


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

    .about-copy h2 {
        font-size: 32px;
    }

    .about-copy p {
        font-size: 13px;

        line-height: 2;
    }

    .about-panel {
        min-height: 280px;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-box {
        padding:
            48px
            19px;
    }

    .contact-box h2 {
        font-size: 29px;
    }

    .contact-box p {
        font-size: 13px;
    }

        .contact-actions {
        width: 100%;

        flex-direction: column;

        gap: 10px;
    }

    .contact-actions .contact-button {
        width: 100%;
        min-width: 0;
    }


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

    .footer-inner {
        flex-direction: column;

        justify-content: center;

        text-align: center;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .mobile-menu-toggle {
        left: 14px;

        width: 40px;
        height: 40px;
    }

    header nav {
        padding:
            80px
            17px
            25px;
    }

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

    .hero-text {
        padding:
            32px
            17px
            48px;
    }

    .hero-text h1 {
        font-size: 27px;
    }

    .hero-text .eyebrow {
        font-size: 12px;
    }

    .hero-text .hero-desc {
        font-size: 12px;
    }

    .product-content {
        padding:
            28px
            19px
            32px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

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