/* Firasa AI · gives the older pages (services, about, contact, FAQ, use cases, legal)
   and the free tools the Orbit look in light and dark: palette, type, page hero,
   cards, chips and buttons. Their markup and scripts stay as they are; this file
   only remaps their tokens and restyles their shared components. */

/* ---------- tokens ---------- */
html[data-orbit],
html[data-orbit] body.tool-page {
  --bg: #F7F5FB; --bg-1: #FFFFFF; --bg-2: #EFEAF8; --bg-3: #E5DCF5;
  --fg: #120A1F; --fg-muted: #5B5170; --fg-dim: #675D7E;
  --line: rgba(74, 35, 119, .12); --line-strong: rgba(74, 35, 119, .24);
  --accent: #6A3FB8; --accent-soft: #61529F; --accent-ink: #2A1642;
  --brand-deep: #4A2377; --brand-deep-2: #2A1642;
  --font-display: "Sora", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-sans: "DM Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --lx-card: #FFFFFF; --lx-glow: rgba(186, 105, 222, .22); --lx-shadow: 0 18px 50px rgba(74, 35, 119, .10);
  color-scheme: light;
}
html[data-orbit][data-theme="dark"],
html[data-orbit][data-theme="dark"] body.tool-page {
  --bg: #100A1A; --bg-1: #1C142C; --bg-2: #171024; --bg-3: #251A3A;
  --fg: #F3EFF9; --fg-muted: #B9AFCB; --fg-dim: #9286A8;
  --line: rgba(243, 239, 249, .12); --line-strong: rgba(243, 239, 249, .22);
  --accent: #B79BF2; --accent-soft: #C9B4F5; --accent-ink: #F3EFF9;
  --lx-card: #1C142C; --lx-glow: rgba(186, 105, 222, .16); --lx-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
html[data-orbit][dir="rtl"], html[data-orbit][dir="rtl"] body.tool-page { --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif; }

/* ---------- base type ---------- */
html[data-orbit] body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans) !important; }
html[data-orbit] main h1, html[data-orbit] main h2, html[data-orbit] main h3, html[data-orbit] main h4,
html[data-orbit] .display { font-family: var(--font-display) !important; }
html[data-orbit] main h2 { font-weight: 600; letter-spacing: -0.03em; }
html[data-orbit] main h3 { font-weight: 600; letter-spacing: -0.015em; }
html[data-orbit][dir="rtl"] main h1, html[data-orbit][dir="rtl"] main h2, html[data-orbit][dir="rtl"] main h3 { letter-spacing: 0 !important; }
html[data-orbit] .container { max-width: 1260px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
html[data-orbit] body.tool-page .wrap { max-width: 1260px; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
html[data-orbit] main .eyebrow:not(.page-head .eyebrow):not(.hero .eyebrow) { font-family: var(--font-mono); color: var(--accent); }

/* ---------- page hero: one look for every page ---------- */
html[data-orbit] .pg-band,
html[data-orbit] .uc-band,
html[data-orbit] body.tool-page .page-head,
html[data-orbit] body.tool-page .hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg) !important; color: var(--fg) !important;
  border-bottom: 1px solid var(--line);
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px) !important;
}
html[data-orbit] .pg-band::before,
html[data-orbit] .uc-band::before,
html[data-orbit] body.tool-page .page-head::before,
html[data-orbit] body.tool-page .hero::before {
  content: ""; position: absolute; z-index: -1; inset: -45% -12% auto auto; width: 62%; aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--lx-glow), transparent); pointer-events: none;
}
html[data-orbit][dir="rtl"] .pg-band::before, html[data-orbit][dir="rtl"] .uc-band::before,
html[data-orbit][dir="rtl"] body.tool-page .page-head::before, html[data-orbit][dir="rtl"] body.tool-page .hero::before { inset: -45% auto auto -12%; }
html[data-orbit] .pg-net, html[data-orbit] .net-uc, html[data-orbit] body.tool-page .net { display: none !important; }
html[data-orbit] body.tool-page .hero .hero-inner { max-width: 1260px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }

html[data-orbit] .pg-band h1, html[data-orbit] .uc-band h1,
html[data-orbit] body.tool-page .page-head h1, html[data-orbit] body.tool-page .hero h1 {
  margin: 18px 0 0; color: var(--fg) !important; font-weight: 600 !important;
  font-size: clamp(36px, 5.2vw, 64px) !important; line-height: 1.05 !important; letter-spacing: -0.04em !important; max-width: 20ch;
}
html[data-orbit][dir="rtl"] .pg-band h1, html[data-orbit][dir="rtl"] .uc-band h1,
html[data-orbit][dir="rtl"] body.tool-page .page-head h1, html[data-orbit][dir="rtl"] body.tool-page .hero h1 { line-height: 1.3 !important; }
html[data-orbit] .pg-band__lede, html[data-orbit] .uc-band p,
html[data-orbit] body.tool-page .page-head p, html[data-orbit] body.tool-page .hero .lead {
  color: var(--fg-muted) !important; font-size: clamp(16.5px, 1.35vw, 19px) !important; line-height: 1.65 !important; max-width: 62ch; margin-top: 20px !important;
}
html[data-orbit] .pg-band__eyebrow, html[data-orbit] .uc-band__eyebrow,
html[data-orbit] body.tool-page .page-head .eyebrow, html[data-orbit] body.tool-page .hero .eyebrow {
  display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  font: 600 12px var(--font-mono) !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--accent) !important;
}
html[data-orbit] .pg-band__eyebrow::before, html[data-orbit] .uc-band__eyebrow::before,
html[data-orbit] body.tool-page .page-head .eyebrow::before, html[data-orbit] body.tool-page .hero .eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #BA69DE; box-shadow: 0 0 0 4px rgba(186, 105, 222, .22);
}
html[data-orbit] body.tool-page .hero .mark,
html[data-orbit] body.tool-page .page-head .mark {
  color: transparent !important; background: linear-gradient(100deg, #4A2377 0%, #7A4FC4 45%, #BA69DE 100%); -webkit-background-clip: text; background-clip: text;
}
html[data-orbit][data-theme="dark"] body.tool-page .hero .mark,
html[data-orbit][data-theme="dark"] body.tool-page .page-head .mark { background-image: linear-gradient(100deg, #B79BF2 0%, #D29BEB 55%, #F3E96D 100%); }
html[data-orbit] .pg-band__trust > *, html[data-orbit] .pg-band [class*="chip"] {
  background: var(--lx-card) !important; color: var(--fg-muted) !important; border: 1px solid var(--line) !important;
}
html[data-orbit] body.tool-page .hero a[style*="gold-soft"] { color: var(--accent) !important; }

/* ---------- cards and panels ---------- */
html[data-orbit] main [class$="-card"], html[data-orbit] main [class*="-card "],
html[data-orbit] main .card, html[data-orbit] main .panel,
html[data-orbit] main .faq-item, html[data-orbit] main .tool-card,
html[data-orbit] body.tool-page .estimate-box, html[data-orbit] body.tool-page .tool-shell > section,
html[data-orbit] body.tool-page .q-card, html[data-orbit] body.tool-page .result-card {
  background: var(--lx-card) !important; border-color: var(--line) !important; border-radius: var(--r-lg);
}
html[data-orbit] main a[class$="-card"]:hover, html[data-orbit] main a.card:hover, html[data-orbit] main a.tool-card:hover {
  border-color: var(--line-strong) !important; box-shadow: var(--lx-shadow); transform: translateY(-2px);
}
html[data-orbit] main a[class$="-card"], html[data-orbit] main a.card, html[data-orbit] main a.tool-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* featured cards stay deep purple in both themes */
html[data-orbit] main .srv-card--feature, html[data-orbit] main .engage-card--feat {
  background: linear-gradient(140deg, #2A1642 0%, #4A2377 60%, #61529F 100%) !important; border-color: transparent !important; color: #FFFFFF !important;
}
html[data-orbit] main .srv-card--feature :is(h3, .srv-card__head, .mono, li), html[data-orbit] main .engage-card--feat :is(h3, .mono, .engage-card__price) { color: #FFFFFF !important; }
html[data-orbit] main .srv-card--feature p, html[data-orbit] main .engage-card--feat p { color: rgba(255, 255, 255, .86) !important; }
html[data-orbit] main .srv-card--feature .tag, html[data-orbit] main .srv-card--feature .chip, html[data-orbit] main .engage-card--feat .mono { border-color: rgba(255, 255, 255, .35) !important; color: #FFFFFF !important; }
html[data-orbit] main .chip-n { opacity: 1 !important; }

/* ---------- chips, tags, badges ---------- */
html[data-orbit] main .chip, html[data-orbit] main .tag, html[data-orbit] main [class$="-tag"], html[data-orbit] main [class$="__tag"] {
  border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--fg-muted); font-family: var(--font-mono);
}
html[data-orbit] main .chip.is-active, html[data-orbit] main .chip.is-on, html[data-orbit] main .chip[aria-pressed="true"], html[data-orbit] main .chip.active {
  background: #4A2377 !important; border-color: #4A2377 !important; color: #FFFFFF !important;
}

/* ---------- buttons ---------- */
html[data-orbit] main .pill, html[data-orbit] main .btn, html[data-orbit] main button[type="submit"] { border-radius: 999px; font-family: var(--font-sans); font-weight: 600; }
html[data-orbit] main .pill-filled, html[data-orbit] main .btn.primary, html[data-orbit] main .btn-primary,
html[data-orbit] main button[type="submit"] { background: #4A2377 !important; border-color: #4A2377 !important; color: #FFFFFF !important; }
html[data-orbit] main .pill-filled:hover, html[data-orbit] main .btn.primary:hover, html[data-orbit] main .btn-primary:hover,
html[data-orbit] main button[type="submit"]:hover { background: #61529F !important; border-color: #61529F !important; }
html[data-orbit] .pill-yellow, html[data-orbit] .btn.gold { background: #F3E96D !important; border-color: #F3E96D !important; color: #120A1F !important; }

/* ---------- form fields ---------- */
html[data-orbit] main input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), html[data-orbit] main select, html[data-orbit] main textarea {
  background: var(--lx-card); color: var(--fg); border-color: var(--line-strong); border-radius: 14px; font-family: var(--font-sans);
}
html[data-orbit] main input::placeholder, html[data-orbit] main textarea::placeholder { color: var(--fg-dim); }

/* ---------- focus and small fixes ---------- */
html[data-orbit] a:focus-visible, html[data-orbit] button:focus-visible, html[data-orbit] input:focus-visible, html[data-orbit] select:focus-visible, html[data-orbit] textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-orbit] .map-card--live .map-card__addr span { color: #7A5A12; }
html[data-orbit][data-theme="dark"] .map-card--live .map-card__addr span { color: #F3E96D; }

/* use cases: the problem line and timing merged into each industry tab */
.case-lede { font-size: 1.05rem; line-height: 1.65; color: var(--fg-1, inherit); margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; background: color-mix(in oklab, #BA69DE 10%, transparent); border: 1px solid color-mix(in oklab, #BA69DE 25%, transparent); }
.case-meta span.case-meta__time { flex-basis: 100%; }
/* Arabic never takes letter-spacing (it breaks joining) and reads better in the body font */
html[dir="rtl"] .mono, html[dir="rtl"] .case-meta span, html[dir="rtl"] .case-motion__label, html[dir="rtl"] .chip { font-family: inherit !important; letter-spacing: 0 !important; text-transform: none !important; }