/*
  کافینت آنلاین — استایل اصلی (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, #53eb97, #30bb62);;color:#797979;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}
/* استایل برای کانتینری که تصویر هدر در آن قرار می‌گیرد */
.header-logo-container {
  /* این بخش به نحوه قرارگیری تصویر در هدر کمک می‌کند.
     بسته به طراحی کلی هدر شما، ممکن است نیاز به تنظیمات بیشتری باشد. */
  display: flex; /* برای هم‌ترازی راحت‌تر */
  align-items: center; /* عمودی وسط‌چین کردن */
  margin-left: 20px; /* فاصله از لبه چپ هدر (قابل تنظیم) */
  order: 1; /* اولویت قرارگیری در هدر (اگر هدر شما از flexbox یا grid استفاده می‌کند) */
}

/* استایل مجزا برای تصویر هدر */
.header-logo-special {
  max-height: 50px; /* ارتفاع تصویر را تنظیم کنید (قابل تغییر) */
  width: auto;     /* عرض را نسبت به ارتفاع تنظیم می‌کند */
  display: block;  /* برای حذف فضای خالی اضافی زیر تصویر */
  margin-right: auto; /* این باعث می‌شود تصویر به سمت چپ متمایل شود */

  /* اگر هدر شما از flexbox استفاده می‌کند و می‌خواهید این تصویر کاملا سمت چپ باشد،
     می‌توانید از `margin-left: auto;` استفاده کنید و `order` کانتینر را تغییر دهید.
     اما با `margin-right: auto;` و `order: 1;` در کانتینر، تصویر در سمت چپ قرار می‌گیرد. */

  /* افکت‌های اختیاری دیگر */
  /* filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); */
  /* transition: transform 0.3s ease; */
}

/* اگر می‌خواهید هنگام هاور (hover) تغییری ایجاد شود */
/*
.header-logo-special:hover {
  transform: scale(1.05);
}
*/

/* تنظیمات برای چیدمان کلی هدر (مثال با استفاده از flexbox) */
header nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* یا هر تنظیم دیگر برای توزیع فضا */
  padding: 10px 20px;
}

/* فرض کنید لینک‌های ناوبری بعد از تصویر بیایند */
.header-logo-container + ul { /* اگر لینک‌های ناوبری ul باشند */
  order: 2;
}

  /* هیرو روشن */
  .hero{
    position:relative;
    overflow:hidden;
    min-height:760px;

    background:
        linear-gradient(
            135deg,
            #020617,
            #0f172a,
            #0c4a6e,
            #1d4ed8
        );

    background-size:400% 400%;
    animation:bgMove 15s ease infinite;
}

/* نورهای نئونی */
.neon{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    z-index:0;
}

.neon-1{
    width:500px;
    height:500px;
    background:#2563eb;
    top:-100px;
    left:-150px;
    opacity:.45;
    animation:floatGlow1 12s infinite ease-in-out;
}

.neon-2{
    width:600px;
    height:600px;
    background:#06b6d4;
    right:-200px;
    bottom:-100px;
    opacity:.35;
    animation:floatGlow2 15s infinite ease-in-out;
}

/* تغییر در کلاس hero-grid */
.hero-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* تصویر در ستون اول (چپ) و متن در ستون دوم (راست) */
  gap: 36px;
  align-items: center;
  padding: 56px 0;
}


/* پنل شیشه ای */
.glass{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:28px;

    padding:40px;

    box-shadow:
        0 0 40px rgba(37,99,235,.35),
        inset 0 0 30px rgba(255,255,255,.05);
}

/* متن */
.hero-copy h1{
    color:#fff;
    text-shadow:0 0 25px rgba(96,165,250,.8);
}

.hero-copy p{
    color:#dbeafe;
}


/* ذرات */
.particles{
    position:absolute;
    inset:0;
    z-index:1;
}

