/* styles.css */
/* فایل استایل اصلی */
/* نگاشت بخش‌ها: مشابه کامنت‌های index.php */
/* هدف viewport width: 1366px */
/* :root -> متغیرهای رنگ/فاصله/فونت */
:root{
  --viewport-width:1366px;
  --container-width:1200px;

  /* رنگ‌ها (استخراج تقریبی از اسکرین‌شات) */
  --color-primary: #30A878;    /* سبز اصلی کارت‌ها */
  --color-primary-2: #2f9b6d;
  --color-bg: #e3f7ef;         /* پس‌زمینه سبز روشن */
  --color-bg-2:#ebf9f4;        /* لایه‌های روشن‌تر */
  --text-dark: #123b33;
  --text-muted: #6b7a75;
  --card-bg: #ffffff;
  --accent: #00a78f;

  /* تایپوگرافی */
  --font-family: "Vazirmatn", "IRANSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --h1-size: 36px;
  --h2-size: 28px;
  --h3-size: 18px;

  /* فواصل اصلی */
  --gutter: 24px;
  --container-pad: 28px;
}

/* فونت محلی اگر woff2 موجود است */
@font-face{
  font-family: "Vazirmatn";
  src: url('assets/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* پایه و layout */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:var(--font-family);
  color:var(--text-dark);
  background:linear-gradient(180deg,var(--color-bg) 0%, #fff 1200px);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction: rtl; /* مهم: فارسی */
}

/* کانتینر مرکزی */
.container{
  width:var(--container-width);
  max-width:calc(100% - 40px);
  margin:0 auto;
  padding: 0 var(--container-pad);
}

/* Header */
/* header: logo + nav (screenshot area: top bar) */
.site-header{
  height:72px;
  display:flex;
  align-items:center;
  background:transparent;
  position:sticky;
  top:0;
  z-index:10;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{display:block; width:140px; height:40px}

/* nav */
.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
}
.main-nav a{
  color:var(--text-dark);
  text-decoration:none;
  font-size:15px;
  padding:8px 10px;
}
.btn-signup{
  background:var(--color-primary);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  font-weight:600;
}

/* HERO */
/* hero: تیتر اصلی + سه کارت (screenshot area: large top green area with illustrations) */
.hero{
  padding:40px 0 60px;
  background:
    radial-gradient(1000px 300px at 10% 0%, rgba(48,168,120,0.06), transparent 20%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-2) 100%);
  min-height:520px;
  display:flex;
  align-items:flex-start;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.hero-headline h1{
  font-size:var(--h1-size);
  margin:0 0 8px;
  color:var(--text-dark);
  letter-spacing:0.2px;
}
.lead{margin:0;color:var(--text-muted);font-size:16px}

/* کارت‌های هیرو */
.hero-cards{
  display:flex;
  gap:24px;
  margin-top:22px;
}
.card{
  background:linear-gradient(180deg,#ffffff 0%, #f8fffb 100%);
  border-radius:18px;
  padding:18px;
  width:320px;          /* اندازه هر کارت طبق اسکرین‌شات */
  height:220px;         /* ارتفاع ثابت برای هماهنگی */
  box-shadow: 0 8px 20px rgba(12,50,40,0.06);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
}
.card img{ width:100%; height:120px; object-fit:cover; border-radius:12px; margin-bottom:12px;}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; font-size:14px; color:var(--text-muted)}

/* stats */
/* stats: اعداد و آمار (screenshot area: زیر کارت‌ها) */
.stats{
  padding:28px 0;
}
.stats-inner{
  display:flex;
  gap:28px;
  justify-content:space-between;
  align-items:center;
  background:transparent;
}
.stat{ text-align:center; padding:8px 18px; min-width:200px}
.stat .num{ font-size:22px; font-weight:700; color:var(--color-primary-2)}
.stat .label{ font-size:13px; color:var(--text-muted)}

/* how-it-works */
/* how-it-works: روند شروع مشاوره (screenshot area: وسط با تصویر رابط کاربری) */
.how-it-works{ padding:48px 0; background: #fff; }
.how-inner{ display:flex; gap:30px; align-items:center; }
.how-text{ flex:1; max-width:640px; }
.how-text h2{ font-size:26px; margin:0 0 12px; }
.how-text ol{ padding-left:18px; margin:0 0 16px; color:var(--text-muted) }
.btn-primary{
  display:inline-block;
  background:var(--color-primary);
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}
.how-image{ width:420px; flex:0 0 420px; }

/* result-driven (chart) */
/* chart-section: نمودار/نتیجه‌محور (screenshot area: چپ نمودار و متن راست) */
.result-driven{ padding:40px 0; background:var(--color-bg-2); }
.result-inner{ display:flex; gap:26px; align-items:center; padding:26px 0; }
.chart-card{ width:360px; min-width:360px; background:var(--card-bg); border-radius:14px; padding:18px; box-shadow: 0 6px 18px rgba(10,40,30,0.04); }
.result-text{ flex:1; padding:18px; }

/* experts grid */
/* experts-grid: شبکه تصاویر مشاوران (screenshot area: شبکه عکس‌ها) */
.experts{ padding:46px 0; background:#fff; }
.experts-inner h2{ text-align:center; margin-bottom:20px; font-size:22px; }
.grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:14px;
  justify-items:center;
  align-items:center;
}
.expert img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(10,40,30,0.06);
}

/* compare table */
/* compare: جدول مقایسه (screenshot area: جدول با ستون مرکزی برجسته) */
.compare{ padding:54px 0; background:var(--color-bg); }
.compare-inner{ text-align:center; }
.compare-table{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:flex-start;
  margin-top:18px;
}
.compare-table .col{ background:#fff; padding:18px; border-radius:12px; min-width:240px; }
.compare-table .col.simia{ background:linear-gradient(180deg,#f3fff8,#e9fff2); box-shadow: 0 8px 18px rgba(32,120,80,0.06); }
.compare .badge{ font-weight:700; padding:8px 12px; margin-bottom:8px; display:inline-block; }

/* faq */
/* faq: سوالات متداول (screenshot area: بند سوالات) */
.faq{ padding:36px 0; background:#f7fdfb; }
.faq-inner details{ margin:10px 0; background:#fff; border-radius:8px; padding:12px; }
.faq-inner summary{ cursor:pointer; font-weight:600; }

/* cta-bottom */
.cta-bottom{ padding:46px 0; background:#fff; text-align:center; }
.cta-inner h2{ font-size:24px; margin:0 0 12px; }
.btn-primary.large{ padding:14px 28px; font-size:18px; border-radius:12px; }

/* footer */
.site-footer{ padding:30px 0; background:transparent; color:var(--text-muted); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; font-size:14px; }

/* Responsive (اولویت: پیکسل-پرفکت در عرض 1366، ولی واکنش‌گرا هم هست) */
@media (max-width:1200px){
  :root{ --container-width:1000px; }
  .grid{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width:900px){
  :root{ --container-width:760px; }
  .hero-cards{ flex-direction:column; gap:18px; align-items:center; }
  .grid{ grid-template-columns: repeat(4, 1fr); }
  .how-inner{ flex-direction:column-reverse; align-items:center; text-align:center; }
  .result-inner{ flex-direction:column; align-items:center; }
}
@media (max-width:480px){
  :root{ --container-width:100%; }
  .header-inner{ padding:0 14px; }
  .main-nav ul{ display:none; } /* منوی موبایل: ساده شده */
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .hero{ min-height: auto; padding-bottom:30px; }
}

/* دسترسی / سئو */
/* اطمینان حداقلی از کنتراست: متن اصلی روی پس‌زمینه روشن (color-primary روی سفید) */