/* =========================================
ROOT
========================================= */

:root {
    --primary: #FF437E;
    --primary-dark: #e93670;

    --background: #08090d;
    --background-2: #0e1016;

    --card: #11131a;
    --card-hover: #171923;

    --text: #ffffff;
    --muted: #92949f;

    --border: rgba(255,255,255,.08);

    --container: 1160px;
}


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

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

@font-face {
    font-family: 'Vazir';
    src: url('/font/Vazir.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}


body {
    direction: rtl;

    background:
        radial-gradient(
            circle at 80% -10%,
            rgba(255,67,126,.15),
            transparent 32%
        ),
        var(--background);

    color: var(--text);

    font-family: 'Vazir', Tahoma, Arial, sans-serif;

    line-height: 1.8;
}


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


button,
input {
    font-family: inherit;
}


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

    margin: 0 auto;
}


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

.header {
    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(8,9,13,.82);

    backdrop-filter:
        blur(18px);

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


.navbar {
    min-height: 76px;

    display: flex;

    align-items: center;

    gap: 35px;
}


.logo {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 20px;

    font-weight: 900;

    white-space: nowrap;
}


.logo-icon {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #ff6896
        );

    box-shadow:
        0 10px 35px
        rgba(255,67,126,.25);
}


.nav {
    display: flex;

    align-items: center;

    gap: 26px;

    flex: 1;
}


.nav a {
    color: #a9abb5;

    font-size: 13px;

    transition: .2s;
}


.nav a:hover {
    color: white;
}


.header-button {
    padding:
        8px 17px;

    background:
        rgba(255,67,126,.1);

    color:
        #ff7fa7;

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

    border-radius: 10px;

    font-size: 12px;
}


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

.hero {
    padding:
        85px 0
        70px;
}


.hero-grid {
    display: grid;

    grid-template-columns:
        1fr
        .85fr;

    align-items: center;

    gap: 70px;
}


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


.version {
    display: inline-flex;

    padding:
        6px 13px;

    margin-bottom: 20px;

    border-radius: 100px;

    color:
        #ff91b0;

    background:
        rgba(255,67,126,.09);

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

    font-size: 11px;
}


.hero h1 {
    font-size:
        clamp(42px, 5vw, 68px);

    line-height: 1.2;

    letter-spacing: -2px;

    margin-bottom: 22px;
}


.hero h1 span {
    color:
        var(--primary);
}


.hero-content > p {
    color:
        var(--muted);

    font-size: 15px;

    max-width: 610px;
}


.hero-buttons {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    flex-wrap: wrap;
}


.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding:
        0 21px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: bold;

    transition: .25s;
}


.btn-primary {
    color: white;

    background:
        var(--primary);

    box-shadow:
        0 12px 30px
        rgba(255,67,126,.2);
}


.btn-primary:hover {
    background:
        var(--primary-dark);

    transform:
        translateY(-2px);
}


.btn-outline {
    color: white;

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

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


.btn-outline:hover {
    border-color:
        rgba(255,67,126,.4);
}


.hero-info {
    display: flex;

    align-items: center;

    gap: 35px;

    margin-top: 38px;

    padding-top: 22px;

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


.hero-info div {
    display: flex;

    flex-direction: column;
}


.hero-info strong {
    color:
        var(--primary);

    font-size: 18px;
}


.hero-info span {
    color:
        var(--muted);

    font-size: 10px;
}


/* =========================================
HERO MOVIE PANEL
========================================= */

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

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* نور صورتی پشت پنل */

.hero-visual::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(255,67,126,.18);

    filter:
        blur(90px);

    opacity: .8;

    z-index: 0;
}


/* پنل اصلی */

.movie-panel {
    position: relative;

    z-index: 2;

    width: 420px;

    height: 390px;

    overflow: hidden;

    border-radius: 28px;

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

    background:
        #101117;

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

    transform:
        rotate(-2deg);
}


/* پس زمینه پنل */

.movie-panel-bg {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(255,67,126,.35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #24121b,
            #0c0d12 65%
        );
}


/* دایره دکوراتیو */

.movie-panel-bg::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    bottom: -130px;

    border-radius: 50%;

    border:
        45px solid
        rgba(255,67,126,.06);
}


/* محتوای پنل */