.particles::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(circle,#ffffff 1px,transparent 1px),
        radial-gradient(circle,#7dd3fc 1px,transparent 1px),
        radial-gradient(circle,#93c5fd 2px,transparent 2px);

    background-size:
        120px 120px,
        200px 200px,
        260px 260px;

    opacity:.35;

    animation:particleMove 30s linear infinite;
}

/* موج ها */
.waves{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:220px;
    z-index:2;
}

.wave{
    position:absolute;
    width:200%;
    height:220px;
    left:0;
    border-radius:45%;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:blur(8px);
}

.wave1{
    bottom:-80px;
    animation:waveMove 18s linear infinite;
}

.wave2{
    bottom:-110px;
    opacity:.45;
    animation:waveMove 25s linear infinite reverse;
}

.wave3{
    bottom:-140px;
    opacity:.25;
    animation:waveMove 32s linear infinite;
}

@keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@keyframes particleMove{
    from{transform:translateY(0);}
    to{transform:translateY(-400px);}
}

@keyframes waveMove{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

@keyframes phoneFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

@keyframes floatGlow1{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(120px,80px);
    }
}

@keyframes floatGlow2{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-120px,-80px);
    }
}

@media (max-width:768px){

    .hero{
        min-height:auto;
        padding:80px 0 180px;
    }

    .glass{
        padding:25px;
    }

    .hero-copy h1{
        font-size:2rem;
    }

    .wave{
        height:140px;
    }

    .neon-1,
    .neon-2{
        width:300px;
        height:300px;
    }
}
  .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{
    width:100%;
    max-width:420px;
    display:block;

    margin-left:0;
    margin-right:auto;

    border-radius:24px;

    box-shadow:
        0 14px 40px rgba(2,6,23,.12),
        0 4px 16px rgba(2,6,23,.06);

    filter:
        drop-shadow(0 0 20px rgba(59,130,246,.4))
        drop-shadow(0 0 60px rgba(59,130,246,.4));

    animation:phoneFloat 5s ease-in-out infinite;
}  

.hero-visual {
  order: 1; /* تصویر اول باشد */
  /* ممکن است لازم باشد اندازه آن را تنظیم کنید */
  max-width: 420px; /* یا هر مقدار مناسب دیگر */
}

.hero-copy {
  order: 2; /* متن دوم باشد */
}

/* اگر انیمیشن phoneFloat همچنان مورد نظر است، آن را حفظ کنید */
.hero-visual img {
  /* ... (استایل‌های موجود) ... */
  animation: phoneFloat 5s ease-in-out infinite;
}

/* اگر نیاز به تنظیمات بیشتری برای نمایش بهتر کنار هدر دارید */
@media (max-width: 768px) { /* یا هر سایز دیگری که هدر و تصویر کنار هم قرار می‌گیرند */
  .hero-grid {
      grid-template-columns: 1fr; /* در سایزهای کوچکتر، تصویر بالای متن قرار گیرد */
      text-align: center;
  }
  .hero-visual {
      order: 1; /* تصویر همچنان اول باشد */
      margin: 0 auto 20px auto; /* مرکز چین شود */
  }
  .hero-copy {
      order: 2;
  }
}
  /* نوار مزایا */
  .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, #356ed9, #2a4fbb);
    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}
  }
  .licenses-pro{
    position:relative;
    padding:90px 0 70px;
    background:
      radial-gradient(circle at top right, rgba(139,92,246,.15), transparent 40%),
      linear-gradient(180deg,#faf7ff 0%,#ffffff 100%);
  }
  
  .licenses-header{
    text-align:center;
    margin-bottom:45px;
  }
  
  .licenses-header h2{
    font-size:clamp(28px,3vw,38px);
    margin-bottom:12px;
  }
  
  .licenses-header p{
    color:#6b7280;
    font-size:15px;
  }
  
  .licenses-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    max-width:1100px;
    margin:auto;
  }
  
  .license-card{
    position:relative;
    overflow:hidden;
    padding:40px 25px;
    border-radius:28px;
    text-align:center;
    backdrop-filter:blur(25px) saturate(180%);
    -webkit-backdrop-filter:blur(25px) saturate(180%);
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:
      0 15px 45px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.6);
    transition:all .35s ease;
  }
  
  .license-card img{
    max-height:90px;
    margin-bottom:22px;
    transition:transform .35s ease;
  }
  
  .license-card h3{
    font-size:17px;
    margin:0;
  }
  
  .license-card:hover{
    transform:translateY(-10px);
    box-shadow:
      0 25px 60px rgba(109,40,217,.18),
      0 0 0 1px rgba(109,40,217,.15);
  }
  
  .license-card:hover img{
    transform:scale(1.08);
  }
  
  .glass{
    position:absolute;
    inset:0;
    background:
      linear-gradient(120deg,rgba(255,255,255,.35),transparent 40%);
    pointer-events:none;
  }
  
  /* ✅ Responsive */
  
  @media(max-width:1000px){
    .licenses-grid{
      grid-template-columns:repeat(2,1fr);
    }
  }
  
  @media(max-width:650px){
    .licenses-pro{
      padding:70px 0 50px;
    }
  
    .licenses-grid{
      grid-template-columns:1fr;
      gap:22px;
    }
  
    .license-card{
      padding:35px 20px;
    }
  }

  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:24px;
  }
/* کانتینر اصلی با پس‌زمینه گرادینت سرمه‌ای */
.zarin-hero-section {
  position: relative;
  background: linear-gradient(135deg, #0a0e1c 0%, #1a237e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  overflow: hidden;
  padding: 60px 20px;
}

/* ذرات متحرک */
.zarin-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
      radial-gradient(circle at 20% 20%, rgba(79, 155, 255, 0.3) 1px, transparent 1px),
      radial-gradient(circle at 80% 80%, rgba(90, 180, 255, 0.2) 2px, transparent 2px),
      radial-gradient(circle at 50% 50%, rgba(120, 210, 255, 0.15) 3px, transparent 3px);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  animation: zarinParticleMove 30s linear infinite;
}

/* امواج متحرک */
.zarin-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 250px;
  z-index: 1;
}

.zarin-wave {
  position: absolute;
  width: 200%;
  height: 250px;
  left: 0;
  border-radius: 45%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.zarin-wave1 { bottom: -80px; animation: zarinWaveMove 18s linear infinite; }
.zarin-wave2 { bottom: -110px; opacity: 0.5; animation: zarinWaveMove 25s linear infinite reverse; }
.zarin-wave3 { bottom: -140px; opacity: 0.3; animation: zarinWaveMove 32s linear infinite; }

/* انیمیشن‌های ذرات و امواج */
@keyframes zarinParticleMove {
  from { transform: translateY(0); }
  to { transform: translateY(-400px); }
}

@keyframes zarinWaveMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* انیمیشن شناور تصویر */
@keyframes zarinFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* بخش محتوا و تصویر */
.zarin-container {
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  z-index: 2; /* برای اینکه روی امواج و ذرات قرار بگیرد */
}

.zarin-content h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 20px;
  text-shadow: 0 0 25px rgba(59, 130, 246, 0.6); /* سایه برای خوانایی بهتر */
}

.zarin-content p {
  font-size: 1.1rem;
  color: #b0bec5;
  margin-bottom: 30px;
  line-height: 1.8;
}

.zarin-cta {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(90deg, #4094f4, #2671e6); /* گرادینت آبی برای دکمه */
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s;
  box-shadow: 0 8px 15px rgba(41, 98, 255, 0.3);
}

.zarin-cta:hover {
  background: linear-gradient(90deg, #50a4f5, #3681e7);
  box-shadow: 0 10px 20px rgba(41, 98, 255, 0.4);
  transform: translateY(-2px);
}

.zarin-visual img {
  width: 100%;
  max-width: 500px;
  animation: zarinFloat 6s ease-in-out infinite;
}

/* آیکون اسکرول پایین */
.zarin-scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  opacity: 0.7;
  z-index: 3; /* بالاترین لایه */
  animation: zarinScrollBounce 2s ease-in-out infinite;
}

@keyframes zarinScrollBounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50% { transform: translate(-50%, -10px); opacity: 1; }
}

/* واکنش‌گرایی */
@media (max-width: 768px) {
  .zarin-container { grid-template-columns: 1fr; text-align: center; }
  .zarin-content h1 { font-size: 2.5rem; }
  .zarin-visual img { max-width: 300px; margin: 20px auto; }
}