/*
 * AI24Solutions homepage hero
 * Brand-aligned enterprise direction
 */


/* =========================================================
   BRAND TOKENS
   ========================================================= */

body.theme-v13 {
  --ai24-hero-bg: #eef1f4;
  --ai24-hero-surface: #f8fafc;
  --ai24-hero-card: #ffffff;

  --ai24-ink: #202733;
  --ai24-ink-soft: #5f6c7b;
  --ai24-border: #d7dee7;

  --ai24-violet: #6958e8;
  --ai24-blue: #4e82f1;
  --ai24-cyan: #35b9e7;
}


/* =========================================================
   HERO BACKGROUND
   ========================================================= */

body.theme-v13 .planet-hero {
  background:
    linear-gradient(
      180deg,
      #f1f3f6 0%,
      var(--ai24-hero-bg) 100%
    );

  color: var(--ai24-ink);

  border-bottom:
    1px solid #dde3ea;
}

body.theme-v13 .planet-hero:before,
body.theme-v13 .planet-hero:after {
  display: none !important;
}

body.theme-v13 .planet-hero .hero-grid {
  grid-template-columns:
    minmax(0, .96fr)
    minmax(470px, 1.04fr);

  align-items: center;

  gap: 64px;
}

body.theme-v13 .planet-hero .hero-copy {
  max-width: 590px;
}


/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

body.theme-v13 .planet-hero .eyebrow {
  color: #596878;

  font-size: 11px;
  font-weight: 760;
  letter-spacing: .16em;
}

body.theme-v13 .planet-hero .eyebrow:before {
  background:
    linear-gradient(
      90deg,
      var(--ai24-violet),
      var(--ai24-cyan)
    );
}

body.theme-v13 .planet-hero h1 {
  max-width: 570px;

  color: var(--ai24-ink);

  font-size:
    clamp(
      25px,
      2vw,
      30px
    );

  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -.026em;
}

body.theme-v13 .planet-hero h1 .gradient-text {
  background: none;

  -webkit-text-fill-color: currentColor;
  color: inherit;
}

body.theme-v13 .planet-hero .lead {
  max-width: 570px;

  color: var(--ai24-ink-soft);

  font-size: 16px;
  line-height: 1.62;
}


/* =========================================================
   BUTTONS — LOGO / WIDGET PALETTE
   ========================================================= */

body.theme-v13 .planet-hero .btn-primary,
body.theme-v13 .header .btn-primary {
  background:
    linear-gradient(
      120deg,
      var(--ai24-violet) 0%,
      var(--ai24-blue) 52%,
      var(--ai24-cyan) 100%
    );

  color: #fff;

  border-color: transparent;

  box-shadow:
    0 10px 24px
    rgba(78, 105, 220, .18);
}

body.theme-v13 .planet-hero .btn-primary:hover,
body.theme-v13 .header .btn-primary:hover {
  box-shadow:
    0 13px 29px
    rgba(78, 105, 220, .23);
}

body.theme-v13 .planet-hero .btn-secondary {
  background: #ffffff;

  color: #293442;

  border:
    1px solid #ccd5df;

  box-shadow: none;
}

body.theme-v13 .planet-hero .btn-secondary:hover {
  background: #f8fafc;
}


/* =========================================================
   HERO NOTES
   ========================================================= */

body.theme-v13 .planet-hero .hero-note {
  color: #667484;
}

body.theme-v13 .planet-hero .hero-note span:before {
  width: 6px;
  height: 6px;

  background:
    linear-gradient(
      135deg,
      var(--ai24-violet),
      var(--ai24-cyan)
    );

  box-shadow: none;
}


/* =========================================================
   PROCESS BOARD
   ========================================================= */

.ai24-process-board {
  position: relative;

  overflow: hidden;

  padding:
    30px 32px 26px;

  border:
    1px solid var(--ai24-border);

  border-radius: 26px;

  background:
    var(--ai24-hero-card);

  box-shadow:
    0 18px 46px
    rgba(43, 56, 72, .08);
}

.ai24-process-board__accent {
  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--ai24-violet),
      var(--ai24-blue),
      var(--ai24-cyan)
    );
}


/* =========================================================
   PROCESS BOARD HEADING
   ========================================================= */

.ai24-process-board__heading {
  margin-bottom: 24px;
}

.ai24-process-board__heading span {
  display: block;

  margin-bottom: 6px;

  color: #74808d;

  font-size: 10px;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ai24-process-board__heading strong {
  display: block;

  color: var(--ai24-ink);

  font-size: 20px;
  font-weight: 680;
  line-height: 1.2;
}


/* =========================================================
   PROCESS FLOW
   ========================================================= */

.ai24-process-list {
  position: relative;

  display: grid;
  gap: 9px;
}

.ai24-process-list:before {
  content: "";

  position: absolute;

  left: 20px;
  top: 39px;
  bottom: 39px;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      rgba(105, 88, 232, .32),
      rgba(78, 130, 241, .28),
      rgba(53, 185, 231, .30)
    );
}

.ai24-process-step {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 14px;

  min-height: 72px;

  padding: 12px 14px;

  border:
    1px solid #e0e5eb;

  border-radius: 15px;

  background: #f8fafc;
}

.ai24-process-step__number {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 40px;
  height: 40px;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      var(--ai24-violet),
      var(--ai24-blue) 56%,
      var(--ai24-cyan)
    );

  color: #ffffff;

  font-size: 10px;
  font-weight: 800;

  box-shadow:
    0 6px 14px
    rgba(90, 91, 224, .15);
}

.ai24-process-step strong {
  display: block;

  margin-bottom: 3px;

  color: #26313d;

  font-size: 14px;
  font-weight: 680;
  line-height: 1.3;
}

.ai24-process-step small {
  display: block;

  color: #788491;

  font-size: 11px;
  line-height: 1.35;
}


/* =========================================================
   PROCESS FOOTER
   ========================================================= */

.ai24-process-board__footer {
  margin-top: 18px;

  padding-top: 16px;

  border-top:
    1px solid #e2e7ec;

  color: #6d7986;

  font-size: 11px;
  line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
  body.theme-v13 .planet-hero .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body.theme-v13 .planet-hero .hero-copy {
    max-width: 650px;
  }

  body.theme-v13 .planet-hero h1 {
    max-width: 620px;

    font-size:
      clamp(
        24px,
        4vw,
        29px
      );
  }

  .ai24-process-board {
    width: 100%;
    max-width: 680px;

    margin-inline: auto;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  body.theme-v13 .planet-hero h1 {
    font-size:
      clamp(
        23px,
        6.5vw,
        27px
      );

    line-height: 1.18;
  }

  body.theme-v13 .planet-hero .lead {
    font-size: 15px;
  }

  .ai24-process-board {
    padding:
      25px 15px 18px;

    border-radius: 20px;
  }

  .ai24-process-board__heading {
    margin-bottom: 18px;
  }

  .ai24-process-board__heading strong {
    font-size: 18px;
  }

  .ai24-process-step {
    min-height: 66px;

    padding: 10px;
  }

  .ai24-process-step__number {
    width: 36px;
    height: 36px;

    border-radius: 10px;
  }

  .ai24-process-list:before {
    left: 28px;
  }
}


/* =========================================================
   LIGHT AI24 SPHERE
   Keeps the current calm grey hero and AI24 brand palette
   ========================================================= */

.ai24-process-board {
  display: none !important;
}

.ai24-light-sphere {
  position: relative;

  min-height: 500px;

  overflow: hidden;

  border:
    1px solid #ccd8e8;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 52% 48%,
      rgba(100, 102, 238, .07),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #f9fbfe 0%,
      #f2f6fb 54%,
      #eef4fa 100%
    );

  box-shadow:
    0 18px 46px
    rgba(43, 56, 72, .07);
}