.movie-panel-content {
    position: relative;

    z-index: 2;

    height: 100%;

    padding:
        25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


/* هدر پنل */

.movie-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.movie-badge {
    padding:
        6px 10px;

    border-radius:
        8px;

    color:
        #ff91b0;

    background:
        rgba(255,67,126,.1);

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

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .5px;
}


.movie-status {
    color:
        #8d909b;

    font-size:
        15px;
}


.movie-status::first-letter {
    color:
        var(--primary);
}


/* مرکز پنل */

.movie-center {
    text-align:
        center;

    margin-top:
        10px;
}


.play-button {
    width:
        66px;

    height:
        66px;

    margin:
        0 auto 18px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--primary);

    box-shadow:
        0 15px 40px
        rgba(255,67,126,.35);
}


.play-button span {
    color:
        white;

    font-size:
        19px;

    margin-right:
        -3px;
}


.movie-center h3 {
    font-size:
        25px;

    line-height:
        1.5;

    margin-bottom:
        5px;
}


.movie-center p {
    color:
        #777a85;

    font-size:
        12px;

    max-width:
        240px;

    margin:
        0 auto;
}


/* اطلاعات پایین پنل */

.movie-bottom {
    display:
        grid;

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

    gap:
        8px;
}


.movie-bottom div {
    padding:
        10px 5px;

    text-align:
        center;

    border-radius:
        11px;

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

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


.movie-bottom strong {
    display:
        block;

    color:
        var(--primary);

    font-size:
        14px;
}


.movie-bottom span {
    display:
        block;

    color:
        #6d707a;

    font-size:
        11px;

    margin-top:
        1px;
}


/* =========================================
PLATFORMS
========================================= */

.platforms {
    padding:
        25px 0
        35px;

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

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


.platform-title {
    text-align: center;

    color:
        var(--muted);

    font-size: 15px;

    margin-bottom: 20px;
}


.platform-list {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 45px;

    flex-wrap: wrap;
}


.platform {
    display: flex;

    align-items: center;

    gap: 8px;

    color:
        #b9bac2;

    font-size: 12px;
}


.platform span {
    color:
        var(--primary);

    font-size: 18px;
}


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

.section {
    padding:
        50px 0;
}


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

    margin:
        0 auto 45px;

    text-align: center;
}


.heading-badge {
    display: inline-block;

    padding:
        5px 12px;

    margin-bottom: 12px;

    border-radius: 100px;

    color:
        #ff8baa;

    background:
        rgba(255,67,126,.08);

    font-size: 20px;
}


.section-heading h2 {
    font-size: 35px;

    margin-bottom: 9px;
}


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


.section-heading p {
    color:
        var(--muted);

    font-size: 12px;
}


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

.features-grid {
    display: grid;

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

    gap: 15px;
}


.feature-card {
    padding:
        25px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.01)
        );

    transition:
        .25s;
}


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

    border-color:
        rgba(255,67,126,.3);

    background:
        var(--card-hover);
}


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

    display: grid;

    place-items: center;

    margin-bottom: 17px;

    border-radius: 14px;

    color:
        var(--primary);

    background:
        rgba(255,67,126,.09);

    font-size: 25px;

    font-weight: bold;
}


.feature-card h3 {
    font-size: 19px;

    margin-bottom: 6px;
}


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

    font-size: 14px;
}


/* =========================================
APPS
========================================= */

.apps {
    background:
        rgba(255,255,255,.012);
}


.apps-grid {
    display: grid;

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

    gap: 15px;
}


.app-card {
    padding:
        24px;

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

    border-radius: 18px;

    background:
        var(--card);

    transition:
        .25s;
}


.app-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255,67,126,.3);
}


.app-top {
    display: flex;

    align-items: center;

    gap: 14px;
}


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

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 15px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #ff709d
        );

    font-size: 15px;

    font-weight: bold;

    box-shadow:
        0 10px 25px
        rgba(255,67,126,.18);
}


.app-icon.ios {
    font-size: 15px;
}


.app-icon.tv {
    background:
        linear-gradient(
            135deg,
            #76324c,
            #ff437e
        );
}


.app-icon.windows {
    background:
        linear-gradient(
            135deg,
            #3a2740,
            #ff437e
        );
}


.app-top h3 {
    font-size: 18px;
}


.app-top span {
    display: block;

    color:
        var(--muted);

    font-size: 12px;
}


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

    font-size: 14px;

    margin:
        18px 0;
}


