/* ─────────────────────────────────────────────────────────────────
   solutions.css — styles for the SEO use-case / solution pages.
   Layers on top of styles.css (same tokens, volt/cyan, dark-glass).
   Uses logical properties throughout so it mirrors cleanly in RTL.
   ───────────────────────────────────────────────────────────────── */

.sol-main { position: relative; z-index: 1; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.sol-hero { padding: calc(var(--s-9) + 32px) 0 var(--s-8); }
.sol-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--t-400); margin-bottom: var(--s-5);
}
.sol-crumb a { color: var(--t-300); text-decoration: none; transition: color 0.2s var(--ease-out); }
.sol-crumb a:hover { color: var(--volt); }
.sol-crumb-sep { color: var(--t-500); }
.sol-crumb-current { color: var(--t-200); }
.sol-h1 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.06; letter-spacing: -0.03em;
  color: var(--t-100); max-width: 18ch; margin-top: var(--s-4);
}
.sol-h1 .accent {
  background: linear-gradient(120deg, var(--volt) 0%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sol-lead {
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  color: var(--t-300); max-width: 60ch; margin-top: var(--s-5); line-height: 1.62;
}
.sol-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ── Content blocks ───────────────────────────────────────────────── */
.sol-block { padding: var(--s-7) 0; }
.sol-block-title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--t-100); max-width: 24ch;
}
.sol-p { font-size: 1.06rem; color: var(--t-300); max-width: 64ch; margin-top: var(--s-4); line-height: 1.66; }

.sol-problems {
  list-style: none; margin-top: var(--s-5);
  display: grid; gap: var(--s-3); max-width: 64ch;
}
.sol-problems li {
  position: relative; padding-inline-start: 30px;
  color: var(--t-200); line-height: 1.55; font-size: 1.02rem;
}
.sol-problems li::before {
  content: ''; position: absolute; inset-inline-start: 4px; top: 9px;
  width: 9px; height: 9px; border-radius: 3px;
  background: linear-gradient(135deg, var(--volt), var(--cyan));
}

/* ── Feature cards (reuses .grid; local card look) ────────────────── */
.sol-features { margin-top: var(--s-6); }
.sol-feat {
  padding: var(--s-5);
  border: 1px solid var(--glass-border); border-radius: 18px;
  background: var(--glass);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.sol-feat:hover { background: var(--glass-hover); transform: translateY(-3px); border-color: var(--glass-border-hot); }
.sol-feat-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: var(--s-4);
  background: linear-gradient(135deg, rgba(163,230,53,0.16), rgba(50,175,225,0.14));
  color: var(--volt); font-family: var(--f-display); font-weight: 600; font-size: 14px;
}
.sol-feat h3 { font-family: var(--f-display); font-size: 1.08rem; color: var(--t-100); margin-bottom: 8px; letter-spacing: -0.01em; }
.sol-feat p { color: var(--t-300); font-size: 0.96rem; line-height: 1.58; }

/* ── FAQ (native <details>, no JS needed) ─────────────────────────── */
.sol-faq { max-width: 800px; margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.sol-faq-item {
  border: 1px solid var(--glass-border); border-radius: 14px;
  background: var(--glass); overflow: hidden;
  transition: border-color 0.2s var(--ease-out);
}
.sol-faq-item[open] { border-color: var(--glass-border-cyan); }
.sol-faq-item summary {
  cursor: pointer; list-style: none;
  padding: var(--s-4) var(--s-5);
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--t-100);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.sol-faq-item summary::-webkit-details-marker { display: none; }
.sol-faq-item summary::after {
  content: '+'; color: var(--volt); font-size: 1.4rem; line-height: 1; flex: none;
  transition: transform 0.2s var(--ease-out);
}
.sol-faq-item[open] summary::after { transform: rotate(45deg); }
.sol-faq-a { padding: 0 var(--s-5) var(--s-4); color: var(--t-300); line-height: 1.65; font-size: 0.98rem; }

/* ── Related use cases ────────────────────────────────────────────── */
.sol-related { margin-top: var(--s-6); }
.sol-related-card {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--glass-border); border-radius: 18px;
  background: var(--glass); text-decoration: none;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.sol-related-card:hover { background: var(--glass-hover); transform: translateY(-3px); border-color: var(--glass-border-hot); }
.sol-related-card h3 { font-family: var(--f-display); color: var(--t-100); font-size: 1.05rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.sol-related-card p { color: var(--t-400); font-size: 0.92rem; line-height: 1.5; flex: 1; }
.sol-related-arrow { color: var(--volt); margin-top: var(--s-4); font-size: 0.85rem; letter-spacing: 0.04em; }
.sol-related-arrow .rtl-hide { display: inline; }
:root[dir="rtl"] .sol-related-arrow .ltr-arrow { display: none; }
:root:not([dir="rtl"]) .sol-related-arrow .rtl-arrow { display: none; }

/* ── Closing CTA band ─────────────────────────────────────────────── */
.sol-cta {
  margin: var(--s-8) 0 var(--s-6);
  padding: clamp(var(--s-6), 6vw, var(--s-9)) var(--s-6);
  border-radius: 26px; border: 1px solid var(--glass-border);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(163,230,53,0.10), transparent 60%),
    var(--glass);
  text-align: center;
}
.sol-cta h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--t-100); letter-spacing: -0.02em; line-height: 1.12; }
.sol-cta p { color: var(--t-300); margin: var(--s-4) auto 0; max-width: 52ch; line-height: 1.6; }
.sol-cta .btn { margin-top: var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  .sol-feat, .sol-related-card { transition: none; }
  .sol-feat:hover, .sol-related-card:hover { transform: none; }
}