/* Breadcrumb */
.crumbs { padding-top: 48px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); display: flex; gap: 10px; align-items: center; }
.crumbs a { color: var(--gray-500); }
.crumbs a:hover { color: var(--purple); }
.crumbs .sep { opacity: 0.5; }
.crumbs .current { color: var(--purple); }

/* Hero */
.hero { position: relative; padding: 72px 0 48px; }
.hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--purple-softer); border: 1px solid color-mix(in srgb, var(--purple) 15%, transparent); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); margin-bottom: 28px; }
.hero-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px var(--purple); }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 5.5vw, 76px); line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--charcoal); max-width: 18ch; }
.hero h1 .accent { color: var(--purple); position: relative; display: inline-block; }
.hero h1 .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 18px; background: var(--blush); z-index: -1; opacity: 0.6; border-radius: 2px; }
.hero p.lead { margin: 0 0 36px; font-size: 17px; color: var(--gray-700); line-height: 1.55; max-width: 52ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero-side orbital diagram */
/* ---------- Hero Orbit (Arabic.AI center + 10 satellites) ---------- */
.hero-orbit {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
  --radius-outer: 192px;
  --radius-inner: 108px;
}

/* Rotating orbital system — rings + satellites spin together */
.orbit-ring-system {
  position: absolute;
  inset: 0;
  animation: orbit-spin 60s linear infinite;
  z-index: 2;
}
.hero-orbit:hover .orbit-ring-system,
.hero-orbit:hover .orbit-satellite-inner {
  animation-play-state: paused;
}
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-counter-spin {
  from { rotate: 0deg; }
  to   { rotate: -360deg; }
}

/* Sonar scanner rings — use CSS-variable pixel values instead of percentages.
   This avoids a known rendering edge case where percentage width/height on an
   aspect-ratio parent collapses to 0 in some browsers, making the pulses invisible
   on desktop. Pixel values defined per-breakpoint resolve reliably everywhere. */
.hero-orbit {
  --scan-start: 110px;
  --scan-mid:   280px;
  --scan-end:   440px;
}
.orbit-scan {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--scan-start);
  height: var(--scan-start);
  border: 2px solid var(--purple);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: orbit-scan-pulse 4.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  z-index: 1;
  will-change: width, height, opacity;
}
.orbit-scan-1 { animation-delay: 0s; }
.orbit-scan-2 { animation-delay: 2.25s; }
@keyframes orbit-scan-pulse {
  0%   { width: var(--scan-start); height: var(--scan-start); opacity: 0.7; }
  60%  { width: var(--scan-mid);   height: var(--scan-mid);   opacity: 0.28; }
  100% { width: var(--scan-end);   height: var(--scan-end);   opacity: 0; }
}

.orbit-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 112px; height: 112px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: var(--purple);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.9),
    0 0 0 7px color-mix(in srgb, var(--purple) 18%, transparent),
    0 26px 56px -16px color-mix(in srgb, var(--purple) 65%, transparent),
    0 4px 14px -6px rgba(20, 10, 50, 0.18);
  z-index: 10;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}
.orbit-logo {
  width: 54%;
  height: auto;
  transition: filter .3s var(--ease);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}

.orbit-satellite {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(calc(var(--r) * -1))
    rotate(calc(-1 * var(--a)));
  cursor: pointer;
  text-decoration: none;
}
.orbit-satellite-inner {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 50%;
  padding: 9px;
  box-shadow: 0 8px 20px -10px rgba(20, 10, 50, 0.14);
  scale: 1;
  rotate: 0deg;
  animation: orbit-counter-spin 60s linear infinite;
  transition:
    scale .32s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow .32s var(--ease),
    border-color .32s var(--ease);
}
.orbit-satellite-inner img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.orbit-satellite:hover .orbit-satellite-inner {
  scale: 1.18;
  border-color: color-mix(in srgb, var(--purple) 35%, transparent);
  box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--purple) 42%, transparent);
}
.orbit-satellite:hover { z-index: 20; }

/* Tooltip — real child inside .orbit-satellite-inner so it inherits the
   counter-rotation animation. This keeps the label UPRIGHT in world coords
   regardless of where the satellite is in its orbit. */
.orbit-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--charcoal);
  color: #fff;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  z-index: 30;
}
.orbit-satellite:hover .orbit-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 40px 48px;
  background: var(--paper);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  margin-top: 48px;
}
.stat-item { text-align: left; padding: 0 24px; position: relative; }
.stat-item + .stat-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--gray-100); }
.stat-num { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -0.015em; line-height: 1; color: var(--purple); }
.stat-label { font-family: var(--mono); font-size: 11px; color: var(--gray-500); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 10px; }

