/* Base reset */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Arabic", sans-serif; background:#f8fafc; color:#0f172a; direction: rtl; }

/* Layout */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.header-top { background:#0b3b2e; color:#e2e8f0; font-size: 14px; }
.header-top .wrap { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:8px 0; flex-wrap: wrap; }
.header-top a { color:#e2e8f0; text-decoration:none; }

.navbar { background:#ffffff; border-bottom:1px solid #e2e8f0; position: sticky; top:0; z-index: 50; }
.navbar .wrap { display:flex; align-items:center; justify-content:space-between; padding-block: 14px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; color:#0b3b2e; text-decoration:none; }
.brand img { width:40px; height:40px; object-fit:cover; border-radius:8px; }
.nav { display:flex; gap:16px; flex-wrap:wrap; }
.nav a { color:#0f172a; text-decoration:none; padding:8px 12px; border-radius:8px; }
.nav a:hover, .nav a.active { background:#e8f5ee; color:#0b3b2e; }
.menu-toggle { display:none; }

/* Hero */
.hero { background: linear-gradient(180deg, #e8f5ee, #ffffff); border-bottom:1px solid #e2e8f0; }
.hero .wrap { display:grid; grid-template-columns: 1fr; gap:20px; padding-block: 40px; }
.hero h1 { margin:0; font-size: clamp(28px, 4vw, 40px); color:#0b3b2e; }
.hero p.lead { margin:8px 0 0; font-size:18px; color:#334155; }
.hero .cta { margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.btn { padding:10px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600; text-decoration:none; display:inline-block; }
.btn.primary { background:#0b3b2e; color:#e2e8f0; }
.btn.outline { background:#ffffff; color:#0b3b2e; border-color:#0b3b2e; }
.btn:hover { opacity:.95; }

/* Sections */
.section { padding-block: 40px; }
.section h2 { margin:0 0 16px; color:#0b3b2e; font-size: clamp(22px, 3.2vw, 28px); }
.section p { color:#334155; line-height:1.9; }

/* Services grid */
.services { display:grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap:16px; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } }
.card { background:#ffffff; border:1px solid #e2e8f0; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.card h3 { margin:0; color:#0b3b2e; font-size:20px; }
.card p { margin:0; font-size:14px; color:#475569; }
.card a { margin-top:8px; color:#0b3b2e; font-weight:600; text-decoration:none; }
.card a:hover { text-decoration:underline; }

/* Lists */
.list { margin:0; padding-right: 18px; color:#334155; }
.list li { margin:6px 0; }

/* Articles */
.articles { display:grid; grid-template-columns: repeat(1, 1fr); gap:16px; }
@media (min-width: 768px) { .articles { grid-template-columns: repeat(2, 1fr); } }
.article { background:#ffffff; border:1px solid #e2e8f0; border-radius:14px; padding:16px; }
.article h3 { margin:0 0 6px; font-size:18px; color:#0b3b2e; }
.article .meta { color:#64748b; font-size:12px; margin-bottom:6px; }

/* Responsive navbar */
@media (max-width: 767px) {
  .navbar .wrap { position: relative; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; font-size:20px; padding:6px 10px; border-radius:8px; border:1px solid #e2e8f0; background:#ffffff; color:#0b3b2e; }
  .nav { display:none; position:absolute; inset-inline: 0; top:100%; background:#ffffff; border-bottom:1px solid #e2e8f0; padding:8px 16px 12px; flex-direction:column; gap:8px; }
  .nav.open { display:flex; }
}

@media (min-width: 768px) {
  .menu-toggle { display:none; }
  .nav { display:flex !important; position: static; background: transparent; border: 0; padding: 0; flex-direction: row; }
}

/* Footer */
.footer { background:#0b3b2e; color:#dbeafe; padding-block:24px; margin-top: 24px; }
.footer a { color:#dbeafe; text-decoration:none; }
.footer small { color:#94a3b8; }

/* Utilities */
.muted { color:#64748b; }
.divider { height:1px; background:#e2e8f0; margin: 24px 0; }
.hidden { display:none; }