@font-face {
  font-family: "testfont";
  src: url("../font/font/Vazir.eot"); /* IE9 Compat Modes */
  src:
    url("../font/font/Vazir.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../font/font/Vazir.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../font/font/Vazir.woff") format("woff"),
    /* Modern Browsers */ url("../font/font/Vazir.ttf") format("truetype"); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

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

    :root {
      --bg:        #090c18;
      --bg2:       #0d1224;
      --surface:   #111828;
      --border:    #1e2d50;
      --blue:      #2563eb;
      --blue-glow: #3b82f6;
      --blue-dim:  #1e3a6e;
      --silver:    #c8d4e8;
      --white:     #f0f4ff;
      --muted:     #8899bb;
      --card-h:    220px;
      --radius:    14px;
    }

    html, body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--white);
      font-family: "testfont", sans-serif;
    }

    /* ─── BACKGROUND GRID ─── */
    body::before {
     /* content: '';*/
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }

    /* ─── GLOW ORBS ─── */
    .orb {
      position: fixed;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
      opacity: .35;
    }
    .orb-1 { width: 600px; height: 600px; background: #1d3c8a; top: -200px; right: -180px; }
    .orb-2 { width: 400px; height: 400px; background: #0c2060; bottom: 0; left: -100px; }

    /* ─── LAYOUT ─── */
    .page {
      position: relative;
      z-index: 1;
      max-width: 960px;
      margin: 0 auto;
      padding: 48px 24px 64px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* ─── LOGO ─── */
    .logo-wrap {
      margin-bottom: 28px;
    }
    .logo-wrap img {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      box-shadow:
        0 0 0 2px var(--blue-dim),
        0 0 30px rgba(37,99,235,.45),
        0 0 60px rgba(37,99,235,.2);
      transition: box-shadow .3s;
    }
    .logo-wrap img:hover {
      box-shadow:
        0 0 0 3px var(--blue-glow),
        0 0 50px rgba(59,130,246,.65),
        0 0 90px rgba(37,99,235,.3);
    }

    .brand-name {
      font-size: 26px;
      font-weight: 700;
      color: var(--white);
      letter-spacing: .5px;
      text-align: center;
      margin-bottom: 6px;
    }
    .brand-sub {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--blue-glow);
      text-align: center;
      margin-bottom: 22px;
    }

    .divider {
      width: 120px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--blue-glow), transparent);
      margin: 0 auto 0.75rem;
    }

    .about {
   
      text-align: center;
      color: var(--muted);
      font-size: 17px;
      line-height: 2.1;
      margin-bottom: 0.75rem;
      padding: 0 8px;
    }
    .about strong {
      color: var(--silver);
      font-weight: 600;
    }

    .services-label {
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--blue-glow);
      text-align: center;
      margin-bottom: 20px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      width: 100%;
      margin-bottom: 56px;
    }

    .card {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      height: var(--card-h);
      cursor: pointer;
      border: 1px solid var(--border);
      display: block;
      text-decoration: none;
      transition: transform .28s cubic-bezier(.22,.68,0,1.2),
                  box-shadow .28s ease,
                  border-color .28s ease;
      background: var(--surface);
    }
    .card:hover {
      transform: translateY(-6px) scale(1.025);
      box-shadow: 0 16px 48px rgba(37,99,235,.35);
      border-color: var(--blue-glow);
    }
    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s ease;
    }
    .card:hover img {
      transform: scale(1.07);
    }
    .card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(9,12,24,.1) 0%, rgba(9,12,24,.55) 100%);
      transition: background .3s;
    }
    .card:hover::after {
      background: linear-gradient(180deg, rgba(37,99,235,.12) 0%, rgba(9,12,24,.45) 100%);
    }
    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
      transform: translateX(-100%);
      transition: transform .45s ease;
      z-index: 2;
    }
    .card:hover::before {
      transform: translateX(100%);
    }

    .socials {
      display: flex;
      justify-content: center;
      gap: 20px;
      list-style: none;
      flex-direction: row-reverse;
    }

    .socials a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      text-decoration: none;
      transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
    }
    .socials a:hover {
      transform: translateY(-5px);
      border-color: var(--blue-glow);
      box-shadow: 0 8px 28px rgba(37,99,235,.4);
    }
    .socials a svg {
      width: 24px;
      height: 24px;
    }

    .soc-telegram a:hover { background: #0a2540; }
    .soc-instagram a:hover { background: #3a1040; border-color: #c026d3; box-shadow: 0 8px 28px rgba(192,38,211,.4); }
    .soc-whatsapp a:hover { background: #0a2e18; border-color: #22c55e; box-shadow: 0 8px 28px rgba(34,197,94,.4); }

    .footer-note {
      margin-top: 48px;
      font-size: 12px;
      color: var(--blue-dim);
      text-align: center;
    }

    @media (max-width: 640px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
        --card-h: 160px;
      }
      .brand-name { font-size: 22px; }
      .about { font-size: 14px; }
    }
    @media (max-width: 400px) {
      .grid {
        grid-template-columns: 1fr 1fr;
        --card-h: 140px;
        gap: 10px;
      }
    }