/* 9.1-H — wide-screen service wings. Space, not a device name or zoom guess.
   Real Grid columns prevent overlap; small screens keep the original page.
   Supplemental links reuse the full services below. No motion/timers/network. */
.homeWing { display: none; }
[id^="home-"], #business, #getting-started { scroll-margin-block-start: 24px; }
/* Decorative backgrounds extend beyond these bands. Unlike hidden, clip
   cannot become a second scroll container during native anchor/focus jumps. */
@supports (overflow: clip) {
  .band[data-vizo-section] { overflow: clip; }
}
/* A directly requested service must not arrive midway through reveal motion.
   Keep its whole card and icon in view; no script intercepts native links. */
.band[data-vizo-section] [id^="home-"]:target {
  opacity: 1;
  transform: none;
  transition: none;
}
.band .tile:target { outline: 2px solid #7c3aed; outline-offset: 4px; }
.band.deep .tile:target { outline-color: #a5f3fc; }

@media (min-width: 2100px) {
  .hero.hx, .band[data-vizo-section="personal"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(1440px, 66vw, 2400px) minmax(0, 1fr);
    align-items: center;
  }
  .hero.hx > .wrap, .band[data-vizo-section="personal"] > .wrap {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  /* Six cards still need readable columns after room is reserved for wings. */
  .band.deep[data-vizo-section="personal"] .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .homeWing {
    display: block;
    position: relative;
    z-index: 2;
    grid-row: 1;
    width: min(100% - 56px, 340px);
    min-width: 0;
    justify-self: center;
    padding-block: 28px;
    color: #eef2ff;
    --wingAccent: #67e8f9;
  }
  .homeWingStart { grid-column: 1; }
  .homeWingEnd { grid-column: 3; --wingAccent: #e9b4ff; }
  .wingPanel {
    position: relative;
    padding: 24px 18px 14px;
    border: 1px solid rgba(199,210,254,.28);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(39,66,108,.86), rgba(16,22,51,.9));
    box-shadow: 0 24px 56px -30px #000, inset 0 1px rgba(255,255,255,.15);
  }
  .homeWingEnd .wingPanel { background: linear-gradient(145deg, rgba(74,41,106,.86), rgba(20,22,53,.92)); }
  /* The fine connector ends in its own gutter, never behind a button. */
  .wingPanel::after {
    content: "";
    position: absolute;
    inset-inline-start: 100%;
    top: 50%;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--wingAccent), transparent);
    opacity: .65;
    pointer-events: none;
  }
  .homeWingEnd .wingPanel::after { inset-inline-start: auto; inset-inline-end: 100%; }
  .homeWing h2 {
    margin: 12px 0 18px;
    font-size: clamp(18px, .85vw, 23px);
    line-height: 1.45;
    color: #fff;
    text-align: start;
    background: none;
    -webkit-text-fill-color: currentColor;
    overflow-wrap: anywhere;
  }
  .homeWing h2::after { content: none; }
  .homeWing ul { list-style: none; margin: 0; padding: 0; }
  .homeWing li + li { border-block-start: 1px solid rgba(199,210,254,.14); }
  .homeWing a {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) 14px;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 10px 4px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    color: #e0e7ff;
    overflow-wrap: anywhere;
  }
  .homeWing a:hover { background: rgba(199,210,254,.1); color: #fff; }
  .homeWing a:focus-visible { outline: 3px solid var(--wingAccent); outline-offset: 3px; }
  .wingLinkIcon { text-align: center; color: var(--wingAccent); }
  .wingArrow { color: var(--wingAccent); font-size: 17px; }
  [dir="rtl"] .wingArrow { transform: scaleX(-1); }

  .wingSketch { height: 144px; position: relative; pointer-events: none; }
  .wingOrbit {
    position: absolute;
    inset: 12px 8px;
    border: 1px solid rgba(165,180,252,.35);
    border-radius: 50%;
    transform: rotate(-22deg) scaleY(.7);
    box-shadow: 0 0 0 13px rgba(165,180,252,.035), 0 0 0 26px rgba(165,180,252,.025);
  }
  .wingCore {
    position: absolute;
    inset-inline-start: 49%;
    top: 22px;
    display: grid;
    place-items: center;
    width: 76px;
    height: 80px;
    border: 1px solid rgba(224,231,255,.65);
    border-radius: 23px;
    font-size: 33px;
    color: #fff;
    transform: rotate(8deg);
    background: linear-gradient(145deg,#6462ef,#7136ce);
    box-shadow: 6px 8px 0 rgba(88,61,176,.5), 0 24px 30px -16px #000;
  }
  .wingGlass {
    position: absolute;
    top: 49px;
    inset-inline-start: 9%;
    width: 98px;
    height: 74px;
    padding: 15px 12px;
    border: 1px solid rgba(165,243,252,.6);
    border-radius: 13px;
    background: linear-gradient(120deg,rgba(207,250,254,.22),rgba(99,102,241,.15));
    transform: rotate(-9deg);
  }
  .wingGlass i { display: block; height: 5px; border-radius: 4px; background: #a5f3fc; margin-block-end: 8px; width: 75%; opacity: .85; }
  .wingGlass i:nth-child(2) { width: 100%; background: #c4b5fd; }
  .wingGlass i:last-child { width: 50%; }
  .wingNode { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--wingAccent); box-shadow: 0 0 13px var(--wingAccent); }
  .wingNodeA { top: 14px; inset-inline-start: 27%; }
  .wingNodeB { bottom: 14px; inset-inline-end: 8%; }
  .wingSketch-devices .wingGlass { height: 89px; top: 34px; border-width: 3px; }
  .wingSketch-shops .wingCore { background: linear-gradient(145deg,#0f9fa7,#5657d6); }
  .wingSketch-business .wingGlass { border-radius: 22px 22px 22px 3px; }
}

@media (min-width: 3600px) {
  .band.deep[data-vizo-section="personal"] .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (forced-colors: active) {
  .wingPanel, .homeWingEnd .wingPanel { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .homeWing h2, .homeWing a { color: CanvasText; }
  .wingSketch { display: none; }
  .homeWing a:focus-visible { outline-color: Highlight; }
}
@media print { .homeWing { display: none; } }