@font-face{
      font-family:'Vazir';
      src:url('/font/Vazir.woff2') format('woff2'),
          url('/font/Vazir.woff') format('woff');
      font-weight:400; font-style:normal; font-display:swap;
    }
    @font-face{
      font-family:'Vazir';
      src:url('/font/Vazir-Bold.woff2') format('woff2'),
          url('/font/Vazir-Bold.woff') format('woff');
      font-weight:700; font-style:normal; font-display:swap;
    }

    :root{
      --primary:#C62828; --primary-soft:#FDEBEC;
      --ink:#1f1f1f; --muted:#6b6b6b; --radius:18px; --gap:14px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:#fff; color:var(--ink);
      font-size:16px; line-height:1.9;
      font-family:'Vazir', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
    }
    a{color:inherit; text-decoration:none}
    .container{max-width:1100px; margin-inline:auto; padding:28px 16px}
    .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px;}
    .brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px;}
    .brand img{width:42px; height:42px; object-fit:contain; display:block;}
    .brand .name{font-size:20px}
    .cta{border:1px solid var(--primary); color:var(--primary); padding:8px 16px; border-radius:999px; font-weight:600; transition:.2s;}
    .cta:hover{background:var(--primary); color:#fff}

    .hero{text-align:center; padding:56px 0 34px;}
    .hero .logo{width:min(200px,45vw); aspect-ratio:1; object-fit:contain; display:block; margin:0 auto 18px;}
    .hero h1{margin:0 0 6px; font-size:clamp(22px,5vw,34px); font-weight:700; letter-spacing:.2px;}
    .hero p{margin:0 auto; color:var(--muted); max-width:50ch; font-size:clamp(15px,3.6vw,18px);}

    .social{margin-top:34px; display:grid; gap:var(--gap); grid-template-columns:repeat(4,minmax(0,1fr));}
    @media (max-width:900px){ .social{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:520px){ .social{grid-template-columns:1fr} }

    .card{border:1px solid #eee; border-radius:var(--radius); padding:16px; display:flex; align-items:center; gap:12px; background:#fff; transition:transform .15s, box-shadow .15s, border-color .15s;}
    .card:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.06); border-color:#f1d3d3;}
    .icon{inline-size:42px; block-size:42px; display:grid; place-items:center; border-radius:12px; background:var(--primary-soft); color:var(--primary);}
    .card .t{display:flex; flex-direction:column; gap:2px;}
    .card .t b{font-size:15px}
    .card .t span{font-size:13px; color:var(--muted)}

    footer{margin-top:44px; padding:20px 0 40px; text-align:center; color:var(--muted); border-top:1px dashed #eee;}
    .accent{width:82px; height:4px; border-radius:999px; margin:18px auto 0; background:var(--primary);}
    :where(a,button,.card){outline:none}
    :where(a,button,.card):focus-visible{box-shadow:0 0 0 3px var(--primary-soft), 0 0 0 6px #ffd9dc;}