/* Stock Compare Index — pattern from broker compare landing */
.sci-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(31,207,201,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(229,168,58,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-deep,#050E1F) 0%, var(--navy) 100%);
  color: var(--text-on-navy,var(--border-soft));
  padding: 48px 0 72px;
  overflow: hidden;
}
.sci-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 60px);
  pointer-events: none;
}
.sci-hero-inner { position: relative; z-index: 1; text-align: center; }
.sci-breadcrumb { display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-muted);margin-bottom:24px;justify-content:center; }
.sci-breadcrumb a { color:var(--text-muted);text-decoration:none; }
.sci-breadcrumb a:hover { color:var(--teal-bright,var(--teal-light)); }
.sci-eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(229,168,58,.12);border:1px solid rgba(229,168,58,.3);
  color:var(--gold-bright,var(--gold-light));padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.05em;margin-bottom:16px;
}
.sci-hero h1 { font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.2;color:#fff;margin-bottom:14px; }
.sci-hero h1 strong { color:var(--gold-bright,var(--gold-light));font-weight:800; }
.sci-hero-sub { font-size:clamp(14px,1.5vw,17px);color:var(--text-muted);max-width:700px;margin:0 auto 36px; }

/* Search box */
.sci-search-wrap {
  max-width:640px;margin:0 auto;position:relative;
}
.sci-search-input {
  width:100%;padding:16px 24px;border-radius:14px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:#fff;font-size:16px;font-family:inherit;font-weight:700;
  transition:all .2s;
}
.sci-search-input::placeholder { color:var(--text-muted);font-weight:600; }
.sci-search-input:focus { outline:none;border-color:var(--teal-bright,var(--teal-light));background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(31,207,201,.15); }
.sci-search-results {
  position:absolute;top:100%;left:0;right:0;margin-top:4px;
  background:var(--navy);border:1px solid rgba(255,255,255,.15);border-radius:12px;
  max-height:240px;overflow-y:auto;z-index:50;display:none;
}
.sci-search-results.active { display:block; }
.sci-search-item {
  padding:12px 18px;cursor:pointer;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s;color:#fff;font-size:14px;font-weight:700;
}
.sci-search-item:hover { background:rgba(31,207,201,.1); }
.sci-search-item:last-child { border-bottom:none; }
.sci-search-symbol { color:var(--gold-bright,var(--gold-light));font-weight:800;min-width:60px; }

.sci-stats-bar {
  display:flex;justify-content:center;gap:28px;margin-top:28px;flex-wrap:wrap;
  font-size:13px;color:var(--text-muted);
}
.sci-stat-inline { display:inline-flex;align-items:center;gap:8px; }
.sci-stat-inline strong { color:var(--gold-bright,var(--gold-light));font-weight:800;font-size:16px; }

/* Sections */
.sci-section { margin-bottom:56px; }
.sci-section-header { margin-bottom:24px; }
.sci-section-title {
  font-size:clamp(20px,2.4vw,26px);font-weight:800;color:var(--navy);
  position:relative;padding-inline-start:16px;display:inline-block;
}
.sci-section-title::before {
  content:"";position:absolute;inset-inline-start:0;top:6px;bottom:6px;
  width:4px;background:var(--teal);border-radius:2px;
}
.sci-section-sub { font-size:14px;color:var(--text-muted);margin-top:8px; }

/* Featured pairs grid */
.sci-pairs-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px; }
.sci-pair-card {
  background:var(--bg-card,#fff);border:1px solid var(--border);
  border-radius:16px;padding:22px;text-decoration:none;color:inherit;
  display:flex;align-items:center;gap:16px;transition:all .2s;position:relative;overflow:hidden;
}
.sci-pair-card::before { content:"";position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--text-muted);transition:background .2s; }
.sci-pair-card:hover { transform:translateY(-2px);box-shadow:0 4px 14px rgba(11,31,58,.08);border-color:var(--border-strong,#B8C6DA); }
.sci-pair-card:hover::before { background:var(--gold); }
.sci-pair-logos { display:flex;align-items:center;flex-shrink:0; }
.sci-pair-logo {
  width:44px;height:44px;background:var(--navy);color:var(--gold-light);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;border:2px solid #fff;position:relative;z-index:1;overflow:hidden;
}
.sci-pair-logo + .sci-pair-logo { margin-inline-start:-14px;z-index:2; }
.sci-pair-logo img { width:100%;height:100%;object-fit:contain; }
.sci-pair-info { flex:1;min-width:0; }
.sci-pair-title { font-size:15px;font-weight:800;color:var(--navy);margin-bottom:4px;line-height:1.3; }
.sci-pair-desc { font-size:12px;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.sci-pair-arrow { font-size:20px;color:var(--teal);font-weight:800;transition:transform .2s;flex-shrink:0; }
.sci-pair-card:hover .sci-pair-arrow { transform:translateX(-4px); }

/* Why compare */
.sci-reasons-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px; }
.sci-reason-card {
  background:var(--bg-card,#fff);border:1px solid var(--border);
  border-radius:16px;padding:24px;text-align:center;
}
.sci-reason-icon {
  width:52px;height:52px;
  background:linear-gradient(135deg,var(--gold-bright,var(--gold-light)),var(--gold));
  color:var(--navy-deep,#050E1F);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin:0 auto 14px;
  box-shadow:0 4px 16px rgba(229,168,58,.3);
}
.sci-reason-title { font-size:16px;font-weight:800;color:var(--navy);margin-bottom:8px; }
.sci-reason-desc { font-size:13px;color:var(--text-mid);line-height:1.7; }

/* Sector cards */
.sci-sectors-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px; }
.sci-sector-card {
  background:var(--bg-card,#fff);border:1px solid var(--border);
  border-radius:12px;padding:18px;text-decoration:none;color:inherit;
  display:flex;align-items:center;gap:14px;transition:all .2s;
}
.sci-sector-card:hover { border-color:var(--teal-light);transform:translateY(-2px);box-shadow:0 4px 12px rgba(11,31,58,.06); }
.sci-sector-icon {
  width:42px;height:42px;background:var(--teal-bg);color:var(--teal);
  border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.sci-sector-info { flex:1;min-width:0; }
.sci-sector-name { font-size:14px;font-weight:800;color:var(--navy);margin-bottom:2px; }
.sci-sector-count { font-size:12px;color:var(--text-muted); }

/* Halal strip */
.sci-halal-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px; }
.sci-halal-card {
  background:var(--bg-card,#fff);border:1px solid rgba(16,185,129,.2);
  border-radius:12px;padding:16px;text-align:center;text-decoration:none;color:inherit;transition:all .2s;
}
.sci-halal-card:hover { border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.04);transform:translateY(-2px); }
.sci-halal-badge { display:inline-block;background:rgba(16,185,129,.12);color:var(--success);font-size:10px;font-weight:800;padding:3px 8px;border-radius:50px;margin-bottom:8px; }
.sci-halal-symbol { font-size:16px;font-weight:800;color:var(--navy);margin-bottom:2px; }
.sci-halal-name { font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* FAQ uses canonical partial (article-faqs-new) — no inline CSS needed */

/* CTA footer */
.sci-cta-section {
  background:linear-gradient(135deg,var(--teal-bg) 0%,#fff 100%);
  border-radius:16px;padding:32px;border:1px solid var(--teal-border,#B8E0DF);text-align:center;
}
.sci-cta-title { font-size:22px;color:var(--navy);margin-bottom:8px;font-weight:800 }
.sci-cta-sub { font-size:14px;color:var(--text-mid,#3D5A7A);margin-bottom:20px }
.sci-cta-disclaimer { text-align:center;margin-top:16px;font-size:11px;color:var(--text-muted) }
.sci-broker-strip { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px; }
.sci-broker-card {
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;
  text-align:center;transition:all .2s;
}
.sci-broker-card:hover { border-color:var(--teal);box-shadow:0 4px 12px rgba(11,31,58,.06);transform:translateY(-2px); }
.sci-broker-name { font-size:16px;font-weight:800;color:var(--navy);margin-bottom:4px }
.sci-broker-rating { font-size:12px;color:var(--text-muted);margin-bottom:8px }
.sci-broker-rating-stars { color:var(--gold) }
.sci-broker-btn {
  display:inline-block;background:var(--teal);color:#fff;font-weight:700;font-size:13px;
  padding:9px 20px;border-radius:8px;text-decoration:none;margin-top:10px;transition:all .2s;
}
.sci-broker-btn:hover { background:var(--teal-dark,#096B6A); }

/* Compare-CTA button (the gold "قارن الآن" CTA in the hero search block) */
.sci-compare-btn {
  background:linear-gradient(135deg,var(--gold-bright,#F5C24A),var(--gold,#C08A2E));
  color:var(--navy-deep,#050E1F);padding:14px 40px;border-radius:12px;
  font-weight:800;font-size:16px;border:none;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:10px;transition:all .2s;
  box-shadow:0 8px 24px rgba(229,168,58,.35);
}
.sci-compare-btn:disabled { opacity:.5;cursor:not-allowed }
.sci-compare-btn:not(:disabled):hover { transform:translateY(-1px);box-shadow:0 10px 28px rgba(229,168,58,.45) }
.sci-compare-btn-wrap { margin-top:16px }

/* Spacing utilities replacing inline margin-top in hero */
.sci-search-wrap + .sci-search-wrap { margin-top:12px }
.sci-halal-all-link { display:inline-block;text-align:center;margin-top:16px;color:var(--teal);font-weight:800;font-size:14px;text-decoration:none }
.sci-halal-all-link-wrap { text-align:center;margin-top:16px }

@media(max-width:1024px) {
  .sci-reasons-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .sci-hero { padding:32px 0 48px; }
  .sci-stats-bar { gap:16px; }
  .sci-pairs-grid { grid-template-columns:1fr; }
  .sci-reasons-grid { grid-template-columns:1fr 1fr; }
  .sci-sectors-grid { grid-template-columns:1fr 1fr; }
  .sci-halal-grid { grid-template-columns:repeat(2,1fr); }
  .sci-broker-strip { grid-template-columns:1fr; }
  .sci-search-input { font-size:16px; }
}
@media(max-width:480px) {
  .sci-reasons-grid { grid-template-columns:1fr; }
  .sci-sectors-grid { grid-template-columns:1fr; }
  .sci-halal-grid { grid-template-columns:1fr 1fr; }
  .sci-hero h1 { font-size:22px; }
  .sci-stats-bar { gap:12px;flex-direction:column;align-items:flex-start; }
}