/* ---------- GRID ---------- */

.ai24-light-sphere__grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(75, 116, 173, .07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(75, 116, 173, .07) 1px,
      transparent 1px
    );

  background-size: 46px 46px;

  mask-image:
    radial-gradient(
      circle at center,
      #000 22%,
      rgba(0,0,0,.72) 62%,
      transparent 94%
    );
}


/* ---------- ORBITS ---------- */

.ai24-light-sphere__ring {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border:
    1px solid rgba(93, 100, 230, .24);

  border-radius: 50%;
}

.ai24-light-sphere__ring--1 {
  width: 290px;
  height: 235px;
}

.ai24-light-sphere__ring--2 {
  width: 390px;
  height: 320px;

  border-color:
    rgba(64, 150, 225, .22);
}

.ai24-light-sphere__ring--3 {
  width: 480px;
  height: 405px;

  border-color:
    rgba(53, 185, 231, .18);
}


/* ---------- DOTS ---------- */

.ai24-light-sphere__dot {
  position: absolute;
  z-index: 2;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--ai24-violet),
      var(--ai24-cyan)
    );

  box-shadow:
    0 4px 10px
    rgba(85, 104, 220, .22);
}

.ai24-light-sphere__dot--1 {
  left: 28%;
  top: 31%;
}

.ai24-light-sphere__dot--2 {
  right: 30%;
  top: 19%;
}

.ai24-light-sphere__dot--3 {
  left: 25%;
  bottom: 28%;
}

.ai24-light-sphere__dot--4 {
  right: 21%;
  bottom: 24%;
}


/* ---------- CORE SPHERE ---------- */

.ai24-sphere-core {
  position: absolute;
  z-index: 3;

  left: 50%;
  top: 50%;

  display: grid;
  place-content: center;

  width: 218px;
  height: 218px;

  padding: 24px;

  transform:
    translate(-50%, -50%);

  text-align: center;

  border:
    1px solid rgba(100, 117, 242, .22);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 30%,
      rgba(255,255,255,.98) 0%,
      rgba(236,241,255,.97) 24%,
      rgba(185,204,255,.92) 53%,
      rgba(119,107,239,.78) 78%,
      rgba(63,181,229,.66) 100%
    );

  box-shadow:
    inset -24px -22px 42px
    rgba(85, 67, 220, .16),

    inset 20px 18px 34px
    rgba(255,255,255,.68),

    0 22px 48px
    rgba(91, 94, 220, .17);
}

.ai24-sphere-core:before {
  content: "";

  position: absolute;

  left: 25px;
  top: 20px;

  width: 92px;
  height: 58px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.62),
      transparent 70%
    );

  transform: rotate(-19deg);
}

.ai24-sphere-core strong {
  position: relative;
  z-index: 1;

  display: block;

  color: #252d66;

  font-size: 22px;
  font-weight: 720;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.ai24-sphere-core span {
  position: relative;
  z-index: 1;

  display: block;

  margin-top: 8px;

  color: #536fa4;

  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
}


/* ---------- SURROUNDING CARDS ---------- */

.ai24-sphere-card {
  position: absolute;
  z-index: 4;

  display: flex;
  align-items: center;
  gap: 12px;

  width: 202px;
  min-height: 76px;

  padding: 13px 14px;

  border:
    1px solid rgba(66, 82, 114, .16);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #27344f,
      #1d2941
    );

  box-shadow:
    0 11px 25px
    rgba(42, 53, 78, .14);
}

.ai24-sphere-card--client {
  left: 20px;
  top: 42px;
}

.ai24-sphere-card--crm {
  right: 20px;
  top: 104px;
}

.ai24-sphere-card--knowledge {
  left: 28px;
  bottom: 56px;
}

.ai24-sphere-card--control {
  right: 24px;
  bottom: 60px;
}

.ai24-sphere-card__index {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      var(--ai24-violet),
      var(--ai24-blue) 55%,
      var(--ai24-cyan)
    );

  color: #fff;

  font-size: 10px;
  font-weight: 800;

  box-shadow:
    0 5px 12px
    rgba(87, 91, 226, .24);
}

.ai24-sphere-card strong {
  display: block;

  margin-bottom: 3px;

  color: #f7f9fc;

  font-size: 13px;
  font-weight: 680;
  line-height: 1.28;
}

.ai24-sphere-card small {
  display: block;

  color: #a8b5ca;

  font-size: 10px;
  line-height: 1.35;
}


/* ---------- CAPTION ---------- */

.ai24-light-sphere__caption {
  position: absolute;

  z-index: 4;

  left: 50%;
  bottom: 16px;

  max-width:
    calc(100% - 40px);

  padding: 8px 14px;

  transform:
    translateX(-50%);

  border:
    1px solid #d5deea;

  border-radius: 999px;

  background:
    rgba(255,255,255,.82);

  color: #748297;

  font-size: 10px;
  font-weight: 560;

  white-space: nowrap;
}


/* ---------- TABLET ---------- */

@media (max-width: 1050px) {
  .ai24-light-sphere {
    width: 100%;
    max-width: 680px;

    margin-inline: auto;
  }
}


/* ---------- MOBILE ---------- */

@media (max-width: 680px) {
  .ai24-light-sphere {
    display: grid;
    gap: 9px;

    min-height: 0;

    padding: 15px;

    border-radius: 22px;
  }

  .ai24-light-sphere__grid,
  .ai24-light-sphere__ring,
  .ai24-light-sphere__dot {
    display: none;
  }

  .ai24-sphere-core,
  .ai24-sphere-card,
  .ai24-light-sphere__caption {
    position: relative;

    inset: auto;

    width: 100%;
    max-width: none;
    height: auto;

    transform: none;
  }

  .ai24-sphere-core {
    order: -2;

    display: block;

    padding: 20px;

    border-radius: 18px;

    text-align: left;

    background:
      linear-gradient(
        120deg,
        rgba(105, 88, 232, .12),
        rgba(53, 185, 231, .11)
      );

    box-shadow: none;
  }

  .ai24-sphere-core:before {
    display: none;
  }

  .ai24-sphere-core strong {
    font-size: 18px;
  }

  .ai24-sphere-card {
    min-height: 66px;

    padding: 11px 12px;
  }

  .ai24-light-sphere__caption {
    order: 10;

    padding: 10px 11px;

    border-radius: 13px;

    text-align: left;

    white-space: normal;
  }
}


/* =========================================================
   AI24 LIGHT SPHERE V2
   Premium / vivid / technological refinement
   ========================================================= */


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

