/* ============================================================
   Octopusta — design system
   Scope rule: every rule is namespaced under .oc-* so this file
   can load site-wide without restyling legacy (bootstrap) pages.
   Direction: logical properties only (inline-start/end) so RTL
   works from <html dir="rtl"> with no separate stylesheet.
   ============================================================ */

:root {
  /* brand */
  --oc-primary-50:#EEF2FF;  --oc-primary-100:#E0E7FF; --oc-primary-200:#C7D2FE;
  --oc-primary-300:#A5B4FC; --oc-primary-400:#818CF8; --oc-primary-500:#6366F1;
  --oc-primary-600:#4F46E5; --oc-primary-700:#4338CA; --oc-primary-800:#3730A3;
  --oc-primary:var(--oc-primary-600);
  --oc-primary-ink:#FFFFFF;          /* 5.9:1 on --oc-primary-600  (WCAG AA) */

  --oc-accent-50:#ECFEFF; --oc-accent-400:#22D3EE; --oc-accent-500:#06B6D4; --oc-accent-600:#0891B2;
  --oc-accent:var(--oc-accent-500);

  /* neutrals */
  --oc-ink:#0F172A;        /* 16.1:1 on white */
  --oc-ink-2:#334155;      /* 10.0:1 */
  --oc-muted:#64748B;      /* 4.8:1  — AA for body text */
  --oc-line:#E2E8F0;
  --oc-line-2:#CBD5E1;
  --oc-surface:#FFFFFF;
  --oc-surface-2:#F8FAFC;
  --oc-surface-3:#F1F5F9;

  /* state */
  --oc-success:#059669; --oc-warning:#D97706; --oc-danger:#DC2626;
  --oc-star:#F59E0B;

  /* type */
  --oc-font:'Inter','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --oc-font-ar:'Cairo','Inter',sans-serif;

  /* space + shape */
  --oc-r-sm:8px; --oc-r:12px; --oc-r-lg:16px; --oc-r-xl:24px; --oc-r-full:999px;
  --oc-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --oc-shadow:0 4px 12px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --oc-shadow-lg:0 12px 32px rgba(15,23,42,.10),0 4px 8px rgba(15,23,42,.04);
  --oc-shadow-xl:0 24px 60px rgba(15,23,42,.14);
  --oc-ring:0 0 0 3px var(--oc-primary-200);
  --oc-container:1200px;
  --oc-nav-h:76px;
}

/* Arabic typography: slightly larger + looser, Latin numerals kept */
html[dir="rtl"] .oc, html[dir="rtl"] .oc-nav, html[dir="rtl"] .oc-footer { font-family:var(--oc-font-ar); }
html[dir="rtl"] .oc-h1, html[dir="rtl"] .oc-h2 { line-height:1.35; letter-spacing:0; }

/* ---------- primitives ---------- */
.oc, .oc-nav, .oc-footer { font-family:var(--oc-font); color:var(--oc-ink); -webkit-font-smoothing:antialiased; }
.oc *, .oc *::before, .oc *::after { box-sizing:border-box; }
.oc img { max-width:100%; display:block; }
.oc-container { width:100%; max-width:var(--oc-container); margin-inline:auto; padding-inline:24px; }
.oc-section { padding-block:88px; }
.oc-section--tight { padding-block:56px; }
.oc-section--alt { background:var(--oc-surface-2); }

.oc-h1 { font-size:clamp(2.25rem,1.4rem + 3.6vw,4rem); line-height:1.08; letter-spacing:-.03em; font-weight:800; margin:0; }
.oc-h2 { font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem); line-height:1.15; letter-spacing:-.02em; font-weight:800; margin:0; }
.oc-h3 { font-size:1.125rem; line-height:1.4; font-weight:700; margin:0; }
.oc-lead { font-size:clamp(1rem,.95rem + .35vw,1.1875rem); line-height:1.65; color:var(--oc-muted); margin:0; }
.oc-eyebrow { font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--oc-primary-700); }

.oc-head { max-width:720px; margin-inline:auto; text-align:center; margin-block-end:56px; }
.oc-head .oc-lead { margin-block-start:16px; }
.oc-head--start { margin-inline:0; text-align:start; }

/* ---------- buttons ---------- */
.oc-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-weight:600; font-size:.9375rem; line-height:1; text-decoration:none; cursor:pointer;
  padding:14px 24px; border-radius:var(--oc-r-full); border:1px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; }
