:root {
    --p: #ece6d6;
    --k: #1b1464;
    --r: #d2ac67;
    --g: #d2ac67;
    --m: #5b5584;
    interpolate-size: allow-keywords
}

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

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

body {
    font-family: Vazirmatn,Tahoma,sans-serif;
    background: var(--p);
    color: var(--k);
    line-height: 2;
    font-weight: 500;
    overflow-x: hidden
}

::selection {
    background: var(--r);
    color: var(--k)
}

:focus-visible {
    outline: 3px solid var(--r);
    outline-offset: 3px
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 98;
    opacity: .14;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.bar {
    position: fixed;
    top: 0;
    right: 0;
    height: 5px;
    width: calc(var(--sp,0)*100%);
    background: var(--r);
    z-index: 97
}

.cur {
    position: fixed;
    left: -50px;
    top: -50px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 99;
    translate: -50% -50%;
    transition: width .3s,height .3s
}

    .cur.big {
        width: 76px;
        height: 76px
    }

@media(pointer:fine) {
    body, a, button, summary {
        cursor: none
    }
}

@media(pointer:coarse) {
    .cur {
        display: none
    }
}

.hero, .hero h1, .head h2, .sec em, .sec summary span, .stat strong, .reg h2, .cap b, .jd b, .steps strong, .stk, .mq span, footer {
    font-family: Lalezar,Vazirmatn,sans-serif;
    font-weight: 400
}

.hero {
    min-height: 100svh;
    padding: 12vh 5vw 120px;
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    justify-items: start
}

.k {
    font-family: Vazirmatn;
    font-weight: 700;
    font-size: .9rem;
    border: 2px solid var(--k);
    border-radius: 99px;
    padding: 0 16px;
    margin-bottom: 10px
}

.hero h1 {
    line-height: 1;
    width: 100%
}

    .hero h1 span {
        display: block;
        overflow: hidden;
        padding-block: .06em
    }

    .hero h1 b {
        display: block;
        font-weight: 400;
        animation: up 1.1s cubic-bezier(.2,.8,.2,1)
    }

    .hero h1 span:nth-child(1) {
        font-size: clamp(2rem,6.5vw,4.6rem);
        color: transparent;
        -webkit-text-stroke: 2px var(--k)
    }

    .hero h1 span:nth-child(2) {
        font-size: clamp(8rem,31vw,25rem);
        line-height: 1.1;
        color: var(--k);
        text-shadow: .035em .035em 0 var(--r);
        translate: calc(var(--sy,0)*.25px) 0
    }

    .hero h1 span:nth-child(3) {
        font-size: clamp(2rem,6.5vw,4.6rem)
    }

    .hero h1 span:nth-child(2) b {
        animation-duration: 1.3s
    }

    .hero h1 span:nth-child(3) b {
        animation-duration: 1.5s
    }

@keyframes up {
    from {
        translate: 0 110%
    }
}

@keyframes fade {
    from {
        opacity: 0
    }
}

.hero .d {
    max-width: 28em;
    margin-top: 16px;
    font-size: 1.15rem;
    animation: fade 1.2s
}

.acts {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 28px;
    animation: fade 1.2s;
    flex-wrap: wrap
}

.btn {
    display: inline-block;
    background: var(--k);
    color: var(--p);
    border: 2px solid var(--k);
    font: 700 1rem Vazirmatn,sans-serif;
    text-decoration: none;
    padding: 12px 32px;
    transition: .25s;
    cursor: pointer
}

    .btn:hover {
        background: var(--r);
        border-color: var(--k);
        color: var(--k);
        box-shadow: 6px 6px 0 var(--k);
        translate: -6px -6px
    }

.ln {
    color: var(--k);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px
}

    .ln:hover {
        background: var(--r)
    }

.stk {
    position: absolute;
    left: 6vw;
    top: 16vh;
    width: clamp(92px,13vw,150px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--k);
    color: var(--p);
    display: grid;
    place-items: center;
    text-align: center;
    text-decoration: none;
    font-size: clamp(1.2rem,2.2vw,1.7rem);
    line-height: 1.3;
    animation: sw 3.5s ease-in-out infinite alternate;
    transition: background .3s
}

    .stk:hover {
        background: var(--r);
        color: var(--k)
    }

@keyframes sw {
    from {
        rotate: -14deg
    }

    to {
        rotate: 14deg
    }
}

.mq {
    position: absolute;
    inset: auto 0 0;
    direction: ltr;
    overflow: hidden;
    background: var(--k);
    color: var(--p);
    padding: 6px 0
}

    .mq div {
        display: flex;
        width: max-content;
        animation: mq 26s linear infinite
    }

    .mq span {
        font-size: clamp(1.4rem,3vw,2.2rem);
        padding: 0 26px;
        white-space: nowrap
    }

        .mq span::after {
            content: "✺";
            color: var(--r);
            margin-right: -26px;
            padding-left: 52px
        }

@keyframes mq {
    to {
        translate: -50%
    }
}

main {
    max-width: 1200px;
    margin: auto;
    padding: 0 5vw 80px
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    border-block: 2px solid var(--k);
    margin-top: 70px
}

.stat {
    padding: 22px 20px;
    border-left: 2px solid var(--k)
}

    .stat:last-child {
        border-left: 0
    }

    .stat strong {
        display: block;
        font-size: clamp(3.2rem,9vw,6.5rem);
        line-height: 1.2
    }

    .stat span {
        font-weight: 700
    }

.head {
    margin-top: 110px
}

    .head h2 {
        font-size: clamp(2.6rem,8vw,6rem);
        line-height: 1.2
    }

        .head h2::after {
            content: "";
            display: inline-block;
            width: .2em;
            height: .2em;
            border-radius: 50%;
            background: var(--r);
            margin-right: .1em
        }

    .head p {
        font-weight: 500;
        margin-bottom: 26px;
        color: var(--m)
    }

.grid {
    margin-top: 60px
}

.sec {
    border-bottom: 2px solid var(--k)
}

    .sec:first-of-type {
        border-top: 2px solid var(--k)
    }

    .sec summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: clamp(12px,3vw,24px);
        padding: clamp(12px,2.2vw,24px) 14px;
        transition: background .25s,color .25s
    }

        .sec summary::-webkit-details-marker {
            display: none
        }

    .sec em {
        font-style: normal;
        font-size: clamp(1.6rem,4.5vw,3.2rem);
        color: inherit;
        min-width: 1.1em;
        transition: .25s
    }

    .sec summary span {
        flex: 1;
        min-width: 0;
        font-size: clamp(1.4rem,4.4vw,3.4rem);
        line-height: 1.4;
        transition: translate .35s
    }

    .sec summary u {
        flex: none;
        position: relative;
        width: 34px;
        height: 34px;
        transition: rotate .4s
    }

        .sec summary u::before, .sec summary u::after {
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 100%;
            height: 3px;
            background: currentColor
        }

        .sec summary u::after {
            rotate: 90deg
        }

    .sec summary:hover {
        background: var(--k);
        color: var(--p)
    }

        .sec summary:hover span {
            translate: -16px 0
        }

    .sec[open] summary {
        background: var(--r);
        color: var(--k)
    }

    .sec[open] em {
        color: var(--k)
    }

    .sec[open] summary u {
        rotate: 45deg
    }

    .sec::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .5s cubic-bezier(.2,.8,.2,1),content-visibility .5s allow-discrete
    }

    .sec[open]::details-content {
        block-size: auto
    }