.ai24-light-sphere {
  isolation: isolate;

  min-height: 510px;

  border:
    1px solid rgba(116, 142, 196, .22);

  background:
    radial-gradient(
      circle at 53% 49%,
      rgba(109, 91, 238, .10) 0%,
      rgba(80, 132, 241, .055) 29%,
      transparent 52%
    ),
    radial-gradient(
      circle at 84% 16%,
      rgba(53, 185, 231, .10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(245,248,253,.98) 58%,
      rgba(239,244,251,.98)
    );

  box-shadow:
    0 24px 60px rgba(50, 66, 96, .085),
    inset 0 1px 0 rgba(255,255,255,.96);
}


/* ---------------------------------------------------------
   GRID — subtler and cleaner
   --------------------------------------------------------- */

.ai24-light-sphere__grid {
  opacity: .64;

  background-size:
    48px 48px;

  background-image:
    linear-gradient(
      rgba(80, 111, 167, .055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(80, 111, 167, .055) 1px,
      transparent 1px
    );
}


/* ---------------------------------------------------------
   ORBITS — layered, slow, alive
   --------------------------------------------------------- */

.ai24-light-sphere__ring {
  border-color:
    rgba(95, 93, 229, .22);

  box-shadow:
    inset 0 0 18px
    rgba(94, 99, 230, .025);

  will-change: transform;

  animation:
    ai24OrbitBreath 8s ease-in-out infinite;
}

.ai24-light-sphere__ring--1 {
  width: 300px;
  height: 238px;

  transform:
    translate(-50%, -50%)
    rotate(-8deg);
}

.ai24-light-sphere__ring--2 {
  width: 402px;
  height: 326px;

  border-color:
    rgba(66, 133, 238, .20);

  transform:
    translate(-50%, -50%)
    rotate(7deg);

  animation-delay: -2.7s;
}

.ai24-light-sphere__ring--3 {
  width: 492px;
  height: 408px;

  border-color:
    rgba(47, 179, 224, .17);

  transform:
    translate(-50%, -50%)
    rotate(-4deg);

  animation-delay: -5.2s;
}


/* ---------------------------------------------------------
   ORBIT DOTS
   --------------------------------------------------------- */

.ai24-light-sphere__dot {
  width: 10px;
  height: 10px;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff 0%,
      #b8eaff 18%,
      #54c8ee 48%,
      #655be7 100%
    );

  box-shadow:
    0 0 0 5px rgba(91, 111, 231, .055),
    0 4px 13px rgba(75, 105, 223, .24);

  animation:
    ai24DotPulse 3.6s ease-in-out infinite;
}

.ai24-light-sphere__dot--2 {
  animation-delay: -.9s;
}

.ai24-light-sphere__dot--3 {
  animation-delay: -1.8s;
}

.ai24-light-sphere__dot--4 {
  animation-delay: -2.7s;
}


/* ---------------------------------------------------------
   CORE — layered technological sphere
   --------------------------------------------------------- */

.ai24-sphere-core {
  width: 238px;
  height: 238px;

  border:
    1px solid rgba(110, 102, 240, .28);

  background:
    radial-gradient(
      circle at 34% 24%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.92) 9%,
      rgba(220,229,255,.92) 24%,
      rgba(169,188,255,.90) 43%,
      rgba(113,116,242,.88) 68%,
      rgba(76,108,232,.88) 82%,
      rgba(55,181,229,.84) 100%
    );

  box-shadow:
    inset 25px 22px 40px
      rgba(255,255,255,.52),

    inset -32px -35px 54px
      rgba(71, 57, 204, .23),

    inset -6px 14px 28px
      rgba(88, 190, 238, .16),

    0 22px 46px
      rgba(82, 86, 215, .19),

    0 0 72px
      rgba(85, 104, 231, .11);

  animation:
    ai24SphereFloat 6s ease-in-out infinite;

  will-change:
    transform;
}


/*
 * Large glass/refraction layer.
 */

.ai24-sphere-core:before {
  left: 27px;
  top: 20px;

  width: 128px;
  height: 82px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.31) 38%,
      transparent 72%
    );

  filter: blur(.2px);

  transform:
    rotate(-18deg);
}


/*
 * Secondary light ribbon creates depth and movement.
 */

.ai24-sphere-core:after {
  content: "";

  position: absolute;

  left: 22px;
  right: 27px;
  bottom: 27px;

  height: 68px;

  border:
    1px solid rgba(255,255,255,.20);

  border-top-color:
    rgba(255,255,255,.42);

  border-radius: 50%;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(68,181,232,.10)
    );

  transform:
    rotate(-9deg);

  opacity: .82;
}


/* Core text */

.ai24-sphere-core strong {
  z-index: 3;

  color: #202b67;

  font-size: 23px;
  font-weight: 760;
  letter-spacing: -.028em;

  text-shadow:
    0 1px 0 rgba(255,255,255,.36);
}

.ai24-sphere-core span {
  z-index: 3;

  margin-top: 9px;

  color: #536fa9;

  font-size: 10px;
  font-weight: 680;
  letter-spacing: .015em;
}


/* ---------------------------------------------------------
   FLOATING CARDS — REMOVE BLACK PANELS
   --------------------------------------------------------- */

.ai24-sphere-card {
  width: 202px;
  min-height: 74px;

  border:
    1px solid rgba(130, 146, 178, .24);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.90),
      rgba(248,250,254,.82)
    );

  -webkit-backdrop-filter:
    blur(14px) saturate(125%);

  backdrop-filter:
    blur(14px) saturate(125%);

  box-shadow:
    0 13px 30px
      rgba(54, 68, 97, .095),

    inset 0 1px 0
      rgba(255,255,255,.90);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.ai24-sphere-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(97, 105, 231, .27);

  box-shadow:
    0 17px 34px
      rgba(54, 68, 97, .12),

    inset 0 1px 0
      rgba(255,255,255,.94);
}

.ai24-sphere-card strong {
  color: #273144;

  font-size: 13px;
  font-weight: 700;
}

.ai24-sphere-card small {
  color: #79869a;

  font-size: 10px;
}


/* Number badges */

.ai24-sphere-card__index {
  border:
    1px solid rgba(102, 103, 232, .12);

  background:
    linear-gradient(
      135deg,
      var(--ai24-violet) 0%,
      var(--ai24-blue) 54%,
      var(--ai24-cyan) 100%
    );

  box-shadow:
    0 7px 15px
      rgba(89, 91, 225, .18);
}


/* ---------------------------------------------------------
   CARD POSITIONING — airier composition
   --------------------------------------------------------- */

.ai24-sphere-card--client {
  left: 18px;
  top: 37px;
}

.ai24-sphere-card--crm {
  right: 18px;
  top: 92px;
}

.ai24-sphere-card--knowledge {
  left: 24px;
  bottom: 54px;
}

.ai24-sphere-card--control {
  right: 21px;
  bottom: 57px;
}


/* ---------------------------------------------------------
   CAPTION
   --------------------------------------------------------- */

.ai24-light-sphere__caption {
  bottom: 14px;

  border:
    1px solid rgba(130, 146, 178, .19);

  background:
    rgba(255,255,255,.74);

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);

  color: #7b8797;

  box-shadow:
    0 6px 16px rgba(62, 75, 100, .045);
}


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

@keyframes ai24SphereFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-5px)
      scale(1.012);
  }
}


@keyframes ai24OrbitBreath {
  0%,
  100% {
    opacity: .72;
  }

  50% {
    opacity: 1;
  }
}


@keyframes ai24DotPulse {
  0%,
  100% {
    opacity: .76;
    scale: .92;
  }

  50% {
    opacity: 1;
    scale: 1.08;
  }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ai24-sphere-core,
  .ai24-light-sphere__ring,
  .ai24-light-sphere__dot {
    animation: none !important;
  }

  .ai24-sphere-card {
    transition: none !important;
  }
}


/* ---------------------------------------------------------
   MOBILE — keep it clean, not decorative
   --------------------------------------------------------- */

