body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      background: #f9fafb;
    }

    /* Header */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      background: #fff;
      border-bottom: 1px solid #eee;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo img {
      height: 32px;
    }

    nav {
      display: flex;
      gap: 25px;
      align-items: center;
      margin: 0 auto;
    }

    nav a {
      text-decoration: none;
      color: #222;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: 0.3s;
    }

    nav a:hover {
      color: #6366f1;
    }

    .dropdown {
      position: relative;
    }

    .dropdown > a::after {
      content: " \25BE";
      font-size: 0.6rem;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      z-index: 10;
      display: grid;
      grid-template-columns: repeat(2, max-content);
      gap: 10px 30px;
      white-space: nowrap;
      border-radius: 8px;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .dropdown:hover .dropdown-content {
      display: grid;
      visibility: visible;
      opacity: 1;
    }

    .dropdown-content a {
      color: #333;
      font-size: 0.95rem;
    }

    .auth-buttons {
      display: flex;
      gap: 10px;
    }

    .auth-buttons button {
      padding: 8px 18px;
      border-radius: 6px;
      border: 1px solid #3b82f6;
      background: #fff;
      color: #3b82f6;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .auth-buttons button:hover {
      background: #3b82f6;
      color: #fff;
    }

    .menu-toggle {
      display: none;
      font-size: 1.8rem;
      cursor: pointer;
    }

    @media (max-width: 992px) {
      nav {
        gap: 15px;
      }
    }

    @media (max-width: 768px) {
      header {
        flex-wrap: wrap;
      }

      .menu-toggle {
        display: block;
      }

      nav {
        display: none;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }

      nav.active {
        display: flex;
      }

      .auth-buttons {
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }

      .dropdown-content {
        position: static;
        box-shadow: none;
        padding: 10px 0;
        grid-template-columns: 1fr;
        visibility: visible;
        opacity: 1;
        display: none;
      }

      .dropdown.open .dropdown-content {
        display: grid;
      }

      .dropdown > a::after {
        content: " \25BC";
      }
    }

    /* Footer */
    footer {
      background-color: #0f172a;
      color: #e2e8f0;
      padding: 50px 30px 20px;
      font-size: 0.95rem;
      margin-top: 60px;
    }

    .footer-container {
      max-width: 1100px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;
    }

    .footer-logo {
      flex: 1 1 220px;
    }

    .footer-logo img {
      height: 36px;
      margin-bottom: 15px;
    }

    .footer-logo p {
      color: #94a3b8;
      line-height: 1.6;
      margin: 0;
    }

    .footer-links {
      flex: 1 1 180px;
    }

    .footer-links h4 {
      font-size: 1rem;
      margin-bottom: 15px;
      color: #f1f5f9;
    }

    .footer-links a {
      display: block;
      color: #cbd5e1;
      text-decoration: none;
      margin-bottom: 8px;
      transition: color 0.3s ease;
    }

    .footer-links a:hover {
      color: #38bdf8;
    }

    .footer-social {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 15px;
    }

    .footer-social a {
      color: #94a3b8;
      font-size: 1.2rem;
      transition: color 0.3s ease;
    }

    .footer-social a:hover {
      color: #3b82f6;
    }

    .footer-bottom {
      text-align: center;
      margin-top: 40px;
      border-top: 1px solid #1e293b;
      padding-top: 15px;
      color: #64748b;
      font-size: 0.85rem;
    }

    /* Hero Section */
.hero-wrap {
  position: relative;
  background: #f1f5f9;
  overflow: hidden;
  border-bottom: 1px solid #e5e7eb;
}

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px 40px;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #0f172a;
}

.hero p {
  color: #475569;
  margin: 0 auto 28px;
  max-width: 720px;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 100px auto 10px;
}

.benefit {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 20px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
}

.benefit .icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0f2fe;
  margin-bottom: 12px;
}

.benefit h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #0f172a;
}

.benefit p {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.6;
}

.benefit i {
  font-size: 22px;
}

/* Responsive */
@media (max-width: 900px) {
  .benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .benefits { grid-template-columns: 1fr; }
}

