    :root{
      --orange-1: #ff7a00;
      --orange-2: #ffb347;
      --muted: #f8f9fa;
      --card-radius: 1rem;
    }
    html,body{height:100%;}
    body{
      background: linear-gradient(135deg,var(--orange-1) 0%, var(--orange-2) 70%);
      font-family: "Vazir", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#212529;
      scroll-behavior: smooth;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    .hero{
      padding:2.6rem 1rem;
      color: white;
      text-align: center;
      background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent);
    }
    .hero .lead{opacity:0.95}
    .card-app{
      border-radius:var(--card-radius);
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
      transition: transform .18s ease, box-shadow .18s ease;
      overflow: hidden;
      background: #fff;
      height:100%;
      display:flex;
      flex-direction:column;
    }
    .card-app:hover{transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,0.18);}
    .card-img-top{
      height:250px;
      object-fit:cover;
      display:block;
      width:100%;
    }
    .card-body { flex:1; }
    .apps-section{
      padding:2.4rem 0 4rem 0;
      background:rgba(255,255,255,0.98);
      border-top-left-radius:30px;border-top-right-radius:30px;
      margin-top:-2.4rem;
    }
    .apps-header { display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
    .apps-header .subtitle{ color:rgba(0,0,0,0.55); }
    .feature-badge{ display:inline-flex; gap:.4rem; align-items:center; padding:.35rem .6rem; border-radius:999px; background:rgba(255,165,0,0.12); color:#7a3f00; font-weight:600; font-size:.9rem; }
    .card-footer { background:transparent; border-top:0; padding-top:0; }
    .muted-small{ color:rgba(0,0,0,0.55); }
    .infra-box{ background:rgba(255,255,255,0.12); padding:1rem; border-radius:.6rem; text-align:right; margin-top:1rem; color:#fff; }
    footer{padding:2rem 0;color:rgba(0,0,0,0.65); background:#fff; margin-top:2rem;}
    footer .footer-note{ font-size:.95rem; color:#333; text-align:justify; line-height:1.5; }
    @media (max-width:576px){
      .hero{padding:2rem 1rem}
      .card-img-top{height:250px}
    }



        @font-face {
        font-family: 'Vazir';
        src: url('/static/assets/fonts/vazir/Vazir.woff2') format('woff2'),
             url('/static/assets/fonts/vazir/Vazir.woff') format('woff'),
             url('/static/assets/fonts/vazir/Vazir.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Vazir';
        src: url('/static/assets/fonts/vazir/Vazir-Bold.woff2') format('woff2'),
             url('/static/assets/fonts/vazir/Vazir-Bold.woff') format('woff'),
             url('/static/assets/fonts/vazir/Vazir-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    * {
        font-family: 'Vazir', sans-serif !important;
    }