.download-link {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        10px 12px;

    border-radius: 10px;

    background:
        rgba(255,67,126,.08);

    color:
        #ff82a8;

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

    font-size: 13px;

    transition:
        .2s;
}


.download-link:hover {
    background:
        var(--primary);

    color: white;
}


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

.download {
    padding:
        70px 0;
}


.download-box {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 25px;

    padding:
        35px;

    border-radius: 24px;

    background:
        linear-gradient(
            120deg,
            #ff437e,
            #d92f68
        );

    box-shadow:
        0 25px 70px
        rgba(255,67,126,.15);
}


.download-box::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -80px;
    top: -120px;

    border-radius: 50%;

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


.download-logo {
    position: relative;

    z-index: 2;

    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    border-radius: 21px;

    color:
        var(--primary);

    background:
        white;

    font-size: 22px;
}


.download-content {
    position: relative;

    z-index: 2;

    flex: 1;
}


.download-content > span {
    font-size: 11px;

    opacity: .8;
}


.download-content h2 {
    font-size: 25px;

    line-height: 1.4;
}


.download-content p {
    font-size: 11px;

    opacity: .8;
}


.btn-white {
    position: relative;

    z-index: 2;

    color:
        #222;

    background:
        white;

    white-space: nowrap;
}


.btn-white:hover {
    transform:
        translateY(-2px);
}


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

footer {
    padding:
        55px 0 20px;

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


.footer-grid {
    display: grid;

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

    gap: 35px;
}


.footer-grid > div > p {
    color:
        var(--muted);

    max-width: 300px;

    font-size: 11px;

    margin-top: 12px;
}


.footer-grid h4 {
    font-size: 13px;

    margin-bottom: 12px;
}


.footer-grid a:not(.logo) {
    display: block;

    color:
        var(--muted);

    font-size: 10px;

    margin:
        6px 0;

    transition:
        .2s;
}


.footer-grid a:not(.logo):hover {
    color:
        var(--primary);
}


.copyright {
    border-top:
        1px solid var(--border);

    margin-top:
        40px;

    padding-top:
        18px;

    color:
        #5d5f69;

    text-align: center;

    font-size: 9px;
}


/* =========================================
RESPONSIVE - 950px
========================================= */

@media (max-width: 950px) {

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


    .hero-content {
        max-width:
            100%;

        text-align:
            center;
    }


    .hero-content > p {
        margin:
            auto;
    }


    .hero-buttons {
        justify-content:
            center;
    }


    .hero-info {
        justify-content:
            center;
    }


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


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


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

}


/* =========================================
RESPONSIVE - 700px
========================================= */

@media (max-width: 700px) {

    .navbar {
        min-height:
            68px;

        gap:
            15px;
    }


    .nav {
        display:
            none;
    }


    .header-button {
        margin-right:
            auto;
    }


    .hero {
        padding-top:
            55px;
    }


    .hero h1 {
        font-size:
            42px;
    }


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


    .movie-panel {
        width:
            100%;

        max-width:
            390px;

        height:
            360px;
    }


    .movie-panel-content {
        padding:
            22px;
    }


    .movie-center h3 {
        font-size:
            23px;
    }


    .platform-list {
        gap:
            20px;
    }


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


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


    .download-box {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* =========================================
RESPONSIVE - 480px
========================================= */

@media (max-width: 480px) {

    .container {
        width:
            calc(100% - 22px);
    }


    .logo {
        font-size:
            17px;
    }


    .logo-icon {
        width:
            34px;

        height:
            34px;
    }


    .header-button {
        padding:
            7px 11px;

        font-size:
            10px;
    }


    .hero h1 {
        font-size:
            37px;

        letter-spacing:
            -1px;
    }


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


    .hero-info {
        gap:
            22px;
    }


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


    .movie-panel {
        height:
            330px;

        border-radius:
            23px;

        transform:
            none;
    }


    .movie-panel-content {
        padding:
            19px;
    }


    .play-button {
        width:
            58px;

        height:
            58px;
    }


    .movie-center h3 {
        font-size:
            21px;
    }


    .movie-center p {
        font-size:
            9px;
    }


    .section {
        padding:
            65px 0;
    }


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


    .heading-badge {
        font-size:
            17px;
    }


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

        gap:
            25px 15px;
    }

}