*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --ink: #050508;
      --surface: #0a0a10;
      --panel: #0d0d16;
      --rule: rgba(255, 255, 255, 0.06);
      --blue: #2563ff;
      --blue-hot: #4d8aff;
      --blue-neon: #00c2ff;
      --red-hot: #ff2d55;
      --cream: #e8e6e1;
      --dim: #5a5a6e;
      --font-display: 'Dela Gothic One', sans-serif;
      --font-heading: 'Syne', sans-serif;
      --font-body: 'Instrument Sans', sans-serif;
      --font-mono: 'Space Mono', monospace;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: var(--blue) var(--ink);
      overflow-x: hidden;
    }

    body {
      background: var(--ink);
      background-image:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(37, 99, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 20%, rgba(0, 194, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 100%, rgba(37, 99, 255, 0.06) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0H0v60' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='0.5'/%3E%3C/svg%3E");
      background-size: 100% 100%, 100% 100%, 100% 100%, 60px 60px;
      background-attachment: fixed;
      color: var(--cream);
      font-family: var(--font-body);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      cursor: none;
      -webkit-user-select: none;
      user-select: none;
    }

    a, button { cursor: none; }

    ::selection {
      background: var(--blue);
      color: white;
    }

    /* ═══════ GRAIN + VIGNETTE ═══════ */
    .grain {
      position: fixed;
      inset: 0;
      z-index: 10000;
      pointer-events: none;
      opacity: 0.035;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 256px;
      contain: strict;
    }

    .vignette {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(5, 5, 8, 0.5) 100%);
      contain: strict;
    }

    /* ═══════ AMBIENT GLOW ORBS ═══════ */
    .ambient-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(100px);
      z-index: 0;
      will-change: transform;
    }
    .ambient-orb--1 {
      width: 600px; height: 600px;
      background: rgba(37, 99, 255, 0.07);
      top: 60vh; left: -10%;
      animation: orb-drift 20s ease-in-out infinite alternate;
    }
    .ambient-orb--2 {
      width: 500px; height: 500px;
      background: rgba(0, 194, 255, 0.05);
      top: 140vh; right: -8%;
      animation: orb-drift 25s ease-in-out infinite alternate-reverse;
    }
    .ambient-orb--3 {
      width: 700px; height: 700px;
      background: rgba(37, 99, 255, 0.05);
      top: 260vh; left: 30%;
      animation: orb-drift 30s ease-in-out infinite alternate;
    }
    .ambient-orb--4 {
      width: 400px; height: 400px;
      background: rgba(255, 45, 85, 0.04);
      top: 180vh; right: 20%;
      animation: orb-drift 22s ease-in-out infinite alternate-reverse;
    }
    @keyframes orb-drift {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(30px, -40px) scale(1.1); }
      100% { transform: translate(-20px, 30px) scale(0.95); }
    }

    /* ═══════ CURSOR GLOW ═══════ */
    .cursor-glow {
      position: fixed;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37, 99, 255, 0.07) 0%, transparent 70%);
      pointer-events: none;
      z-index: 1;
      transform: translate(-50%, -50%);
      transition: transform 0.08s linear;
      will-change: transform;
    }

    /* ═══════ CS CROSSHAIR CURSOR ═══════ */
    .crosshair {
      position: fixed;
      z-index: 99999;
      pointer-events: none;
      transform: translate(-50%, -50%);
      mix-blend-mode: difference;
      will-change: transform;
    }

    .crosshair-line {
      position: absolute;
      background: var(--cream);
    }

    /* Top */
    .crosshair-line:nth-child(1) {
      width: 2px;
      height: 12px;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
    }

    /* Bottom */
    .crosshair-line:nth-child(2) {
      width: 2px;
      height: 12px;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
    }

    /* Left */
    .crosshair-line:nth-child(3) {
      width: 12px;
      height: 2px;
      left: -16px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* Right */
    .crosshair-line:nth-child(4) {
      width: 12px;
      height: 2px;
      right: -16px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* Center dot */
    .crosshair-dot {
      position: absolute;
      width: 2px;
      height: 2px;
      background: var(--blue);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      box-shadow: 0 0 6px var(--blue), 0 0 12px rgba(37, 99, 255, 0.4);
    }

    /* Hover state — crosshair expands + turns blue */
    .crosshair.is-hover .crosshair-line {
      background: var(--blue);
      box-shadow: 0 0 8px rgba(37, 99, 255, 0.5);
    }

    .crosshair.is-hover .crosshair-line:nth-child(1) {
      height: 16px;
      top: -22px;
    }
    .crosshair.is-hover .crosshair-line:nth-child(2) {
      height: 16px;
      bottom: -22px;
    }
    .crosshair.is-hover .crosshair-line:nth-child(3) {
      width: 16px;
      left: -22px;
    }
    .crosshair.is-hover .crosshair-line:nth-child(4) {
      width: 16px;
      right: -22px;
    }

    .crosshair.is-hover .crosshair-dot {
      width: 4px;
      height: 4px;
      box-shadow: 0 0 10px var(--blue), 0 0 20px rgba(37, 99, 255, 0.6);
    }

    .crosshair-line, .crosshair-dot {
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Click flash — mimics firing */
    .crosshair.is-click .crosshair-line:nth-child(1) { top: -20px; }
    .crosshair.is-click .crosshair-line:nth-child(2) { bottom: -20px; }
    .crosshair.is-click .crosshair-line:nth-child(3) { left: -20px; }
    .crosshair.is-click .crosshair-line:nth-child(4) { right: -20px; }
    .crosshair.is-click .crosshair-dot {
      width: 6px;
      height: 6px;
      box-shadow: 0 0 15px var(--blue-neon), 0 0 30px rgba(0, 194, 255, 0.6);
      background: var(--blue-neon);
    }


    /* ═══════ NAVIGATION ═══════ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 3rem;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
    }

    .nav-logo {
      height: 40px;
      filter: brightness(10);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-brand:hover .nav-logo { transform: rotate(-8deg) scale(1.15); }

    .nav-wordmark {
      font-family: var(--font-display);
      font-size: clamp(0.9rem, 1.6vw, 1.2rem);
      letter-spacing: 0.12em;
      color: white;
      line-height: 1;
      white-space: nowrap;
    }

    .nav-wordmark span {
      font-family: var(--font-heading);
      font-weight: 300;
      letter-spacing: 0.18em;
      opacity: 0.55;
      font-size: 0.85em;
    }

    .nav-links {
      display: flex;
      gap: 0.3rem;
      list-style: none;
    }

    .nav-links a {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--cream);
      text-decoration: none;
      text-transform: uppercase;
      padding: 0.4rem 0.9rem;
      border: 1px solid transparent;
      transition: all 0.3s ease;
    }

    .nav-links a:hover {
      border-color: var(--cream);
    }

    .nav-links .nav-join {
      background: var(--cream);
      color: var(--ink);
      border-color: var(--cream);
    }

    .nav-links .nav-join:hover {
      background: var(--blue);
      border-color: var(--blue);
      color: white;
    }

    /* ═══════ HERO — SPLIT CHAOS ═══════ */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 700px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }

    /* Animated radial backdrop */
    .hero-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 50% at 70% 50%, rgba(37, 99, 255, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 20% 80%, rgba(0, 194, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(37, 99, 255, 0.08) 0%, transparent 50%);
      animation: backdropShift 10s ease-in-out infinite alternate;
    }

    @keyframes backdropShift {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0.7; transform: scale(1.1); }
    }

    /* Smoke / haze layers */
    .hero-smoke {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .hero-smoke-layer {
      position: absolute;
      width: 150%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(37, 99, 255, 0.04) 0%, transparent 60%);
      filter: blur(60px);
      will-change: transform;
    }

    .hero-smoke-layer:nth-child(1) {
      top: -20%;
      left: -25%;
      animation: smokeDrift1 15s ease-in-out infinite;
    }

    .hero-smoke-layer:nth-child(2) {
      bottom: -30%;
      right: -25%;
      animation: smokeDrift2 20s ease-in-out infinite;
      background: radial-gradient(ellipse at center, rgba(0, 194, 255, 0.03) 0%, transparent 60%);
    }

    .hero-smoke-layer:nth-child(3) {
      top: 30%;
      left: 10%;
      width: 80%;
      height: 60%;
      animation: smokeDrift3 12s ease-in-out infinite;
      background: radial-gradient(ellipse at center, rgba(37, 99, 255, 0.05) 0%, transparent 50%);
    }

    @keyframes smokeDrift1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(5%, 8%) scale(1.15); }
    }

    @keyframes smokeDrift2 {
      0%, 100% { transform: translate(0, 0) scale(1.1); }
      50% { transform: translate(-8%, -5%) scale(1); }
    }

    @keyframes smokeDrift3 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
      50% { transform: translate(3%, -5%) scale(1.2); opacity: 1; }
    }

    /* Perspective grid floor */
    .hero-grid {
      position: absolute;
      bottom: 0;
      left: -10%;
      right: -10%;
      height: 40%;
      background:
        linear-gradient(90deg, rgba(37, 99, 255, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(37, 99, 255, 0.06) 1px, transparent 1px);
      background-size: 80px 80px;
      transform: perspective(400px) rotateX(60deg);
      transform-origin: bottom center;
      mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 70%);
      animation: gridScroll 12s linear infinite;
      z-index: 1;
    }

    @keyframes gridScroll {
      0% { background-position: 0 0; }
      100% { background-position: 0 80px; }
    }

    /* HUD corner brackets */
    .hud-element {
      position: absolute;
      z-index: 6;
      pointer-events: none;
    }

    .hud-bracket {
      width: 80px;
      height: 80px;
      border: 1px solid rgba(37, 99, 255, 0.15);
    }

    .hud-bracket.top-right {
      top: 6rem;
      right: 3rem;
      border-left: none;
      border-bottom: none;
      animation: fadeIn 0.6s 1.4s ease forwards;
      opacity: 0;
    }

    .hud-bracket.bottom-left {
      bottom: 3rem;
      left: 3rem;
      border-right: none;
      border-top: none;
      animation: fadeIn 0.6s 1.6s ease forwards;
      opacity: 0;
    }

    /* HUD data readout */
    .hud-readout {
      position: absolute;
      top: 6.5rem;
      right: 4rem;
      text-align: right;
      z-index: 6;
      animation: fadeIn 0.6s 1.8s ease forwards;
      opacity: 0;
    }

    .hud-readout span {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.15em;
      color: rgba(37, 99, 255, 0.35);
      line-height: 1.8;
    }

    /* Vertical side text */
    .hero-side-text {
      position: absolute;
      right: 3rem;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      transform-origin: center center;
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.5em;
      color: rgba(255, 255, 255, 0.06);
      text-transform: uppercase;
      white-space: nowrap;
      z-index: 6;
    }

    /* Animated scan line */
    .hero-scanline {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(37, 99, 255, 0.15), transparent);
      z-index: 2;
      animation: scanDown 8s linear infinite;
      pointer-events: none;
    }

    @keyframes scanDown {
      0% { top: -1px; opacity: 0; }
      5% { opacity: 1; }
      95% { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 4rem 3rem 5rem;
      position: relative;
      z-index: 5;
    }

    .hero-est {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.4em;
      color: var(--dim);
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: fadeIn 0.6s 0.3s ease forwards;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .hero-est::before {
      content: '';
      width: 30px;
      height: 1px;
      background: var(--blue);
      animation: lineGrow 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes lineGrow {
      from { width: 0; }
      to { width: 30px; }
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(4rem, 8vw, 8rem);
      line-height: 0.85;
      letter-spacing: -0.03em;
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: titleReveal 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      position: relative;
    }

    .hero-title .outline-text {
      -webkit-text-stroke: 1.5px var(--cream);
      color: transparent;
      position: relative;
    }

    /* Glitch flicker on the outline text */
    .hero-title .outline-text::after {
      content: 'PLAY';
      position: absolute;
      left: 2px;
      top: 0;
      -webkit-text-stroke: 1.5px var(--blue);
      color: transparent;
      opacity: 0;
      animation: textGlitch 4s ease-in-out infinite;
    }

    @keyframes textGlitch {
      0%, 90%, 100% { opacity: 0; transform: translate(0, 0); }
      92% { opacity: 0.6; transform: translate(-3px, 1px); }
      94% { opacity: 0; transform: translate(3px, -1px); }
      96% { opacity: 0.4; transform: translate(-1px, 2px); }
      98% { opacity: 0; }
    }

    .hero-title .blue-text {
      color: var(--blue);
      position: relative;
      display: inline-block;
      text-shadow: 0 0 40px rgba(37, 99, 255, 0.3), 0 0 80px rgba(37, 99, 255, 0.1);
    }

    .hero-title .blue-text::after {
      content: '';
      position: absolute;
      bottom: 0.1em;
      left: 0;
      width: 100%;
      height: 0.15em;
      background: var(--blue);
      opacity: 0.3;
      transform: skewX(-12deg);
    }

    @keyframes titleReveal {
      from { opacity: 0; transform: translateY(60px) skewY(3deg); }
      to { opacity: 1; transform: translateY(0) skewY(0); }
    }

    @keyframes fadeIn {
      to { opacity: 1; }
    }

    .hero-desc {
      font-family: var(--font-body);
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--dim);
      max-width: 380px;
      line-height: 1.7;
      margin-bottom: 2.5rem;
      opacity: 0;
      animation: fadeIn 0.6s 0.8s ease forwards;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      opacity: 0;
      animation: fadeIn 0.6s 1s ease forwards;
    }

    .btn-glitch {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1rem 2rem;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      transition: all 0.3s ease;
      overflow: hidden;
    }

    .btn-fill {
      background: var(--blue);
      color: white;
    }

    .btn-fill::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--blue-hot);
      transform: translateX(-101%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-fill:hover::before { transform: translateX(0); }
    .btn-fill span, .btn-fill svg { position: relative; z-index: 1; }
    .btn-fill:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(37, 99, 255, 0.3); }

    .btn-wire {
      background: transparent;
      color: var(--cream);
      border: 1px solid var(--rule);
    }

    .btn-wire:hover {
      border-color: var(--cream);
      transform: translateY(-2px);
    }

    /* Hero right — logo */
    .hero-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .hero-logo-wrap {
      position: relative;
      width: 80%;
      max-width: 500px;
      animation: logoFloat 6s ease-in-out infinite;
    }

    .hero-logo-wrap::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 140%;
      height: 140%;
      background: radial-gradient(circle, rgba(241, 209, 90, 0.12) 0%, transparent 60%);
      border-radius: 50%;
      z-index: -1;
      pointer-events: none;
    }

    @keyframes logoFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      33% { transform: translateY(-15px) rotate(1deg); }
      66% { transform: translateY(10px) rotate(-0.5deg); }
    }

    .hero-logo-wrap img,
    .hero-logo-wrap canvas {
      width: 100%;
      filter: drop-shadow(0 0 60px rgba(241, 209, 90, 0.2)) drop-shadow(0 0 120px rgba(241, 209, 90, 0.05));
      animation: logoEnter 1.2s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    #logoCanvas {
      display: block;
    }

    .hero-logo-text {
      text-align: center;
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      letter-spacing: 0.2em;
      color: white;
      margin-top: 1rem;
      position: relative;
      z-index: 5;
    }

    .hero-logo-text span {
      font-family: var(--font-heading);
      font-weight: 300;
      letter-spacing: 0.25em;
      opacity: 0.5;
      font-size: 0.85em;
    }

    /* Bullet tracer canvas */
    #tracerCanvas {
      position: fixed;
      inset: 0;
      z-index: 9990;
      pointer-events: none;
      width: 100%;
      height: 100%;
    }

    /* Impact sparks */
    .impact-spark {
      position: fixed;
      width: 2px;
      height: 2px;
      background: var(--blue-neon);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9990;
      box-shadow: 0 0 4px var(--blue-neon);
      will-change: transform, opacity;
    }

    /* Debris chunks */
    .debris {
      position: fixed;
      pointer-events: none;
      z-index: 9990;
      will-change: transform, opacity;
    }

    /* Logo shake animation — applied directly to canvas */
    @keyframes logoShake {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      10% { transform: translate(-8px, 4px) rotate(-2deg); }
      20% { transform: translate(6px, -6px) rotate(1.5deg); }
      30% { transform: translate(-10px, 2px) rotate(-2.5deg); }
      40% { transform: translate(8px, -4px) rotate(2deg); }
      50% { transform: translate(-5px, 6px) rotate(-1deg); }
      60% { transform: translate(4px, -3px) rotate(1deg); }
      70% { transform: translate(-3px, 2px) rotate(-0.5deg); }
      80% { transform: translate(2px, -1px) rotate(0.3deg); }
      90% { transform: translate(-1px, 1px) rotate(-0.1deg); }
    }

    #logoCanvas.entered {
      animation: none;
    }

    #logoCanvas.shaking {
      animation: logoShake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards !important;
    }

    @keyframes logoEnter {
      from { opacity: 0; transform: scale(0.6) rotate(8deg); filter: blur(20px); }
      to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
    }

    .orbit-ring {
      position: absolute;
      width: 130%;
      height: 130%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(37, 99, 255, 0.1);
      border-radius: 50%;
      animation: orbitSpin 20s linear infinite;
    }

    .orbit-ring:nth-child(2) {
      width: 160%;
      height: 160%;
      border-color: rgba(37, 99, 255, 0.05);
      animation-duration: 30s;
      animation-direction: reverse;
    }

    .orbit-ring::before {
      content: '';
      position: absolute;
      top: -4px;
      left: 50%;
      width: 8px;
      height: 8px;
      background: var(--blue);
      border-radius: 50%;
      box-shadow: 0 0 20px var(--blue), 0 0 40px var(--blue);
    }

    .orbit-ring:nth-child(2)::before {
      width: 5px;
      height: 5px;
      top: auto;
      bottom: -3px;
      background: var(--blue-neon);
      box-shadow: 0 0 20px var(--blue-neon);
    }

    @keyframes orbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

    .hero-particles {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      width: 100%;
      height: 100%;
    }

    .glitch-bar {
      position: absolute;
      height: 2px;
      background: var(--blue-neon);
      opacity: 0;
      z-index: 20;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .hero::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 48%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--rule), transparent);
      transform: skewX(-5deg);
    }

    .corner-mark {
      position: absolute;
      width: 40px;
      height: 40px;
      z-index: 10;
    }

    .corner-mark::before, .corner-mark::after {
      content: '';
      position: absolute;
      background: var(--blue);
    }

    .corner-mark.tl { top: 5rem; left: 3rem; }
    .corner-mark.tl::before { width: 20px; height: 1px; top: 0; left: 0; }
    .corner-mark.tl::after { width: 1px; height: 20px; top: 0; left: 0; }

    .corner-mark.br { bottom: 3rem; right: 3rem; }
    .corner-mark.br::before { width: 20px; height: 1px; bottom: 0; right: 0; }
    .corner-mark.br::after { width: 1px; height: 20px; bottom: 0; right: 0; }

    /* ═══════ MARQUEE STRIP ═══════ */
    .marquee-strip {
      background: var(--blue);
      padding: 0.9rem 0;
      overflow: hidden;
      position: relative;
      transform: skewY(-1deg);
      margin: -1rem 0;
    }

    .marquee-track {
      display: flex;
      gap: 3rem;
      animation: marquee 25s linear infinite;
      width: max-content;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .marquee-item {
      font-family: var(--font-display);
      font-size: 0.85rem;
      letter-spacing: 0.15em;
      color: white;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 3rem;
    }

    .marquee-item::after {
      content: '◆';
      font-size: 0.5rem;
      opacity: 0.5;
    }

    /* ═══════ ABOUT — EDITORIAL LAYOUT ═══════ */
    .about {
      padding: 10rem 3rem;
      position: relative;
    }

    .about-layout {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 6rem;
      align-items: start;
    }

    .about-label-col {
      position: sticky;
      top: 8rem;
    }

    .section-num {
      font-family: var(--font-display);
      font-size: 8rem;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px var(--rule);
      display: block;
      margin-bottom: 1rem;
    }

    .section-tag {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.4em;
      color: var(--blue);
      text-transform: uppercase;
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      display: inline-block;
    }

    .about-content h2 {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 4.5vw, 4rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 3rem;
    }

    .about-content h2 em {
      font-style: italic;
      color: var(--blue);
    }

    .about-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 3rem;
    }

    .about-columns p {
      font-size: 1rem;
      font-weight: 500;
      color: var(--dim);
      line-height: 1.8;
    }

    .about-columns p:first-child {
      font-size: 1.15rem;
      color: var(--cream);
      grid-column: 1 / -1;
    }

    .about-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 4rem;
      padding-top: 4rem;
      border-top: 1px solid var(--rule);
    }

    .about-stat-val {
      font-family: var(--font-display);
      font-size: 3rem;
      color: var(--cream);
      line-height: 1;
    }

    .about-stat-val span { color: var(--blue); }

    .about-stat-label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.15em;
      color: var(--dim);
      text-transform: uppercase;
      margin-top: 0.5rem;
    }

    /* ═══════ ABOUT — FEATURED CLIP ═══════ */
    .about-clip {
      margin-top: 4rem;
      padding-top: 4rem;
      border-top: 1px solid var(--rule);
    }

    .about-clip-label {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .about-clip-tag {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.3em;
      color: var(--blue);
      text-transform: uppercase;
    }

    .about-clip-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 1px solid var(--rule);
      overflow: hidden;
    }

    .about-clip-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* ═══════ ROSTER — FULL WIDTH PLAYER CARDS ═══════ */
    .roster {
      padding: 8rem 3rem 0;
      max-width: 1400px;
      margin: 0 auto;
    }

    .roster-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 4rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--rule);
    }

    .roster-header h2 {
      font-family: var(--font-display);
      font-size: clamp(3rem, 6vw, 6rem);
      line-height: 0.85;
      letter-spacing: -0.02em;
    }

    .roster-header h2 .sub-line {
      display: block;
      font-family: var(--font-heading);
      font-size: 0.35em;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--dim);
      margin-top: 0.5rem;
    }

    .roster-header-count {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      color: var(--dim);
      text-align: right;
      padding-bottom: 0.5rem;
    }

    .roster-header-count strong {
      color: var(--blue);
      font-size: 1.5rem;
      display: block;
      font-family: var(--font-display);
    }

    /* ═══════ ROSTER GRID — editorial magazine layout ═══════ */
    .roster-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px;
      width: 100%;
    }

    .roster-grid-backups {
      grid-template-columns: repeat(2, 1fr);
      max-width: 560px;
    }

    .roster-backup-header {
      margin-top: 4rem;
      padding-bottom: 1.5rem;
      margin-bottom: 2rem;
      border-bottom: 1px solid var(--rule);
    }

    .roster-backup-header h3 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      line-height: 0.9;
      letter-spacing: -0.02em;
    }

    .roster-backup-header h3 .sub-line {
      display: block;
      font-family: var(--font-heading);
      font-size: 0.4em;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--dim);
      margin-top: 0.4rem;
    }

    .player-card {
      position: relative;
      aspect-ratio: 3 / 4.5;
      background: var(--panel);
      overflow: hidden;
      cursor: none;
    }

    /* Photo area fills the entire card */
    .player-photo {
      position: absolute;
      inset: 0;
      background: var(--panel);
      overflow: hidden;
    }

    .player-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
      filter: grayscale(30%) brightness(0.7);
    }

    .player-card:hover .player-photo img {
      transform: scale(1.05);
      filter: grayscale(0%) brightness(0.85);
    }

    .player-photo-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .player-photo-placeholder svg {
      width: 48px;
      height: 48px;
      stroke: rgba(255,255,255,0.06);
      stroke-width: 1;
      fill: none;
    }

    .player-photo-placeholder span {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.06);
      text-transform: uppercase;
    }

    /* Dark gradient at bottom for name legibility */
    .player-card::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: linear-gradient(to top, rgba(5, 5, 8, 0.95) 0%, rgba(5, 5, 8, 0.6) 40%, transparent 100%);
      z-index: 2;
      pointer-events: none;
    }

    /* Blue accent line at top of card */
    .player-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--blue);
      z-index: 4;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .player-card:hover::after {
      transform: scaleX(1);
    }

    /* Player number — giant ghost watermark */
    .player-num {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-size: clamp(8rem, 15vw, 18rem);
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.03);
      line-height: 1;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

    .player-card:hover .player-num {
      opacity: 0;
    }

    /* Player info overlay — pinned to bottom */
    .player-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .player-alias {
      font-family: var(--font-display);
      font-size: clamp(1rem, 1.8vw, 2.8rem);
      line-height: 0.9;
      letter-spacing: -0.02em;
      color: var(--cream);
      transition: color 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      transform: translateY(0);
      max-width: 100%;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .player-card:hover .player-alias {
      color: var(--blue-hot);
      transform: translateY(-4px);
    }

    /* Thin decorative line between number and name */
    .player-info::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--blue);
      margin-bottom: 0.75rem;
      transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .player-card:hover .player-info::before {
      width: 48px;
    }

    /* Small player number label above the name */
    .player-info-num {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      letter-spacing: 0.3em;
      color: var(--dim);
      margin-bottom: 0.5rem;
    }

    /* FACEIT button */
    .player-faceit {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.75rem;
      padding: 0.3rem 0.7rem;
      background: rgba(255, 85, 0, 0.1);
      border: 1px solid rgba(255, 85, 0, 0.25);
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: none;
    }

    .player-faceit:hover {
      background: rgba(255, 85, 0, 0.2);
      border-color: #ff5500;
    }

    .player-faceit svg {
      width: 14px;
      height: 14px;
      fill: #ff5500;
      flex-shrink: 0;
    }

    .player-faceit span {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: #ff5500;
      text-transform: uppercase;
    }

    /* ═══════ FOUNDER — compact inline card ═══════ */
    .founder {
      padding: 6rem 3rem 6rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    .founder-card {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 2.5rem;
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--rule);
      padding: 2rem;
      position: relative;
      overflow: hidden;
    }

    .founder-card::before {
      content: 'FOUNDER';
      position: absolute;
      top: 50%;
      right: 2rem;
      transform: translateY(-50%);
      font-family: var(--font-display);
      font-size: 5rem;
      color: transparent;
      -webkit-text-stroke: 1px rgba(37, 99, 255, 0.04);
      line-height: 1;
      z-index: 0;
      pointer-events: none;
    }

    .founder-photo {
      aspect-ratio: 1;
      background: var(--surface);
      position: relative;
      overflow: hidden;
      border-radius: 0;
    }

    .founder-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .founder-photo .player-photo-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
    }

    .founder-photo .player-photo-placeholder svg {
      width: 40px;
      height: 40px;
      stroke: var(--rule);
      stroke-width: 1;
      fill: none;
    }

    .founder-photo .player-photo-placeholder span {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.08);
      text-transform: uppercase;
    }

    .founder-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .founder-label {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.4em;
      color: var(--blue);
      text-transform: uppercase;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .founder-label::before {
      content: '';
      width: 20px;
      height: 1px;
      background: var(--blue);
    }

    .founder-name {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      line-height: 0.9;
      margin-bottom: 0.5rem;
    }

    .founder-realname {
      font-family: var(--font-heading);
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--dim);
      margin-bottom: 1rem;
    }

    .founder-bio {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--dim);
      line-height: 1.7;
      margin-bottom: 1rem;
      max-width: 450px;
    }

    .founder-bio + .founder-bio {
      margin-top: -0.25rem;
    }

    .founder-socials {
      display: flex;
      gap: 1.5rem;
      margin-top: 0.5rem;
    }

    .founder-socials a {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      letter-spacing: 0.1em;
      color: var(--dim);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .founder-socials a:hover { color: var(--blue); }

    /* ═══════ CTA — FULL BLEED ═══════ */
    .cta {
      padding: 12rem 3rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta-bg-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-size: clamp(10rem, 20vw, 22rem);
      color: transparent;
      -webkit-text-stroke: 1px rgba(37, 99, 255, 0.06);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }

    .cta-content {
      position: relative;
      z-index: 2;
    }

    .cta-content h2 {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 5vw, 5rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      margin-bottom: 1.5rem;
    }

    .cta-content h2 em {
      font-style: italic;
      background: linear-gradient(135deg, var(--blue), var(--blue-neon));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta-content p {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.3em;
      color: var(--dim);
      text-transform: uppercase;
      margin-bottom: 3rem;
    }

    .cta-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
    }

    /* ═══════ FOOTER ═══════ */
    footer {
      padding: 3rem;
      border-top: 1px solid var(--rule);
    }

    .footer-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 4rem;
      align-items: start;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .footer-brand img { height: 35px; opacity: 0.6; }

    .footer-brand-info {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      color: var(--dim);
      line-height: 1.8;
    }

    .footer-col h4 {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      letter-spacing: 0.3em;
      color: var(--dim);
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .footer-col a {
      display: block;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--cream);
      text-decoration: none;
      padding: 0.3rem 0;
      transition: color 0.3s ease;
    }

    .footer-col a:hover { color: var(--blue); }

    .footer-bottom {
      max-width: 1400px;
      margin: 3rem auto 0;
      padding-top: 2rem;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 0.55rem;
      letter-spacing: 0.1em;
      color: rgba(90, 90, 110, 0.5);
    }

    .footer-credit {
      max-width: 1400px;
      margin: 1.5rem auto 0;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.1em;
      color: rgba(180, 180, 200, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
    }

    .footer-credit a {
      color: rgba(180, 180, 200, 0.7);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      transition: color 0.3s;
    }

    .footer-credit a:hover { color: #5865F2; }

    .footer-credit svg {
      width: 12px;
      height: 12px;
      fill: currentColor;
    }

    /* ═══════ REVEALS ═══════ */
    .reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal.vis {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-d1 { transition-delay: 0.1s; }
    .reveal-d2 { transition-delay: 0.2s; }
    .reveal-d3 { transition-delay: 0.3s; }
    .reveal-d4 { transition-delay: 0.4s; }
    .reveal-d5 { transition-delay: 0.5s; }

    /* ═══════ RESPONSIVE ═══════ */
    @media (max-width: 1024px) {
      .hero { grid-template-columns: 1fr; }
      .hero-right {
        position: absolute;
        inset: 0;
        opacity: 0.15;
        z-index: 1;
      }
      .hero { min-height: 0; height: auto; }
      .hero-left { z-index: 5; padding: 7rem 3rem 4rem; justify-content: center; }
      .hud-readout, .hero-side-text, .hud-bracket.top-right { display: none; }
      .hero::after { display: none; }
      .about-layout { grid-template-columns: 1fr; gap: 3rem; }
      .about-label-col { position: static; display: flex; align-items: center; gap: 2rem; }
      .section-tag { writing-mode: horizontal-tb; transform: none; }
      .roster { padding: 8rem 1.5rem 0; }
      .roster-grid { grid-template-columns: repeat(3, 1fr); }
      .player-card { aspect-ratio: 3 / 4; }
      .player-num { font-size: clamp(6rem, 12vw, 10rem); }
      .founder-card { grid-template-columns: 160px 1fr; gap: 1.5rem; }
      .founder-card::before { font-size: 3rem; }
    }

    @media (max-width: 700px) {
      nav { padding: 1rem 1.5rem; }
      .nav-logo { height: 30px; }
      .nav-brand { gap: 0.5rem; }
      .nav-wordmark { font-size: 0.75rem; }
      .nav-wordmark span { font-size: 0.75em; }
      .nav-links a:not(.nav-join) { display: none; }
      section, .about, .cta, .founder { padding-left: 1.5rem; padding-right: 1.5rem; }
      .roster { padding-left: 1rem; padding-right: 1rem; }
      .about-stats { grid-template-columns: 1fr; }
      .about-columns { grid-template-columns: 1fr; }
      .about-columns p:first-child { grid-column: 1; }
      .roster-grid { grid-template-columns: repeat(2, 1fr); }
      .roster-grid-backups { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
      .player-card { aspect-ratio: 3 / 4; }
      .player-alias { font-size: clamp(1.2rem, 5vw, 2rem); }
      .player-num { font-size: clamp(5rem, 10vw, 8rem); }
      .founder-card { grid-template-columns: 1fr; }
      .founder-photo { aspect-ratio: 16/9; }
      .founder-card::before { display: none; }
      .cta-actions { flex-direction: column; align-items: center; }
      .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
      .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
      .roster-header { flex-wrap: wrap; gap: 1rem; }
    }

    /* ═══════ TOUCH / MOBILE — disable all heavy effects ═══════ */
    @media (hover: none), (pointer: coarse) {
      /* Restore normal cursor */
      body, a, button, .player-card, .player-faceit { cursor: auto; -webkit-user-select: auto; user-select: auto; }

      /* Hide desktop-only interactive elements */
      .crosshair, .cursor-glow, #tracerCanvas { display: none !important; }

      /* Kill all ambient animations — save battery & CPU */
      .ambient-orb { display: none; }
      .hero-smoke { display: none; }
      .hero-scanline { display: none; }
      .hero-backdrop { animation: none; }
      .hero-grid { animation: none; }
      .orbit-ring { animation: none; }
      .hero-logo-wrap { animation: none; }
      .glitch-bar { display: none; }
      .grain { display: none; }

      /* Prevent hero overflow on small screens */
      .hero { min-height: auto; height: auto; }
      .hero-left { padding: 6rem 1.5rem 3rem; }

      /* Prevent horizontal overflow from large elements */
      .hero-side-text { display: none; }
      .hud-readout { display: none; }
      .hud-bracket { display: none; }
      .corner-mark { display: none; }
      .marquee-strip { transform: none; margin: 0; }

      /* background-attachment: fixed causes repaint on every scroll on mobile */
      body { background-attachment: scroll; }

      /* Simpler hero particles canvas — no entrance animation */
      .hero-logo-wrap img,
      .hero-logo-wrap canvas {
        animation: none;
        opacity: 1;
        filter: drop-shadow(0 0 30px rgba(37, 99, 255, 0.2));
      }
    }