/* =========================================================
   GOMAA INTELLIGENCE — SERVICES PLATFORM
   Built on the existing tokens.css / base.css / layout.css.
   Uses CSS logical properties throughout for RTL/LTR safety.
   ========================================================= */

.gi-page {
  min-height: 100vh;
}

/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.gi-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.gi-nav__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.gi-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  white-space: nowrap;
}

.gi-nav__brand span {
  color: var(--color-accent);
}

.gi-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.gi-nav__links a {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.gi-nav__links a:hover,
.gi-nav__links a[aria-current="page"] {
  color: var(--color-ink);
}

.gi-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.gi-nav__lang {
  min-height: 2.4rem;
  padding-inline: 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 800px) {
  .gi-nav__links {
    display: none;
  }
}

/* ---------------------------------------------------------
   MOBILE MENU (shown below 800px, replaces .gi-nav__links)
   --------------------------------------------------------- */

.gi-nav__mobile {
  display: none;
}

.gi-nav__mobile details {
  position: relative;
}

.gi-nav__mobile summary {
  list-style: none;
  cursor: pointer;
  min-height: 2.6rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 700;
}

.gi-nav__mobile summary::-webkit-details-marker {
  display: none;
}

.gi-nav__mobile-links {
  position: absolute;
  top: calc(100% + 0.6rem);
  inset-inline-end: 0;
  z-index: 20;
  display: grid;
  min-width: 200px;
  padding: 0.45rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 16px 40px rgba(37, 34, 30, 0.10);
}

.gi-nav__mobile-links a,
.gi-nav__mobile-links button {
  display: block;
  width: 100%;
  text-align: start;
  border: 0;
  background: none;
  padding: 0.75rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.gi-nav__mobile-links a:hover,
.gi-nav__mobile-links button:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.gi-nav__theme {
  min-height: 2.4rem;
  min-width: 2.4rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

@media (max-width: 800px) {
  .gi-nav__mobile {
    display: block;
  }

  .gi-nav__actions .gi-nav__lang,
  .gi-nav__actions .site-button {
    display: none;
  }
}

/* ---------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------- */

.gi-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.gi-breadcrumbs a {
  color: var(--color-muted);
}

.gi-breadcrumbs a:hover {
  color: var(--color-ink);
}

.gi-breadcrumbs__sep {
  opacity: 0.5;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.gi-hero {
  padding-block: var(--space-12) var(--space-10);
  border-bottom: 1px solid var(--color-line);
}

.gi-hero__eyebrow {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gi-hero__title {
  max-width: 900px;
  margin: var(--space-4) 0 var(--space-5);
  font-size: clamp(2.2rem, 5vw, var(--text-3xl));
}

.gi-hero__lead {
  max-width: 640px;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  margin-bottom: var(--space-6);
}

.gi-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------------------------------------------------------
   PROBLEM SELECTOR
   --------------------------------------------------------- */

.gi-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.gi-selector__option {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out);
}

.gi-selector__option:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

@media (max-width: 800px) {
  .gi-selector {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   CATEGORY / OFFER CARDS
   --------------------------------------------------------- */

.gi-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.gi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out);
}

.gi-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.gi-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin: 0;
}

.gi-card__text {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0;
}

.gi-card__link {
  margin-top: auto;
}

@media (max-width: 900px) {
  .gi-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .gi-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   OFFER PAGE SECTIONS
   --------------------------------------------------------- */

.gi-section {
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--color-line);
}

.gi-section__label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.gi-section__title {
  max-width: 760px;
  font-size: clamp(1.6rem, 3vw, var(--text-2xl));
  margin-bottom: var(--space-3);
}

.gi-list {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: 1.1rem;
  margin: 0;
}

.gi-list li {
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.7;
  list-style: disc;
}

.gi-list--muted li {
  color: var(--color-muted);
}

/* ---------------------------------------------------------
   PACKAGES
   --------------------------------------------------------- */

.gi-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.gi-package {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.gi-package__tier {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.gi-package__price {
  color: var(--color-accent-dark);
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.gi-package__summary {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 800px) {
  .gi-packages {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   FAQ (ACCORDION VIA NATIVE <details>)
   --------------------------------------------------------- */

.gi-faq {
  display: grid;
  gap: var(--space-3);
}

.gi-faq details {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
}

.gi-faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.gi-faq summary::-webkit-details-marker {
  display: none;
}

.gi-faq p {
  color: var(--color-muted);
  margin: var(--space-3) 0 0;
}

/* ---------------------------------------------------------
   HOW IT WORKS
   --------------------------------------------------------- */

.gi-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.gi-step {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.gi-step__index {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.gi-step__title {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.gi-step__text {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .gi-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .gi-steps {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   REQUEST FORM
   --------------------------------------------------------- */

.gi-form {
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
}

.gi-form__field {
  display: grid;
  gap: 0.4rem;
}

.gi-form__field label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gi-form__field input,
.gi-form__field select,
.gi-form__field textarea {
  min-height: 2.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
}

.gi-form__field textarea {
  min-height: 7rem;
  resize: vertical;
}

.gi-form__conditional {
  display: none;
}

.gi-form__conditional.is-visible {
  display: grid;
}

.gi-form__status {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.gi-form__status[data-state="success"] {
  color: var(--color-success);
}

.gi-form__status[data-state="error"] {
  color: var(--color-danger);
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.gi-footer {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.gi-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.gi-footer__inner a {
  color: var(--color-muted);
}

.gi-footer__inner a:hover {
  color: var(--color-ink);
}

/* ---------------------------------------------------------
   ACCESSIBILITY / MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gi-card:hover,
  .gi-selector__option:hover {
    transform: none;
  }
}

/* Semantic/accessibility and offer-process polish */
.gi-section__lead { max-width: 760px; margin-block-start: var(--space-3); color: var(--color-ink); font-size: var(--text-lg); line-height: 1.8; }
.gi-subsection__title { margin-block: var(--space-5) var(--space-2); font-size: var(--text-md); color: var(--color-ink); }
.gi-process-list { display: grid; gap: var(--space-3); max-width: 760px; margin-block-start: var(--space-4); padding-inline-start: 1.25rem; }
.gi-process-list li { padding-inline-start: .4rem; }
.gi-process-list strong, .gi-process-list span { display: block; }
.gi-process-list span { margin-block-start: .25rem; color: var(--color-muted); }
.gi-form__field:focus-within label { color: var(--color-accent); }
.gi-form__field input:focus-visible, .gi-form__field select:focus-visible, .gi-form__field textarea:focus-visible, .gi-nav__theme:focus-visible, .gi-nav__mobile summary:focus-visible, .gi-nav__mobile-links a:focus-visible, .gi-nav__mobile-links button:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 2px; }
.gi-form__field input:invalid:not(:placeholder-shown), .gi-form__field select:invalid, .gi-form__field textarea:invalid:not(:placeholder-shown) { border-color: var(--color-danger); }
.gi-nav__theme { cursor: pointer; }

/* ---------------------------------------------------------
   BRAND SIGNATURE (spec §23) — a restrained analytical "pulse",
   not a logo animation. Static dot; a faint pulse only if the
   visitor hasn't asked for reduced motion.
   --------------------------------------------------------- */

.gi-nav__brand {
  position: relative;
}

.gi-nav__brand-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-start: 0.35rem;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .gi-nav__brand-dot {
    animation: gi-pulse 2.6s ease-in-out infinite;
  }
}

@keyframes gi-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* Nav becomes slightly more compact once scrolled (spec §26) */
.gi-nav.is-scrolled .gi-nav__inner {
  min-height: 60px;
}

.gi-nav {
  transition: background var(--duration-base) ease;
}

/* ---------------------------------------------------------
   HERO FLOW VISUAL (spec §6/§8) — a lightweight SVG that shows
   raw data becoming a decision. Communicates the process, not
   decoration.
   --------------------------------------------------------- */

.gi-hero__visual {
  margin-top: var(--space-8);
  max-width: 640px;
}

.gi-hero__visual--sm {
  margin-top: var(--space-5);
  max-width: 320px;
}

.gi-flow {
  width: 100%;
  height: auto;
  overflow: visible;
}

.gi-flow__node circle,
.gi-flow__link {
  opacity: 0;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .gi-flow__node circle,
  .gi-flow__link {
    animation: gi-flow-in 500ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 140ms + 120ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-flow__node circle,
  .gi-flow__link {
    opacity: 1;
    transform: none;
  }
}

@keyframes gi-flow-in {
  to { opacity: 1; transform: translateY(0); }
}

.gi-visual {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------
   PROBLEM EXPLORER — dynamic result panel + "not sure" flow
   (spec §9/§10)
   --------------------------------------------------------- */

.gi-selector--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gi-notsure__btn {
  border: 1px solid var(--color-line);
  font: inherit;
}

.gi-notsure__btn.is-active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

@media (max-width: 800px) {
  .gi-selector--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gi-selector__result,
.gi-notsure {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.gi-selector__result-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin: var(--space-2) 0 var(--space-3);
}

.gi-selector__result-sub {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.gi-selector__result-price {
  color: var(--color-accent-dark);
  font-weight: 700;
  margin: var(--space-4) 0;
}

.gi-selector__result.is-visible,
.gi-selector__result {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .gi-selector__result[hidden] { display: none; }
  .gi-selector__result:not([hidden]) {
    animation: gi-fade-up 380ms var(--ease-out);
  }
}

@keyframes gi-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   SERVICE CARDS — visual identity + entry pricing (spec §11)
   --------------------------------------------------------- */

.gi-card--visual {
  opacity: 1;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.gi-card__price {
  color: var(--color-accent-dark);
  font-weight: 700;
  font-size: var(--text-sm);
  margin: 0;
}

/* Button hover: a small directional nudge communicates "go" (spec §26) */
.site-button {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .site-button:hover {
    letter-spacing: 0.01em;
  }
}

/* ---------------------------------------------------------
   CURRENCY TOGGLE (spec §15)
   --------------------------------------------------------- */

.gi-currency-toggle {
  display: inline-flex;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.gi-currency-toggle__btn {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  padding: 0.5rem 0.9rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gi-currency-toggle__btn.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
}

.gi-package__price--custom {
  color: var(--color-muted);
}

/* ---------------------------------------------------------
   VISUAL EXAMPLES — before/after + flow steps (spec §17/§25)
   --------------------------------------------------------- */

.gi-beforeafter__toggle {
  display: inline-flex;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.gi-beforeafter__btn {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

.gi-beforeafter__btn.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
}

.gi-beforeafter__table {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  font-family: "Courier New", monospace;
  font-size: var(--text-sm);
}

.gi-beforeafter__table th,
.gi-beforeafter__table td {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-line);
  text-align: start;
}

.gi-beforeafter__table thead th {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Default view shows both columns; the toggle narrows focus on
   small screens via data-state, kept simple and framework-free. */
.gi-beforeafter[data-state="after"] .gi-beforeafter__table td:first-child,
.gi-beforeafter[data-state="after"] .gi-beforeafter__table th:first-child {
  opacity: 0.35;
}

.gi-beforeafter[data-state="before"] .gi-beforeafter__table td:last-child,
.gi-beforeafter[data-state="before"] .gi-beforeafter__table th:last-child {
  opacity: 0.35;
}

.gi-flowsteps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.gi-flowsteps__step {
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
}

.gi-flowsteps__step--accent {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.gi-flowsteps__arrow {
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .gi-flowsteps {
    flex-direction: column;
    align-items: stretch;
  }
  .gi-flowsteps__arrow {
    text-align: center;
  }
}

/* ---------------------------------------------------------
   REQUEST PAGE — form + live project summary (spec §19)
   --------------------------------------------------------- */

.gi-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: var(--space-8);
  align-items: start;
}

.gi-live-summary {
  position: sticky;
  top: calc(72px + var(--space-5));
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.gi-live-summary dl {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
}

.gi-live-summary dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-3);
}

.gi-live-summary dd {
  margin: 0;
  font-weight: 700;
}

.gi-live-summary__note {
  margin: var(--space-4) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .gi-request-layout {
    grid-template-columns: 1fr;
  }
  .gi-live-summary {
    position: static;
    order: -1;
  }
}

/* ---------------------------------------------------------
   LOGO MARK — custom geometric G/I data mark (brand redesign).
   Inherits currentColor so it adapts to ink/accent + dark mode
   without separate light/dark assets.
   --------------------------------------------------------- */

.gi-logo__mark {
  color: var(--color-accent);
  flex-shrink: 0;
}

.gi-nav__brand-word {
  color: var(--color-ink);
}

.gi-nav__brand-dot {
  display: inline-block;
  color: var(--color-accent);
  margin: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  animation: none;
}

.gi-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.gi-footer__brand .gi-logo__mark {
  opacity: 0.85;
}

/* ---------------------------------------------------------
   HERO FLOW EXPLAINER — interactive DATA→STRUCTURE→ANALYSIS→
   INSIGHT→DECISION tabs. Real HTML buttons (not SVG hit-areas)
   for accessibility; the SVG spine above is purely decorative.
   --------------------------------------------------------- */

.gi-flow__wrap {
  margin-top: var(--space-8);
  max-width: 720px;
}

.gi-flow__dot {
  opacity: 0;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .gi-flow__dot,
  .gi-flow__link {
    animation: gi-flow-in 500ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 140ms + 120ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-flow__dot { opacity: 1; transform: none; }
}

.gi-flow__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.gi-flow__tab {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  text-align: start;
  background: none;
  border: none;
  border-top: 2px solid var(--color-line);
  padding: var(--space-2) var(--space-1) 0;
  font-family: var(--font-body);
  cursor: pointer;
  color: var(--color-muted);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.gi-flow__tab:hover {
  color: var(--color-ink);
}

.gi-flow__tab.is-active {
  border-top-color: var(--color-accent);
  color: var(--color-ink);
}

.gi-flow__tab-index {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.gi-flow__tab-label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.gi-flow__panels {
  margin-top: var(--space-4);
  min-height: 3.4em;
}

.gi-flow__panel {
  display: none;
  color: var(--color-muted);
  max-width: 58ch;
  line-height: 1.6;
}

.gi-flow__panel.is-active {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .gi-flow__panel.is-active {
    animation: gi-fade-up var(--duration-base) var(--ease-out);
  }
}

@keyframes gi-fade-up {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .gi-flow__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------
   DATA PLAYGROUND — sample-data walkthrough (RAW → CLEAN →
   ANALYZED → INSIGHT). Reuses the .gi-flow__tabs tab styling
   for a consistent interaction language across the homepage.
   --------------------------------------------------------- */

.gi-playground {
  margin-top: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
}

.gi-playground .gi-flow__tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gi-playground__panels {
  margin-top: var(--space-5);
  overflow-x: auto;
}

.gi-playground__panel {
  display: none;
}

.gi-playground__panel.is-active {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .gi-playground__panel.is-active {
    animation: gi-fade-up var(--duration-base) var(--ease-out);
  }
}

.gi-playground__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 480px;
}

.gi-playground__table th,
.gi-playground__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  text-align: start;
  white-space: nowrap;
}

.gi-playground__table th {
  color: var(--color-muted);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gi-playground__insight {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  max-width: 60ch;
  line-height: 1.5;
  padding: var(--space-4) 0;
}

@media (max-width: 640px) {
  .gi-playground .gi-flow__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------
   SCOPE ESTIMATOR — indicative price range from real offer
   data only (essential.min ... professional.max), never
   fabricated figures. Reuses .gi-flow__tab visual language.
   --------------------------------------------------------- */

.gi-estimator {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.gi-estimator__factor-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.gi-estimator__opt.is-active {
  border-top-color: var(--color-accent);
  color: var(--color-ink);
}

.gi-estimator__result {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
}

.gi-estimator__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-accent-dark);
  margin: var(--space-1) 0;
}

:root[data-theme="dark"] .gi-estimator__price {
  color: var(--color-accent);
}

/* ---------------------------------------------------------
   SERVICES EXPLORER — inline outcome preview so cards are
   explorable, not just clickable boxes (spec: services
   explorer). Native <details>, no extra JS needed.
   --------------------------------------------------------- */

.gi-card__preview {
  margin-top: var(--space-3);
}

.gi-card__preview summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-accent-dark);
  list-style: none;
}

:root[data-theme="dark"] .gi-card__preview summary {
  color: var(--color-accent);
}

.gi-card__preview summary::-webkit-details-marker {
  display: none;
}

.gi-card__preview[open] summary {
  margin-bottom: var(--space-2);
}

.gi-card__preview ul {
  margin: 0;
  padding-inline-start: 1.1em;
  font-size: var(--text-sm);
  color: var(--color-muted);
  display: grid;
  gap: 0.3em;
}


/* === Header Visual Elevation & Responsive Fixes === */
.gi-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.gi-logo__mark {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

.gi-nav__brand:hover .gi-logo__mark {
  transform: scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.7));
}

.brand-gomaa {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.brand-intelligence {
  background: linear-gradient(135deg, #f7e7a1 0%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.gi-nav__brand-dot {
  color: #d4af37;
}

.gi-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gi-nav__lang {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: 36px;
  padding: 0 0.75rem;
  margin: 0;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .gi-nav__inner {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
  .gi-nav__brand {
    font-size: 0.98rem;
  }
  .gi-nav__actions .site-button {
    display: none;
  }
  .gi-nav__actions {
    gap: 0.4rem;
  }
  .gi-nav__lang {
    font-size: 0.8rem;
    padding: 0 0.5rem;
    height: 32px;
  }
}


/* === Animated Logo & Refined Color Palette === */
@keyframes giLogoFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.25));
  }
  50% {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.65));
  }
}

.gi-logo__mark {
  animation: giLogoFloat 3.5s ease-in-out infinite;
  transform-origin: center;
}

/* Metallic Champagne Gradient for Text */
.gi-nav__brand-word {
  background: linear-gradient(135deg, #FFFFFF 0%, #E8D399 45%, #C59B27 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.brand-gomaa, .brand-intelligence {
  background: inherit;
  -webkit-background-clip: inherit;
  -webkit-text-fill-color: inherit;
}

.gi-nav__brand-dot {
  -webkit-text-fill-color: #D4AF37;
}

/* Refined Theme Toggle Icon (Sun / Moon) */
.gi-nav__theme {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.25s ease;
  color: #E8D399;
}

.gi-nav__theme:hover {
  border-color: #D4AF37;
  background: rgba(212, 175, 55, 0.12);
  transform: scale(1.05);
}


/* === Fix SVG Display & Force Floating Animation === */
svg.gi-logo__mark {
  display: inline-block !important;
  animation: giLogoFloat 3s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform;
}

@keyframes giLogoFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
  }
  50% {
    transform: translateY(-4px) scale(1.07);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.75));
  }
}


/* === Hero Actions & Stepper Responsive Fixes === */

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.25s ease;
  background: linear-gradient(135deg, #e8d399 0%, #d4af37 100%);
  color: #121212 !important;
  border: 1px solid #d4af37;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.site-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
  background: linear-gradient(135deg, #ffffff 0%, #e8d399 100%);
}

.site-button--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #e8d399 !important;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: none;
}

.site-button--secondary:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
  color: #ffffff !important;
}

/* Stepper Fixes */
.gi-flow__wrap {
  margin-top: 2rem;
  width: 100%;
}

.gi-flow {
  width: 100%;
  height: auto;
  display: block;
}

.gi-flow__tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.5rem;
}

.gi-flow__tab {
  background: transparent;
  border: none;
  color: var(--color-muted, #888);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
}

.gi-flow__tab-index {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.8;
}

.gi-flow__tab-label {
  font-size: 0.8rem;
  white-space: nowrap;
}

.gi-flow__tab.is-active, .gi-flow__tab:hover {
  color: #d4af37;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .gi-hero__actions {
    width: 100%;
    display: flex;
    gap: 0.5rem;
  }

  .gi-hero__actions .site-button {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-size: 0.82rem;
    text-align: center;
    white-space: nowrap;
  }

  .gi-flow__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gi-flow__tabs::-webkit-scrollbar {
    display: none;
  }

  .gi-flow__tab {
    min-width: 65px;
    flex-shrink: 0;
  }

  .gi-flow__tab-label {
    font-size: 0.72rem;
  }
}


/* === Problem Selector Interactive Layout & Styling === */

#problem-selector {
  padding-block: var(--space-10, 3rem) var(--space-12, 4rem);
}

.gi-selector {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 0.85rem !important;
  margin-block: 1.5rem 2rem;
}

.gi-selector__option {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  color: #e0e0e0 !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gi-selector__option:hover {
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.08);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
}

.gi-selector__option.is-active {
  border-color: #d4af37 !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

/* Solution Result Card */
.gi-selector__result {
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.9) 0%, rgba(18, 18, 18, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  padding: 1.75rem;
  margin-top: 1.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: giFadeInUp 0.35s ease-out;
}

@keyframes giFadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gi-selector__result-title {
  color: #ffffff;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.gi-selector__result-sub {
  color: #d4af37;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 1rem;
}

.gi-selector__result .gi-list {
  margin-block: 0.75rem 1.25rem;
  padding-right: 1.2rem;
}

.gi-selector__result .gi-list li {
  margin-bottom: 0.4rem;
  color: #cccccc;
  font-size: 0.88rem;
  line-height: 1.5;
}

.gi-selector__result-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8d399;
  margin-bottom: 1.25rem;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .gi-selector {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }

  .gi-selector__option {
    padding: 0.75rem 0.5rem;
    font-size: 0.82rem;
    min-height: 54px;
  }

  .gi-selector__result {
    padding: 1.25rem;
  }
}


/* === Interactive Data Playground Enhancements === */

.gi-playground {
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.95) 0%, rgba(15, 15, 15, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Tabs Navigation Container */
.gi-playground .gi-flow__tabs {
  background: rgba(0, 0, 0, 0.35);
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 1.25rem;
  display: flex !important;
  gap: 0.35rem;
  overflow-x: auto;
}

.gi-playground .gi-flow__tab {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  white-space: nowrap;
}

.gi-playground .gi-flow__tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.gi-playground .gi-flow__tab.is-active {
  background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%) !important;
  color: #121212 !important;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

/* Scrollable Panels & Table Design */
.gi-playground__panels {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.gi-playground__table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 0.88rem;
  min-width: 380px;
}

.gi-playground__table th {
  padding: 0.75rem 1rem;
  background: rgba(212, 175, 55, 0.08);
  color: #e8d399;
  font-weight: 600;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.gi-playground__table td {
  padding: 0.75rem 1rem;
  color: #dddddd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
}

.gi-playground__table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* Insight Callout Card */
.gi-playground__insight {
  background: rgba(212, 175, 55, 0.08);
  border-right: 4px solid #d4af37;
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  color: #f0f0f0;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.5rem 0;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .gi-playground {
    padding: 1rem;
  }
  .gi-playground .gi-flow__tab {
    padding: 0.5rem 0.5rem;
    font-size: 0.78rem;
  }
  .gi-playground__table th,
  .gi-playground__table td {
    padding: 0.6rem 0.65rem;
    font-size: 0.8rem;
  }
}


/* === Service Cards & Request Form Premium Redesign === */

/* Service Cards */
.gi-service-card, .gi-card {
  background: linear-gradient(145deg, rgba(28, 28, 28, 0.9) 0%, rgba(18, 18, 18, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 1.25rem;
}

.gi-service-card:hover, .gi-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.18);
}

.gi-service-card__price, [class*="price"] {
  color: #e8d399;
  font-weight: 700;
  font-size: 1.05rem;
  margin-block: 0.75rem;
  display: inline-block;
  background: rgba(212, 175, 55, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Service Card Links & Buttons */
.gi-service-card a, .gi-card a {
  align-self: flex-start;
}

.gi-service-card .site-button, .gi-card .site-button {
  width: 100%;
  margin-top: 0.75rem;
}

/* Request Form Inputs Styling */
.gi-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: rgba(20, 20, 20, 0.6);
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.gi-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gi-form__field label {
  color: #e8d399;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.gi-form__field input[type="text"],
.gi-form__field input[type="email"],
.gi-form__field input[type="url"],
.gi-form__field select,
.gi-form__field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(12, 12, 12, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.92rem;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.gi-form__field input:focus,
.gi-form__field select:focus,
.gi-form__field textarea:focus {
  border-color: #d4af37;
  background: rgba(22, 22, 22, 0.95);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}

.gi-form__field select option {
  background: #181818;
  color: #ffffff;
  padding: 0.5rem;
}

.gi-form__field textarea {
  min-height: 100px;
  resize: vertical;
}

/* Live Quote Summary Card */
.gi-summary, [id*="summary"], [class*="summary-card"] {
  background: linear-gradient(135deg, rgba(35, 30, 20, 0.85) 0%, rgba(18, 18, 18, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 1.35rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .gi-form {
    padding: 1rem;
  }
  
  .gi-form__field input[type="text"],
  .gi-form__field input[type="email"],
  .gi-form__field input[type="url"],
  .gi-form__field select,
  .gi-form__field textarea {
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
  }
}


/* ==========================================================================
   Inner Service Detail Pages Styling (Flowsteps, Process, Estimator, FAQ)
   ========================================================================== */

/* Breadcrumbs Navigation */
.gi-breadcrumbs {
  font-size: var(--text-xs, 0.8rem);
  color: var(--color-muted, #888);
  margin-block: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.gi-breadcrumbs a {
  color: var(--color-muted, #aaa);
  text-decoration: none;
  transition: color 0.2s;
}
.gi-breadcrumbs a:hover {
  color: #d4af37;
}
.gi-breadcrumbs__sep {
  color: rgba(212, 175, 55, 0.4);
}

/* Flowsteps Visual Diagram */
.gi-flowsteps {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-block: 1rem;
}
.gi-flowsteps__step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #ddd;
}
.gi-flowsteps__step--accent {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
  color: #e8d399;
  font-weight: 600;
}
.gi-flowsteps__arrow {
  color: #d4af37;
  font-weight: bold;
}

/* Process Timeline */
.gi-process-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  counter-reset: process-step;
}
.gi-process-list li {
  position: relative;
  padding-right: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.gi-process-list li::before {
  counter-increment: process-step;
  content: counter(process-step);
  position: absolute;
  right: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid #d4af37;
  border-radius: 50%;
  color: #e8d399;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.gi-process-list li strong {
  color: #ffffff;
  font-size: 1rem;
}
.gi-process-list li span {
  color: var(--color-muted, #aaa);
  font-size: 0.88rem;
}

/* Interactive Price Estimator */
.gi-estimator {
  background: rgba(18, 18, 18, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.gi-estimator__factor-label {
  color: #e8d399;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.gi-flow__tabs {
  display: grid;
  gap: 0.5rem;
}
.gi-flow__tab {
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s ease;
  text-align: center;
}
.gi-flow__tab[aria-pressed="true"], .gi-flow__tab.is-active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #e8d399;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}
.gi-estimator__result {
  background: rgba(25, 25, 25, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  margin-top: 0.5rem;
}
.gi-estimator__price {
  font-size: 1.8rem;
  font-weight: 800;
  color: #e8d399;
  margin-block: 0.25rem;
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Currency Toggle Switch */
.gi-currency-toggle {
  display: inline-flex;
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}
.gi-currency-toggle__btn {
  background: transparent;
  border: none;
  color: #888;
  padding: 0.35rem 0.85rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.gi-currency-toggle__btn.is-active {
  background: #d4af37;
  color: #111;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.4);
}

/* Package Cards Grid */
.gi-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.gi-package {
  background: linear-gradient(145deg, rgba(26, 26, 26, 0.9) 0%, rgba(16, 16, 16, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 14px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.gi-package:hover {
  border-color: #d4af37;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
}
.gi-package__tier {
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 700;
}
.gi-package__price {
  font-size: 1.4rem;
  font-weight: 800;
  color: #e8d399;
}

/* FAQ Accordions */
.gi-faq {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}
.gi-faq details {
  background: rgba(22, 22, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: all 0.25s ease;
}
.gi-faq details[open] {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(28, 28, 28, 0.95);
}
.gi-faq summary {
  color: #f0f0f0;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  outline: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gi-faq summary::-webkit-details-marker {
  display: none;
}
.gi-faq summary::after {
  content: "↓";
  color: #d4af37;
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}
.gi-faq details[open] summary::after {
  transform: rotate(180deg);
}
.gi-faq details p {
  color: var(--color-muted, #ccc);
  font-size: 0.88rem;
  margin-top: 0.75rem;
  line-height: 1.6;
}


/* Transform Plain Text Lists to Visual Interactive Feature Cards */
.gi-list {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 1rem !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 0.85rem !important;
}

.gi-list li {
  background: linear-gradient(145deg, rgba(28, 28, 28, 0.85) 0%, rgba(18, 18, 18, 0.95) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: 12px !important;
  padding: 0.9rem 1.1rem !important;
  color: #e2e2e2 !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.gi-list li::before {
  content: "✦" !important;
  color: #d4af37 !important;
  font-size: 0.95rem !important;
  font-weight: bold !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 8px !important;
}

.gi-list li:hover {
  border-color: rgba(212, 175, 55, 0.55) !important;
  background: rgba(35, 30, 20, 0.8) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.15) !important;
  color: #ffffff !important;
}

.gi-list--muted li {
  background: rgba(20, 20, 20, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  opacity: 0.85 !important;
}

.gi-list--muted li::before {
  content: "✓" !important;
  color: #aaa !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}


/* ==========================================================================
   High-Converting Request Page & Form Enhancements
   ========================================================================== */

/* Page Background & Trust Badge */
.gi-request-hero {
  position: relative;
  text-align: center;
  padding-block: 2.5rem 1.5rem;
}

/* Form Container Layout */
.gi-form-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .gi-form-wrapper {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
}

/* Form inputs & interactive fields */
.gi-form-card {
  background: linear-gradient(160deg, rgba(24, 24, 24, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gi-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gi-field-group label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e8d399;
}

.gi-input, .gi-select, .gi-textarea {
  width: 100%;
  background: rgba(14, 14, 14, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  outline: none !important;
  transition: all 0.25s ease !important;
}

.gi-input:focus, .gi-select:focus, .gi-textarea:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25) !important;
  background: rgba(20, 20, 20, 0.95) !important;
}

/* Form Dynamic Live Summary Card (The Preview Side Card) */
.gi-summary-card {
  background: rgba(18, 18, 18, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: sticky;
  top: 2rem;
}

.gi-summary-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
}

.gi-summary-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.gi-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gi-summary-item__label {
  font-size: 0.78rem;
  color: var(--color-muted, #888);
}

.gi-summary-item__val {
  font-size: 0.92rem;
  font-weight: 600;
  color: #e8d399;
}

.gi-summary-item__val--empty {
  color: #666;
  font-style: italic;
  font-weight: 400;
}

/* High Conversion Submit Button & Trust Badges */
.gi-submit-btn {
  background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%) !important;
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 1rem 2rem !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3) !important;
  text-align: center !important;
  width: 100% !important;
}

.gi-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.45) !important;
  filter: brightness(1.08) !important;
}

.gi-trust-badges {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--color-muted, #999);
}

.gi-trust-badge-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}


/* ==========================================================================
   Exact Form & Live Summary Styling for Request Page
   ========================================================================== */

/* Layout Grid for Form + Live Summary */
.gi-request-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 860px) {
  .gi-request-layout {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* Form Styles */
.gi-form {
  background: rgba(18, 18, 18, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.gi-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gi-form__field label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e8d399;
}

.gi-form__field input,
.gi-form__field select,
.gi-form__field textarea {
  width: 100%;
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 0.75rem 0.9rem !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  outline: none !important;
  transition: all 0.25s ease !important;
}

.gi-form__field input:focus,
.gi-form__field select:focus,
.gi-form__field textarea:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25) !important;
  background: rgba(22, 22, 22, 0.95) !important;
}

.gi-form__field textarea {
  min-height: 90px;
  resize: vertical;
}

/* Conditional Fields Transition */
.gi-form__conditional {
  transition: all 0.3s ease;
}

/* Live Summary Card */
.gi-live-summary {
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.95) 0%, rgba(15, 15, 15, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  padding: 1.5rem;
  position: sticky;
  top: 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.gi-live-summary dl {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.gi-live-summary dt {
  font-size: 0.78rem;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gi-live-summary dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e8d399;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gi-live-summary__note {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  color: #999999;
  line-height: 1.5;
  background: rgba(212, 175, 55, 0.08);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border-right: 3px solid #d4af37;
}

/* Status Alert Message */
.gi-form__status {
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 0.5rem;
}


/* Fix Sticky Summary overlapping on Mobile */
.gi-live-summary {
  position: static !important; /* ثابت في مكانه الطبيعي للموبايل */
  margin-top: 1.5rem;
}

@media (min-width: 860px) {
  .gi-live-summary {
    position: sticky !important; /* تثبيت جانبي فقط للشاشات الكبيرة */
    top: 5rem !important;
    margin-top: 0;
  }
}


/* ==========================================================================
   Pre-Footer CTA & Premium Footer Styling
   ========================================================================== */

/* Pre-Footer Banner (جاهز تبدأ؟) */
main section.gi-section:last-of-type {
  background: linear-gradient(135deg, rgba(25, 25, 25, 0.9) 0%, rgba(15, 15, 15, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 20px;
  padding: 2.25rem 1.5rem;
  margin-inline: auto;
  margin-bottom: 3rem;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

main section.gi-section:last-of-type .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

main section.gi-section:last-of-type .gi-section__title {
  font-size: 1.6rem;
  color: #ffffff;
  margin-bottom: 0;
}

main section.gi-section:last-of-type p {
  color: #aaaaaa !important;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

/* Footer Container */
.gi-footer {
  background: rgba(10, 10, 10, 0.95);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-block: 2rem 1.75rem;
  margin-top: 2rem;
}

.gi-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: center;
}

@media (min-width: 768px) {
  .gi-footer__inner {
    flex-direction: row;
    text-align: right;
  }
}

.gi-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #d4d4d4;
  font-size: 0.85rem;
}

.gi-footer__brand svg {
  color: #d4af37;
  flex-shrink: 0;
}

.gi-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem !important;
  flex-wrap: wrap;
}

.gi-footer__links a {
  color: #999999;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
}

.gi-footer__links a:hover {
  color: #e8d399;
}

.gi-footer__links a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: 0;
  width: 0;
  height: 1px;
  background: #d4af37;
  transition: width 0.25s ease;
}

.gi-footer__links a:hover::after {
  width: 100%;
}


/* ==========================================================================
   Smart Promo Banner (Dynamic & Theme-Aware)
   ========================================================================== */

.gi-promo-banner {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.15) 0%, rgba(18, 18, 18, 0.95) 50%, rgba(212, 175, 55, 0.15) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(8px);
  padding-block: 0.55rem;
  font-size: 0.82rem;
  color: #f8e5ad;
  position: relative;
  z-index: 101;
  transition: all 0.3s ease;
}

[data-theme="light"] .gi-promo-banner {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(245, 240, 225, 0.98) 50%, rgba(212, 175, 55, 0.2) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  color: #2b2206;
}

.gi-promo-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  text-align: center;
}

.gi-promo-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 0.15rem 0.55rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.75rem;
  color: #ffd700;
}

[data-theme="light"] .gi-promo-banner__badge {
  background: rgba(180, 140, 20, 0.15);
  color: #7a5f05;
}

.gi-promo-banner__pulse {
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: gi-pulse-glow 1.8s infinite;
}

@keyframes gi-pulse-glow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.gi-promo-banner__link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-inline-start: 0.25rem;
  transition: opacity 0.2s ease;
}

[data-theme="light"] .gi-promo-banner__link {
  color: #111111;
}

.gi-promo-banner__link:hover {
  opacity: 0.8;
}


/* ==========================================================================
   Slim Television-Style Ticker Bar
   ========================================================================== */

.gi-ticker-bar {
  background: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 105;
}

[data-theme="light"] .gi-ticker-bar {
  background: rgba(245, 242, 235, 0.98);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}

.gi-ticker-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
}

.gi-ticker-bar__badge {
  background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
  color: #000000;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gi-ticker-bar__wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.gi-ticker-bar__track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  will-change: transform;
  animation: gi-ticker-anim 24s linear infinite;
}

.gi-ticker-bar__track:hover {
  animation-play-state: paused;
}

.gi-ticker-bar__track span {
  color: #e8d399;
  font-size: 0.8rem;
  font-weight: 500;
}

[data-theme="light"] .gi-ticker-bar__track span {
  color: #3d3008;
}

@keyframes gi-ticker-anim {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

[dir="ltr"] .gi-ticker-bar__track {
  animation: gi-ticker-anim-ltr 24s linear infinite;
}

@keyframes gi-ticker-anim-ltr {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gi-ticker-bar__btn {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #e8d399 !important;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.gi-ticker-bar__btn:hover {
  background: #d4af37;
  color: #000000 !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}


/* ==========================================================================
   Full-Width Header-Integrated Sticky Ticker & Light Theme Contrast Fixes
   ========================================================================== */

/* Header Sticky Setup */
header.gi-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding-top: 0 !important;
}

/* Full Width Ticker Bar directly inside Header */
.gi-ticker-bar {
  width: 100% !important;
  background: rgba(12, 12, 12, 0.98);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  height: 36px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

[data-theme="light"] .gi-ticker-bar {
  background: #f7f4ec !important;
  border-bottom: 1px solid rgba(180, 140, 20, 0.35) !important;
}

.gi-ticker-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding-inline: 1rem;
  height: 100%;
}

.gi-ticker-bar__badge {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #000000 !important;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.gi-ticker-bar__wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.gi-ticker-bar__track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  will-change: transform;
  animation: gi-ticker-anim 22s linear infinite;
}

.gi-ticker-bar__track:hover {
  animation-play-state: paused;
}

.gi-ticker-bar__track span {
  color: #e8d399 !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

[data-theme="light"] .gi-ticker-bar__track span {
  color: #4a3b08 !important;
}

.gi-ticker-bar__btn {
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #ffd700 !important;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.73rem;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

[data-theme="light"] .gi-ticker-bar__btn {
  background: rgba(180, 140, 20, 0.15);
  border-color: #b48c14;
  color: #7a5f05 !important;
}

.gi-ticker-bar__btn:hover {
  background: #d4af37 !important;
  color: #000000 !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Light Mode Global Text Contrast Fixes */
[data-theme="light"] body,
[data-theme="light"] .gi-page {
  background-color: #fcfbf7 !important;
  color: #1a1a1a !important;
}

[data-theme="light"] button,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .gi-card,
[data-theme="light"] [class*="card"],
[data-theme="light"] [class*="option"],
[data-theme="light"] [class*="interactive"] {
  color: #111111 !important;
  border-color: rgba(180, 140, 20, 0.35) !important;
}

[data-theme="light"] .gi-hero__title,
[data-theme="light"] .gi-section__title,
[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4 {
  color: #1c1917 !important;
}

[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] li {
  color: #2b2b2b;
}

[data-theme="light"] .gi-nav {
  background: rgba(247, 244, 236, 0.95) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
}


/* ==========================================================================
   Full Bleed Edge-to-Edge Fast Ticker Fix (Mobile & Desktop)
   ========================================================================== */

header.gi-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Full Bleed 100vw Breakout */
.gi-ticker-bar {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: #0d0d0d !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

[data-theme="light"] .gi-ticker-bar {
  background: #f3eee0 !important;
  border-bottom: 1px solid rgba(180, 140, 20, 0.4) !important;
}

.gi-ticker-bar__inner {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0.75rem !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Faster Animation Speed (8s) */
.gi-ticker-bar__track {
  display: flex !important;
  gap: 2rem !important;
  white-space: nowrap !important;
  will-change: transform !important;
  animation: gi-ticker-anim 8s linear infinite !important;
}

[dir="ltr"] .gi-ticker-bar__track {
  animation: gi-ticker-anim-ltr 8s linear infinite !important;
}

.gi-ticker-bar__track span {
  color: #e8d399 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

[data-theme="light"] .gi-ticker-bar__track span {
  color: #3d3008 !important;
}


/* ==========================================================================
   Mobile RTL Full Width Ticker Fix (Fix Left Side Gap)
   ========================================================================== */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

header.gi-nav {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}

/* Perfect 100% Width Ticker without RTL offset bugs */
.gi-ticker-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  background: #0d0d0d !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

[data-theme="light"] .gi-ticker-bar {
  background: #f3eee0 !important;
  border-bottom: 1px solid rgba(180, 140, 20, 0.4) !important;
}

.gi-ticker-bar__inner {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0.75rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Speed set to fast 8s */
.gi-ticker-bar__track {
  display: flex !important;
  gap: 2rem !important;
  white-space: nowrap !important;
  will-change: transform !important;
  animation: gi-ticker-anim 8s linear infinite !important;
}

[dir="ltr"] .gi-ticker-bar__track {
  animation: gi-ticker-anim-ltr 8s linear infinite !important;
}


/* ==========================================================================
   Mobile Navigation Responsive Layout Fix (Prevent Button Overflow)
   ========================================================================== */

header.gi-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(12, 12, 12, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-sizing: border-box !important;
}

[data-theme="light"] header.gi-nav {
  background: rgba(250, 248, 242, 0.97) !important;
}

/* Nav Inner Flex Box */
.gi-nav__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0.5rem 0.8rem !important;
  box-sizing: border-box !important;
  gap: 0.4rem !important;
}

/* Ensure Action Container Fits */
.gi-nav__actions,
.gi-nav__controls,
header .gi-nav__inner > div {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex-shrink: 0 !important;
}

/* Mobile Screens Optimization (< 480px) */
@media (max-width: 480px) {
  .gi-nav__inner {
    padding: 0.35rem 0.4rem !important;
    gap: 0.25rem !important;
  }

  .gi-nav__logo,
  .gi-brand {
    font-size: 0.8rem !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 1 !important;
  }

  .gi-nav__inner button,
  .gi-nav__inner a,
  .gi-nav__inner .gi-btn,
  .gi-nav__inner [class*="btn"] {
    font-size: 0.72rem !important;
    padding: 0.3rem 0.5rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
  }

  /* Ensure CTA/Menu button remains 100% visible on left edge */
  .gi-nav__inner .gi-btn--primary,
  .gi-nav__inner [class*="primary"],
  .gi-nav__inner [class*="cta"],
  .gi-nav__inner [class*="menu"],
  .gi-nav__inner [class*="toggle"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
  }
}


/* ==========================================================================
   Guaranteed Sticky Header & Light Mode Controls Contrast Fix
   ========================================================================== */

html, body {
  overflow-x: clip !important;
}

header.gi-nav {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}

/* High Contrast Controls for Light Mode */
[data-theme="light"] header.gi-nav,
[data-theme="light"] .gi-nav {
  background: rgba(250, 248, 242, 0.98) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .gi-nav a,
[data-theme="light"] .gi-nav button,
[data-theme="light"] .gi-nav span,
[data-theme="light"] .gi-nav__brand,
[data-theme="light"] .gi-nav__links a,
[data-theme="light"] .gi-nav [class*="btn"],
[data-theme="light"] .gi-nav [class*="control"],
[data-theme="light"] .gi-nav [class*="lang"],
[data-theme="light"] .gi-nav [class*="theme"] {
  color: #111111 !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[data-theme="light"] .gi-nav button:hover,
[data-theme="light"] .gi-nav a:hover {
  color: #b8860b !important;
}


/* ==========================================================================
   Unified Navigation Control Buttons (Theme, Lang, Mobile Menu Summary)
   ========================================================================== */

/* Base Dark Mode Styling for All Controls */
.gi-nav__theme,
.gi-nav__lang,
.gi-nav__mobile summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 0.7rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 8px !important;
  color: #e8d399 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  list-style: none !important;
  line-height: 1 !important;
}

/* Hide Default Details Arrow Marker */
.gi-nav__mobile summary::-webkit-details-marker,
.gi-nav__mobile summary::marker {
  display: none !important;
}

.gi-nav__theme:hover,
.gi-nav__lang:hover,
.gi-nav__mobile summary:hover {
  background: rgba(212, 175, 55, 0.2) !important;
  border-color: #d4af37 !important;
  color: #ffffff !important;
}

/* Light Mode High-Contrast Override */
[data-theme="light"] .gi-nav__theme,
[data-theme="light"] .gi-nav__lang,
[data-theme="light"] .gi-nav__mobile summary {
  background: #f0ebe1 !important;
  border: 1px solid rgba(180, 140, 20, 0.45) !important;
  color: #1a1a1a !important;
}

[data-theme="light"] .gi-nav__theme:hover,
[data-theme="light"] .gi-nav__lang:hover,
[data-theme="light"] .gi-nav__mobile summary:hover {
  background: rgba(180, 140, 20, 0.15) !important;
  border-color: #b48c14 !important;
  color: #7a5f05 !important;
}


/* ==========================================================================
   Hero & Interactive Stepper UI/UX Premium Upgrade (Dark & Light Compatibility)
   ========================================================================== */

/* 1. Hero Eyebrow Micro-Badge */
.gi-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.35rem 0.9rem !important;
  background: rgba(212, 175, 55, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 50px !important;
  color: #e8d399 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
  backdrop-filter: blur(8px) !important;
}

[data-theme="light"] .gi-hero__eyebrow {
  background: rgba(180, 140, 20, 0.12) !important;
  border-color: rgba(180, 140, 20, 0.4) !important;
  color: #6e5404 !important;
}

/* 2. Secondary CTA Button Contrast Fix */
.site-button--secondary,
.gi-btn--outline,
.gi-hero__actions a:nth-child(2) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  color: #e8d399 !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

[data-theme="light"] .site-button--secondary,
[data-theme="light"] .gi-btn--outline,
[data-theme="light"] .gi-hero__actions a:nth-child(2) {
  background: #f3edd9 !important;
  border: 1.5px solid #a88212 !important;
  color: #1a1a1a !important;
}

[data-theme="light"] .site-button--secondary:hover,
[data-theme="light"] .gi-btn--outline:hover,
[data-theme="light"] .gi-hero__actions a:nth-child(2):hover {
  background: #a88212 !important;
  color: #ffffff !important;
}

/* 3. Interactive Stepper Cards Modernization (01 -> 05) */
.gi-flow__wrap [class*="step"],
.gi-flow__wrap button,
.gi-hero--flow [class*="step"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  color: #d1c099 !important;
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Inactive Steps in Light Mode */
[data-theme="light"] .gi-flow__wrap [class*="step"],
[data-theme="light"] .gi-flow__wrap button,
[data-theme="light"] .gi-hero--flow [class*="step"] {
  background: #eae3d2 !important;
  border: 1px solid rgba(160, 120, 15, 0.3) !important;
  color: #2b2b2b !important;
  font-weight: 600 !important;
}

/* Active Step Styling */
.gi-flow__wrap [class*="active"],
.gi-hero--flow [class*="active"] {
  background: linear-gradient(135deg, #e8d399 0%, #c5a059 100%) !important;
  border-color: #e8d399 !important;
  color: #0d0d0d !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3) !important;
}

[data-theme="light"] .gi-flow__wrap [class*="active"],
[data-theme="light"] .gi-hero--flow [class*="active"] {
  background: linear-gradient(135deg, #b8860b 0%, #8b6508 100%) !important;
  border-color: #8b6508 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(184, 134, 11, 0.35) !important;
}

/* Stepper Explainer Text Contrast Fix */
.gi-flow__explainer,
.gi-hero--flow p,
.gi-flow__wrap + p {
  color: #d8c8a0 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

[data-theme="light"] .gi-flow__explainer,
[data-theme="light"] .gi-hero--flow p,
[data-theme="light"] .gi-flow__wrap + p {
  color: #262626 !important;
  font-weight: 500 !important;
}


/* ==========================================================================
   Hero Ambient Lighting, Micro-Badge, Light Theme & Mobile Stepper Fix
   ========================================================================== */

/* 1. Ambient Background Lighting Gradient for Hero */
.gi-hero--flow,
.gi-hero {
  position: relative !important;
  background-image: radial-gradient(circle at 50% 15%, rgba(212, 175, 55, 0.07) 0%, rgba(12, 12, 12, 0) 65%) !important;
  overflow: visible !important;
}

[data-theme="light"] .gi-hero--flow,
[data-theme="light"] .gi-hero {
  background-image: radial-gradient(circle at 50% 15%, rgba(212, 180, 100, 0.22) 0%, rgba(249, 246, 240, 0) 70%) !important;
}

/* 2. Soft Pill-Shaped Eyebrow Badge */
.gi-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.3rem 0.95rem !important;
  background: rgba(212, 175, 55, 0.07) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 999px !important;
  color: #e8d399 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .gi-hero__eyebrow {
  background: rgba(180, 140, 20, 0.1) !important;
  border-color: rgba(180, 140, 20, 0.35) !important;
  color: #5c4505 !important;
}

/* 3. High-Contrast Legible Colors in Light Mode */
[data-theme="light"] .gi-hero__title {
  color: #14120e !important;
}

[data-theme="light"] .gi-hero__lead,
[data-theme="light"] .gi-flow__explainer,
[data-theme="light"] .gi-hero--flow p {
  color: #383229 !important;
  font-weight: 500 !important;
}

/* 4. Secondary Action Button Light Mode Fix */
[data-theme="light"] .site-button--secondary,
[data-theme="light"] .gi-btn--outline,
[data-theme="light"] .gi-hero__actions a:nth-child(2) {
  background: #ede6d5 !important;
  border: 1.5px solid #8c6c10 !important;
  color: #1f1c18 !important;
  font-weight: 600 !important;
}

/* 5. Seamless Mobile Horizontal Stepper Fix (No Clipping) */
.gi-flow__wrap,
[data-flow-explainer] {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding-inline: 1.25rem !important;
  margin-inline: -1.25rem !important;
  scroll-padding-inline: 1.25rem !important;
  box-sizing: border-box !important;
}

/* Prevent Card Cutting on Edges */
.gi-flow__wrap > *,
.gi-flow__wrap [class*="step"] {
  flex-shrink: 0 !important;
  scroll-snap-align: center !important;
}

/* Stepper Cards Appearance (Light Mode) */
[data-theme="light"] .gi-flow__wrap [class*="step"],
[data-theme="light"] .gi-flow__wrap button {
  background: #e8e1cf !important;
  border: 1px solid rgba(140, 105, 15, 0.3) !important;
  color: #1a1917 !important;
  font-weight: 600 !important;
}

/* Stepper Active Card (Light Mode) */
[data-theme="light"] .gi-flow__wrap [class*="active"] {
  background: linear-gradient(135deg, #b8860b 0%, #856106 100%) !important;
  border-color: #705204 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.3) !important;
}


/* ==========================================================================
   Pristine Hero Badge, Light Contrast & Precise Stepper Fix
   ========================================================================== */

/* 1. Micro Pill Badge */
.gi-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.28rem 0.85rem !important;
  background: rgba(212, 175, 55, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 999px !important;
  color: #e8d399 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
}

[data-theme="light"] .gi-hero__eyebrow {
  background: rgba(184, 134, 11, 0.1) !important;
  border-color: rgba(184, 134, 11, 0.35) !important;
  color: #6e5404 !important;
}

/* 2. Light Theme High-Contrast Typography */
[data-theme="light"] .gi-hero__title {
  color: #1a1815 !important;
}

[data-theme="light"] .gi-hero__lead {
  color: #453e35 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

[data-theme="light"] .site-button--secondary {
  background: #efe9db !important;
  border: 1.5px solid #947110 !important;
  color: #1a1815 !important;
  font-weight: 600 !important;
}

/* 3. Stepper Layout Restoration */
.gi-flow__wrap {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Scrollable Horizontal Tabs Container */
.gi-flow__tabs {
  display: flex !important;
  gap: 0.5rem !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0.4rem 0.25rem 0.8rem 0.25rem !important;
  margin-bottom: 0.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tab Cards Styling */
.gi-flow__tab {
  flex: 1 0 68px !important;
  min-width: 68px !important;
  scroll-snap-align: start !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.55rem 0.35rem !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  color: #d8c7a1 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.gi-flow__tab-index {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  display: block !important;
}

.gi-flow__tab-label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  display: block !important;
}

/* Light Theme Inactive Cards */
[data-theme="light"] .gi-flow__tab {
  background: #eae2d0 !important;
  border: 1px solid rgba(160, 120, 15, 0.35) !important;
  color: #26221c !important;
}

/* Active Card (Dark & Light) */
.gi-flow__tab.is-active {
  background: linear-gradient(135deg, #e8d399 0%, #c5a059 100%) !important;
  border-color: #e8d399 !important;
  color: #0f0e0c !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3) !important;
}

.gi-flow__tab.is-active .gi-flow__tab-index,
.gi-flow__tab.is-active .gi-flow__tab-label {
  color: #0f0e0c !important;
}

[data-theme="light"] .gi-flow__tab.is-active {
  background: linear-gradient(135deg, #c49418 0%, #8c680a 100%) !important;
  border-color: #705305 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(196, 148, 24, 0.35) !important;
}

[data-theme="light"] .gi-flow__tab.is-active .gi-flow__tab-index,
[data-theme="light"] .gi-flow__tab.is-active .gi-flow__tab-label {
  color: #ffffff !important;
}

/* Stepper Result Panel Box */
.gi-flow__panel {
  display: none !important;
  padding: 0.85rem 1.1rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: 10px !important;
  color: #e2d5b6 !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.gi-flow__panel.is-active {
  display: block !important;
}

[data-theme="light"] .gi-flow__panel {
  background: #f4eee1 !important;
  border: 1.5px solid rgba(184, 134, 11, 0.35) !important;
  color: #1f1c17 !important;
  font-weight: 600 !important;
}


/* ==========================================================================
   Complete Hero Redesign: Ambient Motion, Gold Shimmer, Contrast & Mobile Stepper
   ========================================================================== */

/* 1. Subtle Ambient Motion Background */
@keyframes gi-ambient-glow {
  0%, 100% { transform: translate(-50%, -45%) scale(1); opacity: 0.18; }
  50% { transform: translate(-48%, -52%) scale(1.15); opacity: 0.28; }
}

.gi-hero,
.gi-hero--flow {
  position: relative !important;
  z-index: 1 !important;
}

.gi-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 35% !important;
  left: 50% !important;
  width: 550px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, rgba(0, 0, 0, 0) 70%) !important;
  filter: blur(75px) !important;
  transform: translate(-50%, -50%) !important;
  animation: gi-ambient-glow 12s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

[data-theme="light"] .gi-hero::before {
  background: radial-gradient(circle, rgba(212, 160, 20, 0.28) 0%, rgba(240, 235, 225, 0) 70%) !important;
}

/* 2. Soft Animated Shimmer Pill Badge */
@keyframes gi-badge-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gi-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.35rem 1rem !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(243, 229, 171, 0.22), rgba(212, 175, 55, 0.08)) !important;
  background-size: 200% 200% !important;
  animation: gi-badge-shimmer 7s ease infinite !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 999px !important;
  color: #e8d399 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
}

[data-theme="light"] .gi-hero__eyebrow {
  background: linear-gradient(90deg, rgba(180, 140, 20, 0.1), rgba(212, 175, 55, 0.25), rgba(180, 140, 20, 0.1)) !important;
  background-size: 200% 200% !important;
  animation: gi-badge-shimmer 7s ease infinite !important;
  border-color: rgba(180, 140, 20, 0.45) !important;
  color: #3b2c02 !important;
}

/* 3. High Legibility & Contrast Overrides for Light Mode */
[data-theme="light"] .gi-hero__title {
  color: #110f0c !important;
}

[data-theme="light"] .gi-hero__lead {
  color: #2b251d !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

[data-theme="light"] .site-button--secondary {
  background: #e2d9c7 !important;
  border: 1.5px solid #7a5f0a !important;
  color: #14110b !important;
  font-weight: 700 !important;
}

/* 4. Non-Clipping Mobile Stepper Container */
.gi-flow__wrap {
  display: block !important;
  width: 100% !important;
}

.gi-flow__tabs {
  display: flex !important;
  gap: 0.6rem !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0.5rem 1rem !important;
  margin-inline: -1rem !important;
  width: calc(100% + 2rem) !important;
  box-sizing: border-box !important;
  scroll-padding-inline: 1rem !important;
}

.gi-flow__tabs::before,
.gi-flow__tabs::after {
  content: "" !important;
  display: block !important;
  min-width: 0.25rem !important;
  flex-shrink: 0 !important;
}

.gi-flow__tab {
  flex: 1 0 72px !important;
  min-width: 72px !important;
  scroll-snap-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.6rem 0.35rem !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  color: #d8c7a1 !important;
  box-sizing: border-box !important;
}

/* Inactive Cards (Light Mode) */
[data-theme="light"] .gi-flow__tab {
  background: #ded5c3 !important;
  border: 1px solid #82660d !important;
  color: #14110b !important;
}

[data-theme="light"] .gi-flow__tab .gi-flow__tab-index,
[data-theme="light"] .gi-flow__tab .gi-flow__tab-label {
  color: #14110b !important;
  font-weight: 700 !important;
}

/* Active Card (Light Mode) */
[data-theme="light"] .gi-flow__tab.is-active {
  background: linear-gradient(135deg, #b8860b 0%, #705204 100%) !important;
  border-color: #523c02 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.4) !important;
}

[data-theme="light"] .gi-flow__tab.is-active .gi-flow__tab-index,
[data-theme="light"] .gi-flow__tab.is-active .gi-flow__tab-label {
  color: #ffffff !important;
}

/* Explainer Text Box (Light Mode) */
[data-theme="light"] .gi-flow__panel {
  background: #eadeca !important;
  border: 1.5px solid #7a5f0a !important;
  color: #110e0a !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   PRODUCTION FIX: Ambient Motion, Subdued Text Shimmer, Light Contrast & Stepper
   ========================================================================== */

/* 1. Fluid Ambient Background Glow (GPU-Accelerated) */
@keyframes gi-hero-ambient {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.35; }
  50% { transform: translate(-46%, -53%) scale(1.18) rotate(12deg); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.35; }
}

.gi-hero,
.gi-hero--flow {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.gi-hero::before,
.gi-hero--flow::before {
  content: "" !important;
  position: absolute !important;
  top: 32% !important;
  left: 50% !important;
  width: 580px !important;
  height: 380px !important;
  max-width: 90vw !important;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.16) 0%, rgba(184, 134, 11, 0.04) 55%, transparent 75%) !important;
  filter: blur(65px) !important;
  transform: translate(-50%, -50%) !important;
  animation: gi-hero-ambient 14s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

[data-theme="light"] .gi-hero::before,
[data-theme="light"] .gi-hero--flow::before {
  background: radial-gradient(ellipse at center, rgba(196, 148, 24, 0.24) 0%, rgba(160, 110, 15, 0.06) 55%, transparent 75%) !important;
  filter: blur(75px) !important;
}

/* 2. Subdued Moving Color Shimmer for "Gomaa Intelligence" Brand & Eyebrow */
@keyframes gi-text-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.brand-gomaa,
.brand-intelligence,
.gi-hero__eyebrow {
  background: linear-gradient(120deg, #d4af37 0%, #f3e5ab 25%, #aa7c11 50%, #f3e5ab 75%, #d4af37 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: gi-text-shimmer 8s ease infinite !important;
}

.gi-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.35rem 1rem !important;
  border: 1px solid rgba(212, 175, 55, 0.38) !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .brand-gomaa,
[data-theme="light"] .brand-intelligence,
[data-theme="light"] .gi-hero__eyebrow {
  background: linear-gradient(120deg, #855806 0%, #b8860b 25%, #523702 50%, #b8860b 75%, #855806 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: gi-text-shimmer 8s ease infinite !important;
}

[data-theme="light"] .gi-hero__eyebrow {
  border-color: rgba(180, 135, 15, 0.5) !important;
  background-color: rgba(230, 218, 190, 0.4) !important;
}

/* 3. High Legibility & Crisp Contrast Overrides (Light Mode) */
[data-theme="light"] .gi-hero__title {
  color: #12100d !important;
}

[data-theme="light"] .gi-hero__lead,
[data-theme="light"] .gi-flow__explainer,
[data-theme="light"] .gi-hero--flow p {
  color: #2b261f !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

[data-theme="light"] .site-button--secondary,
[data-theme="light"] .gi-btn--outline,
[data-theme="light"] .gi-hero__actions a:nth-child(2) {
  background: #e3d7bf !important;
  border: 1.5px solid #735606 !important;
  color: #12100d !important;
  font-weight: 700 !important;
}

/* 4. Non-Clipping Edge-to-Edge Mobile Stepper */
.gi-flow__wrap {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

.gi-flow__tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.625rem !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding-block: 0.5rem 0.75rem !important;
  padding-inline: 1rem !important;
  margin-inline: -1rem !important;
  width: calc(100% + 2rem) !important;
  box-sizing: border-box !important;
  scroll-padding-inline: 1rem !important;
  scrollbar-width: none !important;
}

.gi-flow__tabs::-webkit-scrollbar {
  display: none !important;
}

/* Scroll padding cushion prevents edge card clipping in RTL & LTR */
.gi-flow__tabs::before,
.gi-flow__tabs::after {
  content: "" !important;
  flex: 0 0 0.25rem !important;
  width: 0.25rem !important;
  pointer-events: none !important;
}

.gi-flow__tab {
  flex: 0 0 auto !important;
  min-width: 76px !important;
  scroll-snap-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.6rem 0.4rem !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  color: #d8c7a1 !important;
  box-sizing: border-box !important;
}

/* Light Mode Tab Cards */
[data-theme="light"] .gi-flow__tab {
  background: #e5dbc7 !important;
  border: 1.5px solid #80630b !important;
  color: #1c1813 !important;
}

[data-theme="light"] .gi-flow__tab .gi-flow__tab-index,
[data-theme="light"] .gi-flow__tab .gi-flow__tab-label {
  color: #1c1813 !important;
  font-weight: 700 !important;
}

/* Active Tab Card */
[data-theme="light"] .gi-flow__tab.is-active {
  background: linear-gradient(135deg, #a6770a 0%, #6e4f04 100%) !important;
  border-color: #4a3502 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(166, 119, 10, 0.4) !important;
}

[data-theme="light"] .gi-flow__tab.is-active .gi-flow__tab-index,
[data-theme="light"] .gi-flow__tab.is-active .gi-flow__tab-label {
  color: #ffffff !important;
}

/* Explainer Panel Card (Light Mode) */
[data-theme="light"] .gi-flow__panel {
  background: #eee4d0 !important;
  border: 1.5px solid #735606 !important;
  color: #12100d !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   PRODUCTION FIX: Problem Selector High-Contrast & Interactive UI
   ========================================================================== */

/* 1. Dynamic Section Header Styling (Arabic & English / Light & Dark) */
#problem-selector .gi-section__title {
  font-size: clamp(1.4rem, 4vw, 2.1rem) !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-bottom: 1.75rem !important;
  letter-spacing: -0.01em !important;
  background: linear-gradient(135deg, #f3e5ab 0%, #d4af37 50%, #aa7c11 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

[data-theme="light"] #problem-selector .gi-section__title {
  background: linear-gradient(135deg, #12100d 0%, #4a3806 60%, #855806 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* 2. Responsive Selector Grid */
.gi-selector {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
  margin-top: 1.5rem !important;
}

@media (max-width: 860px) {
  .gi-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  .gi-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }
}

/* 3. Problem Option Card - Dark Theme Base */
.gi-selector__option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 64px !important;
  padding: 0.85rem 0.95rem !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  color: #f0e2be !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.gi-selector__option:hover,
.gi-selector__option:focus-visible {
  background: rgba(212, 175, 55, 0.16) !important;
  border-color: #d4af37 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* 4. Problem Option Card - Light Theme High Contrast Fix */
[data-theme="light"] .gi-selector__option {
  background: #ebdcc2 !important;
  border: 1.5px solid #82630c !important;
  color: #12100d !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .gi-selector__option:hover,
[data-theme="light"] .gi-selector__option:focus-visible {
  background: linear-gradient(135deg, #a8790a 0%, #694f04 100%) !important;
  border-color: #453302 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(168, 121, 10, 0.35) !important;
}

/* Highlight "Unsure" Option */
.gi-selector__option[data-not-sure="1"] {
  border-style: dashed !important;
}

@media (max-width: 860px) {
  .gi-selector__option[data-not-sure="1"] {
    grid-column: span 2 !important;
  }
}

/* 5. Result Container Contrast Fix */
.gi-selector__result {
  margin-top: 1.5rem !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.25) !important;
}

[data-theme="light"] .gi-selector__result {
  background: #f2e9d8 !important;
  border: 1.5px solid #82630c !important;
  color: #12100d !important;
}

[data-theme="light"] .gi-selector__result-title {
  color: #12100d !important;
}

[data-theme="light"] .gi-selector__result-sub,
[data-theme="light"] .gi-list {
  color: #2b251d !important;
  font-weight: 600 !important;
}


/* ==========================================================================
   ULTRA-HIGH CONTRAST FIX FOR LIGHT MODE (PROBLEM SELECTOR)
   ========================================================================== */

/* 1. Force Solid Deep Black Title in Light Mode */
[data-theme="light"] #problem-selector .gi-section__title,
html[data-theme="light"] #problem-selector .gi-section__title {
  color: #0a0806 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #0a0806 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* 2. Crisp White Cards with High-Contrast Charcoal Text */
[data-theme="light"] .gi-selector .gi-selector__option,
html[data-theme="light"] .gi-selector a.gi-selector__option {
  background: #ffffff !important;
  border: 1.5px solid #785a08 !important;
  color: #0a0806 !important;
  -webkit-text-fill-color: #0a0806 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 3. High-Contrast Hover & Focus States */
[data-theme="light"] .gi-selector .gi-selector__option:hover,
html[data-theme="light"] .gi-selector a.gi-selector__option:hover {
  background: #785a08 !important;
  border-color: #4a3703 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(120, 90, 8, 0.3) !important;
}

/* 4. Unsure Card Distinct Style */
[data-theme="light"] .gi-selector .gi-selector__option[data-not-sure="1"] {
  background: #f7f2e6 !important;
  border: 1.5px dashed #785a08 !important;
  color: #0a0806 !important;
  -webkit-text-fill-color: #0a0806 !important;
}



/* ==========================================================================
   ULTRA-PREMIUM LIGHT MODE: BREAKING CONTRAST & VISUAL DEPTH
   ========================================================================== */

/* 1. Solid Dark Title to Anchor the Page Header */
[data-theme="light"] #problem-selector .gi-section__title,
html[data-theme="light"] #problem-selector .gi-section__title {
  color: #120e0a !important;
  background: none !important;
  -webkit-text-fill-color: #120e0a !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

/* 2. Deep Espresso Cards that Break Light Background Brightness */
[data-theme="light"] .gi-selector .gi-selector__option,
html[data-theme="light"] .gi-selector a.gi-selector__option {
  background: #1d1813 !important; /* Rich Dark Background */
  border: 1.5px solid #c49418 !important;
  color: #f7ebcf !important;
  -webkit-text-fill-color: #f7ebcf !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(29, 24, 19, 0.18) !important;
}

/* Hover State: Glowing Vibrant Gold */
[data-theme="light"] .gi-selector .gi-selector__option:hover,
html[data-theme="light"] .gi-selector a.gi-selector__option:hover {
  background: linear-gradient(135deg, #d4af37 0%, #8c680a 100%) !important;
  border-color: #4a3502 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(196, 148, 24, 0.4) !important;
}

/* 3. Unsure Card Option */
[data-theme="light"] .gi-selector .gi-selector__option[data-not-sure="1"] {
  background: #28211a !important;
  border: 1.5px dashed #d4af37 !important;
  color: #f7ebcf !important;
  -webkit-text-fill-color: #f7ebcf !important;
}


/* ==========================================================================
   PRODUCTION LIGHT & DARK MODE CONTRAST ENGINE
   ========================================================================== */

/* --- DARK MODE (Default & [data-theme="dark"]) --- */
[data-theme="dark"] #problem-selector .gi-section__title,
html:not([data-theme="light"]) #problem-selector .gi-section__title {
  color: #f3e5ab !important;
  background: linear-gradient(135deg, #f3e5ab 0%, #d4af37 50%, #aa7c11 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}

[data-theme="dark"] .gi-selector__option,
html:not([data-theme="light"]) .gi-selector__option {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  color: #f5e9ce !important;
  -webkit-text-fill-color: #f5e9ce !important;
  font-weight: 700 !important;
}

/* --- LIGHT MODE ([data-theme="light"]) ABSOLUTE CONTRAST OVERRIDE --- */

/* 1. Main Title in Light Mode */
[data-theme="light"] #problem-selector .gi-section__title,
html[data-theme="light"] #problem-selector .gi-section__title {
  color: #0c0906 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #0c0906 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* 2. Problem Option Cards in Light Mode (Crisp Off-White with Charcoal Text & Dark Gold Border) */
[data-theme="light"] .gi-selector .gi-selector__option,
[data-theme="light"] a.gi-selector__option,
html[data-theme="light"] .gi-selector__option {
  background: #ffffff !important;
  border: 2px solid #594105 !important;
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Hover State in Light Mode */
[data-theme="light"] .gi-selector .gi-selector__option:hover,
html[data-theme="light"] .gi-selector__option:hover {
  background: #594105 !important;
  border-color: #2b1f02 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(89, 65, 5, 0.3) !important;
}

/* Unsure Option Card in Light Mode */
[data-theme="light"] .gi-selector .gi-selector__option[data-not-sure="1"] {
  background: #f4edd8 !important;
  border: 2px dashed #594105 !important;
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
}

/* Result Box in Light Mode */
[data-theme="light"] .gi-selector__result {
  background: #ffffff !important;
  border: 2px solid #594105 !important;
  color: #0c0906 !important;
}

[data-theme="light"] .gi-selector__result-title,
[data-theme="light"] .gi-selector__result-sub,
[data-theme="light"] .gi-list {
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
}


/* ==========================================================================
   MAXIMUM SPECIFICITY LIGHT MODE CONTRAST FIX
   ========================================================================== */

/* Target title directly */
html[data-theme="light"] body #problem-selector .gi-section__title,
html[data-theme="light"] #problem-selector .gi-section__title,
[data-theme="light"] #problem-selector h2 {
  color: #0a0805 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0a0805 !important;
  text-shadow: none !important;
}

/* Target all option links/cards with highest CSS specificity */
html[data-theme="light"] body .gi-selector a.gi-selector__option,
html[data-theme="light"] body .gi-selector .gi-selector__option,
[data-theme="light"] .gi-selector__option {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 2px solid #543e05 !important;
  color: #0a0805 !important;
  -webkit-text-fill-color: #0a0805 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Target hover explicitly */
html[data-theme="light"] body .gi-selector a.gi-selector__option:hover,
html[data-theme="light"] body .gi-selector .gi-selector__option:hover {
  background-color: #543e05 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Unsure option card */
html[data-theme="light"] body .gi-selector a.gi-selector__option[data-not-sure="1"] {
  background-color: #f2e9d3 !important;
  border: 2px dashed #543e05 !important;
  color: #0a0805 !important;
  -webkit-text-fill-color: #0a0805 !important;
}


/* ==========================================================================
   FINAL ROOT FIX: UNIVERSAL CHILD ELEMENT CONTRAST OVERRIDE
   ========================================================================== */

/* 1. Force ALL text and nested child tags (*) inside problem selector to solid black */
[data-theme="light"] #problem-selector,
[data-theme="light"] #problem-selector *,
html[data-theme="light"] #problem-selector,
html[data-theme="light"] #problem-selector * {
  -webkit-text-fill-color: #000000 !important;
  color: #000000 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* 2. Distinct background & border for selector options */
[data-theme="light"] .gi-selector__option,
html[data-theme="light"] .gi-selector__option {
  background-color: #ffffff !important;
  border: 2px solid #543e05 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 3. Hover state override for option cards and their internal children */
[data-theme="light"] .gi-selector__option:hover,
[data-theme="light"] .gi-selector__option:hover * {
  background-color: #543e05 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================================
   DEFINITIVE LIGHT MODE FIX (NOT DATA-THEME=DARK)
   ========================================================================== */

/* 1. Main Title in Light Mode */
html:not([data-theme="dark"]) #problem-selector .gi-section__title {
  color: #0c0906 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0c0906 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* 2. Problem Cards in Light Mode (Crisp White Card + Deep Dark Text + Sharp Border) */
html:not([data-theme="dark"]) .gi-selector .gi-selector__option,
html:not([data-theme="dark"]) a.gi-selector__option {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 2px solid #6b5007 !important;
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 3. Hover State */
html:not([data-theme="dark"]) .gi-selector .gi-selector__option:hover {
  background-color: #6b5007 !important;
  border-color: #382902 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 4. Unsure Card */
html:not([data-theme="dark"]) .gi-selector .gi-selector__option[data-not-sure="1"] {
  background-color: #f5eedc !important;
  border: 2px dashed #6b5007 !important;
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
}


/* ==========================================================================
   ROOT FIX: DYNAMIC SERVICE CARDS THEMING ENGINE
   ========================================================================== */

/* 1. Reset Base Card Styles to Use Dynamic Scoped Variables */
.gi-service-card, 
.gi-card {
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-line) !important;
  transition: all 0.25s ease-in-out !important;
}

/* 2. Light Mode Specific High-Contrast System */
html:not([data-theme="dark"]) .gi-service-card,
html:not([data-theme="dark"]) .gi-card {
  background: #ffffff !important;
  border: 2px solid #735306 !important;
  box-shadow: 0 6px 20px rgba(115, 83, 6, 0.08) !important;
}

html:not([data-theme="dark"]) .gi-card__title {
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .gi-card__text,
html:not([data-theme="dark"]) .gi-card p {
  color: #2c2416 !important;
  -webkit-text-fill-color: #2c2416 !important;
}

html:not([data-theme="dark"]) .gi-card__preview summary {
  color: #6b5007 !important;
  -webkit-text-fill-color: #6b5007 !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .gi-card__price {
  color: #543e05 !important;
  -webkit-text-fill-color: #543e05 !important;
  background: #f5eedc !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 8px !important;
  border: 1px solid #735306 !important;
  display: inline-block !important;
}

html:not([data-theme="dark"]) .gi-card__link,
html:not([data-theme="dark"]) .text-link {
  color: #735306 !important;
  -webkit-text-fill-color: #735306 !important;
  font-weight: 800 !important;
}

/* 3. Dark Mode Specific System */
html[data-theme="dark"] .gi-service-card,
html[data-theme="dark"] .gi-card {
  background: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="dark"] .gi-card__preview summary {
  color: #e4c495 !important;
  -webkit-text-fill-color: #e4c495 !important;
}


/* ==========================================================================
   ROOT FIX: DYNAMIC SERVICE CARDS THEMING ENGINE (CHAMPAGNE GRADIENT)
   ========================================================================== */

/* 1. Base Smooth Transitions */
.gi-service-card, 
.gi-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Light Mode: Soft Ivory to Champagne Gradient Cards */
html:not([data-theme="dark"]) .gi-service-card,
html:not([data-theme="dark"]) .gi-card {
  background: linear-gradient(145deg, #ffffff 0%, #f5ecd8 100%) !important;
  border: 1.5px solid rgba(168, 126, 22, 0.35) !important;
  box-shadow: 0 8px 24px rgba(115, 83, 6, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Card Hover Elevation */
html:not([data-theme="dark"]) .gi-service-card:hover,
html:not([data-theme="dark"]) .gi-card:hover {
  background: linear-gradient(145deg, #ffffff 0%, #eee1c4 100%) !important;
  border-color: #8c6b12 !important;
  box-shadow: 0 12px 30px rgba(115, 83, 6, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* High Contrast Text Inside Gradient Cards */
html:not([data-theme="dark"]) .gi-card__title {
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .gi-card__text,
html:not([data-theme="dark"]) .gi-card p {
  color: #2c2416 !important;
  -webkit-text-fill-color: #2c2416 !important;
}

html:not([data-theme="dark"]) .gi-card__preview summary {
  color: #735306 !important;
  -webkit-text-fill-color: #735306 !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .gi-card__price {
  color: #4a3604 !important;
  -webkit-text-fill-color: #4a3604 !important;
  background: linear-gradient(135deg, #f7f1e1 0%, #e9dac0 100%) !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(140, 107, 18, 0.4) !important;
  display: inline-block !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .gi-card__link,
html:not([data-theme="dark"]) .text-link {
  color: #735306 !important;
  -webkit-text-fill-color: #735306 !important;
  font-weight: 800 !important;
}

/* 3. Dark Mode Preserves Original Metallic Dark Gradient */
html[data-theme="dark"] .gi-service-card,
html[data-theme="dark"] .gi-card {
  background: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="dark"] .gi-card__preview summary {
  color: #e4c495 !important;
  -webkit-text-fill-color: #e4c495 !important;
}


/* ==========================================================================
   DETAILS & PACKAGES COMPLETE UI/UX OVERHAUL (LIGHT & DARK MODES)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero Interactive Stepper & Diagrams (.gi-flow, .gi-flowsteps)
   -------------------------------------------------------------------------- */
/* Light Mode Flow Box (URL -> Extraction -> Clean Data) */
html:not([data-theme="dark"]) .gi-flow__wrap,
html:not([data-theme="dark"]) .gi-flowsteps__step,
html:not([data-theme="dark"]) .gi-hero--flow [class*="step"],
html:not([data-theme="dark"]) .gi-flow__tab {
  background: #ffffff !important;
  border: 1.5px solid #8c6b12 !important;
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
  box-shadow: 0 4px 14px rgba(140, 107, 18, 0.1) !important;
  font-weight: 700 !important;
}

/* Active Step / Highlighted Flow Card in Light Mode */
html:not([data-theme="dark"]) .gi-flowsteps__step--accent,
html:not([data-theme="dark"]) .gi-flow__tab.is-active,
html:not([data-theme="dark"]) .gi-flow__wrap .is-active {
  background: linear-gradient(135deg, #f7eed7 0%, #ebd7ab 100%) !important;
  border: 2px solid #543e05 !important;
  color: #382902 !important;
  -webkit-text-fill-color: #382902 !important;
  font-weight: 900 !important;
}

/* Step Arrows & Text Indicators */
html:not([data-theme="dark"]) .gi-flowsteps__arrow,
html:not([data-theme="dark"]) .gi-flow__tab-label,
html:not([data-theme="dark"]) .gi-flow__tab-index {
  color: #4a3604 !important;
  -webkit-text-fill-color: #4a3604 !important;
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   2. CTA Buttons (طلب خدمة & WhatsApp)
   -------------------------------------------------------------------------- */
/* Primary Action Button (طلب خدمة) */
html:not([data-theme="dark"]) .gi-hero__actions .btn-primary,
html:not([data-theme="dark"]) a[href*="whatsapp"]:not(.btn-secondary),
html:not([data-theme="dark"]) .gi-hero__actions a:first-child {
  background: linear-gradient(135deg, #a87e16 0%, #6b5007 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(107, 80, 7, 0.25) !important;
}

/* WhatsApp / Secondary Button (WhatsApp) */
html:not([data-theme="dark"]) .gi-hero__actions a[href*="wa.me"],
html:not([data-theme="dark"]) .gi-hero__actions a[href*="whatsapp"],
html:not([data-theme="dark"]) .gi-hero__actions .btn-secondary {
  background: #ffffff !important;
  border: 2px solid #25d366 !important;
  color: #128c7e !important;
  -webkit-text-fill-color: #128c7e !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.12) !important;
}

html:not([data-theme="dark"]) .gi-hero__actions a[href*="wa.me"]:hover,
html:not([data-theme="dark"]) .gi-hero__actions a[href*="whatsapp"]:hover {
  background: #25d366 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3. Service Packages & Tiers (.gi-packages, .gi-package)
   -------------------------------------------------------------------------- */
html:not([data-theme="dark"]) .gi-package,
html:not([data-theme="dark"]) .gi-package__tier {
  background: linear-gradient(145deg, #ffffff 0%, #f7f1e3 100%) !important;
  border: 1.5px solid rgba(140, 107, 18, 0.35) !important;
  box-shadow: 0 8px 24px rgba(12, 9, 6, 0.05) !important;
  border-radius: 16px !important;
}

html:not([data-theme="dark"]) .gi-package__summary,
html:not([data-theme="dark"]) .gi-package__price {
  color: #382902 !important;
  -webkit-text-fill-color: #382902 !important;
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   4. How It Works Steps (.gi-step, .gi-process-list)
   -------------------------------------------------------------------------- */
html:not([data-theme="dark"]) .gi-step {
  background: #ffffff !important;
  border: 1.5px solid #d4c39e !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .gi-step__title {
  color: #0c0906 !important;
  -webkit-text-fill-color: #0c0906 !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]) .gi-step__text,
html:not([data-theme="dark"]) .gi-process-list li {
  color: #2c2416 !important;
  -webkit-text-fill-color: #2c2416 !important;
}

html:not([data-theme="dark"]) .gi-step__index {
  background: #f4ebd9 !important;
  color: #6b5007 !important;
  border: 1px solid #8c6b12 !important;
}

/* --------------------------------------------------------------------------
   5. Dark Mode Enhancements for Details & Steppers
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .gi-flow__wrap,
html[data-theme="dark"] .gi-flowsteps__step {
  background: rgba(30, 26, 20, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: #e4c495 !important;
  -webkit-text-fill-color: #e4c495 !important;
}

html[data-theme="dark"] .gi-flowsteps__step--accent {
  background: rgba(212, 175, 55, 0.15) !important;
  border: 1px solid #d4af37 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================================
   HERO ACTIONS & INTERACTIVE FLOW CONTAINER OVERHAUL (WARM / SOFT IVORY PALETTE)
   ========================================================================== */

/* 1. Separation between CTA Buttons & Stepper Box */
.gi-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
  margin-bottom: 2.25rem !important;
  position: relative !important;
  z-index: 5 !important;
  clear: both !important;
}

/* Base Buttons Spacing & Layout */
.gi-hero__actions .site-button,
.gi-hero__actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.7rem 1.4rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

/* Primary Button (Find the right solution) */
html:not([data-theme="dark"]) .gi-hero__actions .site-button:not(.site-button--secondary),
html:not([data-theme="dark"]) .gi-hero__actions a:first-child {
  background: linear-gradient(135deg, #8c6b12 0%, #543e05 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #6b5007 !important;
  box-shadow: 0 4px 14px rgba(84, 62, 5, 0.2) !important;
}

/* Secondary Button (Describe your problem) - Warm Broken White Tone */
html:not([data-theme="dark"]) .gi-hero__actions .site-button--secondary,
html:not([data-theme="dark"]) .gi-hero__actions a:nth-child(2) {
  background: #f4ece1 !important;
  border: 1.5px solid #a3822b !important;
  color: #4a3604 !important;
  -webkit-text-fill-color: #4a3604 !important;
  box-shadow: 0 2px 8px rgba(74, 54, 4, 0.06) !important;
}

html:not([data-theme="dark"]) .gi-hero__actions .site-button--secondary:hover,
html:not([data-theme="dark"]) .gi-hero__actions a:nth-child(2):hover {
  background: #e9decb !important;
  color: #2c2004 !important;
}

/* 2. Interactive Stepper Container (.gi-flow__wrap) - Warm Ivory (#f5efe4) */
.gi-flow__wrap {
  margin-top: 1rem !important;
  position: relative !important;
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  padding: 1.25rem !important;
  overflow: hidden !important;
}

/* Light Mode Container: Soft Cream/Ivory instead of sharp white */
html:not([data-theme="dark"]) .gi-flow__wrap {
  background: #f5efe4 !important;
  border: 1.5px solid #d4c4a4 !important;
  box-shadow: 0 8px 25px rgba(115, 83, 6, 0.07) !important;
}

html[data-theme="dark"] .gi-flow__wrap {
  background: #161410 !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Responsive Stepper Tabs Grid */
.gi-flow__tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.6rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .gi-flow__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
}

.gi-flow__tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 0.5rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Inactive Tabs: Soft Muted Parchment (#eadecc) */
html:not([data-theme="dark"]) .gi-flow__tab {
  background: #eadecc !important;
  border: 1px solid #d0bf9d !important;
  color: #3d2d05 !important;
  -webkit-text-fill-color: #3d2d05 !important;
}

/* Active Tab: Golden Gradient (#e4c57c -> #cfa64f) */
html:not([data-theme="dark"]) .gi-flow__tab.is-active,
html:not([data-theme="dark"]) .gi-flow__tab[aria-selected="true"] {
  background: linear-gradient(135deg, #e4c57c 0%, #cfa64f 100%) !important;
  border: 1.5px solid #7a5e12 !important;
  box-shadow: 0 4px 12px rgba(122, 94, 18, 0.2) !important;
  color: #1a1202 !important;
  -webkit-text-fill-color: #1a1202 !important;
  font-weight: 800 !important;
}

/* 4. Panel Box Styling: Warm Sand/Ivory Tone (#eee5d5) */
.gi-flow__panels {
  margin-top: 1rem !important;
  width: 100% !important;
}

html:not([data-theme="dark"]) .gi-flow__panel {
  background: linear-gradient(145deg, #eee5d5 0%, #e4d8c1 100%) !important;
  border: 1.5px solid #bba375 !important;
  border-radius: 12px !important;
  padding: 1.1rem 1.3rem !important;
  color: #21190a !important;
  -webkit-text-fill-color: #21190a !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="dark"] .gi-flow__panel {
  background: rgba(30, 26, 20, 0.95) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  color: #f0e6d2 !important;
  -webkit-text-fill-color: #f0e6d2 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   DESKTOP SIDE-BY-SIDE HERO & FLOW CONTAINER (DESKTOP ONLY)
   ========================================================================== */
@media (min-width: 992px) {
  /* تحويل قسم الهيرو والمخطط إلى شبكة عمودين متجاورين */
  .gi-hero,
  .gi-hero--flow {
    display: grid !important;
    grid-template-columns: 0.85fr 1.5fr !important;
    align-items: center !important;
    gap: 3rem !important;
    text-align: start !important;
  }

  /* تعديل محاذاة الأزرار والنصوص لتناسب التخطيط الأفقي */
  [dir="rtl"] .gi-hero,
  [dir="rtl"] .gi-hero--flow {
    text-align: right !important;
  }

  [dir="ltr"] .gi-hero,
  [dir="ltr"] .gi-hero--flow {
    text-align: left !important;
  }

  .gi-hero__actions {
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
  }

  /* جعل المربع يتوسع رآسياً لإلغاء الفراغ الأبيض */
  .gi-flow__wrap {
    margin-top: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}


/* ==========================================================================
   DESKTOP SIDE-BY-SIDE GRID LAYOUT (STRICT 2-COLUMN DISPLAY)
   ========================================================================== */
@media (min-width: 768px) {
  /* تحويل الحاوية الرئيسية إلى شبكة بعمودين متساويين */
  .gi-hero .container,
  .gi-hero--flow .container {
    display: grid !important;
    grid-template-columns: 0.85fr 1.5fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 0.75rem 2.5rem !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  /* ترتيب محتوى النصوص في العمود الأول (يمين في العربي / يسار في الإنجليزي) */
  .gi-hero__eyebrow {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  .gi-hero__title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  .gi-hero__lead {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
  }

  .gi-hero__actions {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
  }

  /* تمطيط مربع المخطط (.gi-flow__wrap) في العمود الثاني ليشغل الطول كاملاً */
  .gi-flow__wrap {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    margin-top: 0 !important;
    height: 100% !important;
    min-height: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  [dir="rtl"] .gi-hero .container,
  [dir="rtl"] .gi-hero--flow .container {
    text-align: right !important;
  }

  [dir="ltr"] .gi-hero .container,
  [dir="ltr"] .gi-hero--flow .container {
    text-align: left !important;
  }
}


/* ==========================================================================
   GLOBAL AMBIENT MESH GRADIENT ENGINE & GLASSMORPHISM (CLIENT-CENTRIC)
   ========================================================================== */

/* 1. Base Layout Setup */
html, body {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .gi-page {
  background-color: #f7f3eb !important;
  color: #1a150c !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .gi-page {
  background-color: #0d0b08 !important;
  color: #f0e6d2 !important;
}

/* 2. Floating Ambient Glow Orbs (GPU Accelerated - 60fps) */
body::before,
body::after {
  content: "" !important;
  position: fixed !important;
  border-radius: 50% !important;
  filter: blur(100px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  will-change: transform, opacity !important;
}

/* Light Theme Glowing Lights */
html:not([data-theme="dark"]) body::before {
  width: 50vw !important;
  height: 50vw !important;
  top: -10% !important;
  inset-inline-start: -5% !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, rgba(228, 197, 124, 0.08) 65%, transparent 100%) !important;
  animation: ambientFloat1 20s ease-in-out infinite alternate !important;
}

html:not([data-theme="dark"]) body::after {
  width: 45vw !important;
  height: 45vw !important;
  bottom: -10% !important;
  inset-inline-end: -5% !important;
  background: radial-gradient(circle, rgba(186, 140, 31, 0.18) 0%, rgba(212, 175, 55, 0.05) 65%, transparent 100%) !important;
  animation: ambientFloat2 25s ease-in-out infinite alternate !important;
}

/* Dark Theme Glowing Lights */
html[data-theme="dark"] body::before {
  width: 55vw !important;
  height: 55vw !important;
  top: -15% !important;
  inset-inline-start: -10% !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.14) 0%, rgba(84, 62, 5, 0.05) 70%, transparent 100%) !important;
  animation: ambientFloat1 22s ease-in-out infinite alternate !important;
}

html[data-theme="dark"] body::after {
  width: 50vw !important;
  height: 50vw !important;
  bottom: -10% !important;
  inset-inline-end: -10% !important;
  background: radial-gradient(circle, rgba(140, 107, 18, 0.12) 0%, transparent 70%) !important;
  animation: ambientFloat2 28s ease-in-out infinite alternate !important;
}

/* Fluid Animation Keyframes */
@keyframes ambientFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 10%) scale(1.06); }
  100% { transform: translate(-4%, 5%) scale(0.96); }
}

@keyframes ambientFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8%, -6%) scale(1.1); }
  100% { transform: translate(5%, -10%) scale(0.94); }
}

/* 3. Tech Data Grid Overlay Mask */
.gi-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: 
    linear-gradient(to right, rgba(212, 175, 55, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 175, 55, 0.04) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  mask-image: radial-gradient(circle at 50% 30%, black 20%, transparent 85%) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black 20%, transparent 85%) !important;
}

/* 4. Glassmorphic Depth for Cards & Steppers */
main, section, .gi-hero, .gi-nav, footer, .container {
  position: relative !important;
  z-index: 1 !important;
}

html:not([data-theme="dark"]) .gi-flow__wrap,
html:not([data-theme="dark"]) .gi-card,
html:not([data-theme="dark"]) .gi-selector__option {
  background: rgba(245, 239, 228, 0.78) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

html[data-theme="dark"] .gi-flow__wrap,
html[data-theme="dark"] .gi-card,
html[data-theme="dark"] .gi-selector__option {
  background: rgba(22, 20, 16, 0.78) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
}

/* 5. Responsive Grid Layout (Desktop Side-by-Side) */
@media (min-width: 768px) {
  .gi-hero .container,
  .gi-hero--flow .container {
    display: grid !important;
    grid-template-columns: 0.85fr 1.5fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 0.75rem 2.5rem !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  .gi-hero__eyebrow { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; }
  .gi-hero__title { grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; }
  .gi-hero__lead { grid-column: 1 !important; grid-row: 3 !important; margin: 0 !important; }
  .gi-hero__actions {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
  }

  .gi-flow__wrap {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    margin-top: 0 !important;
    height: 100% !important;
    min-height: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  [dir="rtl"] .gi-hero .container,
  [dir="rtl"] .gi-hero--flow .container { text-align: right !important; }

  [dir="ltr"] .gi-hero .container,
  [dir="ltr"] .gi-hero--flow .container { text-align: left !important; }
}


/* ==========================================================================
   STAGE 3 FINAL POLISH: MICRO-INTERACTIONS, THEME TRANSITIONS & RESPONSIVENESS
   ========================================================================== */

/* 1. Cinematic Smooth Theme Transition */
*, *::before, *::after {
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

/* 2. Micro-Interactions: Cards & Buttons Hover State */
.gi-card, 
.gi-flow__wrap, 
.gi-selector__option,
.site-button {
  will-change: transform, box-shadow !important;
}

.gi-card:hover, 
.gi-selector__option:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.15) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
}

/* 3. Fluid Responsive Typography */
.gi-hero__title {
  font-size: clamp(1.65rem, 4vw + 0.5rem, 2.75rem) !important;
  line-height: 1.25 !important;
}

.gi-hero__lead {
  font-size: clamp(0.95rem, 1.5vw + 0.5rem, 1.15rem) !important;
  line-height: 1.6 !important;
}

/* 4. Tablet Breakpoint Optimization (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .gi-hero .container,
  .gi-hero--flow .container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  
  .gi-flow__wrap {
    min-height: 320px !important;
    padding: 1rem !important;
  }
}


/* ==========================================================================
   HOW IT WORKS (GI-STEPS) INTERACTIVE GLASSMORPHIC ENHANCEMENT
   ========================================================================== */

.gi-step, 
.gi-card--step,
.gi-steps__item {
  position: relative !important;
  border-radius: var(--radius-m, 16px) !important;
  padding: 1.75rem !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow !important;
}

/* Light Theme Card Polish */
html:not([data-theme="dark"]) .gi-step,
html:not([data-theme="dark"]) .gi-card--step,
html:not([data-theme="dark"]) .gi-steps__item {
  background: rgba(245, 239, 228, 0.75) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
}

/* Dark Theme Card Polish */
html[data-theme="dark"] .gi-step,
html[data-theme="dark"] .gi-card--step,
html[data-theme="dark"] .gi-steps__item {
  background: rgba(22, 20, 16, 0.78) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* Hover & Active Interactions for Steps */
.gi-step:hover,
.gi-card--step:hover,
.gi-steps__item:hover {
  transform: translateY(-5px) scale(1.01) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 16px 32px rgba(212, 175, 55, 0.15) !important;
}

/* Golden Step Number Highlighting */
.gi-step__num,
.gi-step__number,
.gi-steps__num {
  font-family: var(--font-heading, inherit) !important;
  font-weight: 700 !important;
  color: #d4af37 !important;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.25) !important;
  transition: transform 0.3s ease !important;
}

.gi-step:hover .gi-step__num,
.gi-card--step:hover .gi-step__number,
.gi-steps__item:hover .gi-steps__num {
  transform: scale(1.1) !important;
}


/* ==========================================================================
   CUSTOM SCROLLBAR & BACK TO TOP BUTTON
   ========================================================================== */

/* Ultra-Premium Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg, #0d0b08);
}

::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.35);
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.7);
}

/* Back to Top Floating Button */
.gi-back-to-top {
  position: fixed;
  bottom: 2rem;
  inset-inline-end: 2rem;
  z-index: 99;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

html:not([data-theme="dark"]) .gi-back-to-top {
  background: rgba(247, 243, 235, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #543e05;
}

html[data-theme="dark"] .gi-back-to-top {
  background: rgba(22, 20, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #d4af37;
}

.gi-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.gi-back-to-top:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.25) !important;
  border-color: rgba(212, 175, 55, 0.8) !important;
}

.gi-back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.gi-back-to-top:hover svg {
  transform: translateY(-2px);
}


/* ==========================================================================
   SERVICES AUDIT FIX — targeted fixes only, scoped to the exact components
   reported. Nothing above this block was modified or removed. See the audit
   report delivered alongside this file for full root-cause detail on each
   fix below. Every selector here is deliberately scoped (never a bare
   .gi-card / .gi-flow__tabs / .gi-form override) so it cannot affect the
   hero stepper, the scope estimator, or any page outside /services/.
   ========================================================================== */

/* --------------------------------------------------------------------
   FIX 1 — "جرّب التحويل بنفسك" data playground: the 4 stage tabs
   (بيانات خام / بيانات منظّفة / تحليل / رؤية).
   Root cause: .gi-flow__tabs / .gi-flow__tab were redefined 8 separate
   times earlier in this file across unrelated "fix" passes. Several of
   those later blocks were written for a *mobile* horizontal-scroll
   stepper but were never wrapped in a @media (max-width) query, so their
   `!important` flex-basis / min-width / overflow-x:auto rules leaked
   into desktop too. Because `.gi-playground .gi-flow__tabs` (2 classes)
   already carries `!important`, it out-ranks the later unscoped
   `.gi-flow__tabs` grid fix (1 class) regardless of source order, so the
   desktop screen was left with a cramped, scrollable strip instead of
   4 evenly balanced tabs. Fixed here by matching that same specificity.
   -------------------------------------------------------------------- */
.gi-playground .gi-flow__tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  overflow: visible !important;
  width: 100% !important;
  margin-inline: 0 !important;
  scroll-snap-type: none !important;
}

.gi-playground .gi-flow__tabs::before,
.gi-playground .gi-flow__tabs::after {
  content: none !important;
}

.gi-playground .gi-flow__tab {
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .gi-playground .gi-flow__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------
   FIX 2 — Internal service cards (e.g. "تحليل الأداء والمبيعات") on
   Desktop / Wide Desktop / Large screens only. Mobile is untouched.
   Root cause: .gi-card-grid stretches every card in a row to match the
   tallest one (grid default align-items: stretch), and .gi-card__link
   was the only element with `margin-top: auto`, so all of that extra
   height collapsed into one empty gap right above the button instead of
   being distributed — cards with shorter copy looked hollow/unbalanced
   next to a taller sibling in the same row. Distributing the space
   across the whole card (instead of dumping it in one spot) fixes this
   without changing any text, price, CTA, icon or animation.
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
  .gi-card-grid .gi-card {
    justify-content: space-between;
  }

  .gi-card-grid .gi-card__link {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------
   FIX 3 — Request form fields ("هل يوجد معرف ثابت للعميل؟",
   "لمن يستخدم الـDashboard؟", "مصدر/موقع البيانات المطلوب") appearing
   unresponsive / impossible to read or type into.
   Root cause: every light-theme color override in this file targets the
   selector `[data-theme="light"]`, but gi-nav.js never sets that
   attribute — light mode is the default with NO data-theme attribute at
   all (only `data-theme="dark"` is ever written). That makes every
   `[data-theme="light"] ...` rule in this file permanently dead code, so
   light-mode visitors (the site's default) were left with the
   unconditional dark-mode field styling below: a near-black input
   background that reads as visually broken against the rest of the
   light page, especially for <select> elements whose closed-box value
   is easy to miss entirely. This does not change the intentional
   behavior where service-specific fields stay disabled until a matching
   service is chosen — it only makes that state, and the enabled state,
   clearly legible in the theme the site is actually rendering. Uses the
   selector the theme script actually sets (`html:not([data-theme="dark"])`),
   matching the same pattern already used correctly elsewhere in this
   file for the card theming engine.
   -------------------------------------------------------------------- */
html:not([data-theme="dark"]) .gi-form__field input,
html:not([data-theme="dark"]) .gi-form__field select,
html:not([data-theme="dark"]) .gi-form__field textarea {
  background: #ffffff !important;
  color: #1a1509 !important;
  border: 1.5px solid rgba(115, 83, 6, 0.35) !important;
}

html:not([data-theme="dark"]) .gi-form__field input::placeholder,
html:not([data-theme="dark"]) .gi-form__field textarea::placeholder {
  color: #8a7f68 !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) .gi-form__field select option {
  background: #ffffff !important;
  color: #1a1509 !important;
}

html:not([data-theme="dark"]) .gi-form__field input:focus,
html:not([data-theme="dark"]) .gi-form__field select:focus,
html:not([data-theme="dark"]) .gi-form__field textarea:focus {
  border-color: #8A7650 !important;
  box-shadow: 0 0 0 3px rgba(138, 118, 80, 0.18) !important;
}

/* Fields inside a service-specific block (customer ID, dashboard use,
   web source) stay disabled by design until their matching service is
   selected above — this only makes that state visually unambiguous in
   both themes instead of looking like a plain, broken input. */
.gi-form__field input:disabled,
.gi-form__field select:disabled,
.gi-form__field textarea:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* =========================================================
   CATEGORY SERVICE CARD — DESKTOP WIDTH FIX
   Single service card should use the available container width.
   Homepage multi-card grid remains unchanged.
   Mobile remains unchanged.
   ========================================================= */

@media (min-width: 901px) {
  .gi-card-grid:has(> .gi-card:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------
   FIX 6 — Hero ("عندك بيانات، لكن مش عارف تستفيد منها؟") leaving a
   large empty gap and not filling the row on Desktop / Wide Desktop.
   Desktop-only fix — mobile/tablet (<992px) are completely untouched.

   Root cause: at ≥992px, an earlier rule turns `.gi-hero` /
   `.gi-hero--flow` itself into a 2-column grid (`0.85fr 1.5fr`). But in
   the actual markup `.gi-hero` / `.gi-hero--flow` has exactly ONE
   direct child — `div.container`. With grid auto-placement, that single
   child lands in column 1 (0.85fr) only; column 2 (1.5fr — the larger
   share of the row) is never occupied by anything and renders as dead
   space. The real text/card split is already handled one level deeper,
   by `.container`'s own `grid-template-columns` (also 0.85fr 1.5fr,
   with the stepper card explicitly placed in column 2) — so the outer
   grid on `.gi-hero` itself was redundant and is what produced the gap.

   Fix: make the single `.container` child span both outer columns so
   it uses the full row width. Its own inner grid (unchanged) still
   splits copy vs. card correctly. On genuinely wide monitors
   (≥1440px) the container's existing 1200px cap is also relaxed a bit
   further so the hero keeps scaling with the screen instead of
   plateauing early.
   -------------------------------------------------------------------- */
@media (min-width: 992px) {
  .gi-hero > .container,
  .gi-hero--flow > .container {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

@media (min-width: 1440px) {
  .gi-hero .container,
  .gi-hero--flow .container {
    max-width: min(90vw, 1600px) !important;
  }
}


/* --------------------------------------------------------------------
   FIX 7 — Sticky header request: keep header.gi-nav pinned to the top
   while scrolling. Applies to Mobile AND Desktop — no breakpoint here.

   `header.gi-nav` already carries `position: sticky !important` from
   several earlier passes above, and nothing else in this file (no
   transform/filter/contain on body, .gi-page, main, or html) breaks a
   sticky containing block — so on the CSS side this should already
   work. This rule only raises the selector specificity above every
   other `header.gi-nav` rule in the file so nothing added later can
   accidentally out-rank it.

   NOTE: if the header still scrolls away after this, the cause is not
   in this stylesheet — it will be JavaScript (gi-nav.js /
   gi-interactions.js) either setting an inline style on the header, or
   a scroll-animation wrapper applying `transform` to an ancestor of
   the header, both of which silently disable `position: sticky` no
   matter what the CSS says. That would need those JS files to fix.
   -------------------------------------------------------------------- */
html body header.gi-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* --------------------------------------------------------------------
   FIX 8 — Real root cause of the header not staying sticky (it just
   scrolls away and never comes back). Applies to Mobile AND Desktop.

   `header.gi-nav` was never the problem — it correctly has
   `position: sticky !important` several times over. The actual cause
   is 3 separate `html, body { overflow-x: ... !important; }` rules
   above that set overflow-x on BOTH `html` AND `body`. Setting any
   overflow value on `<body>` itself (not just `<html>`) turns body
   into its own scroll-establishing box — a well-documented browser
   quirk that silently disables `position: sticky` for that body's
   children, because the sticky reference frame becomes a container
   that never actually scrolls (the real scrolling happens at the
   `<html>`/viewport level, which already receives the propagated
   overflow from `<html>` on its own — body never needed to repeat it).

   Fix: reset body's own overflow to visible so it stops acting as a
   scroll container. `<html>`'s overflow-x (already set above) keeps
   doing the actual job of preventing horizontal scroll, unchanged.
   -------------------------------------------------------------------- */
body {
  overflow-x: visible !important;
  overflow-y: visible !important;
}