/* فونت وزیرمتن: ابتدا نسخه نصب‌شده، سپس فایل محلی کنار صفحه (fonts/Vazirmatn.woff2) */@font-face {    font-family: "Vazirmatn";    font-style: normal;    font-weight: 100 900;    font-display: swap;    src: local("Vazirmatn"), url("fonts/Vazirmatn.woff2") format("woff2");    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+0020-007F;}:root {    --mist: #ecf8f5;    --ink: #062b37;    --ink-2: #0b3d4d;    --mint: #42bc9b;    --accent: #ec7342;    --white: #ffffff;    --ink-soft: rgba(6, 43, 55, .66);    --line: rgba(6, 43, 55, .09);    --font: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;}* {    box-sizing: border-box;    margin: 0;    padding: 0;}button, a {    font-family: inherit;}html, body {    height: 100%;    overflow: hidden;}body {    font-family: var(--font);    background: var(--mist);    color: var(--ink);    height: 100dvh;    position: relative;    -webkit-font-smoothing: antialiased;}/* ---------- background ---------- */.bg {    position: fixed;    inset: 0;    pointer-events: none;    overflow: hidden;}    .bg::before, .bg::after {        content: "";        position: absolute;        border-radius: 50%;    }    .bg::before {        width: 62vmax;        height: 62vmax;        background: radial-gradient(circle at 35% 35%, rgba(66,188,155,.24), rgba(66,188,155,0) 68%);        top: -26vmax;        left: -18vmax;    }    .bg::after {        width: 54vmax;        height: 54vmax;        border: 1.5px solid rgba(66,188,155,.22);        bottom: -30vmax;        right: -14vmax;        box-shadow: 0 0 0 5vmax rgba(66,188,155,.06), 0 0 0 10vmax rgba(66,188,155,.04);    }/* ---------- hamburger button ---------- */.menu-btn {    position: fixed;    top: max(18px, env(safe-area-inset-top));    right: max(20px, env(safe-area-inset-right));    z-index: 5;    width: 50px;    height: 50px;    border-radius: 15px;    border: 1px solid var(--line);    background: rgba(255,255,255,.85);    backdrop-filter: blur(8px);    -webkit-backdrop-filter: blur(8px);    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 5px;    cursor: pointer;    transition: background .2s, border-color .2s, transform .2s;}    .menu-btn:hover {        background: var(--white);        border-color: rgba(66,188,155,.55);    }    .menu-btn i {        display: block;        height: 2px;        border-radius: 2px;        background: var(--ink);        transition: width .25s;    }        .menu-btn i:nth-child(1) {            width: 22px;        }        .menu-btn i:nth-child(2) {            width: 16px;        }        .menu-btn i:nth-child(3) {            width: 22px;        }    .menu-btn:hover i:nth-child(2) {        width: 22px;    }/* ---------- side drawer ---------- */.overlay {    position: fixed;    inset: 0;    z-index: 20;    background: rgba(6, 43, 55, .45);    backdrop-filter: blur(3px);    -webkit-backdrop-filter: blur(3px);    opacity: 0;    visibility: hidden;    transition: opacity .6s ease, visibility .6s;}.drawer {    position: fixed;    top: 0;    right: 0;    bottom: 0;    z-index: 30;    width: min(340px, 86vw);    height: 100dvh;    background: linear-gradient(170deg, var(--ink-2) 0%, var(--ink) 55%);    color: var(--white);    display: flex;    flex-direction: column;    padding: max(26px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));    transform: translateX(105%);    visibility: hidden;    transition: transform .9s cubic-bezier(.16, 1, .3, 1), visibility .9s;    box-shadow: -30px 0 60px -20px rgba(0,0,0,.35);    overflow: hidden;}    .drawer::before {        content: "";        position: absolute;        width: 320px;        height: 320px;        border-radius: 50%;        border: 1.5px solid rgba(66,188,155,.22);        box-shadow: 0 0 0 40px rgba(66,188,155,.05), 0 0 0 80px rgba(66,188,155,.035);        bottom: -150px;        left: -150px;        pointer-events: none;    }body.menu-open .overlay {    opacity: 1;    visibility: visible;}body.menu-open .drawer {    transform: none;    visibility: visible;}.drawer-head {    display: flex;    align-items: center;    gap: 12px;    padding-bottom: 22px;    margin-bottom: 18px;    border-bottom: 1px solid rgba(255,255,255,.12);}    .drawer-head svg {        width: 46px;        height: 46px;        flex: none;    }    .drawer-head b {        display: block;        font-weight: 800;        font-size: 1.05rem;        line-height: 1.4;    }    .drawer-head small {        color: rgba(255,255,255,.6);        font-size: .8rem;    }.drawer nav {    display: flex;    flex-direction: column;    gap: 8px;    position: relative;}    .drawer nav a {        display: flex;        align-items: center;        gap: 14px;        padding: 15px 16px;        border-radius: 16px;        color: var(--white);        text-decoration: none;        font-weight: 500;        font-size: 1rem;        background: rgba(255,255,255,.05);        border: 1px solid rgba(255,255,255,.07);        transition: background .2s, border-color .2s, padding .2s;    }        .drawer nav a:hover {            background: rgba(66,188,155,.18);            border-color: rgba(66,188,155,.45);            padding-right: 20px;        }        .drawer nav a .ic {            width: 38px;            height: 38px;            border-radius: 12px;            flex: none;            background: rgba(66,188,155,.18);            display: grid;            place-items: center;        }            .drawer nav a .ic svg {                width: 20px;                height: 20px;            }.close-btn {    margin-top: auto;    position: relative;    display: flex;    align-items: center;    justify-content: center;    gap: 10px;    width: 100%;    padding: 14px;    border-radius: 16px;    border: 1px solid rgba(255,255,255,.22);    background: transparent;    color: var(--white);    font-size: 1rem;    font-weight: 700;    cursor: pointer;    transition: background .2s, color .2s, border-color .2s;}    .close-btn:hover {        background: var(--white);        color: var(--ink);        border-color: var(--white);    }    .close-btn svg {        width: 16px;        height: 16px;    }/* drawer entrance: staggered */.drawer-head, .drawer nav a, .close-btn {    opacity: 0;    transform: translateX(40px);    transition: opacity .5s ease .1s, transform .6s ease;}body.menu-open .drawer-head,body.menu-open .drawer nav a,body.menu-open .close-btn {    opacity: 1;    transform: none;    transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1), background .2s, border-color .2s, color .2s, padding .2s;}body.menu-open .drawer-head {    transition-delay: .3s, .3s, 0s, 0s, 0s, 0s;}body.menu-open .drawer nav a:nth-child(1) {    transition-delay: .5s, .5s, 0s, 0s, 0s, 0s;}body.menu-open .drawer nav a:nth-child(2) {    transition-delay: .7s, .7s, 0s, 0s, 0s, 0s;}body.menu-open .close-btn {    transition-delay: .9s, .9s, 0s, 0s, 0s, 0s;}/* ---------- layout ---------- */main {    position: relative;    height: 100%;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: clamp(20px, 5vh, 52px);    padding: 72px 24px 24px;}.brand {    text-align: center;}.logo {    width: clamp(64px, 11vh, 98px);    height: auto;    display: block;    margin: 0 auto clamp(8px, 1.8vh, 16px);}h1 {    font-size: clamp(1.55rem, 4.2vh + .6rem, 2.5rem);    font-weight: 800;    letter-spacing: -.01em;    line-height: 1.25;}.tagline {    margin-top: 8px;    font-size: clamp(.9rem, 1.3vh + .5rem, 1.08rem);    color: var(--ink-soft);}/* ---------- cards ---------- *//* چیدمان انعطاف‌پذیر: هر تعداد باکس (۱ تا ۳) وسط‌چین و هم‌اندازه نمایش داده می‌شود */.boxes {    --gap: clamp(12px, 1.6vw, 18px);    width: min(100%, 860px);    display: flex;    flex-wrap: wrap;    justify-content: center;    gap: var(--gap);}    .boxes > .box {        /* عرض هر باکس برابر یک‌سوم ردیف است؛ باکس‌های کمتر، وسط می‌مانند */        flex: 0 1 calc((100% - 2 * var(--gap)) / 3);        min-width: 0;    }.box {    position: relative;    isolation: isolate;    overflow: hidden;    background: rgba(255,255,255,.78);    backdrop-filter: blur(6px);    -webkit-backdrop-filter: blur(6px);    border: 1px solid rgba(6,43,55,.08);    border-radius: 18px;    padding: clamp(16px, 2.6vh, 22px) 18px 18px;    display: flex;    flex-direction: column;    align-items: center;    text-align: center;    gap: clamp(8px, 1.4vh, 12px);    box-shadow: 0 10px 28px -22px rgba(6,43,55,.45);    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;}    .box::before {        content: "";        position: absolute;        z-index: -1;        width: 140px;        height: 140px;        border-radius: 50%;        top: -70px;        left: -70px;        background: radial-gradient(circle, rgba(66,188,155,.16), rgba(66,188,155,0) 70%);        transition: transform .5s ease;    }    .box:hover {        transform: translateY(-3px);        background: #fff;        border-color: rgba(66,188,155,.5);        box-shadow: 0 18px 32px -22px rgba(6,43,55,.45);    }        .box:hover::before {            transform: scale(1.3);        }.icon {    width: clamp(40px, 5.6vh, 46px);    aspect-ratio: 1;    flex: none;    border-radius: 13px;    background: var(--mist);    border: 1px solid rgba(66,188,155,.35);    display: grid;    place-items: center;}    .icon svg {        width: 54%;        height: 54%;    }.box h2 {    font-size: clamp(.9rem, .9vh + .7rem, 1rem);    font-weight: 600;    line-height: 1.7;}.box p {    font-size: .78rem;    color: var(--ink-soft);    line-height: 1.8;    font-weight: 400;}.text {    flex: 1;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 2px;}.btn {    display: inline-flex;    align-items: center;    justify-content: center;    gap: 8px;    padding: 8px 18px;    margin-top: 2px;    border-radius: 999px;    background: transparent;    color: var(--ink);    border: 1px solid rgba(6,43,55,.22);    text-decoration: none;    font-weight: 500;    font-size: .84rem;    transition: background .2s, color .2s, border-color .2s;}    .btn svg {        width: 13px;        height: 13px;        transition: transform .25s;    }    .btn:hover {        background: var(--ink);        color: var(--white);        border-color: var(--ink);    }        .btn:hover svg {            transform: translateX(-3px);        }    .btn.alt {        background: var(--ink);        color: var(--white);        border-color: var(--ink);    }        .btn.alt:hover {            background: var(--mint);            color: var(--ink);            border-color: var(--mint);        }a:focus-visible, button:focus-visible {    outline: 3px solid var(--accent);    outline-offset: 3px;}/* ---------- phones ---------- */@media (max-width: 780px) {    main {        gap: clamp(14px, 3vh, 24px);        padding: 68px 16px 16px;    }    .boxes {        flex-direction: column;        flex-wrap: nowrap;        gap: 9px;        max-width: 440px;    }        .boxes > .box {            flex: 0 0 auto;            width: 100%;        }    .box {        flex-direction: row;        text-align: right;        align-items: center;        padding: 10px 12px;        gap: 10px;        border-radius: 16px;    }        .box:hover {            transform: none;        }    .icon {        width: 40px;        border-radius: 12px;    }    .text {        align-items: flex-start;        justify-content: center;    }    .box h2 {        font-size: .86rem;        line-height: 1.5;    }    .box p {        display: none;    }    .btn {        padding: 7px 13px;        font-size: .78rem;        white-space: nowrap;        margin: 0;    }        .btn svg {            display: none;        }}@media (max-width: 780px) and (max-height: 640px) {    .logo {        width: 52px;    }    h1 {        font-size: 1.35rem;    }    .tagline {        font-size: .82rem;        margin-top: 4px;    }    .box {        padding: 8px 12px;    }    .icon {        width: 36px;    }}@media (prefers-reduced-motion: no-preference) {    .logo, h1, .tagline, .box {        animation: rise 1.4s cubic-bezier(.16, 1, .3, 1) backwards;    }    .logo {        animation-name: pop;        animation-duration: 1.6s;        animation-delay: .15s;    }    h1 {        animation-delay: .5s;    }    .tagline {        animation-delay: .75s;    }    .box:nth-child(1) {        animation-delay: 1.0s;    }    .box:nth-child(2) {        animation-delay: 1.25s;    }    .box:nth-child(3) {        animation-delay: 1.5s;    }    @keyframes rise {        from {            opacity: 0;            transform: translateY(36px);            filter: blur(6px);        }        to {            opacity: 1;            transform: none;            filter: blur(0);        }    }    @keyframes pop {        from {            opacity: 0;            transform: translateY(20px) scale(.82);            filter: blur(6px);        }        to {            opacity: 1;            transform: none;            filter: blur(0);        }    }}@media (prefers-reduced-motion: reduce) {    *, *::before, *::after {        transition-duration: .01ms !important;        transition-delay: 0s !important;        animation: none !important;    }}