@media (max-width: 680px) {
  .ai24-sphere-core {
    width: 100%;
    height: auto;

    animation: none;

    background:
      linear-gradient(
        120deg,
        rgba(105,88,232,.13),
        rgba(78,130,241,.10) 52%,
        rgba(53,185,231,.12)
      );

    border:
      1px solid rgba(105,108,224,.18);

    box-shadow:
      0 8px 22px rgba(65,78,112,.065);
  }

  .ai24-sphere-core:after {
    display: none;
  }

  .ai24-sphere-card {
    background:
      rgba(255,255,255,.92);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ai24-sphere-card:hover {
    transform: none;
  }
}


/* =========================================================
   AI24 LIGHT SPHERE V3 — FINAL POLISH
   - smaller core
   - fewer orbit lines
   - lighter cards
   - calmer caption
   ========================================================= */


/* ---------------------------------------------------------
   PANEL — slightly more air
   --------------------------------------------------------- */

.ai24-light-sphere {
  min-height: 500px;

  border-color:
    rgba(126, 145, 185, .18);

  box-shadow:
    0 20px 52px
    rgba(50, 66, 96, .065),
    inset 0 1px 0
    rgba(255,255,255,.96);
}


/* ---------------------------------------------------------
   CORE — reduce visual weight by ~9%
   --------------------------------------------------------- */

.ai24-sphere-core {
  width: 216px;
  height: 216px;

  box-shadow:
    inset 23px 20px 36px
      rgba(255,255,255,.50),

    inset -28px -30px 48px
      rgba(71,57,204,.21),

    inset -5px 12px 24px
      rgba(88,190,238,.14),

    0 18px 39px
      rgba(82,86,215,.16),

    0 0 58px
      rgba(85,104,231,.085);
}

.ai24-sphere-core:before {
  left: 24px;
  top: 18px;

  width: 114px;
  height: 72px;
}

.ai24-sphere-core:after {
  left: 20px;
  right: 24px;
  bottom: 24px;

  height: 61px;
}

.ai24-sphere-core strong {
  font-size: 21px;
}

.ai24-sphere-core span {
  margin-top: 7px;

  font-size: 9.5px;
}


/* ---------------------------------------------------------
   ORBITS — two only, quieter
   --------------------------------------------------------- */

.ai24-light-sphere__ring--1 {
  width: 292px;
  height: 230px;

  border-color:
    rgba(96,93,229,.18);
}

.ai24-light-sphere__ring--2 {
  width: 408px;
  height: 326px;

  border-color:
    rgba(64,150,225,.16);
}

.ai24-light-sphere__ring--3 {
  display: none !important;
}


/* Keep only three small signal points */

.ai24-light-sphere__dot {
  width: 8px;
  height: 8px;

  box-shadow:
    0 0 0 4px
      rgba(91,111,231,.042),

    0 3px 9px
      rgba(75,105,223,.19);
}

.ai24-light-sphere__dot--4 {
  display: none !important;
}


/* ---------------------------------------------------------
   CARDS — lighter premium glass
   --------------------------------------------------------- */

.ai24-sphere-card {
  width: 196px;
  min-height: 70px;

  padding: 12px 13px;

  border:
    1px solid rgba(142,157,187,.19);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94),
      rgba(250,251,254,.88)
    );

  box-shadow:
    0 8px 20px
      rgba(54,68,97,.055),

    inset 0 1px 0
      rgba(255,255,255,.96);

  -webkit-backdrop-filter:
    blur(12px) saturate(112%);

  backdrop-filter:
    blur(12px) saturate(112%);
}

.ai24-sphere-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(97,105,231,.21);

  box-shadow:
    0 11px 25px
      rgba(54,68,97,.075),

    inset 0 1px 0
      rgba(255,255,255,.98);
}

.ai24-sphere-card__index {
  width: 32px;
  height: 32px;

  border-radius: 9px;

  box-shadow:
    0 5px 11px
      rgba(89,91,225,.13);
}

.ai24-sphere-card strong {
  color: #2c3545;

  font-size: 12.5px;
}

.ai24-sphere-card small {
  color: #8792a3;

  font-size: 9.5px;
}


/* ---------------------------------------------------------
   CARD COMPOSITION — more space around sphere
   --------------------------------------------------------- */

.ai24-sphere-card--client {
  left: 18px;
  top: 35px;
}

.ai24-sphere-card--crm {
  right: 18px;
  top: 90px;
}

.ai24-sphere-card--knowledge {
  left: 23px;
  bottom: 55px;
}

.ai24-sphere-card--control {
  right: 21px;
  bottom: 58px;
}


/* ---------------------------------------------------------
   CAPTION — quieter, cleaner
   --------------------------------------------------------- */

.ai24-light-sphere__caption {
  bottom: 13px;

  padding: 7px 13px;

  border:
    1px solid rgba(142,157,187,.16);

  background:
    rgba(255,255,255,.68);

  color: #8390a1;

  font-size: 9.5px;

  box-shadow:
    0 4px 12px
    rgba(62,75,100,.03);
}


/* ---------------------------------------------------------
   MOTION — less noticeable
   --------------------------------------------------------- */

@keyframes ai24SphereFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-3px)
      scale(1.006);
  }
}

@keyframes ai24OrbitBreath {
  0%,
  100% {
    opacity: .68;
  }

  50% {
    opacity: .90;
  }
}

@keyframes ai24DotPulse {
  0%,
  100% {
    opacity: .72;
    scale: .94;
  }

  50% {
    opacity: .98;
    scale: 1.05;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {
  .ai24-sphere-core {
    width: 100%;
    height: auto;

    box-shadow:
      0 7px 18px
      rgba(65,78,112,.05);
  }

  .ai24-sphere-card {
    width: 100%;
    min-height: 62px;
  }
}


/* =========================================================
   AI24 LIGHT SPHERE V4
   Restore the vitality of the original sphere:
   - 3 animated branded orbits
   - signal dots moving along the orbit paths
   - stronger dimensional sphere
   - light glass cards preserved
   ========================================================= */


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

.ai24-light-sphere {
  min-height: 505px;

  background:
    radial-gradient(
      circle at 51% 49%,
      rgba(105,88,232,.105) 0%,
      rgba(78,130,241,.055) 30%,
      transparent 52%
    ),
    radial-gradient(
      circle at 88% 12%,
      rgba(53,185,231,.085),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.985),
      rgba(246,249,253,.985) 58%,
      rgba(240,245,251,.985)
    );

  border-color:
    rgba(116,139,186,.20);

  box-shadow:
    0 22px 55px rgba(48,63,93,.075),
    inset 0 1px 0 rgba(255,255,255,.98);
}


/* ---------------------------------------------------------
   SPHERE
   Slightly stronger than v3, still lighter than old dark hero
   --------------------------------------------------------- */

.ai24-sphere-core {
  width: 228px;
  height: 228px;

  border-color:
    rgba(104,94,239,.29);

  background:
    radial-gradient(
      circle at 34% 22%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.96) 8%,
      rgba(224,231,255,.95) 21%,
      rgba(174,190,255,.94) 39%,
      rgba(119,114,243,.93) 64%,
      rgba(83,96,232,.92) 79%,
      rgba(49,183,229,.88) 100%
    );

  box-shadow:
    inset 26px 23px 40px
      rgba(255,255,255,.54),

    inset -31px -34px 53px
      rgba(67,51,199,.245),

    inset -8px 14px 27px
      rgba(58,184,232,.17),

    0 21px 43px
      rgba(75,79,211,.18),

    0 0 68px
      rgba(84,102,231,.10);

  animation:
    ai24SphereV4Float
    6.8s
    ease-in-out
    infinite;
}