.oc-btn:focus-visible { outline:none; box-shadow:var(--oc-ring); }
.oc-btn--primary { background:var(--oc-primary); color:var(--oc-primary-ink); box-shadow:var(--oc-shadow); }
.oc-btn--primary:hover { background:var(--oc-primary-700); color:var(--oc-primary-ink); transform:translateY(-2px); box-shadow:var(--oc-shadow-lg); }
.oc-btn--ghost { background:var(--oc-surface); color:var(--oc-ink); border-color:var(--oc-line-2); }
.oc-btn--ghost:hover { background:var(--oc-surface-3); color:var(--oc-ink); transform:translateY(-2px); }
.oc-btn--light { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px); }
.oc-btn--light:hover { background:rgba(255,255,255,.22); color:#fff; }
.oc-btn--sm { padding:10px 18px; font-size:.875rem; }
.oc-btn--block { width:100%; }
.oc-btn .oc-i { flex:none; }
/* arrow nudges toward reading direction */
.oc-btn:hover .oc-i--arrow { transform:translateX(3px); }
html[dir="rtl"] .oc-btn:hover .oc-i--arrow { transform:translateX(-3px); }
.oc-i--arrow { transition:transform .16s ease; }
html[dir="rtl"] .oc-i--arrow { transform:scaleX(-1); }
html[dir="rtl"] .oc-btn:hover .oc-i--arrow { transform:scaleX(-1) translateX(3px); }

.oc-link { color:var(--oc-primary-700); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.oc-link:hover { color:var(--oc-primary-800); text-decoration:underline; }

/* ---------- pills / badges ---------- */
.oc-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--oc-r-full);
  font-size:.8125rem; font-weight:600; background:var(--oc-primary-50); color:var(--oc-primary-700); border:1px solid var(--oc-primary-100); }