.bd {
    padding: 24px 14px 36px;
    max-width: 52em;
    font-size: clamp(.98rem,2.2vw,1.1rem)
}

    .bd h4 {
        display: inline-block;
        background: var(--k);
        color: var(--p);
        padding: 0 14px;
        margin: 18px 0 4px;
        font-weight: 700
    }

    .bd ol {
        padding-right: 1.4em
    }

    .bd li {
        margin: 8px 0
    }

        .bd li::marker {
            color: var(--k);
            font-weight: 900
        }

b {
    font-weight: 900
}

.blk {
    margin-bottom: 22px
}

    .blk h3, .sub h4 {
        font-size: 1.05rem;
        font-weight: 900;
        margin-bottom: 2px
    }

.sub > div {
    margin-bottom: 14px
}

.bd ul {
    list-style: none
}

    .bd ul li {
        display: inline;
        margin: 0
    }

        .bd ul li:not(:last-child)::after {
            content: " / ";
            color: inherit;
            font-weight: 900
        }

.vp {
    overflow: hidden
}

.trk {
    display: flex;
    gap: 18px;
    transition: translate .8s cubic-bezier(.2,.8,.2,1)
}

.sld {
    flex: 0 0 calc((100% - 36px)/3);
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--k)
}

    .sld i {
        position: absolute;
        inset: 0;
        background: var(--c,#ff4a1c) !important;
        transition: scale .7s
    }

    .sld:hover i {
        scale: 1.08
    }

    .sld:nth-child(4n+1) {
        --c: #ff4a1c
    }

    .sld:nth-child(4n+2) {
        --c: #1b1464
    }

    .sld:nth-child(4n+3) {
        --c: #e8b931
    }

    .sld:nth-child(4n+4) {
        --c: #2f6b5b
    }

    .sld em {
        position: absolute;
        top: 2%;
        right: 8%;
        font-family: Lalezar;
        font-style: normal;
        font-size: min(14rem,60%);
        line-height: 1.1;
        color: var(--p)
    }

.cap {
    position: absolute;
    inset: auto 0 0;
    padding: 12px 16px;
    background: var(--p);
    border-top: 2px solid var(--k)
}

    .cap small {
        font-weight: 700;
        color: var(--r)
    }

    .cap b {
        display: block;
        font-size: 1.4rem;
        line-height: 1.5
    }

    .cap span {
        color: var(--m);
        font-size: .88rem
    }

.ctl {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px
}

.cb {
    width: 50px;
    height: 50px;
    border: 2px solid var(--k);
    background: var(--p);
    color: var(--k);
    font-size: 1.2rem;
    transition: .25s;
    cursor: pointer
}

    .cb:hover {
        background: var(--r);
        box-shadow: 4px 4px 0 var(--k);
        translate: -4px -4px
    }

.dots {
    display: flex;
    gap: 6px;
    margin-right: auto
}

    .dots u {
        width: 18px;
        height: 6px;
        background: rgba(27,20,100,.2);
        transition: .4s
    }

        .dots u.on {
            width: 46px;
            background: var(--k)
        }

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

.jd {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 2px solid var(--k);
    background: var(--k)
}

    .jd:nth-child(even) {
        background: #2f6b5b
    }

    .jd svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transition: scale .7s
    }

    .jd:hover svg, .jd:focus svg {
        scale: 1.1
    }

    .jd div {
        position: absolute;
        inset: auto 0 0;
        padding: 18px;
        background: var(--r);
        border-top: 2px solid var(--k);
        translate: 0 101%;
        transition: translate .45s cubic-bezier(.2,.8,.2,1)
    }

    .jd:hover div, .jd:focus div {
        translate: 0 0
    }

    .jd b {
        display: block;
        font-size: 1.4rem;
        line-height: 1.5
    }

    .jd span {
        font-weight: 700
    }