/* Sections */
section.sec { padding: 88px 0; }
.section-head { display: grid; grid-template-columns: 160px 1fr; gap: 48px; align-items: start; margin-bottom: 44px; }
.section-index { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); padding-top: 8px; }
.section-title { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.5vw, 58px); line-height: 0.95; letter-spacing: -0.015em; color: var(--charcoal); max-width: 20ch; margin: 0; }
.section-intro { margin-top: 18px; font-size: 16px; color: var(--gray-700); max-width: 62ch; line-height: 1.6; }

/* Tool tiles grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.tool-tile {
  background: var(--paper);
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: all .25s var(--ease);
  cursor: default;
}
.tool-tile:hover {
  border-color: color-mix(in srgb, var(--purple) 40%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(63, 25, 147, 0.18);
}
.tool-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  flex-shrink: 0;
  padding: 6px;
  transition: border-color .25s var(--ease);
}
.tool-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tool-tile:hover .tool-icon {
  border-color: color-mix(in srgb, var(--purple) 35%, transparent);
}
.tool-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
}
.tool-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray-500);
  letter-spacing: 0.04em;
  margin-top: -6px;
}

/* Category header meta */
.cat-meta {
  margin-top: 12px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cat-meta span { display: inline-flex; gap: 8px; align-items: center; }
.cat-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }

/* Capabilities panel (one per category) */
.cap-panel {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cap-item h4 { font-family: var(--sans); font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--charcoal); }
.cap-item p { margin: 0; font-size: 13px; color: var(--gray-700); line-height: 1.55; }

/* CTA */
.cta { background: var(--cosmic); color: #fff; border-radius: 28px; margin: 0 32px 80px; padding: 72px 56px; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 15% 20%, color-mix(in srgb, var(--purple) 55%, transparent), transparent 60%), radial-gradient(ellipse 500px 300px at 90% 80%, color-mix(in srgb, var(--blush) 22%, transparent), transparent 55%); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; max-width: var(--container); margin: 0 auto; }
.cta h2 { font-family: var(--display); font-size: clamp(42px, 5vw, 72px); line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 12px; max-width: 16ch; }
.cta h2 span { color: var(--lilac); }
.cta-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lilac); margin-bottom: 20px; }
.cta-body { font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.55; margin: 0 0 24px; }
.cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1024px) {
    .hero { padding: 64px 0 56px; }
    /* Switch from grid to flex-column so text → CTAs → orbit stacks reliably
       at every width below desktop, with the orbit centered below the CTAs. */
    .hero-inner { display: flex; flex-direction: column; gap: 48px; align-items: stretch; }
    .hero-orbit { max-width: 320px; width: 100%; align-self: center; --radius-outer: 134px; --radius-inner: 75px; --scan-start: 77px; --scan-mid: 200px; --scan-end: 307px; }
    .orbit-center { width: 78px; height: 78px; }
    .orbit-satellite { width: 42px; height: 42px; }
    .orbit-tip { font-size: 10px; padding: 5px 9px; }
    .stats-strip { grid-template-columns: 1fr 1fr; gap: 0; padding: 24px; }
    .stat-item:nth-child(odd)::before { display: none; }
    .stat-item { padding: 16px 20px; border-top: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100); }
    .stat-item:nth-child(even) { border-right: 0; }
    .stat-item:nth-child(1), .stat-item:nth-child(2) { border-top: 0; }
    .section-head { grid-template-columns: 1fr; gap: 16px; }
    .tools-grid { grid-template-columns: repeat(3, 1fr); }
    .cap-panel { grid-template-columns: 1fr; }
    .cta { padding: 48px 32px; margin: 0 16px 48px; }
    .cta-inner { grid-template-columns: 1fr; gap: 24px; }
  }
  @media (max-width: 720px) {
    .container { padding: 0 20px; }
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    section.sec { padding: 56px 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
    /* Tighten orbit further on narrow phones (proportional to desktop 460/192/108/112/56) */
    .hero-orbit { max-width: 280px; --radius-outer: 117px; --radius-inner: 66px; --scan-start: 67px; --scan-mid: 175px; --scan-end: 269px; }
    .orbit-center { width: 68px; height: 68px; }
    .orbit-satellite { width: 38px; height: 38px; }
  }