@font-face {
    font-family: "Vazirmatn";
    src: url("../assets/fonts/vazirmatn/Vazirmatn-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Vazirmatn, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

.page-bg {
    background:
        radial-gradient(900px 560px at 70% 0%, rgba(6, 182, 212, .18), transparent 65%),
        radial-gradient(760px 520px at 18% 30%, rgba(34, 211, 238, .12), transparent 58%),
        radial-gradient(820px 520px at 82% 70%, rgba(165, 243, 252, .55), transparent 60%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 44%, #ffffff 100%);
}

.glass {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.shadow-soft {
    box-shadow: 0 16px 48px rgba(2, 10, 20, 0.10);
}

.shadow-soft2 {
    box-shadow: 0 26px 70px rgba(2, 10, 20, 0.14);
}

.hero-tint {
    background:
        radial-gradient(900px 520px at 70% 0%, rgba(6, 182, 212, .20), transparent 66%),
        radial-gradient(820px 520px at 92% 60%, rgba(34, 211, 238, .16), transparent 58%),
        linear-gradient(180deg, rgba(241, 251, 251, .0) 0%, rgba(241, 251, 251, .55) 46%, rgba(255, 255, 255, 1) 100%);
}

.netline {
    background-image:
        radial-gradient(circle at 8px 8px, rgba(148, 163, 184, .22) 2px, transparent 2px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
    opacity: .55;
}

.pale-card {
    background:
        radial-gradient(140px 100px at 70% 28%, rgba(165, 243, 252, .60), transparent 60%),
        radial-gradient(120px 90px at 25% 70%, rgba(6, 182, 212, .12), transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.footer-bg {
    background:
        radial-gradient(900px 420px at 80% -10%, rgba(34, 211, 238, .10), transparent 60%),
        linear-gradient(180deg, #172a3a 0%, #0f1f2f 100%);
}