.reg {
    margin-top: 110px;
    background: var(--k);
    color: var(--p);
    padding: clamp(28px,6vw,90px);
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(32px,5vw,64px)
}

    .reg h2 {
        font-size: clamp(2.6rem,7vw,5.5rem);
        line-height: 1.2;
        color: var(--r)
    }

    .reg ol {
        padding-right: 1.4em;
        margin-top: 14px
    }

    .reg li::marker {
        color: var(--r)
    }

form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    min-width: 0
}

label {
    display: grid;
    gap: 2px;
    font-size: .85rem;
    color: #b9b3a2;
    min-width: 0
}

    label.f {
        grid-column: 1/-1
    }

input, select, textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--p);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--p);
    padding: 8px 0;
    width: 100%;
    min-width: 0;
    border-radius: 0
}

    select option {
        color: #1b1464
    }

    input:focus, select:focus, textarea:focus {
        outline: 0;
        border-color: var(--r)
    }

form .btn {
    grid-column: 1/-1;
    justify-self: start;
    background: var(--r);
    color: var(--k);
    border-color: var(--r)
}

    form .btn:hover {
        background: var(--p);
        box-shadow: 6px 6px 0 var(--r)
    }

.note {
    grid-column: 1/-1;
    font-size: .8rem;
    color: #b9b3a2
}

