/* ==========================================================================
   71-bands.css. THE THREE WAYS, RAISED.

   Loaded UNLAYERED and after everything, so it wins over the imported sheets
   without a specificity war.

   The brief was not "replace this section". 6 alternative constructions were
   built and every one of them was WORSE than what already stood here, because
   what stands here has the thing none of them had: 3 real premium renders in
   one continuous dark room. The bar was the existing section, and the job is to
   clear it. Origin: Mia 2026-09-09, "оно должно быть на уровне таком же, либо
   ещё лучше".

   What changed, and why each change is an improvement rather than a variation:

   1 · THE COPY GOT SHORTER, SO THE OBJECT GETS THE ROOM. The tile used to carry
       a name, a 3-item list and a sentence that opened on hover. It now carries
       a name and one line. That is roughly 60 percent less type, and the render
       takes the space back instead of leaving it empty.
   2 · THE NAME IS THE LOUDEST THING IN THE TILE. It was violet at 38px, which
       read as a label on an image. It is now white and larger, and violet is
       kept for the hover, where it means "this is a link" instead of meaning
       nothing.
   3 · THE LINE IS A SENTENCE, NOT A TAG. `band__list` was built for
       "RESEARCH · AI SKILLS · PLAYBOOKS", so it is upper case at 15px with wide
       tracking. "Know what changes next." set that way reads as shouting. It is
       set as the sentence it is, one size below the name.
   4 · PLATFORM KEEPS ITS TAG, because "Portal · API · MCP" IS a list and the
       original treatment is right for it. One rule, applied by content type,
       not by position.
   ========================================================================== */

/* 1 · the render, larger and lit */
#services .band__art{
  background-size:contain;
  padding:clamp(14px,1.3vw,22px);
  padding-right:clamp(48px,4vw,68px);
  transform:scale(1.14);
  transform-origin:62% 58%;
  transition:transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease;
  filter:saturate(1.06);
}
#services .band__link:hover .band__art,
#services .band__link:focus-visible .band__art{ transform:scale(1.2); filter:saturate(1.14) brightness(1.06); }

/* a light source behind the object, so it sits in the tile instead of on it */
#services .band__link::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 46% at 62% 56%, rgba(124,58,237,.30), transparent 72%);
  opacity:.75; transition:opacity .6s ease;
}
#services .band__link:hover::before{ opacity:1; }

/* 2 · the name leads */
#services .band__t{
  color:#fff;
  font-size:clamp(27px,2.3vw,46px);
  line-height:1;
  letter-spacing:-.032em;
  font-weight:600;
  transition:color .4s ease;
}
#services .band__link:hover .band__t{ color:var(--v-300); }

/* 3 · the line is a sentence */
#services .band__list{
  margin-top:clamp(12px,1.1vw,20px);
  font-size:clamp(14px,1.06vw,19px);
  font-weight:400;
  letter-spacing:-.012em;
  text-transform:none;
  line-height:1.34;
  color:rgba(255,255,255,.62);
  max-width:22ch;
}

/* 4 · except where the line really is a list */
#services .band:last-child .band__list{
  font-size:clamp(12px,.86vw,15px);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--txt-dim);
  max-width:none;
}
#services .band:last-child .band__list b{ width:16px; }