:root {
      --bg: #05060a;
      --accent-red: #ff1236;
      --accent-blue: #16c0ff;
      --text-main: #f5f5f7;
      --text-muted: #a0a4b8;
      --card-bg: #11131b;
      --border-subtle: #262938;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(1200px 700px at 18% 8%, rgba(22,192,255,0.14), rgba(5,6,10,0) 55%),
        radial-gradient(1000px 520px at 82% 18%, rgba(255,18,54,0.10), rgba(5,6,10,0) 56%),
        #05060a;
      color: #f5f5f7;
      line-height: 1.6;
    }
    a { color: var(--accent-red); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
    .nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
    .nav-logo { font-weight:700; letter-spacing:0.18em; text-transform:uppercase; font-size:0.9rem; color:var(--text-main); }
    .nav-links a { margin-left: 14px; font-size:0.85rem; color:var(--text-muted); white-space:nowrap; }
    .nav-links a.active { color: var(--accent-red); font-weight:600; }

    header.hero {
      display:grid;
      grid-template-columns: minmax(0,3fr) minmax(0,2fr);
      gap: 28px;
      align-items:center;
      padding: 14px 0 24px;
    }
    .hero-kicker { font-size:0.8rem; letter-spacing:0.22em; text-transform:uppercase; color: var(--accent-blue); margin-bottom:8px; }
    h1 { font-size: clamp(2.2rem, 4vw, 3.1rem); margin-bottom: 6px; }
    h2 { font-size: 1.6rem; margin-bottom: 8px; }
    h3 { font-size: 1.1rem; margin-bottom: 4px; }
    .hero-sub { font-size: 0.98rem; color: var(--text-muted); margin-bottom: 16px; max-width: 40rem; }

    .hero-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
    .btn-primary, .btn-secondary {
      border-radius: 999px; padding: 9px 20px; font-size: 0.9rem; font-weight: 600;
      cursor: pointer; border: 0; display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-primary {
      background: radial-gradient(circle at 10% 0, #ff5779 0, var(--accent-red) 40%, #8b1024 100%);
      color:#fff;
    }
    .btn-secondary { background: rgba(8,9,18,0.9); border: 1px solid var(--border-subtle); color: var(--text-muted); }

    .hero-media { border-radius: 24px; overflow:hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.06); }
    .hero-media img { width:100%; display:block; }

    section { padding: 30px 0; border-top: 1px solid rgba(255,255,255,0.05); }
    .pill { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-blue); margin-bottom: 6px; }
    .lead { font-size: 0.96rem; color: var(--text-muted); max-width: 48rem; }

    .two-cols { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
    .card {
      background: var(--card-bg);
      border-radius: 18px;
      padding: 16px 16px 18px;
      border: 1px solid rgba(255,255,255,0.06);
      font-size: 0.92rem;
      color: var(--text-muted);
      box-shadow: 0 18px 40px rgba(0,0,0,0.75);
    }
    .card h3 { color: var(--text-main); }
    .card ul { list-style:none; padding:0; margin:10px 0 0; }
    .card ul li { position:relative; padding-left:14px; margin-bottom:6px; }
    .card ul li::before { content:"•"; position:absolute; left:3px; color: var(--accent-red); }

    .note {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(17,19,27,0.55);
      color: var(--text-muted);
      font-size: 0.9rem;
    }
    .note strong { color: var(--text-main); }

    .mini-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 14px;
      font-size: 0.9rem;
      overflow:hidden;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .mini-table th, .mini-table td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      vertical-align: top;
    }
    .mini-table th { text-align:left; color: var(--text-main); background: rgba(17,19,27,0.9); }
    .mini-table td { color: var(--text-muted); background: rgba(17,19,27,0.6); }

    footer {
      padding-top: 28px;
      margin-top: 32px;
      border-top: 1px solid rgba(255,255,255,0.05);
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    footer .footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; }

    @media (max-width: 900px) {
      header.hero { grid-template-columns: minmax(0,1fr); }
      .two-cols { grid-template-columns: minmax(0,1fr); }
    }
  

/* --- Platform card image rendering (prevent stretch) --- */
.platform-card img{width:100% !important;height:220px !important;object-fit:cover !important;object-position:center !important;display:block !important;}
@media (max-width: 900px){.platform-card img{height:200px !important;}}
@media (max-width: 600px){.platform-card img{height:180px !important;}}


/* Platform strip (center card) - show full lineup without cropping */
.platform-card--strip img{
  object-fit: contain !important;
  object-position: center center !important;
  background: #0b0f15;
  padding: 10px;
}

/* Ensure all platform images are centered (no stretch) */
.platform-card img{
  object-position: center center;
}