code {
    color: var(--r)
}

.tl {
    margin-top: 110px
}

.steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 44px 0;
    margin-top: 44px
}

    .steps li {
        position: relative;
        border-top: 2px solid var(--k);
        padding: 26px 0 0 16px;
        opacity: .3;
        transition: opacity .6s;
        transition-delay: var(--d,0s)
    }

        .steps li::before {
            content: "";
            position: absolute;
            right: 0;
            top: -11px;
            width: 20px;
            height: 20px;
            background: var(--p);
            border: 2px solid var(--k);
            transition: .5s;
            transition-delay: var(--d,0s)
        }

    .steps.go li {
        opacity: 1
    }

        .steps.go li::before {
            background: var(--r);
            rotate: 45deg
        }

    .steps time {
        display: block;
        font-weight: 900;
        font-size: .9rem
    }

    .steps strong {
        display: block;
        font-size: 1.5rem;
        line-height: 1.5
    }

    .steps span {
        display: block;
        color: var(--m);
        font-size: .9rem;
        line-height: 1.8
    }

footer {
    margin-top: 110px;
    background: var(--k);
    color: var(--p);
    text-align: center;
    padding: 40px;
    font-size: 1.5rem
}

.js .rv {
    opacity: 0;
    translate: 0 40px;
    transition: opacity .8s,translate .8s cubic-bezier(.2,.8,.2,1)
}

    .js .rv.in {
        opacity: 1;
        translate: 0 0
    }

.lg {
    position: absolute;
    left: -2vw;
    top: 50%;
    width: clamp(220px,min(56vw,86svh),980px);
    aspect-ratio: 1;
    translate: 0 calc(-50% + var(--sy,0)*.15px);
    transform: perspective(900px) rotateY(calc(var(--tx,0)*16deg)) rotateX(calc(var(--ty,0)*-16deg));
    transition: transform .25s ease-out;
    z-index: 1
}

.st {
    position: absolute;
    inset: -9%;
    border: 2px solid var(--g);
    opacity: .85;
    animation: rota 50s linear infinite
}

.s2 {
    animation-name: rotb;
    animation-direction: reverse;
    border-color: var(--k);
    opacity: .5
}

@keyframes rota {
    to {
        rotate: 360deg
    }
}

@keyframes rotb {
    from {
        rotate: 45deg
    }

    to {
        rotate: 405deg
    }
}

.lm {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: pop 1.2s cubic-bezier(.2,.8,.2,1),flo 6s ease-in-out 1.2s infinite alternate;
    transition: scale .5s
}

.lg:hover .lm {
    scale: 1.07
}

@keyframes pop {
    from {
        scale: .4
    }
}

@keyframes flo {
    from {
        translate: 0 -10px;
        rotate: -3deg
    }

    to {
        translate: 0 10px;
        rotate: 3deg
    }
}

@media(max-width:700px) {
    .lg {
        width: 54vw;
        left: -3vw
    }
}

.abt .head {
    margin-bottom: 26px
}