.oc-pill--light { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.24); }
.oc-dot { width:7px; height:7px; border-radius:50%; background:var(--oc-success); flex:none; }
.oc-badge { display:inline-block; padding:5px 11px; border-radius:var(--oc-r-full); font-size:.75rem; font-weight:700; }
.oc-badge--free { background:#DCFCE7; color:#15803D; }
.oc-badge--price { background:var(--oc-ink); color:#fff; }

/* ---------- cards ---------- */
.oc-card { background:var(--oc-surface); border:1px solid var(--oc-line); border-radius:var(--oc-r-lg);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; height:100%;
  display:flex; flex-direction:column; }
.oc-card:hover { transform:translateY(-4px); box-shadow:var(--oc-shadow-lg); border-color:var(--oc-primary-200); }
.oc-card__media { position:relative; aspect-ratio:16/10; background:var(--oc-surface-3); overflow:hidden; }
.oc-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.oc-card:hover .oc-card__media img { transform:scale(1.05); }
.oc-card__badge { position:absolute; inset-block-start:12px; inset-inline-start:12px; }
.oc-card__body { padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.oc-card__title { font-size:1.0625rem; font-weight:700; line-height:1.4; margin:0; color:var(--oc-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.oc-card__title a { color:inherit; text-decoration:none; }
.oc-card__title a:hover { color:var(--oc-primary-700); }
.oc-card__meta { display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--oc-muted); }
.oc-card__foot { margin-block-start:auto; padding-block-start:14px; border-block-start:1px solid var(--oc-line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.oc-price { font-size:1.125rem; font-weight:800; color:var(--oc-ink); }
.oc-price__old { font-size:.875rem; font-weight:500; color:var(--oc-muted); text-decoration:line-through; margin-inline-start:6px; }

.oc-stars { display:inline-flex; align-items:center; gap:3px; color:var(--oc-star); font-size:.8125rem; }
.oc-rating { font-weight:700; color:var(--oc-ink); font-size:.8125rem; }

.oc-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--oc-surface-3); flex:none; }
.oc-avatar--lg { width:72px; height:72px; }

/* ---------- grid ---------- */
.oc-grid { display:grid; gap:24px; }
.oc-grid--2 { grid-template-columns:repeat(2,1fr); }
.oc-grid--3 { grid-template-columns:repeat(3,1fr); }
.oc-grid--4 { grid-template-columns:repeat(4,1fr); }
.oc-grid--6 { grid-template-columns:repeat(6,1fr); }
@media (max-width:1024px){ .oc-grid--4{grid-template-columns:repeat(2,1fr);} .oc-grid--3{grid-template-columns:repeat(2,1fr);} .oc-grid--6{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .oc-grid--2,.oc-grid--3,.oc-grid--4{grid-template-columns:1fr;} .oc-grid--6{grid-template-columns:repeat(2,1fr);} .oc-section{padding-block:56px;} }

/* ============================ NAVBAR ============================ */
.oc-nav { position:sticky; inset-block-start:0; z-index:1030; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-block-end:1px solid var(--oc-line); }
.oc-nav__inner { height:var(--oc-nav-h); display:flex; align-items:center; gap:28px; }
.oc-nav__logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.oc-nav__logo img { height:38px; width:auto; object-fit:contain; }
.oc-nav__logo span { font-weight:800; font-size:1.125rem; color:var(--oc-ink); letter-spacing:-.02em; }
.oc-nav__links { display:flex; align-items:center; gap:4px; margin-inline-end:auto; }
.oc-nav__link { padding:9px 14px; border-radius:var(--oc-r-sm); font-size:.9375rem; font-weight:500;
  color:var(--oc-ink-2); text-decoration:none; transition:background-color .15s, color .15s; white-space:nowrap; }
.oc-nav__link:hover { background:var(--oc-surface-3); color:var(--oc-ink); }
.oc-nav__link.is-active { color:var(--oc-primary-700); font-weight:600; }
.oc-nav__actions { display:flex; align-items:center; gap:10px; flex:none; }
.oc-nav__icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--oc-ink-2); text-decoration:none; border:1px solid transparent; position:relative; }
.oc-nav__icon:hover { background:var(--oc-surface-3); color:var(--oc-ink); }
.oc-nav__count { position:absolute; inset-block-start:2px; inset-inline-end:2px; min-width:18px; height:18px;
  padding:0 5px; border-radius:var(--oc-r-full); background:var(--oc-danger); color:#fff;
  font-size:.6875rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.oc-nav__burger { display:none; width:42px; height:42px; align-items:center; justify-content:center;
  border-radius:var(--oc-r-sm); border:1px solid var(--oc-line-2); background:var(--oc-surface); cursor:pointer; color:var(--oc-ink); }

/* language dropdown */
.oc-drop { position:relative; }
.oc-drop__menu { position:absolute; inset-block-start:calc(100% + 10px); inset-inline-end:0; min-width:190px;
  background:var(--oc-surface); border:1px solid var(--oc-line); border-radius:var(--oc-r); box-shadow:var(--oc-shadow-lg);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s ease; max-height:340px; overflow-y:auto; }
.oc-drop.is-open .oc-drop__menu { opacity:1; visibility:visible; transform:translateY(0); }
.oc-drop__item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--oc-r-sm);
  font-size:.875rem; color:var(--oc-ink-2); text-decoration:none; }
.oc-drop__item:hover { background:var(--oc-surface-3); color:var(--oc-ink); }
.oc-drop__item.is-active { background:var(--oc-primary-50); color:var(--oc-primary-700); font-weight:600; }

/* mobile drawer */
.oc-drawer { position:fixed; inset:0; z-index:1040; visibility:hidden; }
.oc-drawer.is-open { visibility:visible; }
.oc-drawer__scrim { position:absolute; inset:0; background:rgba(15,23,42,.45); opacity:0; transition:opacity .22s ease; }
.oc-drawer.is-open .oc-drawer__scrim { opacity:1; }
.oc-drawer__panel { position:absolute; inset-block:0; inset-inline-end:0; width:min(88vw,360px);
  background:var(--oc-surface); box-shadow:var(--oc-shadow-xl); padding:24px; overflow-y:auto;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); }
html[dir="rtl"] .oc-drawer__panel { transform:translateX(-100%); }
.oc-drawer.is-open .oc-drawer__panel { transform:translateX(0); }
.oc-drawer__link { display:block; padding:14px 12px; border-radius:var(--oc-r-sm); font-size:1rem; font-weight:600;
  color:var(--oc-ink); text-decoration:none; border-block-end:1px solid var(--oc-line); }
.oc-drawer__link:hover { background:var(--oc-surface-3); color:var(--oc-primary-700); }

@media (max-width:992px){
  .oc-nav__links { display:none; }
  .oc-nav__burger { display:inline-flex; }
  .oc-nav__actions .oc-hide-sm { display:none; }
}

/* ============================ HERO ============================ */
.oc-hero { position:relative; overflow:hidden; background:
   radial-gradient(900px 460px at 85% -8%, var(--oc-primary-100) 0%, transparent 62%),
   radial-gradient(700px 400px at 8% 12%, var(--oc-accent-50) 0%, transparent 58%),
   linear-gradient(180deg,var(--oc-surface) 0%, var(--oc-surface-2) 100%); }
.oc-hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-block:clamp(56px,7vw,104px); }
.oc-hero__copy { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.oc-hero__title .oc-grad { background:linear-gradient(120deg,var(--oc-primary-600),var(--oc-accent-500));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.oc-hero__cta { display:flex; flex-wrap:wrap; gap:12px; }
.oc-hero__stats { display:flex; flex-wrap:wrap; gap:36px; margin-block-start:8px; }
.oc-stat__n { font-size:1.75rem; font-weight:800; letter-spacing:-.02em; color:var(--oc-ink); line-height:1; }
.oc-stat__l { font-size:.8125rem; color:var(--oc-muted); margin-block-start:6px; }

/* hero search */
.oc-search { display:flex; align-items:center; gap:8px; width:100%; max-width:520px; background:var(--oc-surface);
  border:1px solid var(--oc-line-2); border-radius:var(--oc-r-full); padding:7px 7px 7px 20px; box-shadow:var(--oc-shadow); }
html[dir="rtl"] .oc-search { padding:7px 20px 7px 7px; }
.oc-search input { flex:1; border:0; outline:none; background:transparent; font:inherit; font-size:.9375rem;
  color:var(--oc-ink); min-width:0; padding-block:8px; }
.oc-search input::placeholder { color:var(--oc-muted); }
.oc-search:focus-within { border-color:var(--oc-primary-400); box-shadow:var(--oc-ring); }

/* hero visual */
.oc-hero__art { position:relative; }
.oc-hero__art img { width:100%; border-radius:var(--oc-r-xl); box-shadow:var(--oc-shadow-xl); aspect-ratio:4/3; object-fit:cover; }
.oc-float { position:absolute; background:var(--oc-surface); border:1px solid var(--oc-line);
  border-radius:var(--oc-r); box-shadow:var(--oc-shadow-lg); padding:14px 16px; display:flex; align-items:center; gap:12px; }
.oc-float--a { inset-block-end:28px; inset-inline-start:-24px; animation:oc-bob 5s ease-in-out infinite; }
.oc-float--b { inset-block-start:28px; inset-inline-end:-20px; animation:oc-bob 5s ease-in-out infinite .8s; }
@keyframes oc-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@media (prefers-reduced-motion:reduce){ .oc-float{animation:none} .oc-card:hover{transform:none} .oc-btn:hover{transform:none} }
@media (max-width:992px){
  .oc-hero__grid { grid-template-columns:1fr; gap:40px; }
  .oc-hero__art { display:none; }
}

/* ============================ SECTIONS ============================ */
/* category tiles */
.oc-cat { display:flex; align-items:center; gap:14px; padding:18px; background:var(--oc-surface);
  border:1px solid var(--oc-line); border-radius:var(--oc-r); text-decoration:none; transition:.18s ease; }
.oc-cat:hover { border-color:var(--oc-primary-300); box-shadow:var(--oc-shadow); transform:translateY(-3px); }
.oc-cat__ico { width:46px; height:46px; border-radius:var(--oc-r-sm); background:var(--oc-primary-50);
  display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.oc-cat__ico img { width:26px; height:26px; object-fit:contain; }
.oc-cat__n { font-weight:600; font-size:.9375rem; color:var(--oc-ink); line-height:1.3; }
.oc-cat__c { font-size:.8125rem; color:var(--oc-muted); margin-block-start:3px; }

/* feature / big category card */
.oc-feature { position:relative; border-radius:var(--oc-r-lg); overflow:hidden; min-height:220px;
  display:flex; align-items:flex-end; padding:24px; text-decoration:none; color:#fff; }
.oc-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s ease; }
.oc-feature::after { content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(15,23,42,0) 35%,rgba(15,23,42,.82) 100%); }
.oc-feature:hover img { transform:scale(1.06); }
.oc-feature__t { position:relative; z-index:2; color:#fff; }
.oc-feature__t strong { display:block; font-size:1.125rem; font-weight:700; }
.oc-feature__t span { font-size:.8125rem; opacity:.85; }

/* instructor */
.oc-person { text-align:center; padding:28px 20px; background:var(--oc-surface); border:1px solid var(--oc-line);
  border-radius:var(--oc-r-lg); transition:.2s ease; text-decoration:none; display:block; }
.oc-person:hover { transform:translateY(-4px); box-shadow:var(--oc-shadow-lg); border-color:var(--oc-primary-200); }
.oc-person img { width:88px; height:88px; border-radius:50%; object-fit:cover; margin-inline:auto; margin-block-end:14px;
  border:3px solid var(--oc-surface); box-shadow:var(--oc-shadow); }
.oc-person__n { font-weight:700; font-size:1rem; color:var(--oc-ink); }
.oc-person__r { font-size:.8125rem; color:var(--oc-muted); margin-block-start:4px; }

/* testimonial */
.oc-quote { background:var(--oc-surface); border:1px solid var(--oc-line); border-radius:var(--oc-r-lg);
  padding:28px; display:flex; flex-direction:column; gap:18px; height:100%; }
.oc-quote__b { font-size:1rem; line-height:1.7; color:var(--oc-ink-2); margin:0; flex:1; }
.oc-quote__w { display:flex; align-items:center; gap:12px; }
.oc-quote__n { font-weight:700; font-size:.9375rem; }
.oc-quote__p { font-size:.8125rem; color:var(--oc-muted); }

/* sponsors */
.oc-brands { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:48px; }
.oc-brands img { height:34px; width:auto; object-fit:contain; opacity:.55; filter:grayscale(1);
  transition:opacity .2s, filter .2s; }
.oc-brands img:hover { opacity:1; filter:grayscale(0); }

/* CTA band */
.oc-cta { position:relative; overflow:hidden; border-radius:var(--oc-r-xl); padding:clamp(40px,5vw,72px);
  background:linear-gradient(120deg,var(--oc-primary-700) 0%,var(--oc-primary-600) 45%,var(--oc-accent-600) 100%);
  color:#fff; }
.oc-cta::before { content:''; position:absolute; inset-block-start:-40%; inset-inline-end:-10%; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%); }
.oc-cta__in { position:relative; z-index:1; max-width:640px; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.oc-cta h2 { color:#fff; }
.oc-cta p { color:rgba(255,255,255,.9); margin:0; font-size:1.0625rem; line-height:1.65; }

/* blog */
.oc-post__meta { display:flex; align-items:center; gap:10px; font-size:.8125rem; color:var(--oc-muted); }
.oc-post__cat { display:inline-block; padding:4px 10px; border-radius:var(--oc-r-full); background:var(--oc-primary-50);
  color:var(--oc-primary-700); font-size:.75rem; font-weight:600; }

/* ============================ FOOTER ============================ */
.oc-footer { background:#0B1120; color:#94A3B8; padding-block:72px 0; }
.oc-footer a { color:#94A3B8; text-decoration:none; transition:color .15s; }
.oc-footer a:hover { color:#fff; }
.oc-footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; }
.oc-footer__logo img { height:40px; width:auto; margin-block-end:18px; }
.oc-footer__about { font-size:.9375rem; line-height:1.75; max-width:340px; }
.oc-footer__t { color:#fff; font-size:.9375rem; font-weight:700; margin-block-end:20px; letter-spacing:.01em; }
.oc-footer__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; font-size:.9375rem; }
.oc-social { display:flex; gap:10px; margin-block-start:22px; }
.oc-social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.07);
  display:inline-flex; align-items:center; justify-content:center; color:#CBD5E1; }
.oc-social a:hover { background:var(--oc-primary); color:#fff; transform:translateY(-2px); }
.oc-footer__bar { margin-block-start:56px; border-block-start:1px solid rgba(255,255,255,.09); padding-block:24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.875rem; }
.oc-newsletter { display:flex; gap:8px; margin-block-start:18px; max-width:330px; }
.oc-newsletter input { flex:1; min-width:0; padding:12px 16px; border-radius:var(--oc-r-full); border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#fff; font:inherit; font-size:.875rem; outline:none; }
.oc-newsletter input::placeholder { color:#64748B; }
.oc-newsletter input:focus { border-color:var(--oc-primary-400); }
@media (max-width:992px){ .oc-footer__grid{grid-template-columns:1fr 1fr; gap:36px;} }
@media (max-width:640px){ .oc-footer__grid{grid-template-columns:1fr;} .oc-footer__bar{flex-direction:column; text-align:center;} }

/* utilities */
.oc-mt-a { margin-block-start:auto; }
.oc-center { text-align:center; }
.oc-flex { display:flex; align-items:center; gap:12px; }
.oc-between { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.oc-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================
   Legacy-CSS guards.
   The old theme's stylesheets still load (fallback pages need
   them) and their bare element selectors beat inheritance, so
   the values below are set explicitly rather than inherited.
   ============================================================ */
.oc blockquote.oc-quote__b,
.oc .oc-quote__b { border:0; padding:0; margin:0; background:none; quotes:none;
  color:var(--oc-ink-2); font-size:1rem; line-height:1.7; font-style:normal; }
.oc .oc-quote__b::before, .oc .oc-quote__b::after { content:none; }

.oc-footer p, .oc-footer li, .oc-footer span, .oc-footer div { color:#94A3B8; }
.oc-footer .oc-footer__t { color:#fff; }
.oc-footer .oc-footer__about { color:#94A3B8; }
.oc-footer .oc-footer__bar, .oc-footer .oc-footer__bar * { color:#94A3B8; }
.oc-footer a { color:#94A3B8; }
.oc-footer a:hover { color:#fff; }
.oc-footer input { color:#fff; }
/* logo art is dark-on-dark in the footer */
.oc-footer__logo img { filter:brightness(0) invert(1); opacity:.92; }

.oc .oc-card__title, .oc .oc-card__title a { color:var(--oc-ink); }
.oc .oc-h1, .oc .oc-h2, .oc .oc-h3 { color:var(--oc-ink); }
.oc .oc-lead { color:var(--oc-muted); }
.oc .oc-search input { color:var(--oc-ink); background:transparent; box-shadow:none; }
.oc .oc-btn { text-decoration:none; }
.oc .oc-btn--primary, .oc .oc-btn--primary:hover, .oc .oc-btn--light { color:#fff; }
.oc-nav .oc-nav__link { text-decoration:none; }

/* The legacy guards above raise heading specificity, so anything that must
   stay light on a coloured surface has to out-specify them. */
.oc .oc-cta .oc-h2, .oc .oc-cta h2, .oc .oc-cta p, .oc .oc-cta .oc-pill { color:#fff; }
.oc .oc-cta .oc-btn--light { color:#fff; }
.oc .oc-hero .oc-grad { color:transparent; }

/* Mixed-direction safety: content rows may still hold English text while the
   page is RTL (or vice-versa). plaintext resolves each block by its own first
   strong character, so trailing punctuation lands on the correct side. */
.oc .oc-h1, .oc .oc-h2, .oc .oc-h3, .oc .oc-lead,
.oc .oc-card__title, .oc .oc-quote__b, .oc .oc-cat__n,
.oc .oc-person__n, .oc .oc-feature__t, .oc-nav__link,
.oc-footer .oc-footer__about { unicode-bidi:plaintext; }

/* ============================ PAGE HEADER ============================ */
.oc-phead { position:relative; overflow:hidden; padding-block:clamp(44px,6vw,80px);
  background:radial-gradient(760px 380px at 78% -20%, var(--oc-primary-100) 0%, transparent 60%),
             linear-gradient(180deg,var(--oc-surface-2) 0%,var(--oc-surface) 100%);
  border-block-end:1px solid var(--oc-line); }
.oc-crumb { display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--oc-muted); margin-block-end:16px; flex-wrap:wrap; }
.oc-crumb a { color:var(--oc-muted); text-decoration:none; }
.oc-crumb a:hover { color:var(--oc-primary-700); }
.oc-crumb span[aria-current] { color:var(--oc-ink-2); font-weight:600; }

/* ============================ LISTING LAYOUT ============================ */
.oc-listing { display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }
@media (max-width:992px){ .oc-listing{grid-template-columns:1fr;} }

.oc-filters { background:var(--oc-surface); border:1px solid var(--oc-line); border-radius:var(--oc-r-lg);
  padding:24px; position:sticky; inset-block-start:calc(var(--oc-nav-h) + 20px); }
@media (max-width:992px){ .oc-filters{position:static;} }
.oc-filters__g + .oc-filters__g { margin-block-start:26px; padding-block-start:26px; border-block-start:1px solid var(--oc-line); }
.oc-filters__t { font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--oc-ink); margin-block-end:14px; }
.oc-check { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.9375rem; color:var(--oc-ink-2); cursor:pointer; }
.oc-check input { width:17px; height:17px; accent-color:var(--oc-primary); flex:none; cursor:pointer; margin:0; }
.oc-check:hover { color:var(--oc-primary-700); }
.oc-select { width:100%; padding:11px 14px; border-radius:var(--oc-r-sm); border:1px solid var(--oc-line-2);
  background:var(--oc-surface); font:inherit; font-size:.9375rem; color:var(--oc-ink); cursor:pointer; }
.oc-select:focus { outline:none; border-color:var(--oc-primary-400); box-shadow:var(--oc-ring); }
.oc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-block-end:28px; }
.oc-count { font-size:.9375rem; color:var(--oc-muted); }
.oc-count strong { color:var(--oc-ink); font-weight:700; }

/* empty state */
.oc-empty { text-align:center; padding:72px 24px; background:var(--oc-surface-2);
  border:1px dashed var(--oc-line-2); border-radius:var(--oc-r-lg); }
.oc-empty h3 { font-size:1.25rem; font-weight:700; margin:16px 0 8px; color:var(--oc-ink); }
.oc-empty p { color:var(--oc-muted); margin:0 0 24px; }

/* pagination (framework markup is bootstrap; keep it neutral) */
.oc-pager { margin-block-start:48px; display:flex; justify-content:center; }
.oc-pager .pagination { display:flex; gap:6px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.oc-pager .page-item .page-link { display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px; border-radius:var(--oc-r-sm); border:1px solid var(--oc-line);
  background:var(--oc-surface); color:var(--oc-ink-2); font-size:.9375rem; font-weight:600; text-decoration:none; }
.oc-pager .page-item .page-link:hover { border-color:var(--oc-primary-300); color:var(--oc-primary-700); background:var(--oc-primary-50); }
.oc-pager .page-item.active .page-link { background:var(--oc-primary); border-color:var(--oc-primary); color:#fff; }
.oc-pager .page-item.disabled .page-link { opacity:.45; pointer-events:none; }

/* ============================ AUTH ============================ */
.oc-auth { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; background:var(--oc-surface); }
.oc-auth__brand { position:relative; overflow:hidden; padding:56px;
  background:linear-gradient(150deg,var(--oc-primary-800) 0%,var(--oc-primary-600) 48%,var(--oc-accent-600) 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.oc-auth__brand::before { content:''; position:absolute; inset-block-start:-25%; inset-inline-end:-18%;
  width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%); }
.oc-auth__brand > * { position:relative; z-index:1; }
.oc-auth__brand h2 { color:#fff; font-size:clamp(1.6rem,1.1rem + 1.6vw,2.35rem); line-height:1.2;
  letter-spacing:-.02em; font-weight:800; margin:0 0 16px; }
.oc-auth__brand p { color:rgba(255,255,255,.88); font-size:1.0625rem; line-height:1.7; margin:0; }
.oc-auth__logo img { height:40px; width:auto; filter:brightness(0) invert(1); }
.oc-auth__points { list-style:none; padding:0; margin:32px 0 0; display:flex; flex-direction:column; gap:14px; }
.oc-auth__points li { display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.92); font-size:.9375rem; }
.oc-auth__tick { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center; flex:none; margin-block-start:1px; }

.oc-auth__panel { display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.oc-auth__box { width:100%; max-width:420px; }
.oc-auth__box h1 { font-size:1.75rem; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; color:var(--oc-ink); }
.oc-auth__box .oc-sub { color:var(--oc-muted); font-size:.9375rem; margin:0 0 32px; }

.oc-field { margin-block-end:18px; }
.oc-label { display:block; font-size:.875rem; font-weight:600; color:var(--oc-ink-2); margin-block-end:8px; }
.oc-input { width:100%; padding:13px 16px; border-radius:var(--oc-r-sm); border:1px solid var(--oc-line-2);
  background:var(--oc-surface); font:inherit; font-size:.9375rem; color:var(--oc-ink); transition:border-color .15s, box-shadow .15s; }
.oc-input:focus { outline:none; border-color:var(--oc-primary-400); box-shadow:var(--oc-ring); }
.oc-input::placeholder { color:var(--oc-muted); }
.oc-err { display:block; color:var(--oc-danger); font-size:.8125rem; margin-block-start:7px; }
.oc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-block-end:24px; }
.oc-divider { display:flex; align-items:center; gap:14px; margin-block:28px; color:var(--oc-muted); font-size:.8125rem; }
.oc-divider::before, .oc-divider::after { content:''; flex:1; height:1px; background:var(--oc-line); }
.oc-social { display:flex; gap:12px; }
.oc-social__btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px; border-radius:var(--oc-r-sm); border:1px solid var(--oc-line-2); background:var(--oc-surface);
  color:var(--oc-ink-2); font-size:.875rem; font-weight:600; text-decoration:none; }
.oc-social__btn:hover { background:var(--oc-surface-3); color:var(--oc-ink); }
.oc-auth__alt { text-align:center; margin-block-start:28px; font-size:.9375rem; color:var(--oc-muted); }

@media (max-width:900px){
  .oc-auth { grid-template-columns:1fr; min-height:auto; }
  .oc-auth__brand { display:none; }
  .oc-auth__panel { padding-block:56px; min-height:100vh; }
}

/* ============================ CONTACT ============================ */
.oc-contact { display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
@media (max-width:900px){ .oc-contact{grid-template-columns:1fr; gap:40px;} }
.oc-info { display:flex; flex-direction:column; gap:20px; }
.oc-info__row { display:flex; align-items:flex-start; gap:16px; padding:20px; background:var(--oc-surface);
  border:1px solid var(--oc-line); border-radius:var(--oc-r); }
.oc-info__ico { width:44px; height:44px; border-radius:var(--oc-r-sm); background:var(--oc-primary-50);
  display:flex; align-items:center; justify-content:center; flex:none; }
.oc-info__l { font-size:.8125rem; color:var(--oc-muted); margin-block-end:4px; }
.oc-info__v { font-weight:600; color:var(--oc-ink); font-size:.9375rem; word-break:break-word; }
.oc-info__v a { color:inherit; text-decoration:none; }
.oc-info__v a:hover { color:var(--oc-primary-700); }
.oc-form { background:var(--oc-surface); border:1px solid var(--oc-line); border-radius:var(--oc-r-lg); padding:32px; }
.oc-textarea { width:100%; padding:13px 16px; border-radius:var(--oc-r-sm); border:1px solid var(--oc-line-2);
  background:var(--oc-surface); font:inherit; font-size:.9375rem; color:var(--oc-ink); min-height:150px; resize:vertical; }
.oc-textarea:focus { outline:none; border-color:var(--oc-primary-400); box-shadow:var(--oc-ring); }
.oc-alert { padding:14px 18px; border-radius:var(--oc-r-sm); font-size:.9375rem; margin-block-end:22px; }
.oc-alert--ok { background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }
.oc-alert--err { background:#FEF2F2; color:#991B1B; border:1px solid #FECACA; }


/* ============================================================
   Site-wide typography.
   The legacy theme drives every one of its font rules through
   --font_family1/2 (icons use `font-family: themify` directly and
   are untouched), so redefining those variables restyles the whole
   site without a single blanket selector. html:root out-specifies
   the theme's :root block no matter the source order.
   ============================================================ */
html:root {
  --font_family1:'Inter','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font_family2:'Inter','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fontFamily1:'Inter','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fontFamily2:'Inter','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --bs-font-sans-serif:'Inter','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
body { font-family:var(--oc-font); }
/* form controls do not inherit the body font on their own */
button, input, select, textarea, optgroup { font-family:inherit; }
/* Arabic sits a touch larger and looser at the same nominal size */
html[dir="rtl"] body { line-height:1.75; }

/* Pagination arrows are literal ‹ / › entities, so mirror them in RTL. */
html[dir="rtl"] .oc-pager .page-item:first-child .page-link,
html[dir="rtl"] .oc-pager .page-item:last-child .page-link { transform:scaleX(-1); }