:root {
        color-scheme: dark;
        --black: #050505;
        --panel: #151515;
        --card: #0b0b0c;
        --line: rgba(255, 255, 255, 0.1);
        --muted: #a4a4aa;
        --white: #f6f6f7;
        --violet: #7a0cff;
        --blue: #154cff;
        --cyan: #00d4ff;
      }

      * { box-sizing: border-box; }

      html { scroll-behavior: smooth; }

      body {
        margin: 0;
        min-width: 320px;
        background: #101011;
        color: var(--white);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        -webkit-font-smoothing: antialiased;
      }

      .hero {
        position: relative;
        min-height: clamp(310px, 56vh, 650px);
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 105%, rgba(52, 50, 255, 0.13), transparent 34%),
          linear-gradient(180deg, #020202 0%, #070707 100%);
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
      }

      .topline {
        width: min(1120px, calc(100% - 40px));
        margin: 0 auto;
        padding-top: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: rgba(255, 255, 255, 0.52);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .17em;
        text-transform: uppercase;
      }

      .status { display: flex; align-items: center; gap: 9px; }
      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 12px var(--cyan);
      }

      .top-logo-link {
        position: relative;
        width: 58px;
        height: 58px;
        overflow: hidden;
        border: 2px solid rgba(255,255,255,.68);
        border-radius: 50%;
        background: #000;
        box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 5px rgba(255,255,255,.05);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
      }

      .top-logo-link img {
        position: absolute;
        width: 98px;
        height: 74px;
        max-width: none;
        left: -20px;
        top: -8px;
        object-fit: cover;
      }

      .top-logo-link:hover,
      .top-logo-link:focus-visible {
        transform: translateY(-3px) rotate(-3deg) scale(1.04);
        border-color: #75e9ff;
        box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 24px rgba(35, 154, 255, .38);
        outline: none;
      }

      .news-section {
        position: relative;
        background: var(--panel);
        padding: 42px 20px 80px;
        border-bottom: 1px solid rgba(255,255,255,.05);
      }

      .news-shell,
      .shops-shell { width: min(1120px, 100%); margin: 0 auto; }

      .shops-shell { width: min(1320px, 100%); }

      .section-heading {
        margin: 0 0 22px;
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-style: italic;
        font-weight: 950;
        letter-spacing: -.045em;
        text-align: center;
        text-transform: uppercase;
      }

      .section-heading span {
        background: linear-gradient(90deg, #fff 15%, #aab8ff 58%, #65eaff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .news-grid {
        display: grid;
        grid-template-columns: minmax(0, 660px);
        justify-content: center;
        gap: 22px;
      }

      .news-card {
        display: block;
        position: relative;
        overflow: hidden;
        min-width: 0;
        border: 1px solid var(--line);
        background: var(--card);
        color: inherit;
        text-decoration: none;
        box-shadow: 0 18px 42px rgba(0,0,0,.24);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
      }

      .news-card:hover,
      .news-card:focus-visible {
        transform: translateY(-4px);
        border-color: rgba(80, 198, 255, .7);
        box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 22px rgba(38, 98, 255, .13);
        outline: none;
      }

      .art {
        position: relative;
        aspect-ratio: 16 / 8.65;
        overflow: hidden;
        background:
          linear-gradient(135deg, rgba(255,255,255,.04) 25%, transparent 25%) 0 0 / 28px 28px,
          linear-gradient(315deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0 / 28px 28px,
          #101012;
      }

      .art::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(circle at 50% 50%, rgba(62, 81, 255, .23), transparent 48%);
      }

      .art-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }

      .news-card:nth-child(2) .art::before {
        background: linear-gradient(180deg, transparent 68%, rgba(0,0,0,.22));
      }

      .placeholder-mark {
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        gap: 10px;
        text-align: center;
        color: rgba(255,255,255,.72);
      }

      .placeholder-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto;
        border: 2px solid currentColor;
        transform: rotate(45deg);
      }

      .placeholder-mark small {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .15em;
        text-transform: uppercase;
      }

      .card-caption {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 18px;
        border-top: 1px solid var(--line);
        background: rgba(0,0,0,.62);
        font-size: clamp(.92rem, 2vw, 1.08rem);
        font-weight: 850;
        letter-spacing: -.01em;
        text-align: center;
      }

      .shops-section {
        position: relative;
        padding: 54px 20px 82px;
        background:
          radial-gradient(circle at 50% 0, rgba(36, 71, 207, .13), transparent 40%),
          #101011;
      }

      .shop-links {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 22px;
      }

      .shop-logo-card {
        position: relative;
        width: min(560px, 48%);
        min-height: 240px;
        overflow: hidden;
        display: grid;
        place-items: center;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background:
          radial-gradient(circle at 50% 50%, rgba(45, 76, 255, .15), transparent 58%),
          #09090b;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 18px 42px rgba(0,0,0,.24);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
      }

      .shop-logo-card:hover,
      .shop-logo-card:focus-visible {
        transform: translateY(-4px);
        border-color: rgba(80,198,255,.7);
        box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 24px rgba(38,98,255,.18);
        outline: none;
      }

      .shop-logo-image {
        display: block;
        width: min(96%, 500px);
        max-height: 180px;
        object-fit: contain;
        filter: drop-shadow(0 9px 18px rgba(0,0,0,.48));
      }

      @media (max-width: 680px) {
        .news-section { padding: 36px 16px 54px; }
        .news-grid { grid-template-columns: 1fr; gap: 18px; }
        .shops-section { padding: 42px 16px 58px; }
        .shop-links { flex-direction: column; gap: 16px; }
        .shop-logo-card { width: 100%; min-height: 190px; }
        .section-heading { margin-bottom: 18px; }
        .art { aspect-ratio: 16 / 9; }
      }

      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .news-card { transition: none; }
      }