.ai24-sphere-core:before {
  left: 25px;
  top: 18px;

  width: 123px;
  height: 78px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.84) 0%,
      rgba(255,255,255,.34) 40%,
      transparent 72%
    );
}

.ai24-sphere-core:after {
  left: 21px;
  right: 25px;
  bottom: 24px;

  height: 65px;

  border-color:
    rgba(255,255,255,.18);

  border-top-color:
    rgba(255,255,255,.43);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(55,184,231,.11)
    );
}

.ai24-sphere-core strong {
  font-size: 22px;

  color: #222c6a;
}

.ai24-sphere-core span {
  color: #526da8;

  font-size: 9.5px;
}


/* =========================================================
   BRAND ORBITS
   Instead of grey/blue borders each orbit carries the same
   violet -> blue -> cyan identity as logo, CTA and widget
   ========================================================= */

.ai24-light-sphere__ring {
  display: block !important;

  border: 0 !important;

  opacity: 1;

  background:
    conic-gradient(
      from 205deg,
      rgba(105,88,232,.08) 0deg,
      rgba(105,88,232,.34) 74deg,
      rgba(78,130,241,.32) 150deg,
      rgba(53,185,231,.29) 230deg,
      rgba(78,130,241,.16) 305deg,
      rgba(105,88,232,.08) 360deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.35px),
      #000 calc(100% - 1.15px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.35px),
      #000 calc(100% - 1.15px)
    );

  box-shadow: none;

  will-change:
    transform;

  animation: none;
}


/* Inner orbit */

.ai24-light-sphere__ring--1 {
  width: 302px;
  height: 238px;

  transform:
    translate(-50%, -50%)
    rotate(-8deg);

  animation:
    ai24RingV4One
    18s
    linear
    infinite;
}


/* Middle orbit */

.ai24-light-sphere__ring--2 {
  width: 410px;
  height: 326px;

  background:
    conic-gradient(
      from 52deg,
      rgba(53,185,231,.08) 0deg,
      rgba(53,185,231,.27) 82deg,
      rgba(78,130,241,.31) 165deg,
      rgba(105,88,232,.28) 244deg,
      rgba(78,130,241,.13) 320deg,
      rgba(53,185,231,.08) 360deg
    );

  transform:
    translate(-50%, -50%)
    rotate(7deg);

  animation:
    ai24RingV4Two
    23s
    linear
    infinite;
}


/* Outer orbit */

.ai24-light-sphere__ring--3 {
  display: block !important;

  width: 492px;
  height: 404px;

  background:
    conic-gradient(
      from 248deg,
      rgba(105,88,232,.045) 0deg,
      rgba(78,130,241,.18) 94deg,
      rgba(53,185,231,.22) 175deg,
      rgba(105,88,232,.17) 270deg,
      rgba(78,130,241,.07) 360deg
    );

  transform:
    translate(-50%, -50%)
    rotate(-4deg);

  opacity: .78;

  animation:
    ai24RingV4Three
    29s
    linear
    infinite;
}


/* =========================================================
   MOVING SIGNAL DOTS
   They now travel around elliptical paths rather than
   sitting still and merely pulsing
   ========================================================= */

.ai24-light-sphere__dot {
  display: block !important;

  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;

  width: 8px;
  height: 8px;

  margin:
    -4px 0 0 -4px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 28%,
      #ffffff 0%,
      #d7f5ff 16%,
      #5acbf0 43%,
      #5684ef 68%,
      #705be8 100%
    );

  box-shadow:
    0 0 0 4px
      rgba(81,117,232,.045),

    0 0 12px
      rgba(68,153,232,.28);

  will-change:
    transform,
    opacity;
}


/* dot 1 — inner orbit */

.ai24-light-sphere__dot--1 {
  animation:
    ai24DotV4Inner
    8.5s
    linear
    infinite;
}


/* dot 2 — middle orbit */

.ai24-light-sphere__dot--2 {
  animation:
    ai24DotV4Middle
    11.5s
    linear
    infinite;

  animation-delay:
    -3.2s;
}


/* dot 3 — outer orbit */

.ai24-light-sphere__dot--3 {
  animation:
    ai24DotV4Outer
    14.5s
    linear
    infinite;

  animation-delay:
    -7.1s;
}


/* fourth small signal on middle orbit */

.ai24-light-sphere__dot--4 {
  display: block !important;

  width: 6px;
  height: 6px;

  margin:
    -3px 0 0 -3px;

  opacity: .78;

  animation:
    ai24DotV4Middle
    11.5s
    linear
    infinite;

  animation-delay:
    -8.9s;
}


/* =========================================================
   LIGHT CARDS
   Preserve v3 direction, remove excess visual weight
   ========================================================= */

.ai24-sphere-card {
  border:
    1px solid rgba(136,151,182,.18);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(249,251,254,.89)
    );

  box-shadow:
    0 8px 20px
      rgba(50,64,94,.052),

    inset 0 1px 0
      rgba(255,255,255,.98);
}

.ai24-sphere-card:hover {
  border-color:
    rgba(91,103,230,.20);

  box-shadow:
    0 11px 25px
      rgba(52,66,96,.072),

    inset 0 1px 0
      rgba(255,255,255,.99);
}

.ai24-sphere-card strong {
  color: #293344;
}

.ai24-sphere-card small {
  color: #8491a3;
}


/* =========================================================
   CAPTION
   ========================================================= */

.ai24-light-sphere__caption {
  background:
    rgba(255,255,255,.72);

  color: #7f8c9e;

  border-color:
    rgba(137,153,184,.15);
}


/* =========================================================
   ORBIT ROTATION
   The gradient itself slowly rotates with each ellipse
   ========================================================= */

@keyframes ai24RingV4One {
  from {
    transform:
      translate(-50%, -50%)
      rotate(-8deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(352deg);
  }
}


@keyframes ai24RingV4Two {
  from {
    transform:
      translate(-50%, -50%)
      rotate(7deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(-353deg);
  }
}


@keyframes ai24RingV4Three {
  from {
    transform:
      translate(-50%, -50%)
      rotate(-4deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(356deg);
  }
}


/* =========================================================
   DOT PATHS
   Explicit elliptical coordinates work without JS and keep
   the motion predictable in modern Safari/Chrome
   ========================================================= */

@keyframes ai24DotV4Inner {
  0% {
    transform: translate(151px, 0);
  }

  12.5% {
    transform: translate(107px, 84px);
  }

  25% {
    transform: translate(0, 119px);
  }

  37.5% {
    transform: translate(-107px, 84px);
  }

  50% {
    transform: translate(-151px, 0);
  }

  62.5% {
    transform: translate(-107px, -84px);
  }

  75% {
    transform: translate(0, -119px);
  }

  87.5% {
    transform: translate(107px, -84px);
  }

  100% {
    transform: translate(151px, 0);
  }
}


@keyframes ai24DotV4Middle {
  0% {
    transform: translate(205px, 0);
  }

  12.5% {
    transform: translate(145px, 115px);
  }

  25% {
    transform: translate(0, 163px);
  }

  37.5% {
    transform: translate(-145px, 115px);
  }

  50% {
    transform: translate(-205px, 0);
  }

  62.5% {
    transform: translate(-145px, -115px);
  }

  75% {
    transform: translate(0, -163px);
  }

  87.5% {
    transform: translate(145px, -115px);
  }

  100% {
    transform: translate(205px, 0);
  }
}


@keyframes ai24DotV4Outer {
  0% {
    transform: translate(246px, 0);
  }

  12.5% {
    transform: translate(174px, 143px);
  }

  25% {
    transform: translate(0, 202px);
  }

  37.5% {
    transform: translate(-174px, 143px);
  }

  50% {
    transform: translate(-246px, 0);
  }

  62.5% {
    transform: translate(-174px, -143px);
  }

  75% {
    transform: translate(0, -202px);
  }

  87.5% {
    transform: translate(174px, -143px);
  }

  100% {
    transform: translate(246px, 0);
  }
}


/* =========================================================
   SPHERE FLOAT
   ========================================================= */

@keyframes ai24SphereV4Float {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-4px)
      scale(1.009);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ai24-sphere-core,
  .ai24-light-sphere__ring,
  .ai24-light-sphere__dot {
    animation: none !important;
  }

  .ai24-light-sphere__dot--1 {
    transform:
      translate(151px, 0);
  }

  .ai24-light-sphere__dot--2 {
    transform:
      translate(0, 163px);
  }

  .ai24-light-sphere__dot--3 {
    transform:
      translate(-246px, 0);
  }

  .ai24-light-sphere__dot--4 {
    transform:
      translate(0, -163px);
  }
}


/* =========================================================
   MOBILE
   Decorative orbital system is intentionally simplified
   ========================================================= */

@media (max-width: 680px) {
  .ai24-light-sphere__ring,
  .ai24-light-sphere__dot {
    display: none !important;
  }

  .ai24-sphere-core {
    width: 100%;
    height: auto;

    animation: none;

    background:
      linear-gradient(
        120deg,
        rgba(105,88,232,.13),
        rgba(78,130,241,.105) 52%,
        rgba(53,185,231,.125)
      );

    box-shadow:
      0 7px 18px
      rgba(65,78,112,.05);
  }
}


/* =========================================================
   AI24 SPHERE V5
   Metallic core + exact orbit-locked signal motion
   ========================================================= */

:root {
  --ai24-v5-violet: #6b63ee;
  --ai24-v5-blue: #568de9;
  --ai24-v5-cyan: #43b8d8;

  --ai24-v5-orbit-outer: 420px;
  --ai24-v5-orbit-middle: 324px;
  --ai24-v5-orbit-inner: 250px;

  --ai24-v5-radius-outer: 210px;
  --ai24-v5-radius-middle: 162px;
  --ai24-v5-radius-inner: 125px;
}


/* =========================================================
   PANEL
   ========================================================= */

body.theme-v13 .ai24-light-sphere {
  isolation: isolate;

  min-height: 505px;

  border:
    1px solid rgba(133, 149, 178, .18);

  background:
    radial-gradient(
      circle at 51% 48%,
      rgba(100, 119, 177, .055),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.985),
      rgba(246,249,253,.985) 58%,
      rgba(240,245,250,.985)
    );

  box-shadow:
    0 21px 52px rgba(52,67,95,.065),
    inset 0 1px 0 rgba(255,255,255,.98);
}


/* =========================================================
   GRID
   ========================================================= */

body.theme-v13 .ai24-light-sphere__grid {
  opacity: .56;

  background-image:
    linear-gradient(
      rgba(105,128,164,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(105,128,164,.05) 1px,
      transparent 1px
    );

  background-size:
    48px 48px;
}


/* =========================================================
   THREE EXACT CIRCULAR ORBITS

   Орбиты намеренно сделаны круглыми:
   радиус точки математически совпадает с радиусом линии
   ========================================================= */

body.theme-v13 .ai24-light-sphere__ring {
  display: block !important;

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border: 0 !important;
  border-radius: 50%;

  box-shadow: none;

  animation: none !important;

  pointer-events: none;
}


/* gradient-border through mask */

body.theme-v13 .ai24-light-sphere__ring--1 {
  width: var(--ai24-v5-orbit-outer);
  height: var(--ai24-v5-orbit-outer);

  background:
    conic-gradient(
      from 210deg,
      rgba(107,99,238,.10),
      rgba(107,99,238,.27) 24%,
      rgba(86,141,233,.27) 53%,
      rgba(67,184,216,.25) 77%,
      rgba(107,99,238,.10)
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1.05px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1.05px)
    );
}


body.theme-v13 .ai24-light-sphere__ring--2 {
  width: var(--ai24-v5-orbit-middle);
  height: var(--ai24-v5-orbit-middle);

  background:
    conic-gradient(
      from 45deg,
      rgba(67,184,216,.08),
      rgba(67,184,216,.24) 25%,
      rgba(86,141,233,.27) 52%,
      rgba(107,99,238,.25) 78%,
      rgba(67,184,216,.08)
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1.05px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1.05px)
    );
}


body.theme-v13 .ai24-light-sphere__ring--3 {
  display: block !important;

  width: var(--ai24-v5-orbit-inner);
  height: var(--ai24-v5-orbit-inner);

  background:
    conic-gradient(
      from 285deg,
      rgba(107,99,238,.08),
      rgba(107,99,238,.27) 30%,
      rgba(86,141,233,.24) 61%,
      rgba(67,184,216,.20) 82%,
      rgba(107,99,238,.08)
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1.05px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1.05px)
    );
}


/* =========================================================
   METALLIC SPHERE

   Базовый материал — silver / steel.
   Violet-blue-cyan используются только как отражения бренда.
   ========================================================= */

body.theme-v13 .ai24-sphere-core {
  width: 226px;
  height: 226px;

  border:
    1px solid rgba(116,127,151,.28);

  background:
    radial-gradient(
      circle at 31% 23%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 8%,
      rgba(242,245,250,.98) 17%,
      rgba(214,220,229,.98) 34%,
      rgba(173,183,198,.97) 54%,
      rgba(132,145,164,.96) 73%,
      rgba(91,105,128,.98) 100%
    );

  box-shadow:
    inset 29px 25px 45px
      rgba(255,255,255,.66),

    inset -34px -37px 55px
      rgba(54,65,88,.28),

    inset -7px 13px 27px
      rgba(91,141,216,.12),

    0 20px 43px
      rgba(69,82,107,.17),

    0 0 55px
      rgba(86,141,233,.065);

  animation:
    ai24MetalSphereFloat
    7s
    ease-in-out
    infinite;
}


/* metallic specular highlight */

body.theme-v13 .ai24-sphere-core::before {
  content: "";

  position: absolute;

  left: 24px;
  top: 17px;

  width: 126px;
  height: 76px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.48) 36%,
      rgba(210,230,255,.17) 57%,
      transparent 73%
    );

  transform:
    rotate(-18deg);

  mix-blend-mode:
    screen;

  pointer-events: none;
}


/* subtle brand reflection on lower metal */

body.theme-v13 .ai24-sphere-core::after {
  content: "";

  position: absolute;

  left: 20px;
  right: 23px;
  bottom: 22px;

  height: 64px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.22);

  border-top-color:
    rgba(255,255,255,.48);

  background:
    linear-gradient(
      100deg,
      rgba(107,99,238,.05),
      rgba(86,141,233,.12),
      rgba(67,184,216,.10)
    );

  transform:
    rotate(-9deg);

  pointer-events: none;
}


body.theme-v13 .ai24-sphere-core strong {
  position: relative;
  z-index: 3;

  color: #253146;

  font-size: 21px;
  font-weight: 760;

  text-shadow:
    0 1px 0 rgba(255,255,255,.55);
}


body.theme-v13 .ai24-sphere-core span {
  position: relative;
  z-index: 3;

  color: #68778d;

  font-size: 9.5px;
  font-weight: 670;
}


/* =========================================================
   CARDS — REMOVE NUMBER BADGE SPACE
   ========================================================= */

body.theme-v13 .ai24-sphere-card {
  width: 196px;
  min-height: 68px;

  padding:
    14px 17px;

  border:
    1px solid rgba(139,153,181,.17);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(248,250,253,.89)
    );

  box-shadow:
    0 8px 19px
      rgba(51,65,93,.05),

    inset 0 1px 0
      rgba(255,255,255,.99);

  -webkit-backdrop-filter:
    blur(11px) saturate(108%);

  backdrop-filter:
    blur(11px) saturate(108%);
}


body.theme-v13 .ai24-sphere-card__index {
  display: none !important;
}


body.theme-v13 .ai24-sphere-card strong {
  margin-bottom: 4px;

  color: #293445;

  font-size: 13px;
  font-weight: 700;
}


body.theme-v13 .ai24-sphere-card small {
  color: #8793a3;

  font-size: 9.7px;
}


/* =========================================================
   DOTS — EXACTLY LOCKED TO ORBITS

   transform = rotate(angle) + translateX(exact radius)
   Since each orbit is a circle centred on the same point,
   the signal stays on the line throughout the animation.
   ========================================================= */

body.theme-v13 .ai24-light-sphere__dot {
  display: block !important;

  position: absolute;

  left: 50%;
  top: 50%;

  right: auto;
  bottom: auto;

  width: 7px;
  height: 7px;

  margin:
    -3.5px 0 0 -3.5px;

  border-radius: 50%;

  z-index: 2;

  pointer-events: none;

  will-change:
    transform;

  box-shadow:
    0 0 0 3px
      rgba(255,255,255,.50),

    0 0 10px
      currentColor;
}


/* outer orbit — cyan */

body.theme-v13 .ai24-light-sphere__dot--1 {
  color:
    var(--ai24-v5-cyan);

  background:
    var(--ai24-v5-cyan);

  animation:
    ai24V5OuterOne
    13s
    linear
    infinite;
}


/* middle orbit — blue */

body.theme-v13 .ai24-light-sphere__dot--2 {
  color:
    var(--ai24-v5-blue);

  background:
    var(--ai24-v5-blue);

  animation:
    ai24V5Middle
    10.4s
    linear
    infinite;
}


/* inner orbit — violet */

body.theme-v13 .ai24-light-sphere__dot--3 {
  color:
    var(--ai24-v5-violet);

  background:
    var(--ai24-v5-violet);

  animation:
    ai24V5Inner
    8.2s
    linear
    infinite;
}


/* second signal on outer orbit */

body.theme-v13 .ai24-light-sphere__dot--4 {
  display: block !important;

  width: 5px;
  height: 5px;

  margin:
    -2.5px 0 0 -2.5px;

  color:
    var(--ai24-v5-blue);

  background:
    var(--ai24-v5-blue);

  animation:
    ai24V5OuterTwo
    13s
    linear
    infinite;
}


/* =========================================================
   EXACT ORBIT MOTION
   ========================================================= */

@keyframes ai24V5OuterOne {
  from {
    transform:
      rotate(18deg)
      translateX(var(--ai24-v5-radius-outer))
      rotate(-18deg);
  }

  to {
    transform:
      rotate(378deg)
      translateX(var(--ai24-v5-radius-outer))
      rotate(-378deg);
  }
}


@keyframes ai24V5OuterTwo {
  from {
    transform:
      rotate(198deg)
      translateX(var(--ai24-v5-radius-outer))
      rotate(-198deg);
  }

  to {
    transform:
      rotate(558deg)
      translateX(var(--ai24-v5-radius-outer))
      rotate(-558deg);
  }
}


@keyframes ai24V5Middle {
  from {
    transform:
      rotate(124deg)
      translateX(var(--ai24-v5-radius-middle))
      rotate(-124deg);
  }

  to {
    transform:
      rotate(484deg)
      translateX(var(--ai24-v5-radius-middle))
      rotate(-484deg);
  }
}


@keyframes ai24V5Inner {
  from {
    transform:
      rotate(248deg)
      translateX(var(--ai24-v5-radius-inner))
      rotate(-248deg);
  }

  to {
    transform:
      rotate(608deg)
      translateX(var(--ai24-v5-radius-inner))
      rotate(-608deg);
  }
}


/* =========================================================
   METAL SPHERE MOTION
   ========================================================= */

@keyframes ai24MetalSphereFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-3px)
      scale(1.006);
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  body.theme-v13 .ai24-sphere-core,
  body.theme-v13 .ai24-light-sphere__dot {
    animation: none !important;
  }

  body.theme-v13 .ai24-light-sphere__dot--1 {
    transform:
      rotate(18deg)
      translateX(var(--ai24-v5-radius-outer));
  }

  body.theme-v13 .ai24-light-sphere__dot--2 {
    transform:
      rotate(124deg)
      translateX(var(--ai24-v5-radius-middle));
  }

  body.theme-v13 .ai24-light-sphere__dot--3 {
    transform:
      rotate(248deg)
      translateX(var(--ai24-v5-radius-inner));
  }

  body.theme-v13 .ai24-light-sphere__dot--4 {
    transform:
      rotate(198deg)
      translateX(var(--ai24-v5-radius-outer));
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  body.theme-v13 .ai24-light-sphere__ring,
  body.theme-v13 .ai24-light-sphere__dot {
    display: none !important;
  }

  body.theme-v13 .ai24-sphere-core {
    width: 100%;
    height: auto;

    animation: none;

    background:
      linear-gradient(
        135deg,
        #f8fafc,
        #dfe5ed 48%,
        #aab5c4
      );

    box-shadow:
      0 8px 20px
      rgba(58,70,93,.07);
  }

  body.theme-v13 .ai24-sphere-card {
    width: 100%;

    padding:
      12px 14px;
  }
}

/* =========================================================
   AI24 classic sphere V6
   restores vivid sphere + classic branded orbits
   while preserving light hero layout
   ========================================================= */

:root {
  --ai24-v6-violet: #7564f7;
  --ai24-v6-violet-soft: rgba(117, 100, 247, .24);
  --ai24-v6-blue: #56a1ff;
  --ai24-v6-blue-soft: rgba(86, 161, 255, .20);
  --ai24-v6-cyan: #5ccfff;
  --ai24-v6-cyan-soft: rgba(92, 207, 255, .16);

  --ai24-v6-orbit-outer: 430px;
  --ai24-v6-orbit-middle: 334px;
  --ai24-v6-orbit-inner: 258px;

  --ai24-v6-radius-outer: 215px;
  --ai24-v6-radius-middle: 167px;
  --ai24-v6-radius-inner: 129px;
}

/* board stays light, but add subtle branded glow */
body.theme-v13 .ai24-light-sphere {
  isolation: isolate;
  min-height: 505px;
  border: 1px solid rgba(154, 164, 184, .16);
  background:
    radial-gradient(circle at 50% 48%, rgba(129, 120, 255, .06), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(92, 207, 255, .10), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(247,249,252,.97) 60%, rgba(242,246,251,.97));
  box-shadow:
    0 18px 42px rgba(65, 76, 97, .06),
    inset 0 1px 0 rgba(255,255,255,.98);
}

body.theme-v13 .ai24-light-sphere__grid {
  opacity: .44;
  background-image:
    linear-gradient(rgba(111, 127, 157, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 127, 157, .06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* classic circular orbits */
body.theme-v13 .ai24-light-sphere__ring {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  animation: none !important;
  box-shadow: none !important;
}

body.theme-v13 .ai24-light-sphere__ring--1 {
  width: var(--ai24-v6-orbit-outer);
  height: var(--ai24-v6-orbit-outer);
  border: 1px solid rgba(92, 207, 255, .22);
  box-shadow: 0 0 0 1px rgba(92, 207, 255, .03) inset;
}

body.theme-v13 .ai24-light-sphere__ring--2 {
  width: var(--ai24-v6-orbit-middle);
  height: var(--ai24-v6-orbit-middle);
  border: 1px solid rgba(117, 100, 247, .22);
  box-shadow: 0 0 0 1px rgba(117, 100, 247, .03) inset;
}

body.theme-v13 .ai24-light-sphere__ring--3 {
  display: block !important;
  width: var(--ai24-v6-orbit-inner);
  height: var(--ai24-v6-orbit-inner);
  border: 1px solid rgba(86, 161, 255, .20);
  box-shadow: 0 0 0 1px rgba(86, 161, 255, .03) inset;
}

/* restore vivid branded sphere */
body.theme-v13 .ai24-sphere-core {
  width: 228px;
  height: 228px;
  border: 1px solid rgba(113, 110, 244, .38);
  background:
    radial-gradient(circle at 36% 22%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.56) 13%, rgba(211,198,255,.18) 28%, transparent 40%),
    radial-gradient(circle at 50% 40%, rgba(138, 110, 255, .20) 0%, rgba(118, 95, 246, .18) 26%, rgba(86, 64, 215, .12) 48%, transparent 60%),
    linear-gradient(160deg, #c9bcff 0%, #9f8cff 24%, #7964f7 52%, #4e3be0 74%, #1c2354 100%);
  box-shadow:
    inset 22px 20px 40px rgba(255,255,255,.16),
    inset -28px -34px 44px rgba(12,16,40,.34),
    0 0 36px rgba(117, 100, 247, .26),
    0 0 72px rgba(86, 161, 255, .10),
    0 18px 38px rgba(53, 66, 95, .16);
  animation: ai24ClassicSphereFloat 8s ease-in-out infinite;
}

body.theme-v13 .ai24-sphere-core::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 16px;
  width: 124px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.92) 0%, rgba(255,255,255,.38) 42%, transparent 74%);
  transform: rotate(-18deg);
  mix-blend-mode: screen;
  pointer-events: none;
}

body.theme-v13 .ai24-sphere-core::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 24px;
  bottom: 22px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.32);
  background:
    linear-gradient(100deg, rgba(255,255,255,.03), rgba(126, 160, 255, .10), rgba(117, 100, 247, .14));
  transform: rotate(-10deg);
  pointer-events: none;
}

body.theme-v13 .ai24-sphere-core strong {
  position: relative;
  z-index: 3;
  color: #20315c;
  font-size: 21px;
  font-weight: 760;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

body.theme-v13 .ai24-sphere-core span {
  position: relative;
  z-index: 3;
  color: rgba(48, 76, 131, .68);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* keep clean light cards, no number badges */
body.theme-v13 .ai24-sphere-card {
  width: 208px;
  min-height: 68px;
  padding: 15px 18px;
  border: 1px solid rgba(145, 156, 178, .16);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,253,.88));
  box-shadow:
    0 9px 22px rgba(60, 71, 94, .05),
    inset 0 1px 0 rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(10px) saturate(106%);
  backdrop-filter: blur(10px) saturate(106%);
}

body.theme-v13 .ai24-sphere-card__index {
  display: none !important;
}

body.theme-v13 .ai24-sphere-card strong {
  margin-bottom: 4px;
  color: #2d384b;
  font-size: 13px;
  font-weight: 700;
}

body.theme-v13 .ai24-sphere-card small {
  color: #8a95a6;
  font-size: 9.7px;
}

/* orbit-locked dots */
body.theme-v13 .ai24-light-sphere__dot {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.36),
    0 0 14px currentColor;
}

body.theme-v13 .ai24-light-sphere__dot--1 {
  background: var(--ai24-v6-cyan);
  color: var(--ai24-v6-cyan);
  animation: ai24V6OuterDotOne 12.5s linear infinite;
}

body.theme-v13 .ai24-light-sphere__dot--2 {
  background: var(--ai24-v6-violet);
  color: var(--ai24-v6-violet);
  animation: ai24V6MiddleDot 10.2s linear infinite;
}

body.theme-v13 .ai24-light-sphere__dot--3 {
  background: var(--ai24-v6-blue);
  color: var(--ai24-v6-blue);
  animation: ai24V6InnerDot 8.4s linear infinite;
}

body.theme-v13 .ai24-light-sphere__dot--4 {
  display: block !important;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--ai24-v6-blue);
  color: var(--ai24-v6-blue);
  animation: ai24V6OuterDotTwo 12.5s linear infinite;
}

@keyframes ai24V6OuterDotOne {
  from {
    transform: rotate(202deg) translateX(var(--ai24-v6-radius-outer)) rotate(-202deg);
  }
  to {
    transform: rotate(562deg) translateX(var(--ai24-v6-radius-outer)) rotate(-562deg);
  }
}

@keyframes ai24V6OuterDotTwo {
  from {
    transform: rotate(24deg) translateX(var(--ai24-v6-radius-outer)) rotate(-24deg);
  }
  to {
    transform: rotate(384deg) translateX(var(--ai24-v6-radius-outer)) rotate(-384deg);
  }
}

@keyframes ai24V6MiddleDot {
  from {
    transform: rotate(304deg) translateX(var(--ai24-v6-radius-middle)) rotate(-304deg);
  }
  to {
    transform: rotate(664deg) translateX(var(--ai24-v6-radius-middle)) rotate(-664deg);
  }
}

@keyframes ai24V6InnerDot {
  from {
    transform: rotate(132deg) translateX(var(--ai24-v6-radius-inner)) rotate(-132deg);
  }
  to {
    transform: rotate(492deg) translateX(var(--ai24-v6-radius-inner)) rotate(-492deg);
  }
}

@keyframes ai24ClassicSphereFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-4px) scale(1.008);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-v13 .ai24-sphere-core,
  body.theme-v13 .ai24-light-sphere__dot {
    animation: none !important;
  }

  body.theme-v13 .ai24-light-sphere__dot--1 {
    transform: rotate(202deg) translateX(var(--ai24-v6-radius-outer));
  }

  body.theme-v13 .ai24-light-sphere__dot--2 {
    transform: rotate(304deg) translateX(var(--ai24-v6-radius-middle));
  }

  body.theme-v13 .ai24-light-sphere__dot--3 {
    transform: rotate(132deg) translateX(var(--ai24-v6-radius-inner));
  }

  body.theme-v13 .ai24-light-sphere__dot--4 {
    transform: rotate(24deg) translateX(var(--ai24-v6-radius-outer));
  }
}

@media (max-width: 680px) {
  body.theme-v13 .ai24-light-sphere__ring,
  body.theme-v13 .ai24-light-sphere__dot {
    display: none !important;
  }
}