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

    body {
        font-family: 'Vazir', sans-serif !important;
    }


    :root{
      --accent-1:#FF7A18;
      --accent-2:#FFB199;
      --bg:#fffaf5;
      --card:#ffffff;
      --text:#17202a;
      --muted:#6b7280;
      --radius:14px;
      --maxw:1100px;
      --glass: rgba(255,255,255,0.65);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Poppins", Vazir, Tahoma, sans-serif;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      background:linear-gradient(180deg,var(--bg),#fff);
      color:var(--text);
      padding:28px 18px;
      line-height:1.55;
    }
    .container{max-width:var(--maxw);margin:0 auto;padding:8px}
    /* Topbar */
    .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
    .brand{display:flex;align-items:center;gap:12px}
    .brand img{width:84px;height:56px;border-radius:10px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));padding:6px;object-fit:cover}
    .brand .title{font-weight:700}
    .cta-top{display:flex;gap:10px;align-items:center}
    .btn{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-flex;gap:8px;align-items:center;font-weight:600}
    .btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(15,23,36,0.06)}
    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center;background:linear-gradient(90deg,rgba(255,122,24,0.08),rgba(255,177,153,0.04));padding:26px;border-radius:var(--radius);box-shadow:0 10px 30px rgba(17,24,39,0.06)}
    h1{margin:0;font-size:1.85rem}
    .lead{color:var(--muted);margin-top:10px}
    .hero-right{background:linear-gradient(180deg,#fff,rgba(255,122,24,0.02));padding:14px;border-radius:12px;text-align:center;box-shadow:0 8px 24px rgba(17,24,39,0.03)}
    .kpi{font-size:0.95rem;color:var(--muted);margin-top:8px}
    /* Gallery */
    .gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
    .card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(17,24,39,0.06)}
    .card img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .45s}
    .card:hover img{transform:scale(1.03)}
    /* Split content: left text (list), right model */
    .split{display:grid;grid-template-columns:1fr 420px;gap:18px;margin-top:18px;align-items:start}
    .panel{background:#fff;padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(10,14,20,0.04)}
    .panel h2{margin-top:0}
    .list-advantages{display:grid;gap:10px;margin-top:12px}
    .adv{display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--accent-1);padding:10px;border-radius:8px;background:linear-gradient(180deg,#fff,#fff)}
    .adv .num{width:40px;height:40px;border-radius:8px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
    .muted{color:var(--muted)}
    /* Model / How it works */
    .how-steps{display:flex;flex-direction:column;gap:12px}
    .step{display:flex;gap:12px;align-items:flex-start}
    .step .icon{width:36px;height:36px;border-radius:8px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-weight:700}
    .models{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
    .model{padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fff);box-shadow:0 8px 22px rgba(10,14,20,0.03)}
    .model strong{display:block}
    /* Use-cases grid */
    .usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
    .uc{padding:12px;border-radius:10px;background:linear-gradient(90deg,rgba(255,122,24,0.06),#fff);border-left:4px solid var(--accent-1)}
    .uc strong{display:block}
    /* Logos / trust */
    .partners{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
    .partner{background:var(--glass);padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted)}
    /* Demo CTA */
    .demo{margin-top:18px;display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px;border-radius:12px;background:linear-gradient(90deg,rgba(255,245,238,1),#fff);box-shadow:0 8px 24px rgba(17,24,39,0.03)}
    .demo form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .input{padding:10px 12px;border-radius:8px;border:1px solid #eef2f7;min-width:160px}
    /* Footer */
    footer{margin-top:20px;color:var(--muted);font-size:14px;text-align:center}
    /* Responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr;align-items:stretch}
      .split{grid-template-columns:1fr}
      .models{grid-template-columns:1fr 1fr}
      .usecases{grid-template-columns:1fr 1fr}
      .gallery{grid-template-columns:1fr}
    }
    @media (max-width:560px){
      .models{grid-template-columns:1fr}
      .usecases{grid-template-columns:1fr}
      .brand img{width:72px;height:48px}
      h1{font-size:1.4rem}
    }
    a:focus,button:focus{outline:3px solid rgba(255,122,24,0.18);outline-offset:3px;border-radius:8px}



       :root{
      --accent-1: #FF7A18;
      --accent-2: #FFB199;
      --bg: linear-gradient(180deg,#fff8f3,#ffffff);
      --card: #ffffff;
      --text: #0f1724;
      --muted: #6b7280;
      --radius: 14px;
    }
    *{box-sizing:border-box}
    body{font-family:"Poppins", Vazir, Tahoma, sans-serif;margin:0;background:var(--bg);color:var(--text);padding:28px}
    .container{max-width:1150px;margin:0 auto;padding:18px}
    .hero{gap:20px;align-items:center;background:linear-gradient(90deg,rgba(255,122,24,0.06),rgba(255,177,153,0.03));padding:28px;border-radius:var(--radius);box-shadow:0 15px 40px rgba(17,24,39,0.05);flex-wrap:wrap}
    .hero-left{flex:1;min-width:280px}
    h1{margin:0;font-size:1.9rem;line-height:1.1}
    .lead{color:var(--muted);margin-top:10px;font-size:1rem}
    .hero-cta{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
    .btn{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;border:none;padding:10px 16px;border-radius:12px;cursor:pointer;text-decoration:none;font-weight:600;display:inline-flex;gap:8px;align-items:center;box-shadow:0 10px 30px rgba(255,122,24,0.12)}
    .btn-secondary{background:transparent;border:1px solid rgba(15,23,36,0.06);padding:10px 14px;border-radius:12px;color:var(--text)}
    .hero-right{width:360px;min-width:260px;text-align:center}
    .kpi-card{padding:14px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.9),#fff);box-shadow:0 10px 30px rgba(10,14,20,0.04)}
    .visuals{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
    .card{background:var(--card);padding:12px;border-radius:12px;box-shadow:0 12px 30px rgba(10,14,20,0.04)}
    .card img{width:100%;height:220px;object-fit:cover;border-radius:8px}
    .section{margin-top:20px;background:transparent}
    .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
    .feature{background:linear-gradient(180deg,#fff,#fff);padding:16px;border-radius:12px;border-left:5px solid var(--accent-1);min-height:120px;display:flex;flex-direction:column;gap:8px}
    .feature h3{margin:0;font-size:1.05rem}
    .small{color:var(--muted);font-size:0.95rem}
    .row{display:flex;gap:12px;flex-wrap:wrap}
    footer{margin-top:28px;text-align:center;color:var(--muted);font-size:14px}
    .module-box{background:#fff;padding:14px;border-radius:12px;box-shadow:0 10px 30px rgba(17,24,39,0.03);display:flex;gap:12px;align-items:center}
    .badge{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;padding:8px 12px;border-radius:999px;font-weight:700}
    @media (max-width:980px){
      .features-grid{grid-template-columns:repeat(2,1fr)}
      .hero-right{width:100%}
    }
    @media (max-width:640px){
      .features-grid{grid-template-columns:1fr}
      .visuals{grid-template-columns:1fr}
      h1{font-size:1.4rem}
    }




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

    body{
        font-family: 'Vazir', sans-serif !important;
    }