@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%);
  }