/* Floating decoration images (from images/home/) */
.deco {
  position: absolute;
  opacity: 0.15;
  filter: grayscale(10%);
}
.deco.deco-1 { top: 20px; left: 6%; width: 80px; }
.deco.deco-2 { top: 40px; right: 6%; width: 72px; }
.deco.deco-3 { bottom: 60px; left: 14%; width: 90px; }
.deco.deco-4 { bottom: 30px; right: 14%; width: 92px; }

  /* Why Choose Insget Section */
.why-insget {
  background: #ffffff;
  padding: 80px 20px;
}

.why-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.why-text h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  font-weight: 700;
  color: #0f172a;
}

.why-text h2 span {
  color: #3b82f6;
}

.why-text p {
  font-size: 1.05rem;
  color: #475569;
  margin-bottom: 25px;
  line-height: 1.6;
}

.why-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-text ul li {
  font-size: 1rem;
  color: #334155;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.why-text ul li i {
  font-size: 1.2rem;
  color: #3b82f6;
}

.why-image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Responsive */
@media (max-width: 900px) {
  .why-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .why-text ul li {
    justify-content: center;
  }
}

  /* Tools Carousel */

  :root{
  --tools-gap:16px;
  --tools-radius:16px;
  --tools-border:#e5e7eb;
  --tools-shadow:0 8px 24px rgba(2,6,23,.05);
  --tools-shadow-hover:0 16px 32px rgba(2,6,23,.08);
  --title:#0f172a;
  --muted:#64748b;
}

