/* صفحه‌های راهنمای سئو («نمودار رشد»، «صدک»، «جدول قد و وزن») — استاتیک و سبک، هم‌رنگ با اپ */
*, *::before, *::after { box-sizing: border-box; }
html { background: #050b1f; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: #e6f1ff; direction: rtl; text-align: right;
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif; font-size: 16px; line-height: 2.05;
  -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
.g-space {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(56,160,255,.28), transparent 60%),
    radial-gradient(50% 45% at 5% 100%, rgba(150,110,255,.22), transparent 62%),
    linear-gradient(180deg, #071633 0%, #050b1f 60%);
}
a { color: #7fdcff; text-decoration: none; border-bottom: 1px dashed rgba(127,220,255,.5); }
a:hover { color: #fff; border-bottom-color: #fff; }

/* هدر */
.g-head {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 980px; margin: 10px auto 0; padding: 8px 16px; border-radius: 26px;
  background: rgba(14,30,72,.55); border: 1px solid rgba(150,205,255,.22);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.g-head a { border: 0; }
.g-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 17px; }
.g-brand img { border-radius: 50%; background: #fff; }
.g-brand span { white-space: nowrap; }
.g-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.g-nav a { padding: 5px 13px; border-radius: 999px; font-size: 13.5px; color: #dcecff; }
.g-nav a:hover { background: rgba(56,189,248,.18); color: #fff; }

/* محتوا */
.g-wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; }
.g-crumb { display: flex; gap: 8px; align-items: center; margin: 4px 6px 12px; font-size: 13px; color: rgba(214,232,255,.7); }
.g-crumb a { border: 0; color: #9ee4ff; }
.g-card {
  padding: 30px 34px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(38,74,140,.42), rgba(9,20,52,.66));
  border: 1px solid rgba(150,205,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 50px -24px rgba(0,6,28,.9);
}
h1 { margin: 0 0 14px; font-size: 32px; line-height: 1.6; font-weight: 900; color: #fff; }
h2 { margin: 34px 0 10px; font-size: 22px; line-height: 1.7; font-weight: 800; color: #fff; padding-right: 14px; border-right: 4px solid #38bdf8; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 14px; padding-right: 24px; }
li { margin-bottom: 6px; }
b { color: #fff; }
.g-lead { font-size: 17.5px; color: #f1f7ff; }

/* CTA */
.g-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 22px 0 6px; padding: 18px 22px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(129,140,248,.22)); border: 1px solid rgba(140,215,255,.45);
}
.g-cta b { font-size: 17.5px; }
.g-cta p { margin: 4px 0 0; font-size: 14px; line-height: 1.9; color: rgba(230,241,255,.85); }
.g-btn {
  flex: none; padding: 11px 22px; border-radius: 999px; font-weight: 800; font-size: 14.5px; color: #04283f; border: 0;
  background: linear-gradient(180deg, #7fdcff, #35b7f8 55%, #0f95e6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 #0a6db8, 0 12px 22px -8px rgba(15,149,230,.7);
  transition: transform .2s, box-shadow .2s;
}
.g-btn:hover { color: #04283f; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 0 #0a6db8, 0 16px 26px -8px rgba(15,149,230,.8); }

/* جدول */
.g-tablewrap { overflow-x: auto; margin: 10px 0 14px; border-radius: 16px; border: 1px solid rgba(150,205,255,.25); -webkit-overflow-scrolling: touch; }
.g-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.7; text-align: center; }
.g-table-narrow { min-width: 0; }
.g-table th, .g-table td { padding: 8px 10px; border-bottom: 1px solid rgba(150,205,255,.14); }
.g-table thead th { background: rgba(56,189,248,.16); color: #fff; font-weight: 800; }
.g-table thead tr:nth-child(2) th { background: rgba(56,189,248,.09); font-size: 12.5px; }
.g-table tbody th { color: #fff; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.04); }
.g-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.g-table-narrow td { text-align: right; }
.g-table-narrow tbody th { text-align: right; }
.g-formula { padding: 12px 16px; border-radius: 14px; background: rgba(0,0,0,.28); font-size: 17px; text-align: center; font-family: 'Consolas', 'Courier New', monospace; }
.g-src { font-size: 13px; color: rgba(214,232,255,.72); }

/* سؤالات متداول */
.g-faq details { margin: 8px 0; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(150,205,255,.2); overflow: hidden; }
.g-faq summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: #fff; list-style: none; position: relative; padding-left: 40px; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: '+'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #7fdcff; transition: transform .25s; }
.g-faq details[open] summary::after { content: '−'; }
.g-faq details p { margin: 0; padding: 0 16px 14px; color: rgba(230,241,255,.9); }
.g-related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.g-related li { margin: 0; }
.g-related a { display: inline-block; padding: 7px 16px; border-radius: 999px; background: rgba(56,189,248,.12); border: 1px solid rgba(120,205,255,.4); }
.g-disc { margin-top: 26px; padding: 12px 16px; border-radius: 14px; font-size: 13px; line-height: 1.95; color: rgba(214,232,255,.75); background: rgba(255,255,255,.05); border: 1px dashed rgba(160,205,255,.3); }

.g-foot { max-width: 860px; margin: 0 auto; padding: 8px 18px 40px; font-size: 13px; color: rgba(214,232,255,.65); text-align: center; }
.g-foot-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.g-foot a { border: 0; color: #9ee4ff; }

@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .g-head { margin: 6px 8px 0; border-radius: 20px; padding: 8px 12px; }
  .g-nav a { padding: 4px 10px; font-size: 12.5px; }
  .g-card { padding: 22px 16px; border-radius: 22px; }
  h1 { font-size: 24px; }
  h2 { font-size: 19px; }
  .g-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .g-btn { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }