@layer components {
  .hero-actions-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-top: 0;
    max-width: none;
  }
  
  .hero-actions.hero-actions-stacked-mobile {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.82fr) minmax(0, 1.36fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(54px, auto) minmax(74px, auto);
    grid-template-areas:
      "today races driver online online"
      "stats stats stats online online";
    gap: 8px;
    margin-top: 0;
    align-items: stretch;
    justify-content: flex-start;
  }
  
  .hero-hourly-promo,
  .hero-hourly-card {
    width: 100%;
    box-sizing: border-box;
  }
  
  .hero-actions.hero-actions-stacked-mobile .btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 54px;
    padding: 9px 12px;
    align-self: stretch;
    flex: 0 0 auto;
  }
  
  .hero-primary-actions {
    display: contents;
  }
  
  .btn-today-stats {
    grid-area: today;
  }
  
  .btn-last-races {
    grid-area: races;
  }
  
  .btn-driver-day {
    grid-area: driver;
  }
  
  .support-inline-widget {
    grid-area: support;
    min-width: 0;
  }
  
  .support-hourly-widget {
    grid-area: auto;
    grid-column: 2 / 3;
    grid-row: 2;
    align-self: stretch;
  }
  
  .support-inline-widget.support-center-widget {
    grid-area: auto;
    min-height: 0;
  }
  
  .support-inline-widget.support-center-widget .support-widget-card {
    grid-template-columns: minmax(0, 1fr) minmax(156px, auto) 82px;
    grid-template-rows: minmax(66px, auto);
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 14px;
  }
  
  .support-inline-widget.support-center-widget .support-widget-copy-block {
    gap: 6px;
  }
  
  .support-inline-widget.support-center-widget .support-widget-title {
    font-size: 0.95rem;
  }
  
  .support-inline-widget.support-center-widget .support-widget-copy {
    font-size: 0.78rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }
  
  .support-inline-widget.support-center-widget .support-widget-btn {
    min-height: 44px;
    font-size: 0.9rem;
    justify-self: end;
    min-width: 156px;
    animation-duration: 2.4s;
    box-shadow:
      0 16px 30px rgba(255, 91, 46, 0.34),
      0 0 0 4px rgba(255, 163, 86, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
  
  .support-inline-widget.support-center-widget .support-widget-qr-shell {
    width: 70px;
    align-self: center;
    padding: 2px;
    border-radius: 8px;
  }
  
  .support-inline-widget.support-center-widget .support-widget-qr {
    border-radius: 5px;
  }
  
  .support-inline-widget .support-widget-card {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 8px;
    align-items: stretch;
    padding: 12px;
    border-radius: 18px;
    border-color: rgba(255, 170, 82, 0.38);
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 209, 102, 0.2), transparent 36%),
      linear-gradient(145deg, rgba(43, 26, 16, 0.96), rgba(18, 19, 23, 0.96));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 18px 38px rgba(0, 0, 0, 0.22);
  }
  
  .support-inline-widget .support-widget-copy-block {
    align-content: start;
    gap: 5px;
    min-width: 0;
  }
  
  .support-inline-widget .support-widget-title {
    font-size: 0.76rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  
  .support-inline-widget .support-widget-qr-shell {
    grid-column: auto;
    grid-row: auto;
    align-self: end;
    justify-self: center;
    width: 84px;
    padding: 3px;
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.12);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 246, 229, 0.86));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 12px 24px rgba(0, 0, 0, 0.22);
  }
  
  .support-inline-widget .support-widget-qr {
    width: 100%;
    padding: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
  }
  
  .support-inline-widget .support-widget-copy {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255, 225, 199, 0.88);
    font-size: 0.64rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  
  .support-inline-widget .support-widget-btn {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    line-height: 1.12;
    box-shadow:
      0 12px 22px rgba(255, 91, 46, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .support-inline-widget .support-widget-note {
    display: none;
  }
  
  .hero-online-card {
    grid-area: online;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 136px;
    padding: 10px 14px 9px;
    border: 1px solid rgba(99, 169, 255, 0.18);
    border-radius: 18px;
    background:
      radial-gradient(circle at top right, rgba(99, 169, 255, 0.16), transparent 44%),
      linear-gradient(180deg, rgba(23, 31, 44, 0.94), rgba(16, 22, 31, 0.9));
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  
  .hero-online-card:hover,
  .hero-online-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 179, 71, 0.4);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
  }
  
  .hero-online-card:focus-visible {
    outline: 2px solid rgba(255, 179, 71, 0.68);
    outline-offset: 2px;
  }
  
  .hero-online-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
  
  .hero-online-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(210, 226, 247, 0.68);
  }
  
  .hero-online-range {
    font-size: 12px;
    white-space: nowrap;
    color: rgba(230, 239, 255, 0.78);
  }
  
  .hero-online-chart-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 8px;
    align-items: end;
    flex: 1;
    min-height: 0;
  }
  
  .hero-online-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    min-height: 100px;
    padding-top: 8px;
  }
  
  .hero-online-bar-group {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    height: 100%;
  }
  
  .hero-online-bar-stage {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    min-height: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .hero-online-bar {
    width: 100%;
    max-width: 24px;
    min-height: 0;
    align-self: end;
    border-radius: 999px 999px 5px 5px;
    background: linear-gradient(180deg, #ffd166 0%, #ff9f45 46%, #ff6d35 100%);
    box-shadow: 0 8px 16px rgba(255, 125, 57, 0.22);
  }
  
  .hero-online-date {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    color: rgba(210, 226, 247, 0.56);
  }
  
  .hero-online-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 100px;
    padding: 8px 0 19px;
    font-size: 10px;
    line-height: 1;
    color: rgba(210, 226, 247, 0.5);
  }
  
  .hero-online-empty {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    font-size: 13px;
    color: var(--muted);
  }
  
  .hero-funnel-card {
    display: grid;
    gap: 8px;
    margin-top: 6px;
  }
  
  .hero-copy h1 {
    font-size: clamp(26px, 3.4vw, 42px);
  }
  
  .hero-funnel-title {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
  }
  
  .hero-funnel-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.45;
  }
  
  .hero-funnel-link {
    font-weight: 900;
    text-decoration: none;
    transition: color 0.18s ease, text-shadow 0.18s ease;
  }
  
  .hero-funnel-link:hover,
  .hero-funnel-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  .hero-funnel-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
  }
  
  .hero-funnel-link-telegram {
    color: #27a7e7;
    text-shadow: 0 0 18px rgba(39, 167, 231, 0.24);
  }
  
  .hero-funnel-link-telegram:hover,
  .hero-funnel-link-telegram:focus-visible {
    color: #6ed0ff;
    text-shadow: 0 0 22px rgba(39, 167, 231, 0.42);
  }
  
  .hero-funnel-link-discord {
    color: #5865f2;
    text-shadow: 0 0 18px rgba(88, 101, 242, 0.24);
  }
  
  .hero-funnel-link-discord:hover,
  .hero-funnel-link-discord:focus-visible {
    color: #8d96ff;
    text-shadow: 0 0 22px rgba(88, 101, 242, 0.42);
  }
  
  .hero-funnel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .hero-cta-primary,
  .hero-cta-secondary {
    min-height: 48px;
    padding-inline: 18px;
  }
}