/* Neutral palette (no pink tint) + light/dark themes + RTL */
:root {
  --brand-light: #f0f1f4;
  --bg-soft: #f5f6f8;
  --line: #e4e6eb;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --header-bg: rgba(255, 255, 255, .92);
  --shadow: 0 18px 50px rgba(15, 20, 35, .12);
  --shadow-sm: 0 4px 16px rgba(15, 20, 35, .07);
  color-scheme: light;
}
[data-theme="dark"] {
  --ink: #f2f4f8;
  --ink-2: #141824;
  --text: #c6ccd8;
  --muted: #8d95a6;
  --line: #262b37;
  --bg: #0c0e13;
  --bg-soft: #10131a;
  --surface: #151923;
  --surface-2: #11141c;
  --brand-light: #1e2230;
  --header-bg: rgba(12, 14, 19, .9);
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* remove pink glows / washes */
.hero::before, .orb, .photo-frame::after, .ph-visual .ring { display: none !important; }
.hero, .page-hero { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); }
.site-header { background: var(--header-bg); }
.arch-layer:hover, .arch-layer.hl, .faq details[open] { border-color: var(--brand); }
.arch-layer.hl { background: linear-gradient(90deg, var(--surface), var(--brand-light)); }
.timeline::before { background: var(--line); }
.tl::before { box-shadow: 0 0 0 5px var(--bg); }
.step .num { box-shadow: 0 10px 24px rgba(196, 7, 95, .3), 0 0 0 8px var(--bg); }

/* surfaces that were hard-coded white */
.btn-outline, .dropdown, .dash, .dash-search, .kpi, .card-mini, .trusted, .card, .arch-layer,
.photo-card, .panel, .bg-soft .panel, .faq details, .feature-post, .case, .role,
.form input, .form select, .form textarea, .float-chip, .skip-link { background: var(--surface); }
.donut span { background: var(--surface); }
.dash-main { background: var(--surface-2); }
.chips span { background: var(--bg-soft); }
.pc-badge { background: var(--surface); }
.btn-outline:hover, .dropdown a:hover { background: var(--brand-light); }
.form input, .form select, .form textarea { color: var(--ink); }

/* brand text: only the "A" carries the logo colour */
.brand-text strong { color: var(--ink); }
.brand-text strong i { font-style: normal; color: var(--brand); }

/* header controls */
.nav-actions { gap: 6px; } .nav-actions .btn, .brand-text small, .nav > li > a { white-space: nowrap; }
.nav { gap: 2px; }
.theme-btn { position: relative; }
.theme-btn .sun { display: none; }
[data-theme="dark"] .theme-btn .sun { display: block; }
[data-theme="dark"] .theme-btn .moon { display: none; }
.lang-wrap { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; padding: 8px 6px; border-radius: 8px; }
.lang-btn:hover { background: var(--brand-light); }
.lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: none; z-index: 200; }
.lang-menu.open { display: block; }
.lang-menu button { display: block; width: 100%; text-align: start; background: none; border: 0; font: inherit; font-size: 14px; color: var(--text); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.lang-menu button:hover, .lang-menu button.on { background: var(--brand-light); color: var(--brand); }

/* dark theme fixes for fixed-dark sections */
[data-theme="dark"] .site-footer { background: #07080c; color: #a7adbb; }
[data-theme="dark"] .site-footer h4, [data-theme="dark"] .site-footer a:hover { color: #fff; }
[data-theme="dark"] .stats, [data-theme="dark"] .stats-strip, [data-theme="dark"] .quote { background: #141824; color: #fff; }
[data-theme="dark"] .dash-side { background: #0b0d13; }
[data-theme="dark"] .btn-white, [data-theme="dark"] .cta .btn { background: #fff; color: var(--brand); }
[data-theme="dark"] .btn-primary { color: #fff; }
[data-theme="dark"] .donut span { color: var(--ink); }
[data-theme="dark"] .photo-frame img, [data-theme="dark"] .photo-card img { filter: brightness(.9); }
[data-theme="dark"] .nav { background: var(--bg); }
@media (max-width: 960px) { .nav { background: var(--bg); } }


/* ratings, use cases, rate widget */
.stars { --r: 5; position: relative; display: inline-block; font-size: 20px; letter-spacing: 2px; line-height: 1; color: #d3d7df; background: linear-gradient(90deg, #f5a623 calc(var(--r) / 5 * 100%), #d3d7df 0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="dark"] .stars { background: linear-gradient(90deg, #f5a623 calc(var(--r) / 5 * 100%), #3a4052 0); -webkit-background-clip: text; background-clip: text; }
.rating-line { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 15px; color: var(--muted); }
.rating-line b { color: var(--ink); font-size: 17px; }
.usecase { position: relative; }
.uc-n { display: inline-block; font-weight: 800; font-size: 14px; color: var(--brand); letter-spacing: .08em; margin-bottom: 10px; }
.rate-wrap { padding: 36px 0; border-top: 1px solid var(--line); background: var(--bg-soft); }
.rate-box { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rate-box b { display: block; color: var(--ink); font-size: 17px; } .rate-box span#rateMsg { color: var(--muted); font-size: 14px; }
.rate-stars { display: flex; gap: 4px; }
.rate-stars button { background: none; border: 0; cursor: pointer; font-size: 34px; line-height: 1; color: #c9ced8; padding: 2px 4px; transition: transform .15s, color .15s; }
[data-theme="dark"] .rate-stars button { color: #3a4052; }
.rate-stars button.on { color: #f5a623; } .rate-stars button:hover { transform: scale(1.18); }
.rate-stars button:focus-visible { outline: 2px solid var(--brand); border-radius: 6px; }

html, body { overflow-x: clip; }
[dir="rtl"] body { font-family: 'Noto Sans Arabic', var(--font); }
[dir="rtl"] .nav, [dir="rtl"] .navbar { direction: rtl; }
[dir="rtl"] .btn, [dir="rtl"] .go, [dir="rtl"] .more { unicode-bidi: plaintext; }
[dir="rtl"] .dash, [dir="rtl"] .dash * { direction: ltr; text-align: left; }
[dir="rtl"] .role:hover, [dir="rtl"] .arch-layer:hover { transform: translateX(-6px); }
[dir="rtl"] .marquee-track { direction: ltr; }