.ab {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(28px,5vw,64px);
    align-items: start
}

    .ab p {
        font-size: clamp(1.02rem,2.3vw,1.2rem);
        margin-bottom: 1em
    }

.dts {
    border: 2px solid var(--k)
}

    .dts > div {
        padding: 16px 22px;
        border-bottom: 2px solid var(--k);
        transition: background .25s,color .25s
    }

        .dts > div:last-child {
            border: 0
        }

        .dts > div:hover {
            background: var(--k);
            color: var(--p)
        }

    .dts strong {
        display: block;
        font-family: Lalezar;
        font-weight: 400;
        font-size: clamp(2rem,5vw,3.2rem);
        line-height: 1.3;
        background: linear-gradient(transparent 60%,var(--r) 60%);
        display: inline-block
    }

    .dts > div:hover strong {
        background: none;
        color: var(--r)
    }

    .dts span {
        display: block;
        font-weight: 700
    }

.reg p {
    color: #e3dfd0
}

.reg .dl {
    font-weight: 900;
    color: var(--p);
    border-right: 4px solid var(--r);
    padding-right: 14px;
    margin: 18px 0 26px
}

.reg .btn {
    background: var(--r);
    color: var(--k);
    border-color: var(--r)
}

    .reg .btn:hover {
        background: var(--p);
        box-shadow: 6px 6px 0 var(--r)
    }

.sh {
    font-family: Lalezar;
    font-weight: 400;
    font-size: clamp(1.6rem,3.5vw,2.2rem);
    color: var(--p);
    margin-bottom: 6px
}

.sp {
    list-style: none;
    counter-reset: s
}

    .sp li {
        counter-increment: s;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 18px;
        padding: 16px 0;
        border-bottom: 1px solid rgba(236,230,214,.3)
    }

        .sp li::before {
            content: counter(s,persian);
            font-family: Lalezar;
            font-size: 2.6rem;
            line-height: 1.2;
            color: var(--r)
        }

    .sp strong {
        display: block;
        color: var(--p)
    }

    .sp span {
        color: #c9c4b3;
        font-size: .95rem;
        line-height: 1.9
    }

footer small {
    display: block;
    font-family: Vazirmatn,sans-serif;
    font-size: .95rem;
    color: #c9c4b3;
    margin-top: 6px
}

.rf {
    grid-column: 1/-1;
    border-bottom: 2px solid rgba(243,236,220,.3);
    padding-bottom: 40px
}

    .rf form {
        grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
        margin-top: 10px
    }

.err {
    grid-column: 1/-1;
    margin: 0;
    min-height: 1.6em;
    color: #ffb9a3;
    font-weight: 700
}

.ok .code {
    display: block;
    font-family: Lalezar;
    font-weight: 400;
    font-size: clamp(3.2rem,11vw,6.5rem);
    line-height: 1.3;
    color: var(--r);
    margin: 4px 0 10px
}

.ok .demo {
    font-size: .85rem;
    color: #c9c4b3
}

.ok .btn {
    margin-top: 10px
}

.ok .big {
    font-family: Lalezar;
    font-weight: 400;
    font-size: clamp(1.8rem,5vw,3rem);
    line-height: 1.5;
    color: var(--r);
    margin: 0
}

.hero h1 .lw {
    display: block;
    width: clamp(280px,62vw,900px);
    height: auto;
    margin: .1em 0
}

@media(max-width:860px) {
    .ab {
        grid-template-columns: 1fr
    }
}

@media(max-width:860px) {
    .reg {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .sld {
        flex-basis: 100%
    }

    .stk {
        top: 10vh
    }
}

@media(max-width:560px) {
    form {
        grid-template-columns: 1fr
    }
}

@media(prefers-reduced-motion:reduce) {
    *, ::before, ::after {
        animation: none !important;
        transition: none !important
    }

    .js .rv {
        opacity: 1;
        translate: 0
    }

    html {
        scroll-behavior: auto
    }
}