/*
  کافینت آنلاین — استایل اصلی (Light)
  پالت: بنفش پررنگ/کمرنگ + خط زرد
  این فایل با ساختار index.html موجود در پروژه همخوان است.
*/

:root{
    /* رنگ‌ها */
    --bg:#ffffff;                /* زمینه روشن */
    --bg-soft:#fbfbfd;           /* پس‌زمینه‌های سکشن */
    --surface:#ffffff;           /* کارت/جعبه سفید */
    --text:#1f2937;              /* متن اصلی */
    --muted:#6b7280;             /* متن فرعی */
    --brand:#6d28d9;             /* بنفش پررنگ (جایگزین نارنجی پررنگ) */
    --brand-2:#9f67ff;           /* بنفش مکمل */
    --brand-soft:rgba(125,85,255,.12); /* بنفش کم‌رنگ (جایگزین نارنجی کم‌رنگ) */
    --accent:#facc15;            /* زرد خطی */
    --border:rgba(2,6,23,.08);   /* مرز ظریف */
    --shadow:0 10px 30px rgba(2,6,23,.06);
    --radius:16px;
    --container:1200px;
  }
  
  /* ریست سبک */
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:"Vazirmatn",system-ui,Arial;direction:rtl;background:var(--bg);color:var(--text)}
  img{max-width:100%;display:block}
  a{color:inherit}
  
  .container{max-width:var(--container);margin:auto;padding:0 20px}
  .muted{color:var(--muted)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  
  /* نوار بالا (اطلاع بتا) */
  .topbar{background:linear-gradient(90deg,rgba(253,253,255,1),rgba(253,253,255,.92));border-bottom:1px solid var(--border);font-size:14px}
  .topbar .container{height:42px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
  
  /* هدر */
  .site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
  .site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo{display:inline-flex;gap:10px;align-items:center;text-decoration:none}
  .logo .logo-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 20px rgba(109,40,217,.25)}
  .logo .logo-text{display:flex;flex-direction:column;line-height:1}
  .logo .logo-text strong{font-weight:800}
  .logo .logo-text small{color:var(--muted)}
  
  .site-nav{display:flex;gap:18px;align-items:center}
  .site-nav a{text-decoration:none;color:#334155;font-weight:700}
  .site-nav a:hover{color:#000}
  
  /* دکمه‌ها */
  .btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--border);text-decoration:none;font-weight:800;transition:transform .06s ease, box-shadow .2s ease}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0;box-shadow:0 8px 16px rgba(109,40,217,.18)}
  .btn-primary:hover{box-shadow:0 10px 22px rgba(109,40,217,.25)}
  .btn-secondary{background:#fff;color:#111827}
  .btn-secondary:hover{background:#f8fafc}
  .btn[aria-disabled="true"]{opacity:.6;pointer-events:none}
  
  /* منوی موبایل */
  .nav-toggle{display:none;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-weight:800}
  .nav-drawer{position:fixed;inset-inline-start:0;top:72px;bottom:0;width:82%;max-width:360px;background:#fff;border-inline-end:1px solid var(--border);box-shadow:var(--shadow);padding:16px;transition:transform .25s ease;transform:translateX(-100%)}
  .nav-drawer[open],.nav-drawer[hidden="false"]{transform:none}
  .nav-drawer nav{display:grid;gap:12px}
  .nav-drawer a{text-decoration:none;color:#111827;font-weight:700;padding:10px 8px;border-radius:10px}
  .nav-drawer a:hover{background:#f8fafc}
  
  /* هیرو روشن */
  /* هیرو روشن + تصویر پس‌زمینه (jpg) */
  .hero { background: url(../img/hero-bg.jpg) left calc(400px) top -50px / 800px auto no-repeat; border-bottom: 30px solid var(--border); }
  /* تبلت بزرگ */
@media (max-width: 1200px){
  .hero{
    background: url(../img/hero-bg.jpg)
      left 300px top -50px / 720px auto no-repeat;
    border-bottom: 26px solid var(--border);
  }
}

/* تبلت / لپ‌تاپ کوچک */
@media (max-width: 992px){
  .hero{
    background: url(../img/hero-bg.jpg)
      center top -60px / 620px auto no-repeat;
    border-bottom: 22px solid var(--border);
  }
}

/* موبایل بزرگ */
@media (max-width: 720px){
  .hero{
    background: url(../img/hero-bg.jpg)
      center top -40px / 1000px auto no-repeat;
    border-bottom: 18px solid var(--border);
  }
}
/* دسکتاپ: تصویر، پهنای کامل هیرو را پُر کند */
@media (min-width: 1200px){
  .hero{
    background-image: url(../img/hero-bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;   /* در صورت نیاز: left center / center -10px */
    background-size: cover;        /* پُر کردن 100% عرض هیرو */
    /* اگر حاشیه پایین قبلی داری، نگه دار: */
    /* border-bottom: 30px solid var(--border); */
  }
}

/* موبایل کوچک */
@media (max-width: 480px){
  .hero{
    background: url(../img/hero-bg.jpg)
      center top -20px / 420px auto no-repeat;
    border-bottom: 14px solid var(--border);
  }
}
    .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;padding:56px 0}
  .hero-copy h1{color: #ffffff;font-size:clamp(28px,4vw,44px);margin:0 0 12px 0;line-height:1.25}
  .hero-copy .lead{
    color: #f4d5fc;font-size:14px;max-width:820px}
  .hero .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
  .store-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .store-badge{display:inline-flex;gap:10px;align-items:center;border-radius:12px;padding:10px 14px;background:#fff;border:1px solid var(--border);text-decoration:none;color:#111827;box-shadow:0 4px 12px rgba(2,6,23,.05)}
  .store-badge:hover{background:#f8fafc}
  .hero-visual img{border-radius:24px;box-shadow:0 14px 40px rgba(2,6,23,.12), 0 4px 16px rgba(2,6,23,.06)}
  
  /* نوار مزایا */
  .usp-strip{background:linear-gradient(90deg,transparent 0%,var(--accent) 10%,transparent 22%,var(--accent) 34%,transparent 46%,var(--accent) 58%,transparent 70%,var(--accent) 82%,transparent 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:14px 0}
  .usp-item{display:flex;align-items:center;gap:10px;font-weight:800;color:#111827}
  .i{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:inline-block}
  .i.i-secure{box-shadow:0 0 0 2px rgba(109,40,217,.15) inset}
  .i.i-fast{box-shadow:0 0 0 2px rgba(159,103,255,.15) inset}
  .i.i-support{box-shadow:0 0 0 2px rgba(250,204,21,.25) inset}
  
  /* سکشن‌ها */
  .section{padding:56px 0;background:var(--bg)}
  .section:nth-of-type(odd){background:var(--bg-soft)}
  .section h2{margin:0 0 18px 0;font-size:28px}
  
  /* کارت‌های خدمات و ربات‌ها */
  .cards{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-height:120px;transition:transform .06s ease, box-shadow .2s ease}
  .card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,6,23,.08)}
  .card h3{margin:0 0 6px 0}
  .card p{margin:0;color:var(--muted)}
  
  /* بلوک امکانات */
  .feature-blocks .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:10px 0 28px}
  .feature-blocks .feature-grid.reverse .feature-text{order:2}
  .feature-blocks .feature-grid.reverse .feature-visual{order:1}
  .feature-text h3{margin:0 0 8px 0}
  .feature-text p{color:var(--muted)}
  .feature-text ul{margin:12px 0 0 0;padding:0 18px}
  .feature-visual img{border-radius:18px;box-shadow:0 10px 28px rgba(2,6,23,.1)}
  
  /* گالری اسکرین‌شات‌ها */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
  .gallery img{width:100%;border-radius:14px;box-shadow:0 10px 24px rgba(2,6,23,.08)}
  
  /* FAQ */
  #faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:10px}
  #faq summary{cursor:pointer;font-weight:800}
  #faq details p{margin:10px 0 0;color:var(--muted)}
  
  /* تماس */
  address{font-style:normal;color:var(--muted)}
  
  /* فوتر */
  .site-footer{padding:36px 0;color:var(--muted);border-top:1px solid var(--border);background:#fff}
  .footer-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
  .logo.small .logo-mark{width:28px;height:28px;border-radius:8px}
  .footer-grid nav{display:flex;gap:16px}
  .footer-grid nav a{text-decoration:none;color:#334155}
  .footer-grid nav a:hover{color:#000}
  
  /* CTA چسبان */
  .sticky-cta{position:sticky;bottom:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-top:1px solid rgba(255,255,255,.25);box-shadow:0 -8px 18px rgba(109,40,217,.15)}
  .sticky-cta .container{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px}
  .sticky-cta .btn{background:#fff;color:#111827;border:0}
  
  /* واکنش‌گرا */
  @media (max-width:1024px){
gap:22px}
  }
  @media (max-width:900px){
    .cards{grid-template-columns:repeat(2,1fr)}
    .feature-blocks .feature-grid{grid-template-columns:1fr}
  }
  @media (max-width:720px){
    .site-nav{display:none}
    .nav-toggle{display:inline-block}
  }
  @media (max-width:600px){
    .cards{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr}
  }