/*
 * AI24Solutions homepage responsive V10
 *
 * Scope:
 * - desktop preserved
 * - tablet normalized
 * - mobile hero rebuilt safely
 */


/* =========================================================
   TABLET
   768–1024
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  body.theme-v13 .planet-hero {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  body.theme-v13 .planet-hero h1 {
    max-width: 680px !important;

    font-size:
      clamp(42px, 6vw, 58px) !important;

    line-height:
      1.04 !important;

    letter-spacing:
      -.045em !important;
  }

  body.theme-v13 .planet-hero .lead,
  body.theme-v13 .planet-hero p {
    max-width: 680px;

    font-size:
      17px !important;

    line-height:
      1.55 !important;
  }

  /*
   * Let the graphic occupy its own row on tablet instead
   * of being squeezed beside the large headline.
   */

  body.theme-v13
  .planet-hero
  .hero-grid,

  body.theme-v13
  .planet-hero
  .hero-layout,

  body.theme-v13
  .planet-hero
  .planet-hero__grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      44px !important;
  }

  body.theme-v13 .ai24-light-sphere {
    width:
      min(680px, 100%) !important;

    min-height:
      500px !important;

    margin:
      0 auto !important;
  }
}


/* =========================================================
   MOBILE
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  html,
  body {
    max-width:
      100%;

    overflow-x:
      hidden;
  }


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

  body.theme-v13 .planet-hero {
    padding:
      32px 0 38px !important;

    overflow:
      visible !important;
  }

  body.theme-v13 .planet-hero .container {
    width:
      100% !important;

    max-width:
      none !important;

    padding-left:
      20px !important;

    padding-right:
      20px !important;
  }

  body.theme-v13
  .planet-hero
  .hero-grid,

  body.theme-v13
  .planet-hero
  .hero-layout,

  body.theme-v13
  .planet-hero
  .planet-hero__grid {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      34px !important;
  }


  /* -------------------------------------------------------
     EYEBROW
     ------------------------------------------------------- */

  body.theme-v13 .planet-hero .eyebrow {
    margin-bottom:
      18px !important;

    font-size:
      10px !important;

    line-height:
      1.35 !important;

    letter-spacing:
      .17em !important;
  }


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

  body.theme-v13 .planet-hero h1 {
    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 0 22px !important;

    font-size:
      clamp(38px, 10.5vw, 52px) !important;

    line-height:
      1.02 !important;

    letter-spacing:
      -.052em !important;

    overflow-wrap:
      normal !important;

    word-break:
      normal !important;
  }


  /* -------------------------------------------------------
     LEAD
     ------------------------------------------------------- */

  body.theme-v13 .planet-hero .lead,
  body.theme-v13 .planet-hero p {
    width:
      100% !important;

    max-width:
      none !important;

    margin-bottom:
      28px !important;

    font-size:
      16px !important;

    line-height:
      1.55 !important;
  }


  /* -------------------------------------------------------
     CTA AREA
     ------------------------------------------------------- */

  body.theme-v13
  .planet-hero
  .hero-actions,

  body.theme-v13
  .planet-hero
  .actions,

  body.theme-v13
  .planet-hero
  .cta-actions {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      12px !important;

    width:
      100% !important;
  }

  body.theme-v13 .planet-hero .btn {
    width:
      100% !important;

    min-height:
      54px !important;

    margin:
      0 !important;

    padding:
      14px 18px !important;

    justify-content:
      center !important;

    text-align:
      center !important;

    font-size:
      16px !important;
  }


  /* -------------------------------------------------------
     CHIPS / BENEFITS
     ------------------------------------------------------- */

  body.theme-v13
  .planet-hero
  .hero-points,

  body.theme-v13
  .planet-hero
  .hero-meta,

  body.theme-v13
  .planet-hero
  .hero-features {
    display:
      flex !important;

    flex-wrap:
      wrap !important;

    gap:
      12px 20px !important;

    width:
      100% !important;
  }


  /* =======================================================
     SPHERE CONTAINER
     ======================================================= */

  body.theme-v13 .ai24-light-sphere {
    position:
      relative !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-height:
      0 !important;

    height:
      auto !important;

    margin:
      0 !important;

    padding:
      26px 14px 16px !important;

    gap:
      12px !important;

    overflow:
      hidden !important;

    border-radius:
      24px !important;
  }


  /* -------------------------------------------------------
     Remove all desktop orbit systems on phones.

     Mobile receives the metallic sphere as a clear static
     product visual instead of a compressed 3D scene.
     ------------------------------------------------------- */

  body.theme-v13
  .ai24-light-sphere
  .ai24-orbit-system,

  body.theme-v13
  .ai24-light-sphere
  .ai24-orbit-plane,

  body.theme-v13
  .ai24-light-sphere
  .ai24-orbit-track,

  body.theme-v13
  .ai24-light-sphere
  .ai24-orbit-line,

  body.theme-v13
  .ai24-light-sphere
  .ai24-orbit-signal,

  body.theme-v13
  .ai24-light-sphere
  .ai24-light-sphere__ring,

  body.theme-v13
  .ai24-light-sphere
  .ai24-light-sphere__dot,

  body.theme-v13
  .ai24-light-sphere
  .ai24-sphere-label-overlay {
    display:
      none !important;
  }


  /* -------------------------------------------------------
     Neutral decorative halo for mobile
     ------------------------------------------------------- */

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

    position:
      absolute;

    left:
      50%;

    top:
      36px;

    width:
      min(270px, 72vw);

    height:
      min(270px, 72vw);

    transform:
      translateX(-50%);

    border:
      1px solid rgba(82,142,223,.16);

    border-radius:
      50%;

    box-shadow:
      0 0 0 23px
        rgba(112,100,238,.035),

      0 0 0 48px
        rgba(72,189,223,.026);

    pointer-events:
      none;

    z-index:
      0;
  }


  /* =======================================================
     METALLIC SPHERE — RESET DESKTOP ABSOLUTE GEOMETRY
     ======================================================= */

  body.theme-v13 .ai24-sphere-core {
    position:
      relative !important;

    inset:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    order:
      1;

    align-self:
      center !important;

    flex:
      0 0 auto !important;

    width:
      min(238px, 67vw) !important;

    height:
      min(238px, 67vw) !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    margin:
      22px auto 28px !important;

    padding:
      24px !important;

    transform:
      none !important;

    animation:
      none !important;

    border-radius:
      50% !important;

    overflow:
      hidden !important;

    z-index:
      1 !important;
  }


  /*
   * Restore the semantic copy inside the sphere.
   * Desktop V8 hides it because desktop uses overlay copy.
   */

  body.theme-v13
  .ai24-sphere-core
  > strong,

  body.theme-v13
  .ai24-sphere-core
  > span {
    visibility:
      visible !important;

    opacity:
      1 !important;
  }

  body.theme-v13
  .ai24-sphere-core
  > strong {
    display:
      block !important;

    position:
      relative !important;

    z-index:
      4 !important;

    margin:
      0 !important;

    color:
      #172235 !important;

    font-size:
      22px !important;

    font-weight:
      800 !important;

    line-height:
      1.08 !important;

    text-align:
      center !important;
  }

  body.theme-v13
  .ai24-sphere-core
  > span {
    display:
      inline-block !important;

    position:
      relative !important;

    z-index:
      4 !important;

    margin-top:
      9px !important;

    padding:
      5px 8px !important;

    color:
      #35455e !important;

    background:
      rgba(255,255,255,.65) !important;

    border-radius:
      999px !important;

    font-size:
      9.5px !important;

    font-weight:
      700 !important;

    line-height:
      1.2 !important;

    text-align:
      center !important;
  }


  /* =======================================================
     CARDS — RESET ABSOLUTE DESKTOP POSITIONS
     ======================================================= */

  body.theme-v13 .ai24-sphere-card {
    position:
      relative !important;

    inset:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    padding:
      17px 18px 16px !important;

    border-radius:
      18px !important;

    background:
      rgba(255,255,255,.96) !important;

    z-index:
      2 !important;
  }

  body.theme-v13
  .ai24-sphere-card--client {
    order:
      2;
  }

  body.theme-v13
  .ai24-sphere-card--crm {
    order:
      3;
  }

  body.theme-v13
  .ai24-sphere-card--knowledge {
    order:
      4;
  }

  body.theme-v13
  .ai24-sphere-card--control {
    order:
      5;
  }

  body.theme-v13
  .ai24-sphere-card
  strong {
    margin:
      0 0 5px !important;

    font-size:
      14px !important;

    line-height:
      1.3 !important;
  }

  body.theme-v13
  .ai24-sphere-card
  small {
    font-size:
      11px !important;

    line-height:
      1.35 !important;
  }


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

  body.theme-v13 .ai24-light-sphere__caption {
    position:
      relative !important;

    inset:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    order:
      6;

    align-self:
      center !important;

    width:
      auto !important;

    max-width:
      100% !important;

    margin:
      4px auto 0 !important;

    transform:
      none !important;

    white-space:
      normal !important;

    text-align:
      center !important;

    z-index:
      2 !important;
  }
}


/* =========================================================
   SMALL PHONES
   <= 430
   ========================================================= */

@media (max-width: 430px) {

  body.theme-v13 .planet-hero .container {
    padding-left:
      18px !important;

    padding-right:
      18px !important;
  }

  body.theme-v13 .planet-hero h1 {
    font-size:
      clamp(34px, 10.2vw, 43px) !important;

    line-height:
      1.03 !important;
  }

  body.theme-v13 .planet-hero .lead,
  body.theme-v13 .planet-hero p {
    font-size:
      15px !important;

    line-height:
      1.52 !important;
  }

  body.theme-v13 .ai24-light-sphere {
    padding:
      22px 12px 14px !important;
  }

  body.theme-v13 .ai24-light-sphere::before {
    top:
      31px;

    width:
      min(232px, 70vw);

    height:
      min(232px, 70vw);

    box-shadow:
      0 0 0 18px
        rgba(112,100,238,.032),

      0 0 0 38px
        rgba(72,189,223,.024);
  }

  body.theme-v13 .ai24-sphere-core {
    width:
      min(210px, 65vw) !important;

    height:
      min(210px, 65vw) !important;

    margin:
      16px auto 24px !important;
  }

  body.theme-v13 .ai24-sphere-card {
    padding:
      15px 16px 14px !important;
  }
}