/* Citrus Connections — official logo-derived circuit tree.
 * The same artwork is used on desktop, iPad, and mobile. Only its size,
 * effects, and spacing change so compact devices retain a stable layout. */
.hero-visual--official-tree {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: clamp(500px, 43vw, 680px);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-visual--official-tree::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -5%;
  background:
    radial-gradient(circle at 50% 48%, rgba(112,145,230,.24), transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(173,187,218,.12), transparent 67%);
  pointer-events: none;
}
.hero-visual--official-tree::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237,232,245,.065), transparent 69%);
  pointer-events: none;
}
.hero-visual--official-tree .cc-tree--official {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 640px);
  height: auto;
  max-height: 650px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  opacity: .99;
  filter:
    drop-shadow(0 24px 54px rgba(7,15,43,.42))
    drop-shadow(0 0 20px rgba(112,145,230,.24));
  transform-origin: 50% 52%;
}
.hero-visual--official-tree ~ .hero-core { display: none; }

@media (max-width: 1180px), (hover: none), (pointer: coarse) {
  .cc-hero-tree-visual.hero-visual--official-tree {
    display: grid !important;
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: auto;
    margin: clamp(1.35rem, 5vw, 2.25rem) auto 0;
    padding: .25rem 0 .75rem;
    overflow: visible;
  }
  .hero-visual--official-tree::before {
    inset: 2% 8%;
    opacity: .72;
    background:
      radial-gradient(circle at 50% 48%, rgba(112,145,230,.18), transparent 54%),
      radial-gradient(circle at 50% 50%, rgba(173,187,218,.08), transparent 70%);
  }
  .hero-visual--official-tree::after {
    inset: 10% 20%;
    opacity: .55;
  }
  .hero-visual--official-tree .cc-tree--official {
    width: min(78vw, 390px);
    max-width: 100%;
    max-height: 390px;
    filter: drop-shadow(0 14px 28px rgba(7,15,43,.34));
    transform: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 620px) {
  .cc-hero-tree-visual.hero-visual--official-tree {
    margin-top: 1rem;
    padding-bottom: .25rem;
  }
  .hero-visual--official-tree .cc-tree--official {
    width: min(82vw, 310px);
    max-height: 310px;
  }
}

@media (max-width: 390px) {
  .hero-visual--official-tree .cc-tree--official {
    width: min(84vw, 270px);
    max-height: 270px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual--official-tree .cc-tree--official {
    transform: none !important;
    will-change: auto !important;
  }
}