@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f5f9fc;
  --surface: #ffffff;
  --surface-soft: #f3f8fb;
  --line: #e1ebf1;
  --text: #102a4f;
  --muted: #6a7d94;
  --teal: #0bb79b;
  --teal-2: #48dec4;
  --blue: #2b8ef3;
  --shadow: 0 12px 38px rgba(31, 70, 100, .08);
  --radius: 22px;
  --sidebar: 254px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  direction: rtl;
  background: radial-gradient(circle at 12% 8%, #eaf8ff 0, transparent 28%), var(--bg);
  color: var(--text);
  font-family: Vazirmatn, Tahoma, Arial, sans-serif;
  line-height: 1.75;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }

.site-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 0 0 auto; width: var(--sidebar); z-index: 30;
  background: rgba(255,255,255,.95); backdrop-filter: blur(18px);
  border-left: 1px solid var(--line); padding: 24px 16px 20px;
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 20px; }
.brand-mark { width: 42px; height: 42px; position: relative; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(27,169,177,.18)); }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; inset:0; border-radius: 12px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.brand-mark::before { background: linear-gradient(145deg,#1ad1ab,#2e97ff); }
.brand-mark::after { inset:7px; background:#effdf9; clip-path: polygon(50% 0,100% 25%,50% 49%,0 25%); opacity:.96; }
.brand-text strong { display:block; direction:ltr; text-align:right; font-size:1.2rem; line-height:1.2; }
.brand-text span { font-size:.72rem; color:var(--muted); }
.nav-list { display:grid; gap:6px; margin-top:10px; }
.nav-link { display:flex; align-items:center; gap:13px; min-height:52px; padding:0 15px; border-radius:15px; color:#2d4869; font-weight:600; transition:.2s; }
.nav-link:hover { background:#f4fbfa; color:#087d6d; }
.nav-link.active { background:linear-gradient(90deg,#ddfaf4,#edfdf9); color:#087d6d; box-shadow: inset -4px 0 0 var(--teal); }
.nav-icon { width:22px; height:22px; flex:0 0 auto; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-spacer { flex:1; }
.sidebar-card { padding:16px; background:linear-gradient(145deg,#f4fffc,#f4f9ff); border:1px solid #e3f0f2; border-radius:18px; }
.sidebar-card strong { display:block; margin-bottom:4px; }
.sidebar-card p { margin:0; color:var(--muted); font-size:.84rem; }

.main { margin-right: var(--sidebar); min-width:0; }
.container { width:min(1180px, calc(100% - 44px)); margin-inline:auto; }
.topbar { height:78px; display:flex; align-items:center; gap:14px; }
.search-wrap { position:relative; flex:0 1 520px; margin-left:auto; }
.search-wrap input { width:100%; height:48px; border:1px solid var(--line); border-radius:15px; padding:0 48px 0 18px; background:#edf4f8; color:var(--text); outline:none; transition:.2s; }
.search-wrap input:focus { background:#fff; border-color:#9bded2; box-shadow:0 0 0 4px rgba(11,183,155,.08); }
.search-wrap svg { position:absolute; right:16px; top:13px; width:22px; height:22px; stroke:#2e496c; fill:none; stroke-width:2; }
.top-action { height:48px; display:inline-flex; align-items:center; gap:8px; padding:0 18px; border-radius:14px; color:#064b43; background:linear-gradient(135deg,#91f0dd,#5ee0c4); font-weight:700; border:0; box-shadow:0 8px 20px rgba(11,183,155,.12); }

.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; min-height:360px; padding:34px 42px; border:1px solid #dcedf4; border-radius:26px; background:linear-gradient(135deg,#f2fbff 0,#e9f8ff 46%,#e9fbf7 100%); box-shadow:var(--shadow); }
.hero::after { content:""; position:absolute; width:360px; height:360px; left:35%; bottom:-260px; border-radius:50%; background:rgba(73,222,196,.14); filter:blur(2px); }
.hero-content { position:relative; z-index:2; padding-left:20px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#087d6d; font-weight:700; font-size:.82rem; background:#e8fbf6; border:1px solid #c8eee6; border-radius:999px; padding:5px 11px; }
h1 { margin:12px 0 10px; font-size:clamp(2rem,4vw,3.55rem); line-height:1.15; letter-spacing:-.03em; }
h1 .accent { color:var(--teal); }
.hero h2 { margin:0 0 12px; font-size:clamp(1.25rem,2vw,1.75rem); line-height:1.55; }
.hero p { color:var(--muted); margin:0 0 22px; max-width:630px; }
.actions { display:flex; flex-wrap:wrap; gap:11px; }
.btn { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; border-radius:13px; border:1px solid transparent; font-weight:700; transition:.2s; }
.btn-primary { background:linear-gradient(135deg,var(--teal),#049e8a); color:#fff; box-shadow:0 10px 22px rgba(11,183,155,.18); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(11,183,155,.25); }
.btn-ghost { background:rgba(255,255,255,.78); border-color:#66cdbd; color:#087d6d; }
.btn-ghost:hover { background:#fff; }
.hero-visual { position:relative; z-index:1; min-height:285px; display:flex; align-items:center; justify-content:center; }
.hero-visual img { width:min(100%,610px); border-radius:22px; mix-blend-mode:multiply; }
.hero-chips { display:flex; gap:18px; margin-top:22px; flex-wrap:wrap; color:#4f6680; font-size:.85rem; }
.hero-chip { display:flex; align-items:center; gap:7px; }
.hero-chip b { color:#0a907d; }

.section { padding:38px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.section-head h2 { margin:0; font-size:1.55rem; }
.section-head p { margin:5px 0 0; color:var(--muted); font-size:.91rem; }
.link-inline { color:#1288d8; font-weight:700; font-size:.9rem; }

.tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:6px; background:#edf4f8; border:1px solid #e2ebf0; border-radius:16px; margin-bottom:18px; }
.tab { min-height:44px; border:0; border-radius:12px; background:transparent; color:#5b6f85; font-weight:700; transition:.2s; }
.tab:hover { background:rgba(255,255,255,.65); }
.tab.active { background:linear-gradient(135deg,#a3f1e1,#72e4ca); color:#075e54; box-shadow:0 5px 12px rgba(11,183,155,.09); }

.apps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.app-card { background:var(--surface); border:1px solid var(--line); border-radius:19px; padding:18px; box-shadow:0 8px 24px rgba(36,73,99,.05); display:flex; flex-direction:column; min-height:220px; transition:.2s; }
.app-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfe3ea; }
.app-top { display:flex; align-items:flex-start; gap:13px; }
.app-icon { width:62px; height:62px; flex:0 0 auto; border-radius:17px; display:grid; place-items:center; color:#fff; box-shadow:0 10px 18px rgba(18,65,95,.12); }
.app-icon svg { width:34px; height:34px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-green { background:linear-gradient(145deg,#85cf4f,#3ca652); }
.icon-blue { background:linear-gradient(145deg,#36c8ff,#1478e8); }
.icon-red { background:linear-gradient(145deg,#f37a83,#d53455); }
.icon-purple { background:linear-gradient(145deg,#39a6ff,#6a35f2); }
.app-card h3 { margin:1px 0 4px; direction:ltr; text-align:right; font-size:1rem; }
.app-card p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.75; }
.app-meta { margin-top:auto; padding-top:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; background:#f1f7f9; border:1px solid #e0ebef; color:#526b83; font-size:.73rem; }
.card-go { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; background:#eff5f8; color:#244e75; }
.card-go:hover { background:#e0f7f1; color:#087d6d; }
.empty { grid-column:1/-1; padding:30px; text-align:center; background:#fff; border:1px dashed #cadbe4; border-radius:18px; color:var(--muted); }

.accordion { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 7px 20px rgba(27,64,90,.04); }
.acc-item + .acc-item { border-top:1px solid #e6eef2; }
.acc-btn { width:100%; min-height:66px; padding:12px 18px; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; border:0; background:#fff; color:var(--text); text-align:right; }
.acc-btn:hover { background:#fbfefe; }
.acc-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#ebfaf6; color:#0b9d88; }
.acc-title strong { display:block; }
.acc-title span { display:block; margin-top:2px; color:var(--muted); font-size:.8rem; font-weight:400; }
.acc-chev { transition:.2s; color:#3e5d7c; }
.acc-item.open .acc-chev { transform:rotate(180deg); }
.acc-panel { max-height:0; overflow:hidden; transition:max-height .28s ease; background:#fbfdfe; }
.acc-panel-inner { padding:0 66px 18px 28px; color:#5d7187; font-size:.9rem; }
.acc-panel a { color:#0b8e7b; font-weight:700; }

.page-hero { padding:34px 0 18px; }
.page-hero-card { padding:30px 34px; border-radius:24px; border:1px solid #deebf1; background:linear-gradient(135deg,#fff,#effaff); box-shadow:var(--shadow); }
.page-hero h1 { font-size:clamp(1.8rem,3.5vw,2.8rem); margin:0 0 6px; }
.page-hero p { margin:0; color:var(--muted); max-width:780px; }
.content-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 8px 24px rgba(32,72,97,.04); }
.content-card h2:first-child, .content-card h3:first-child { margin-top:0; }
.content-card p, .content-card li { color:#5b7086; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feature { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; }
.feature strong { display:block; margin-bottom:5px; }
.feature p { margin:0; color:var(--muted); font-size:.88rem; }
.details-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; align-items:start; }
.info-list { list-style:none; padding:0; margin:0; }
.info-list li { padding:10px 0; border-bottom:1px solid #e9eff2; display:flex; justify-content:space-between; gap:12px; }
.info-list li:last-child { border-bottom:0; }
.info-list b { color:var(--text); }
.callout { padding:16px 18px; background:#effbf8; border:1px solid #c9eee5; border-radius:15px; color:#33685f; }
.form-grid { display:grid; gap:14px; }
.field label { display:block; font-weight:700; margin-bottom:6px; }
.field input, .field textarea, .field select { width:100%; border:1px solid #dbe7ed; background:#f8fbfd; border-radius:13px; padding:12px 14px; outline:none; }
.field textarea { min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus { border-color:#8bd9ca; box-shadow:0 0 0 4px rgba(11,183,155,.07); background:#fff; }
.status { margin-top:10px; color:#087d6d; font-size:.88rem; }

.footer { margin-top:38px; background:#fff; border-top:1px solid var(--line); }
.footer-inner { min-height:118px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.footer-brand { display:flex; align-items:center; gap:10px; direction:ltr; justify-self:end; }
.footer-brand .brand-mark { width:34px; height:34px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; color:#556c83; font-size:.88rem; }
.footer-copy { justify-self:start; color:#7a8ba0; font-size:.78rem; }

.mobile-top { display:none; }
.mobile-nav { display:none; }
.menu-toggle { border:0; background:#eef6f8; width:44px; height:44px; border-radius:12px; }

.toast { position:fixed; left:24px; bottom:24px; z-index:60; background:#0b2a46; color:#fff; padding:12px 16px; border-radius:13px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translateY(0); }

@media (max-width: 1080px) {
  :root { --sidebar: 220px; }
  .hero { grid-template-columns:1fr; padding:30px; }
  .hero-content { padding-left:0; }
  .hero-visual { min-height:220px; margin-top:10px; }
  .hero-visual img { width:min(100%,680px); }
  .apps-grid { grid-template-columns:repeat(2,1fr); }
  .feature-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 780px) {
  body { padding-bottom:72px; }
  .sidebar { display:none; }
  .main { margin-right:0; }
  .container { width:min(100% - 26px, 680px); }
  .mobile-top { height:68px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:25; background:rgba(245,249,252,.9); backdrop-filter:blur(14px); }
  .mobile-top .brand { padding:0; }
  .mobile-top .brand-text span { display:none; }
  .topbar { height:auto; padding:4px 0 14px; flex-direction:column; align-items:stretch; }
  .search-wrap { flex:1; width:100%; margin:0; }
  .top-action { display:none; }
  .hero { padding:24px 20px; min-height:0; border-radius:20px; }
  .hero-visual { order:2; min-height:0; margin-top:20px; }
  .hero h1 { font-size:2.15rem; }
  .hero-chips { gap:10px 16px; }
  .section { padding:28px 0; }
  .section-head { align-items:flex-start; }
  .tabs { grid-template-columns:repeat(2,1fr); }
  .apps-grid { grid-template-columns:1fr; }
  .app-card { min-height:190px; }
  .details-layout { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; padding:24px 0; text-align:center; }
  .footer-brand, .footer-copy { justify-self:center; }
  .footer-brand { order:1; }
  .footer-links { order:2; }
  .footer-copy { order:3; }
  .mobile-nav { position:fixed; z-index:50; left:10px; right:10px; bottom:10px; height:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:rgba(255,255,255,.95); backdrop-filter:blur(16px); border:1px solid #dce8ed; border-radius:18px; box-shadow:0 10px 30px rgba(25,61,88,.14); padding:5px; }
  .mobile-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#5d7288; font-size:.68rem; border-radius:12px; }
  .mobile-nav a.active { background:#e8faf6; color:#078673; }
  .mobile-nav svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
}

@media (max-width: 470px) {
  .hero { padding:21px 17px; }
  .actions .btn { flex:1 1 100%; }
  .section-head { flex-direction:column; gap:8px; }
  .tabs { grid-template-columns:1fr 1fr; }
  .acc-title span { display:none; }
  .acc-panel-inner { padding-right:20px; }
  .page-hero-card, .content-card { padding:20px; }
}