/* GLITCH HEADING */
    .cyber-heading {
      position: relative; display: inline-block;
      color: var(--cyber-red-500);
      text-shadow: 0 0 10px var(--cyber-red-500), 0 0 20px color-mix(in srgb, var(--cyber-red-500) 60%, transparent);
      font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .cyber-heading::before, .cyber-heading::after {
      content: attr(data-text); position: absolute; top: 0; left: 0;
      width: 100%; height: 100%; opacity: 80%; will-change: transform, clip-path;
    }
    .cyber-heading::before {
      z-index: -1; color: var(--cyber-magenta-500);
      animation: glitch-1 8s infinite linear alternate-reverse;
    }
    .cyber-heading::after {
      z-index: -1; color: var(--cyber-cyan-300);
      animation: glitch-2 6s infinite linear alternate;
    }
    @keyframes glitch-1 {
      0%,100%{transform:translate(-2px,0);clip-path:inset(0 0 95% 0)}
      10%{transform:translate(2px,0);clip-path:inset(30% 0 40% 0)}
      20%{transform:translate(-1px,0);clip-path:inset(70% 0 10% 0)}
      30%{transform:translate(1px,0);clip-path:inset(10% 0 60% 0)}
      40%{transform:translate(-2px,0);clip-path:inset(80% 0 5% 0)}
      50%{transform:translate(2px,0);clip-path:inset(20% 0 55% 0)}
      60%{transform:translate(-1px,0);clip-path:inset(50% 0 30% 0)}
      70%{transform:translate(1px,0);clip-path:inset(5% 0 85% 0)}
      80%{transform:translate(-2px,0);clip-path:inset(45% 0 35% 0)}
      90%{transform:translate(2px,0);clip-path:inset(85% 0 5% 0)}
    }
    @keyframes glitch-2 {
      0%,100%{transform:translate(2px,0);clip-path:inset(95% 0 0 0)}
      10%{transform:translate(-2px,0);clip-path:inset(40% 0 30% 0)}
      20%{transform:translate(1px,0);clip-path:inset(10% 0 70% 0)}
      30%{transform:translate(-1px,0);clip-path:inset(60% 0 10% 0)}
      40%{transform:translate(2px,0);clip-path:inset(5% 0 80% 0)}
      50%{transform:translate(-2px,0);clip-path:inset(55% 0 20% 0)}
      60%{transform:translate(1px,0);clip-path:inset(30% 0 50% 0)}
      70%{transform:translate(-1px,0);clip-path:inset(85% 0 5% 0)}
      80%{transform:translate(2px,0);clip-path:inset(35% 0 45% 0)}
      90%{transform:translate(-1px,0);clip-path:inset(5% 0 85% 0)}
    }

    /* CARDS */
    .cyber-card {
      --card-accent: var(--cyber-red-500);
      position: relative; padding: var(--space-md);
      border: 1px solid var(--color-border-default);
      background: color-mix(in srgb, var(--color-bg-secondary) 70%, transparent);
      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
      transition: all var(--duration-normal);
    }
    .cyber-card::before, .cyber-card::after {
      content: ""; position: absolute; width: 30px; height: 30px;
      border: 2px solid var(--card-accent); pointer-events: none;
    }
    .cyber-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
    .cyber-card::after { right: -1px; bottom: -1px; border-top: none; border-left: none; }
    .cyber-card--interactive { cursor: pointer; }
    .cyber-card--interactive:hover {
      box-shadow: inset 0 0 30px color-mix(in srgb, var(--card-accent) 10%, transparent), 0 0 30px color-mix(in srgb, var(--card-accent) 30%, transparent);
      transform: translateY(-2px);
    }
    .cyber-card__header {
      display: flex; gap: var(--space-sm); align-items: center;
      /* 窄屏时徽标换行，避免标题+徽标的最小宽度把整张卡片撑出屏幕 */
      flex-wrap: wrap;
      margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
      border-bottom: 1px solid var(--color-border-default);
    }
    .cyber-card__icon {
      display: flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border: 1px solid var(--card-accent);
      font-size: var(--text-lg); color: var(--card-accent);
      background: color-mix(in srgb, var(--card-accent) 15%, transparent);
      flex-shrink: 0;
    }
    .cyber-card__title {
      font-family: var(--font-display); font-size: var(--text-lg);
      letter-spacing: 0.05em; text-transform: uppercase; color: var(--card-accent);
      min-width: 0; overflow-wrap: anywhere;
    }
    .cyber-card__badge {
      margin-left: auto; padding: var(--space-3xs) var(--space-xs);
      font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
      color: var(--cyber-void-500); background: var(--card-accent);
      white-space: nowrap;
    }
    .cyber-card--magenta { --card-accent: var(--cyber-magenta-500); }
    .cyber-card--yellow { --card-accent: var(--cyber-yellow-500); }
    .cyber-card--green { --card-accent: var(--cyber-green-500); }

    /* BUTTONS */
    .cyber-btn {
      --btn-color: var(--cyber-red-500); --btn-bg: transparent; --btn-glow: var(--glow-cyan);
      position: relative; display: inline-flex; gap: var(--space-xs);
      align-items: center; justify-content: center;
      padding: var(--space-xs) var(--space-md);
      border: var(--border-medium) solid var(--btn-color);
      border-radius: var(--radius-cyber); overflow: hidden;
      font-family: var(--font-display); font-size: var(--text-sm);
      font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--btn-color); background: var(--btn-bg);
      transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
      cursor: pointer; isolation: isolate; text-decoration: none;
    }
    .cyber-btn::before {
      content: ""; position: absolute; z-index: -1; background: var(--btn-color);
      transform: translateX(-101%); transition: transform var(--duration-normal) var(--ease-cyber); inset: 0;
    }
    .cyber-btn:hover::before { transform: translateX(0); }
    .cyber-btn:hover, .cyber-btn:focus-visible {
      color: var(--cyber-void-500); box-shadow: var(--btn-glow);
    }
    .cyber-btn::after {
      content: ""; position: absolute; right: -2px; bottom: -2px;
      width: 12px; height: 12px; border: var(--border-medium) solid var(--btn-color);
      border-top: none; border-left: none; background: var(--color-bg-primary);
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }
    /* All buttons use red accent */
    .cyber-btn--magenta, .cyber-btn--yellow, .cyber-btn--green {
      --btn-color: var(--cyber-red-500);
      --btn-glow: var(--glow-cyan);
    }

    /* SECTION TITLES */
    .section-title {
      font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyber-red-500);
      text-shadow: var(--glow-text-cyan);
      margin-bottom: var(--space-lg); padding-bottom: var(--space-sm);
      border-bottom: 2px solid var(--cyber-red-500);
      display: flex; align-items: center; gap: var(--space-sm);
      flex-wrap: wrap; overflow-wrap: anywhere;
    }
    .section-title::before {
      content: "//"; color: var(--cyber-magenta-500); font-size: 0.7em;
    }

    /* HERO */
    .hero {
      min-height: 80vh; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
      position: relative; padding: var(--space-3xl) var(--space-md);
      z-index: 1;
    }
    .hero__name {
      font-family: var(--font-display); font-size: clamp(2.4rem, 6vw + 1rem, 6rem); font-weight: 700;
      letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--cyber-red-500); text-shadow: var(--glow-text-cyan);
      margin-bottom: var(--space-sm);
    }
    .hero__tagline {
      font-family: var(--font-mono); font-size: var(--text-sm);
      color: var(--cyber-magenta-500); letter-spacing: 0.05em; margin-bottom: var(--space-lg);
    }
    .hero__nav { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }