/* === WIDGET: hero | scope .vr-hero ======================================== */
@layer widgets {
  .vr-hero { overflow: hidden; color: white; background: radial-gradient(ellipse at 110% 135%, #ff7656 0, #f33398 20%, transparent 45%), linear-gradient(110deg, #3420d0, #5724f1 70%, #8528e4); }
  .vr-hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; min-height: 405px; gap: 40px; padding-block: 48px; }
  .vr-hero__eyebrow { color: #d8d0ff; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 750; margin-bottom: 16px; }
  .vr-hero h1 { line-height: 1.06; letter-spacing: -.045em; }
  .vr-hero__lead { margin-top: 20px; color: #f2eeff; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; }
  .vr-hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 26px; flex-wrap: wrap; }
  .vr-hero__actions .vr-button { font-size: 1rem; min-height: 52px; padding-inline: 23px; }
  .vr-hero__link { font-size: var(--vr-text-sm); font-weight: 650; }
  .vr-hero__caption { margin-top: 22px; color: #d8d0ff; font-size: var(--vr-text-xs); }
  .vr-hero__visual { position: relative; height: 300px; width: 100%; max-width: 430px; justify-self: end; }
  .vr-hero__radar { position: absolute; width: 284px; height: 284px; border: 1.5px solid #ddd6ff; border-radius: 50%; top: 8px; left: 5px; background: conic-gradient(from 42deg, #ffffff18, transparent 110deg); }
  .vr-hero__ring { position: absolute; border: 1.5px solid #d3c8ff; border-radius: 50%; inset: 16.66%; }
  .vr-hero__ring--3 { inset: 33.33%; }
  .vr-hero__axis { position: absolute; background: #c9bdff; opacity: .8; }
  .vr-hero__axis--x { left: 0; right: 0; height: 1px; top: 50%; }
  .vr-hero__axis--y { top: 0; bottom: 0; width: 1px; left: 50%; }
  .vr-hero__beam { position: absolute; top: 50%; left: 50%; width: 50%; height: 4px; background: white; transform-origin: left center; transform: rotate(-45deg); }
  .vr-hero__dot { position: absolute; width: 24px; height: 24px; border: 5px solid white; background: #ff2789; border-radius: 50%; top: calc(50% - 12px); left: calc(50% - 12px); box-shadow: 0 0 0 10px #ffffff17; }
  .vr-hero__chip { position: absolute; right: 0; color: var(--vr-brand); background: white; border-radius: 8px; min-width: 142px; padding: 12px 18px; font-size: 1.1rem; font-weight: 750; box-shadow: 0 10px 25px #18095426; display: flex; align-items: center; gap: 11px; }
  .vr-hero__chip .vr-icon { color: var(--vr-accent); width: 20px; }
  .vr-hero__chip--price { top: 37px; right: 26px; }
  .vr-hero__chip--renewal { top: 121px; }
  .vr-hero__chip--features { top: 206px; right: 16px; }
  .vr-hero__spark { position: absolute; width: 7px; height: 25px; border-radius: 6px; background: #ff4e95; left: 28px; top: 0; transform: rotate(-24deg); }
  .vr-hero__spark--2 { left: 9px; top: 15px; background: #ffa77e; transform: rotate(-48deg); }
  .vr-hero__spark--3 { left: -2px; top: 38px; transform: rotate(-70deg); }
  @media (max-width: 1000px) { .vr-hero__inner { gap: 20px; } .vr-hero__visual { transform: scale(.85); transform-origin: right center; } }
  @media (max-width: 800px) {
    .vr-hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: 34px 28px; gap: 24px; }
    .vr-hero__copy { min-width: 0; }
    .vr-hero h1 { font-size: clamp(2.125rem, 9.2vw, 2.625rem); }
    .vr-hero__visual { justify-self: center; width: 340px; max-width: 100%; height: 250px; transform: none; }
    .vr-hero__radar { width: 228px; height: 228px; }
    .vr-hero__chip { min-width: 122px; padding: 10px 13px; font-size: .95rem; }
    .vr-hero__chip--price { top: 29px; right: 9px; }
    .vr-hero__chip--renewal { top: 99px; }
    .vr-hero__chip--features { top: 170px; right: 4px; }
    .vr-hero__caption { display: none; }
    .vr-hero__break { display: none; }
  }
  @media (max-width: 380px) {
    .vr-hero__radar { width: 204px; height: 204px; }
    .vr-hero__visual { height: 222px; }
    .vr-hero__chip { min-width: 111px; padding: 9px 10px; font-size: .85rem; gap: 7px; }
    .vr-hero__chip--price { top: 24px; }
    .vr-hero__chip--renewal { top: 88px; }
    .vr-hero__chip--features { top: 153px; }
  }
}
/* === END WIDGET: hero ==================================================== */