/* Section */
.tools-section{padding:60px 20px;background:#fff}
.tools-head{
  max-width:1200px;margin:0 auto 16px;
  display:flex;align-items:center;gap:12px
}
.tools-head h2{margin:0;font-size:2rem;color:var(--title)}
.tools-nav{margin-left:auto;display:flex;gap:8px}
.tools-nav button{
  width:40px;height:40px;border-radius:10px;cursor:pointer;
  border:1px solid #e2e8f0;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:.2s
}
.tools-nav button:hover{background:#f1f5f9}

/* Track (scrollable + hidden scrollbar) */
.tools-track{
  --per-view:2; /* mobile default */
  max-width:1200px;margin:0 auto;
  display:flex;gap:var(--tools-gap);
  overflow-x:auto;               /* اسکرول فعال */
  scroll-snap-type:x proximity;  /* اسنپ نرم */
  -webkit-overflow-scrolling:touch;
  padding:6px 2px;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* IE/old Edge */
  cursor:grab;
}
.tools-track::-webkit-scrollbar{display:none} /* Chrome/Safari */
.tools-track.dragging{cursor:grabbing}

/* Cards */
.tool-card{
  scroll-snap-align:start;
  flex:0 0 calc( (100% - (var(--tools-gap) * (var(--per-view) - 1))) / var(--per-view) );
  background:#fff;border:1px solid var(--tools-border);border-radius:var(--tools-radius);
  padding:20px;text-decoration:none;box-shadow:var(--tools-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  color:var(--title)
}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--tools-shadow-hover);border-color:#dbe3ea}
.tool-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-color:#3b82f6}

.tool-card img{width:54px;height:54px;object-fit:contain;margin-bottom:12px;display:block}
.tool-card h3{font-size:1.05rem;margin:0 0 6px}
.tool-card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}

/* Breakpoints: mobile 2, tablet 3, desktop 4 */
@media (min-width:700px){
  .tools-track{ --per-view:3; }
}
@media (min-width:1024px){
  .tools-track{ --per-view:4; }
}

/* ===== Testimonials ===== */
.testimonials{padding:70px 20px;background:#ffffff}
.tm-title{margin:0 0 26px;text-align:center;font-size:2rem;color:#0f172a}

.tm-wrapper{
  max-width:1100px;margin:0 auto;position:relative;
  padding:10px 64px; /* space for arrows */
}
.tm-track{
  display:flex;gap:22px;overflow:hidden;scroll-snap-type:x mandatory;
}
.tm-card{
  scroll-snap-align:center;
  flex:0 0 100%;
  background:#fff;border:1px solid #e5e7eb;border-radius:18px;
  box-shadow:0 12px 30px rgba(2,6,23,.06);
  padding:28px 26px;text-align:center;
}
.tm-stars{color:#f59e0b;font-size:18px;margin-bottom:14px}
.tm-text{color:#334155;line-height:1.7;max-width:820px;margin:0 auto 18px}
.tm-user{display:inline-flex;align-items:center;gap:12px}
.tm-user img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.tm-user h4{margin:0;font-size:1rem;color:#0f172a}
.tm-user span{display:block;color:#64748b;font-size:.9rem}

.tm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:12px;border:1px solid #e2e8f0;
  background:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 16px rgba(2,6,23,.08);
  transition:.2s;
}
.tm-nav:hover{background:#f8fafc}
.tm-prev{left:12px}
.tm-next{right:12px}

.tm-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.tm-dots button{
  width:8px;height:8px;border-radius:999px;border:0;background:#cbd5e1;cursor:pointer;
  transition:.2s
}
.tm-dots button.active{background:#0ea5e9;width:18px}

@media (max-width:700px){
  .tm-wrapper{padding:6px 52px}
  .tm-card{padding:22px 18px}
  .tm-text{font-size:.98rem}
}

/* ===== FAQ (Accordion) ===== */
:root{
  --faq-max: 980px;
  --faq-border: #e5e7eb;
  --faq-bg: #ffffff;
  --faq-muted: #64748b;
  --faq-title: #0f172a;
  --faq-accent: #3b82f6;
  --faq-radius: 14px;
  --faq-shadow: 0 10px 30px rgba(2,6,23,.06);
}

.faq-section{padding:70px 20px;background:#fff}
.faq-title{margin:0 0 26px;text-align:center;font-size:2rem;color:var(--faq-title)}
.faq-container{max-width:var(--faq-max);margin:0 auto}

.faq-item{
  background:var(--faq-bg);
  border:1px solid var(--faq-border);
  border-radius:var(--faq-radius);
  box-shadow:var(--faq-shadow);
  margin-bottom:14px;
  overflow:hidden;
}

.faq-question{
  width:100%;
  background:transparent;
  border:0;
  padding:18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  font-size:1.02rem;
  color:#0f172a;
}
.faq-question span{display:flex;align-items:center;gap:10px}
.faq-question i.bi-question-circle{color:var(--faq-accent)}
.faq-toggle{transition:transform .2s ease}

.faq-answer{
  padding:0 18px 0 44px;
  color:var(--faq-muted);
  line-height:1.65;
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease, padding-top .28s ease, padding-bottom .28s ease;
}

/* Active */
.faq-item.active .faq-answer{
  padding:0 18px 18px 44px;
  max-height:260px; /* enough for most answers */
}
.faq-item.active .faq-toggle{
  transform:rotate(45deg); /* plus -> times */
}

/* Hover state */
.faq-item:hover{
  border-color:#dbe3ea;
  box-shadow:0 14px 34px rgba(2,6,23,.08);
}

/* Responsive */
@media (max-width:640px){
  .faq-question{padding:16px}
  .faq-answer{padding-left:38px}
}

/* ===== Stats / Counters ===== */
:root{
  --st-title:#0f172a; --st-muted:#64748b; --st-border:#e5e7eb;
}
.stats-section{padding:80px 20px;background:#ffffff}
.stats-head{text-align:center;margin-bottom:34px}
.stats-head h2{margin:0 0 8px;font-size:2rem;color:var(--st-title);letter-spacing:.3px}
.stats-head p{margin:0;color:var(--st-muted)}

.stats-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.stat-card{
  background:#fff;border:1px solid var(--st-border);border-radius:18px;
  padding:28px 18px;text-align:center;box-shadow:0 10px 28px rgba(2,6,23,.06);
}
.stat-value{
  font-size:2.8rem;font-weight:800;letter-spacing:.5px;color:#0f172a;
  line-height:1;margin-bottom:10px
}
.stat-label{color:var(--st-muted);font-size:.98rem}

@media (max-width:1024px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-value{font-size:2.2rem}
}
@media (max-width:480px){
  .stats-grid{grid-template-columns:1fr}
}